mirror of https://github.com/iv-org/invidious.git
Add JS to share widget
Updates link to current video time when requested
This commit is contained in:
syeopite
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
|
||||
*
|
||||
|
|
@ -154,6 +257,11 @@ player.on('timeupdate', function () {
|
|||
|
||||
elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, 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 () {
|
||||
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>
|
||||
<ol id="share-to-sites">
|
||||
<% 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">
|
||||
<details id="share-widget-embed-section">
|
||||
<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>
|
||||
</li>
|
||||
<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 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 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>
|
||||
</ol>
|
||||
<div id="add-time-to-share-link-container">
|
||||
<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>
|
||||
</details>
|
||||
|
|
|
|||
Loading…
Reference in New Issue