Fix audio for v.redd.it videos

ubershmekel · Aug 10, 2023 · 28b9cfc · 28b9cfc
1 parent 574270e
commit 28b9cfc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -110,6 +110,7 @@
             return false;
         }
     </script>
+    <script type="text/javascript" src="/js/dash.min.js"></script>
     <script type="text/javascript" src="/js/jquery.touchwipe.js"></script>
     <script type="text/javascript" src="/js/js.cookie.js"></script>
     <script type="text/javascript" src="/js/ie_hacks.js"></script>
@@ -169,7 +170,8 @@
                     <input class="checkbox" type="checkbox" name="autoNextSlide" id="autoNextSlide" value="Auto"
                         checked />
                     <label class="checkbox" for="autoNextSlide"> Auto-next</label>
-                    every <input type="text" name="timeToNextSlide" id="timeToNextSlide" inputmode="numeric" value="5" size="2" /> seconds
+                    every <input type="text" name="timeToNextSlide" id="timeToNextSlide" inputmode="numeric" value="5"
+                        size="2" /> seconds
                 </li>
                 <li>
                     <input class="checkbox" type="checkbox" name="nsfw" id="nsfw" value="Auto" checked />
@@ -247,4 +249,4 @@ <h3><a id='navboxSubreddit' href="http://www.reddit.com">
     <script type="text/javascript" src="/js/fix-tagsyo-link.js" async></script>
 </body>
 
-</html>
+</html>
diff --git a/js/EmbedIt.js b/js/EmbedIt.js
@@ -356,6 +356,9 @@ embedit.transformRedditData = function (pic) {
       // some crossposts don't have a pic.data.media obj?
       return false;
     }
+    // Note that this `DASH_audio.mp4` is now `DASH_AUDIO_128.mp4`.
+    // You can find it in the `.mpd` file, but I don't want to parse that.
+    // Instead - we'll use `dash.min.js` to create the video element.
     pic.sound =
       pic.url.substring(0, pic.url.lastIndexOf("/")) + "/DASH_audio.mp4";
   } else if (pic.url.search(/^http.*imgur.*gifv?$/) > -1) {

diff --git a/js/dash.min.js b/js/dash.min.js
diff --git a/js/script.js b/js/script.js
@@ -701,6 +701,8 @@ $(function () {
         }
 
         divNode.prependTo(pictureSliderId);
+        fixRedditVideo(imageIndex);
+
         $(pictureSliderId + " div").fadeIn(rp.settings.animationSpeed);
         var oldDiv = $(pictureSliderId + " div:not(:first)");
         oldDiv.fadeOut(rp.settings.animationSpeed, function () {
@@ -715,6 +717,17 @@ $(function () {
         });
     };
 
+    var fixRedditVideo = function (imageIndex) {
+        var photo = rp.photos[imageIndex];
+        if (photo.url.indexOf("//v.redd.it/") < 0) {
+            // only fix reddit videos
+            return;
+        }
+        var url = photo.data.secure_media.reddit_video.dash_url;
+        var player = dashjs.MediaPlayer().create();
+        player.initialize(document.querySelector("video"), url, true);
+    }
+
     var createDiv = function (imageIndex) {
         // Retrieve the accompanying photo based on the index
         var photo = rp.photos[imageIndex];
@@ -745,28 +758,38 @@ $(function () {
                     reportError('Failed to handle url');
                     return divNode;
                 }
+                if (photo.url.indexOf("//v.redd.it/") >= 0) {
+                    // Embedit is wrong here, ignore it.
+                    // I'm ashamed of the spaghetti I'm in, but I'm also tired
+                    // and want to go to sleep with this working.
+                    // elem = document.createElement("video");
+                    elem = $('<video autoplay playsinline loop controls="true" />');
+                }
                 divNode.append(elem);
+
                 $(elem).attr({
                     playsinline: '',
                 });
                 if (photo.sound) {
                     // this case is for videos from v.redd.it domain only
-                    $("<audio loop autoplay " + (rp.settings.sound ? '' : 'muted') + "><source src='" + photo.sound + "' type='audio/aac'/></audio>").appendTo($(elem));
-
-                    var $audioTag = $("audio", elem).get(0);
-                    var $videoTag = $("video", divNode).get(0);
-
-                    // sync reddit audio and video tracks
-                    $audioTag.currentTime = $videoTag.currentTime;
-                    $videoTag.onplay = function () {
-                        $audioTag.play();
-                    };
-                    $videoTag.onpause = function () {
-                        $audioTag.pause();
-                    };
-                    $videoTag.onseeking = function () {
-                        $audioTag.currentTime = $videoTag.currentTime;
-                    };
+                    // $("<audio loop autoplay " + (rp.settings.sound ? '' : 'muted') + "><source src='" + photo.sound + "' type='audio/aac'/></audio>").appendTo($(elem));
+                    // console.log("we are here!", photo)
+                    // console.log("we are here!", photo.data.secure_media.reddit_video.dash_url)
+
+                    // var $audioTag = $("audio", elem).get(0);
+                    // var $videoTag = $("video", divNode).get(0);
+
+                    // // sync reddit audio and video tracks
+                    // $audioTag.currentTime = $videoTag.currentTime;
+                    // $videoTag.onplay = function () {
+                    //     $audioTag.play();
+                    // };
+                    // $videoTag.onpause = function () {
+                    //     $audioTag.pause();
+                    // };
+                    // $videoTag.onseeking = function () {
+                    //     $audioTag.currentTime = $videoTag.currentTime;
+                    // };
                 }
                 elem.width('100%').height('100%');
                 // We start paused and play after the fade in.