mirror of
https://github.com/iv-org/invidious.git
synced 2025-01-09 11:00:34 +05:30
Add JS to share widget
Updates link to current video time when requested
This commit is contained in:
parent
6be800a584
commit
a7f1da08fe
@ -95,6 +95,109 @@ if (video_data.params.quality === 'dash') {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Populated by DOMContentLoaded event
|
||||||
|
let shareWidgetDetailsBox
|
||||||
|
let shareToSiteContainer
|
||||||
|
let shareWidgetAddDurationButton
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Modifies share widget links to remove or add the current time to the invidious video URL
|
||||||
|
*
|
||||||
|
* @param {bool} setTime
|
||||||
|
*/
|
||||||
|
function modifySocialWidgetURLs(setTime = false) {
|
||||||
|
for (let shareToSite of shareToSiteContainer ) {
|
||||||
|
let socialLink = shareToSite.getElementsByTagName("a")[0];
|
||||||
|
|
||||||
|
if (!socialLink) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let shareUrl = URL.parse(socialLink.href);
|
||||||
|
let shareUrlParams = shareUrl.searchParams
|
||||||
|
let replaceAttr = socialLink.dataset.replaceAttr;
|
||||||
|
|
||||||
|
let videoUrl = shareUrlParams.get(replaceAttr)
|
||||||
|
if (videoUrl.startsWith("/")) {
|
||||||
|
videoUrl = window.location.origin + videoUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
let urlToReplace
|
||||||
|
|
||||||
|
if (setTime) {
|
||||||
|
urlToReplace = addCurrentTimeToURL(videoUrl)
|
||||||
|
} else {
|
||||||
|
urlToReplace = URL.parse(videoUrl)
|
||||||
|
urlToReplace.searchParams.delete('t');
|
||||||
|
urlToReplace = urlToReplace.toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
shareUrlParams.set(replaceAttr, urlToReplace);
|
||||||
|
socialLink.href = shareUrl.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Edit url for iframe
|
||||||
|
const iframeCodeElement = document.getElementById("share-widget-embed-code")
|
||||||
|
const iframeParsedDom = new DOMParser().parseFromString(iframeCodeElement.textContent, "text/html")
|
||||||
|
|
||||||
|
const iframeElement = iframeParsedDom.getElementsByTagName("iframe")[0]
|
||||||
|
|
||||||
|
let iframeSrc = iframeElement.src
|
||||||
|
|
||||||
|
if (iframeSrc.startsWith("/")) {
|
||||||
|
iframeSrc = window.location.origin + iframeSrc;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setTime) {
|
||||||
|
iframeSrc = addCurrentTimeToURL(iframeSrc)
|
||||||
|
} else {
|
||||||
|
iframeSrc = URL.parse(iframeSrc)
|
||||||
|
iframeSrc.searchParams.delete('t');
|
||||||
|
iframeSrc = iframeSrc.toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
iframeElement.src = iframeSrc
|
||||||
|
iframeCodeElement.textContent = iframeElement.outerHTML
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the time of the Start at ${time} text in the share widget
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function updateStartAtDurationStr() {
|
||||||
|
const label = shareWidgetAddDurationButton.labels[0];
|
||||||
|
const startAtDurationText = label.getElementsByTagName("span")[0];
|
||||||
|
if (label) {
|
||||||
|
const duration = Math.floor(player.currentTime());
|
||||||
|
if (duration == 0) {
|
||||||
|
startAtDurationText.innerHTML = "0:00"
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const durationStrVals = [];
|
||||||
|
const paddedDurationString = [];
|
||||||
|
|
||||||
|
const days = Math.floor(duration / (60 * 60 * 24));
|
||||||
|
const hours = Math.floor((duration / (60 * 60)) % 24);
|
||||||
|
const minutes = Math.floor((duration / 60) % 60);
|
||||||
|
const seconds = Math.floor(duration % 60);
|
||||||
|
|
||||||
|
if (days !== 0) durationStrVals.push(days);
|
||||||
|
if (hours !== 0) durationStrVals.push(hours);
|
||||||
|
|
||||||
|
durationStrVals.push(minutes);
|
||||||
|
durationStrVals.push(seconds);
|
||||||
|
|
||||||
|
durationStrVals.forEach((val) => {
|
||||||
|
paddedDurationString.push(String(val).padStart(2, "0"))
|
||||||
|
})
|
||||||
|
|
||||||
|
startAtDurationText.innerHTML = paddedDurationString.join(":")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function for add time argument to url
|
* Function for add time argument to url
|
||||||
*
|
*
|
||||||
@ -154,6 +257,11 @@ player.on('timeupdate', function () {
|
|||||||
|
|
||||||
elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain);
|
elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain);
|
||||||
elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
|
elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
|
||||||
|
|
||||||
|
// Only modify share widget data if start at is selected
|
||||||
|
if (document.getElementById('share-add-duration').checked) {
|
||||||
|
modifySocialWidgetURLs(true);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@ -763,4 +871,31 @@ addEventListener('DOMContentLoaded', function () {
|
|||||||
if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () {
|
if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () {
|
||||||
changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href);
|
changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
shareWidgetDetailsBox = document.getElementById("share-widget");
|
||||||
|
shareToSiteContainer = document.getElementsByClassName('share-site');
|
||||||
|
shareWidgetAddDurationButton = document.getElementById("share-add-duration");
|
||||||
|
|
||||||
|
shareWidgetAddDurationButton.addEventListener("change", () => {
|
||||||
|
if (shareWidgetAddDurationButton.checked) {
|
||||||
|
modifySocialWidgetURLs(true)
|
||||||
|
updateStartAtDurationStr()
|
||||||
|
} else {
|
||||||
|
modifySocialWidgetURLs(false)
|
||||||
|
updateStartAtDurationStr()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
shareWidgetDetailsBox.addEventListener("toggle", () => {
|
||||||
|
// If share widget is opened and the share widget start at checkbox is checked
|
||||||
|
// then we will update the time to the current video time
|
||||||
|
if (shareWidgetDetailsBox.open && shareWidgetAddDurationButton.checked) {
|
||||||
|
modifySocialWidgetURLs(true)
|
||||||
|
updateStartAtDurationStr()
|
||||||
|
} else {
|
||||||
|
// Uncheck when closed
|
||||||
|
shareWidgetAddDurationButton.checked = false
|
||||||
|
modifySocialWidgetURLs(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
@ -160,26 +160,26 @@ we're going to need to do it here in order to allow for translations.
|
|||||||
<div>
|
<div>
|
||||||
<ol id="share-to-sites">
|
<ol id="share-to-sites">
|
||||||
<% escaped_iv_watch_link = URI.encode_www_form(HOST_URL) + env.get?("current_page").as(String) %>
|
<% escaped_iv_watch_link = URI.encode_www_form(HOST_URL) + env.get?("current_page").as(String) %>
|
||||||
<% escaped_iv_embed_link = URI.encode_www_form(HOST_URL) + URI.encode_www_form(link_iv_embed.to_s) %>
|
<% escaped_iv_embed_link = URI.encode_www_form(HOST_URL) + URI.encode_www_form(link_iv_embed.to_s.rstrip("?")) %>
|
||||||
<li class="share-site">
|
<li class="share-site">
|
||||||
<details id="share-widget-embed-section">
|
<details id="share-widget-embed-section">
|
||||||
<summary><i class="icon ion ion-md-code"></i><span><%=translate(locale, "video_share_widget_embed")%></span></summary>
|
<summary><i class="icon ion ion-md-code"></i><span><%=translate(locale, "video_share_widget_embed")%></span></summary>
|
||||||
<div contenteditable readonly><%=HTML.escape("<iframe id='ivplayer' width='640' height='360' src='#{escaped_iv_embed_link}' style='border:none;'</iframe>")%></div>
|
<div id="share-widget-embed-code" contenteditable readonly><%=HTML.escape("<iframe id='ivplayer' width='640' height='360' src='#{escaped_iv_embed_link}' style='border:none;'</iframe>")%></div>
|
||||||
</details>
|
</details>
|
||||||
</li>
|
</li>
|
||||||
<li class="share-site">
|
<li class="share-site">
|
||||||
<a href="https://twitter.com/intent/post?url=<%=escaped_iv_watch_link%>&text=<%=title%>"><i class="icon ion ion-logo-twitter"></i><span><%=translate(locale, "video_share_widget_twitter")%></span></a>
|
<a href="https://twitter.com/intent/post?url=<%=escaped_iv_watch_link%>&text=<%=title%>" data-replace-attr="url"><i class="icon ion ion-logo-twitter"></i><span><%=translate(locale, "video_share_widget_twitter")%></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="share-site">
|
<li class="share-site">
|
||||||
<a href="https://www.reddit.com/submit?url=<%=escaped_iv_watch_link%>}&title=<%=title%>"><i class="icon ion ion-logo-reddit"></i><span><%=translate(locale, "video_share_widget_reddit")%></span></a>
|
<a href="https://www.reddit.com/submit?url=<%=escaped_iv_watch_link%>}&title=<%=title%>" data-replace-attr="url"><i class="icon ion ion-logo-reddit"></i><span><%=translate(locale, "video_share_widget_reddit")%></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="share-site">
|
<li class="share-site">
|
||||||
<a href="mailto:?subject=<%=title%>&body=<%=escaped_iv_watch_link%>"><i class="icon ion ion-md-mail"></i><span><%=translate(locale, "video_share_widget_email")%></span></a>
|
<a href="mailto:?subject=<%=title%>&body=<%=escaped_iv_watch_link%>" data-replace-attr="body"><i class="icon ion ion-md-mail"></i><span><%=translate(locale, "video_share_widget_email")%></span></a>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<div id="add-time-to-share-link-container">
|
<div id="add-time-to-share-link-container">
|
||||||
<input type="checkbox" id="share-add-duration"/>
|
<input type="checkbox" id="share-add-duration"/>
|
||||||
<label for="share-add-duration"><%=translate(locale, "video_share_add_duration_checkbox_label", "0:00")%></label>
|
<label for="share-add-duration"><%=translate(locale, "video_share_add_duration_checkbox_label", "<span>0:00</span>")%></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
Loading…
Reference in New Issue
Block a user