Refactor player.js

src/invidious/views/components/player.ecr

@@ -40,228 +40,11 @@
 </video>
 
 <script>
-var options = {
-    <% if aspect_ratio %>
-    aspectRatio: "<%= aspect_ratio %>",
-    <% end %>
-    preload: "auto",
-    playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
-    controlBar: {
-        children: [
-            "playToggle",
-            "volumePanel",
-            "currentTimeDisplay",
-            "timeDivider",
-            "durationDisplay",
-            "progressControl",
-            "remainingTimeDisplay",
-            "captionsButton",
-            "qualitySelector",
-            "playbackRateMenuButton",
-            "fullscreenToggle"
-        ]
-    }
-}
-
-var shareOptions = {
-    socials: ["fbFeed", "tw", "reddit", "email"],
-
-    url: window.location.href,
+var player_data = {
+    aspect_ratio: '<%= aspect_ratio %>',
     title: "<%= video.title.dump_unquoted %>",
     description: "<%= description %>",
-    image: "<%= thumbnail %>",
-    embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' \
-        src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>"
+    thumbnail: "<%= thumbnail %>"
 }
-
-var player = videojs("player", options, function() {
-    this.hotkeys({
-        volumeStep: 0.1,
-        seekStep: 5,
-        enableModifiersForNumbers: false,
-        enableHoverScroll: true,
-        customKeys: {
-            // Toggle play with K Key
-            play: {
-                key: function(e) {
-                    return e.which === 75;
-                },
-                handler: function(player, options, e) {
-                    if (player.paused()) {
-                        player.play();
-                    } else {
-                        player.pause();
-                    }
-                }
-            },
-            // Go backward 10 seconds
-            backward: {
-                key: function(e) {
-                    return e.which === 74;
-                },
-                handler: function(player, options, e) {
-                    player.currentTime(player.currentTime() - 10);
-                }
-            },
-            // Go forward 10 seconds
-            forward: {
-                key: function(e) {
-                    return e.which === 76;
-                },
-                handler: function(player, options, e) {
-                    player.currentTime(player.currentTime() + 10);
-                }
-            },
-            // Increase speed
-            increase_speed: {
-                key: function(e) {
-                    return (e.which === 190 && e.shiftKey);
-                },
-                handler: function(player, _, e) {
-                    size = options.playbackRates.length;
-                    index = options.playbackRates.indexOf(player.playbackRate());
-                    player.playbackRate(options.playbackRates[(index + 1) % size]);
-                }
-            },
-            // Decrease speed
-            decrease_speed: {
-                key: function(e) {
-                    return (e.which === 188 && e.shiftKey);
-                },
-                handler: function(player, _, e) {
-                    size = options.playbackRates.length;
-                    index = options.playbackRates.indexOf(player.playbackRate());
-                    player.playbackRate(options.playbackRates[(size + index - 1) % size]);
-                }
-            }
-        }
-    });
-});
-
-player.on('error', function(event) {
-    if (player.error().code === 2 || player.error().code === 4) {
-        setInterval(setTimeout(function (event) {
-            console.log('An error occured in the player, reloading...');
-
-            var currentTime = player.currentTime();
-            var playbackRate = player.playbackRate();
-            var paused = player.paused();
-
-            player.load();
-
-            if (currentTime > 0.5) {
-                currentTime -= 0.5;
-            }
-
-            player.currentTime(currentTime);
-            player.playbackRate(playbackRate);
-
-            if (!paused) {
-                player.play();
-            }
-        }, 5000), 5000);
-    }
-});
-
-<% if params.video_start > 0 || params.video_end > 0 %>
-player.markers({
-    onMarkerReached: function(marker) {
-        if (marker.text === 'End') {
-            if (player.loop()) {
-                player.markers.prev('Start');
-            } else {
-                player.pause();
-            }
-        }
-    },
-    markers: [
-        { time: <%= params.video_start %>, text: 'Start' },
-        <% if params.video_end < 0 %>
-            { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End' }
-        <% else %>
-            { time: <%= params.video_end %>, text: 'End' }
-        <% end %>
-    ]
-});
-
-player.currentTime(<%= params.video_start %>);
-<% end %>
-
-player.volume(<%= params.volume.to_f / 100 %>);
-player.playbackRate(<%= params.speed %>);
-
-<% if params.autoplay %>
-var bpb = player.getChild('bigPlayButton');
-
-if (bpb) {
-    bpb.hide();
-
-    player.ready(function() {
-        new Promise(function(resolve, reject) {
-            setTimeout(() => resolve(1), 1);
-        }).then(function(result) {
-        var promise = player.play();
-
-        if (promise !== undefined) {
-            promise.then(_ => {
-            }).catch(error => {
-                bpb.show();
-            });
-        }
-    });
-  });
-}
-<% end %>
-
-<% if !params.listen && params.quality == "dash" %>
-player.httpSourceSelector();
-<% end %>
-
-player.vttThumbnails({
-    src: location.origin + '/api/v1/storyboards/<%= video.id %>?height=90'
-});
-
-<% if !params.listen && params.annotations %>
-var video_container = document.getElementById('player');
-let xhr = new XMLHttpRequest();
-xhr.responseType = 'text';
-xhr.timeout = 60000;
-xhr.open('GET', '/api/v1/annotations/<%= video.id %>', true);
-xhr.send();
-
-xhr.onreadystatechange = function () {
-    if (xhr.readyState === 4) {
-        if (xhr.status === 200) {
-            videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
-            if (!player.paused()) {
-                player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
-            } else {
-                player.one('play', function(event) {
-                    player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
-                });
-            }
-        }
-    }
-}
-
-window.addEventListener('__ar_annotation_click', e => {
-    const { url, target, seconds } = e.detail;
-    var path = new URL(url);
-
-    if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
-        path.search += '&t=' + seconds;
-    }
-
-    path  = path.pathname + path.search;
-
-    if (target === 'current') {
-        window.location.href = path;
-    } else if (target === 'new') {
-        window.open(path, '_blank');
-    }
-});
-<% end %>
-
-// Since videojs-share can sometimes be blocked, we try to load it last
-player.share(shareOptions);
 </script>
+<script src="/js/player.js"></script>

src/invidious/views/embed.ecr

@@ -23,17 +23,18 @@
 </head>
 
 <body>
-<%= rendered "components/player" %>
-
 <script>
-var embed_data = {
+var video_data = {
     id: '<%= video.id %>',
     plid: '<%= plid %>',
+    length_seconds: '<%= video.info["length_seconds"].to_f %>',
     video_series: <%= video_series.to_json %>,
     params: <%= params.to_json %>,
     preferences: <%= preferences.to_json %>
 }
 </script>
+
+<%= rendered "components/player" %>
 <script src="/js/embed.js"></script>
 </body>
 </html>

src/invidious/views/watch.ecr

@@ -26,6 +26,24 @@
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
 
+<script>
+var video_data = {
+    id: '<%= video.id %>',
+    plid: '<%= plid %>',
+    length_seconds: '<%= video.info["length_seconds"].to_f %>',
+    play_next: <%= !rvs.empty? && !plid && params.continue %>,
+    next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
+    youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
+    reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
+    reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
+    comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
+    hide_replies_text: '<%= translate(locale, "Hide replies") %>',
+    show_replies_text: '<%= translate(locale, "Show replies") %>',
+    params: <%= params.to_json %>,
+    preferences: <%= preferences.to_json %>
+}
+</script>
+
 <div id="player-container" class="h-box">
     <%= rendered "components/player" %>
 </div>
@@ -224,21 +242,4 @@
         </div>
     <% end %>
 </div>
-
-<script>
-var watch_data = {
-    id: '<%= video.id %>',
-    plid: '<%= plid %>',
-    play_next: <%= !rvs.empty? && !plid && params.continue %>,
-    next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
-    youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
-    reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
-    reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
-    comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
-    hide_replies_text: '<%= translate(locale, "Hide replies") %>',
-    show_replies_text: '<%= translate(locale, "Show replies") %>',
-    params: <%= params.to_json %>,
-    preferences: <%= preferences.to_json %>
-}
-</script>
 <script src="/js/watch.js"></script>