summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/invidious/views/components/player.ecr225
-rw-r--r--src/invidious/views/embed.ecr7
-rw-r--r--src/invidious/views/watch.ecr35
3 files changed, 26 insertions, 241 deletions
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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-17 14:47:16 +0000