diff options
| -rw-r--r-- | assets/js/embed.js | 44 | ||||
| -rw-r--r-- | assets/js/player.js | 231 | ||||
| -rw-r--r-- | assets/js/watch.js | 97 | ||||
| -rw-r--r-- | src/invidious/views/components/player.ecr | 225 | ||||
| -rw-r--r-- | src/invidious/views/embed.ecr | 7 | ||||
| -rw-r--r-- | src/invidious/views/watch.ecr | 35 |
6 files changed, 329 insertions, 310 deletions
diff --git a/assets/js/embed.js b/assets/js/embed.js index 04b08ca5..3d56c4ff 100644 --- a/assets/js/embed.js +++ b/assets/js/embed.js @@ -6,12 +6,12 @@ function get_playlist(plid, timeouts = 0) { if (plid.startsWith('RD')) { var plid_url = '/api/v1/mixes/' + plid + - '?continuation=' + embed_data.id + - '&format=html&hl=' + embed_data.preferences.locale; + '?continuation=' + video_data.id + + '&format=html&hl=' + video_data.preferences.locale; } else { var plid_url = '/api/v1/playlists/' + plid + - '?continuation=' + embed_data.id + - '&format=html&hl=' + embed_data.preferences.locale; + '?continuation=' + video_data.id + + '&format=html&hl=' + video_data.preferences.locale; } var xhr = new XMLHttpRequest(); @@ -21,22 +21,22 @@ function get_playlist(plid, timeouts = 0) { xhr.send(); xhr.onreadystatechange = function () { - if (xhr.readyState == 4) { - if (xhr.status == 200) { + if (xhr.readyState === 4) { + if (xhr.status === 200) { if (xhr.response.nextVideo) { player.on('ended', function () { var url = new URL('https://example.com/embed/' + xhr.response.nextVideo); - if (embed_data.params.autoplay || embed_data.params.continue_autoplay) { + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } - if (embed_data.params.listen !== embed_data.preferences.listen) { - url.searchParams.set('listen', embed_data.params.listen); + if (video_data.params.listen !== video_data.preferences.listen) { + url.searchParams.set('listen', video_data.params.listen); } - if (embed_data.params.speed !== embed_data.preferences.speed) { - url.searchParams.set('speed', embed_data.params.speed); + if (video_data.params.speed !== video_data.preferences.speed) { + url.searchParams.set('speed', video_data.params.speed); } url.searchParams.set('list', plid); @@ -53,26 +53,26 @@ function get_playlist(plid, timeouts = 0) { } } -if (embed_data.plid) { - get_playlist(embed_data.plid); -} else if (embed_data.video_series) { +if (video_data.plid) { + get_playlist(video_data.plid); +} else if (video_data.video_series) { player.on('ended', function () { - var url = new URL('https://example.com/embed/' + embed_data.video_series.shift()); + var url = new URL('https://example.com/embed/' + video_data.video_series.shift()); - if (embed_data.params.autoplay || embed_data.params.continue_autoplay) { + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } - if (embed_data.params.listen !== embed_data.preferences.listen) { - url.searchParams.set('listen', embed_data.params.listen); + if (video_data.params.listen !== video_data.preferences.listen) { + url.searchParams.set('listen', video_data.params.listen); } - if (embed_data.params.speed !== embed_data.preferences.speed) { - url.searchParams.set('speed', embed_data.params.speed); + if (video_data.params.speed !== video_data.preferences.speed) { + url.searchParams.set('speed', video_data.params.speed); } - if (embed_data.video_series.length !== 0) { - url.searchParams.set('playlist', embed_data.video_series.join(',')) + if (video_data.video_series.length !== 0) { + url.searchParams.set('playlist', video_data.video_series.join(',')) } location.assign(url.pathname + url.search); diff --git a/assets/js/player.js b/assets/js/player.js new file mode 100644 index 00000000..be76b674 --- /dev/null +++ b/assets/js/player.js @@ -0,0 +1,231 @@ +var options = { + 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" + ] + } +} + +if (player_data.aspect_ratio) { + options.aspectRatio = player_data.aspect_ratio; +} + +var embed_url = new URL(location); +embed_url.searchParams.delete('v'); +embed_url = location.origin + '/embed/' + video_data.id + embed_url.search; + +var shareOptions = { + socials: ["fbFeed", "tw", "reddit", "email"], + + url: window.location.href, + title: player_data.title, + description: player_data.description, + image: player_data.thumbnail, + embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' src='" + embed_url + "' frameborder='0'></iframe>" +} + +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); + } +}); + +// Add markers +if (video_data.params.video_start > 0 || video_data.params.video_end > 0) { + var markers = [{ time: video_data.params.video_start, text: 'Start' }]; + + if (video_data.params.video_end < 0) { + markers.push({ time: video_data.length_seconds - 0.5, text: 'End' }); + } else { + markers.push({ time: video_data.params.video_end, text: 'End' }); + } + + player.markers({ + onMarkerReached: function (marker) { + if (marker.text === 'End') { + if (player.loop()) { + player.markers.prev('Start'); + } else { + player.pause(); + } + } + }, + markers: markers + }); + + player.currentTime(video_data.params.video_start); +} + +player.volume(video_data.params.volume / 100); +player.playbackRate(video_data.params.speed); + +if (video_data.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(); + }); + } + }); + }); + } +} + +if (!video_data.params.listen && video_data.params.quality === 'dash') { + player.httpSourceSelector(); +} + +player.vttThumbnails({ + src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90' +}); + +// Enable annotations +if (video_data.params.listen && video_data.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_data.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'); + } + }); +} + +// Since videojs-share can sometimes be blocked, we defer it until last +player.share(shareOptions); diff --git a/assets/js/watch.js b/assets/js/watch.js index c5a29313..4ce31014 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -51,21 +51,24 @@ function hide_youtube_replies(target, inner_text, sub_text) { target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); } -function continue_autoplay(target) { - if (target.checked) { +var continue_button = document.getElementById('continue'); +continue_button.onclick = continue_autoplay; + +function continue_autoplay(event) { + if (event.target.checked) { player.on('ended', function () { - var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + var url = new URL('https://example.com/watch?v=' + video_data.next_video); - if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } - if (watch_data.params.listen !== watch_data.preferences.listen) { - url.searchParams.set('listen', watch_data.params.listen); + if (video_data.params.listen !== video_data.preferences.listen) { + url.searchParams.set('listen', video_data.params.listen); } - if (watch_data.params.speed !== watch_data.preferences.speed) { - url.searchParams.set('speed', watch_data.params.speed); + if (video_data.params.speed !== video_data.preferences.speed) { + url.searchParams.set('speed', video_data.params.speed); } url.searchParams.set('continue', '1'); @@ -98,12 +101,12 @@ function get_playlist(plid, timeouts = 0) { if (plid.startsWith('RD')) { var plid_url = '/api/v1/mixes/' + plid + - '?continuation=' + watch_data.id + - '&format=html&hl=' + watch_data.preferences.locale; + '?continuation=' + video_data.id + + '&format=html&hl=' + video_data.preferences.locale; } else { var plid_url = '/api/v1/playlists/' + plid + - '?continuation=' + watch_data.id + - '&format=html&hl=' + watch_data.preferences.locale; + '?continuation=' + video_data.id + + '&format=html&hl=' + video_data.preferences.locale; } var xhr = new XMLHttpRequest(); @@ -119,18 +122,18 @@ function get_playlist(plid, timeouts = 0) { if (xhr.response.nextVideo) { player.on('ended', function () { - var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + var url = new URL('https://example.com/watch?v=' + video_data.next_video); - if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } - if (watch_data.params.listen !== watch_data.preferences.listen) { - url.searchParams.set('listen', watch_data.params.listen); + if (video_data.params.listen !== video_data.preferences.listen) { + url.searchParams.set('listen', video_data.params.listen); } - if (watch_data.params.speed !== watch_data.preferences.speed) { - url.searchParams.set('speed', watch_data.params.speed); + if (video_data.params.speed !== video_data.preferences.speed) { + url.searchParams.set('speed', video_data.params.speed); } url.searchParams.set('list', plid); @@ -166,9 +169,9 @@ function get_reddit_comments(timeouts = 0) { comments.innerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; - var url = '/api/v1/comments/' + watch_data.id + + var url = '/api/v1/comments/' + video_data.id + '?source=reddit&format=html' + - '&hl=' + watch_data.preferences.locale; + '&hl=' + video_data.preferences.locale; var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.timeout = 20000; @@ -198,13 +201,13 @@ function get_reddit_comments(timeouts = 0) { <div>{contentHtml}</div> \ <hr>'.supplant({ title: xhr.response.title, - youtubeCommentsText: watch_data.youtube_comments_text, - redditPermalinkText: watch_data.reddit_permalink_text, + youtubeCommentsText: video_data.youtube_comments_text, + redditPermalinkText: video_data.reddit_permalink_text, permalink: xhr.response.permalink, contentHtml: xhr.response.contentHtml }); } else { - if (watch_data.preferences.comments[1] === 'youtube') { + if (video_data.preferences.comments[1] === 'youtube') { get_youtube_comments(timeouts + 1); } else { comments.innerHTML = fallback; @@ -232,10 +235,10 @@ function get_youtube_comments(timeouts = 0) { comments.innerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; - var url = '/api/v1/comments/' + watch_data.id + + var url = '/api/v1/comments/' + video_data.id + '?format=html' + - '&hl=' + watch_data.preferences.locale + - '&thin_mode=' + watch_data.preferences.thin_mode; + '&hl=' + video_data.preferences.locale + + '&thin_mode=' + video_data.preferences.thin_mode; var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.timeout = 20000; @@ -261,8 +264,8 @@ function get_youtube_comments(timeouts = 0) { <div>{contentHtml}</div> \ <hr>'.supplant({ contentHtml: xhr.response.contentHtml, - redditComments: watch_data.reddit_comments_text, - commentsText: watch_data.comments_text.supplant( + redditComments: video_data.reddit_comments_text, + commentsText: video_data.comments_text.supplant( { commentCount: number_with_separator(xhr.response.commentCount) } ) }); @@ -270,7 +273,7 @@ function get_youtube_comments(timeouts = 0) { comments.innerHTML = ''; } } else { - if (watch_data.preferences[1] === 'youtube') { + if (video_data.preferences[1] === 'youtube') { get_youtube_comments(timeouts + 1); } else { comments.innerHTML = ''; @@ -295,10 +298,10 @@ function get_youtube_replies(target, load_more) { body.innerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; - var url = '/api/v1/comments/' + watch_data.id + + var url = '/api/v1/comments/' + video_data.id + '?format=html' + - '&hl=' + watch_data.preferences.locale + - '&thin_mode=' + watch_data.preferences.thin_mode + + '&hl=' + video_data.preferences.locale + + '&thin_mode=' + video_data.preferences.thin_mode + '&continuation=' + continuation; var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; @@ -319,8 +322,8 @@ function get_youtube_replies(target, load_more) { onclick="hide_youtube_replies(this, \'{hideRepliesText}\', \'{showRepliesText}\')">{hideRepliesText} \ </a></p> \ <div>{contentHtml}</div>'.supplant({ - hideRepliesText: watch_data.hide_replies_text, - showRepliesText: watch_data.show_replies_text, + hideRepliesText: video_data.hide_replies_text, + showRepliesText: video_data.show_replies_text, contentHtml: xhr.response.contentHtml }); } @@ -336,20 +339,20 @@ function get_youtube_replies(target, load_more) { } } -if (watch_data.play_next) { +if (video_data.play_next) { player.on('ended', function () { - var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + var url = new URL('https://example.com/watch?v=' + video_data.next_video); - if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } - if (watch_data.params.listen !== watch_data.preferences.listen) { - url.searchParams.set('listen', watch_data.params.listen); + if (video_data.params.listen !== video_data.preferences.listen) { + url.searchParams.set('listen', video_data.params.listen); } - if (watch_data.params.speed !== watch_data.preferences.speed) { - url.searchParams.set('speed', watch_data.params.speed); + if (video_data.params.speed !== video_data.preferences.speed) { + url.searchParams.set('speed', video_data.params.speed); } url.searchParams.set('continue', '1'); @@ -357,17 +360,17 @@ if (watch_data.play_next) { }); } -if (watch_data.plid) { - get_playlist(watch_data.plid); +if (video_data.plid) { + get_playlist(video_data.plid); } -if (watch_data.preferences.comments[0] === 'youtube') { +if (video_data.preferences.comments[0] === 'youtube') { get_youtube_comments(); -} else if (watch_data.preferences.comments[0] === 'reddit') { +} else if (video_data.preferences.comments[0] === 'reddit') { get_reddit_comments(); -} else if (watch_data.preferences.comments[1] === 'youtube') { +} else if (video_data.preferences.comments[1] === 'youtube') { get_youtube_comments(); -} else if (watch_data.preferences.comments[1] === 'reddit') { +} else if (video_data.preferences.comments[1] === 'reddit') { get_reddit_comments(); } else { comments = document.getElementById('comments'); diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr index a9dfe896..c17b5464 100644 --- a/src/invidious/views/components/player.ecr +++ b/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>" -} - -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(); - }); - } - }); - }); + thumbnail: "<%= thumbnail %>" } -<% 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> diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr index 380a3806..5e0f2349 100644 --- a/src/invidious/views/embed.ecr +++ b/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> diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 26f19e3d..796b8d01 100644 --- a/src/invidious/views/watch.ecr +++ b/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> |