Add custom share widget to replace videojs-share

assets/css/default.css

@@ -158,6 +158,8 @@ body a.pure-button {
 }
 
 button.pure-button-primary,
+summary.pure-button-primary,
+#share-widget > summary,
 body a.pure-button-primary,
 .channel-owner:hover,
 .channel-owner:focus {
@@ -534,13 +536,15 @@ span > select {
   background-color: #fff2;
 }
 
-.light-theme a {
+.light-theme a,
+.light-theme summary {
   color: #335d7a;
   text-decoration: none;
 }
 
 /* All links that do not fit with the default color goes here */
 .light-theme a:not([data-id]) > .icon,
+.light-theme summary > .icon,
 .light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
 .light-theme .playlist-restricted > ol > li > a {
   color: #303030;
@@ -573,13 +577,15 @@ span > select {
     background-color: #fff2;
   }
 
-  .no-theme a {
+  .no-theme a,
+  .no-theme summary {
     color: #335d7a;
     text-decoration: none;
   }
 
   /* All links that do not fit with the default color goes here */
   .no-theme a:not([data-id]) > .icon,
+  .no-theme summary > .icon,
   .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
   .no-theme .playlist-restricted > ol > li > a {
     color: #303030;
@@ -625,7 +631,8 @@ span > select {
   color: #ddd;
 }
 
-.dark-theme a {
+.dark-theme a,
+.dark-theme summary {
   color: #adadad;
   text-decoration: none;
 }
@@ -661,8 +668,10 @@ body.dark-theme {
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
-  .no-theme a:focus {
-    color: rgb(0, 182, 240);
+  .no-theme summary:hover,
+  .no-theme a:focus,
+  .no-theme summary:focus {
+      color: rgb(0, 182, 240);
   }
 
   .no-theme .pure-button-primary:hover,
@@ -679,7 +688,7 @@ body.dark-theme {
     color: #ddd;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme summary {
     color: #adadad;
     text-decoration: none;
   }
@@ -816,3 +825,77 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+#share-widget > summary {
+  display: block;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 5px;
+  border:0;
+  padding: 10px;
+}
+
+#share-widget > div {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+}
+
+#share-to-sites {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  justify-content: space-between;
+}
+
+#add-time-to-share-link-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-left: 5px;
+  font-size: 16px;
+}
+
+#add-time-to-share-link-container input {
+  width: 20px;
+  height: 20px;
+}
+
+#add-time-to-share-link-container input:checked + label {
+  color: unset;
+}
+
+#add-time-to-share-link-container input + label {
+  color: #adadad;
+}
+
+#share-to-sites > li {
+  padding: 5px;
+}
+
+#share-to-sites > li:has(>details[open]) {
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.share-site > a, .share-site > details > summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#share-to-sites i {
+  font-size: 32px;
+}
+
+#share-widget-embed-section > div {
+  font-family: monospace;
+  padding: 5px;
+  border: 1px solid #adadad;
+  border-radius: 10px;
+  margin: 20px 0px;
+  width: 100%;
+}

assets/css/player.css

@@ -115,12 +115,8 @@ ul.vjs-menu-content::-webkit-scrollbar {
   order: 5;
 }
 
-.vjs-share-control {
-  order: 6;
-}
-
 .vjs-fullscreen-control {
-  order: 7;
+  order: 6;
 }
 
 .vjs-playback-rate > .vjs-menu {
@@ -252,12 +248,6 @@ video.video-js {
   top: 1.5em;
 }
 
-@media screen and (max-width: 700px) {
-  .video-js .vjs-share {
-    justify-content: unset;
-  }
-}
-
 @media screen and (max-width: 650px) {
   .vjs-modal-dialog-content {
     overflow-x: hidden;

assets/js/player.js

@@ -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,24 +257,13 @@ player.on('timeupdate', function () {
 
     elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain);
     elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
-});
 
-
-var shareOptions = {
-    socials: ['fbFeed', 'tw', 'reddit', 'email'],
-
-    get url() {
-        return addCurrentTimeToURL(short_url);
-    },
-    title: player_data.title,
-    description: player_data.description,
-    image: player_data.thumbnail,
-    get embedCode() {
-        // Single quotes inside here required. HTML inserted as is into value attribute of input
-        return "<iframe id='ivplayer' width='640' height='360' src='" +
-            addCurrentTimeToURL(embed_url) + "' style='border:none;'></iframe>";
+    // Only modify share widget data if start at is selected
+    if (document.getElementById('share-add-duration').checked) {
+        modifySocialWidgetURLs(true);
     }
-};
+});
+
 
 if (location.pathname.startsWith('/embed/')) {
     var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
@@ -219,11 +311,8 @@ if (isMobile()) {
     var playback_element = document.getElementsByClassName('vjs-playback-rate')[0];
     operations_bar_element.append(playback_element);
 
-    // The share and http source selector element can't be fetched till the players ready.
+    // The http source selector element can't be fetched till the players ready.
     player.one('playing', function () {
-        var share_element = document.getElementsByClassName('vjs-share-control')[0];
-        operations_bar_element.append(share_element);
-
         if (!video_data.params.listen && video_data.params.quality === 'dash') {
             var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0];
             operations_bar_element.append(http_source_selector);
@@ -725,9 +814,6 @@ addEventListener('keydown', function (e) {
     player.on('DOMMouseScroll', mouseScroll);
 }());
 
-// Since videojs-share can sometimes be blocked, we defer it until last
-if (player.share) player.share(shareOptions);
-
 // show the preferred caption by default
 if (player_data.preferred_caption_found) {
     player.ready(function () {
@@ -785,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)
+        }
+    })
 });

locales/en-US.json

@@ -498,5 +498,11 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "video_share_widget_label": "Share",
+    "video_share_widget_embed": "Embed",
+    "video_share_widget_twitter": "Twitter",
+    "video_share_widget_reddit": "Reddit",
+    "video_share_widget_email": "Email",
+    "video_share_add_duration_checkbox_label": "Start at `x`"
 }