Pull 'player' out into seperate component

src/invidious.cr

@@ -200,7 +200,7 @@ get "/watch" do |env|
   end
   subscriptions ||= [] of String
 
-  autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay = process_video_params(env.params.query, preferences)
+  autoplay, video_loop, video_start, video_end, listen, raw, quality, controls = process_video_params(env.params.query, preferences)
   if listen
     env.params.query.delete_all("listen")
   end
@@ -226,6 +226,7 @@ get "/watch" do |env|
     captions = captions - preferred_captions
   end
   preferred_captions ||= [] of Caption
+  aspect_ratio = "16:9"
 
   video.description = fill_links(video.description, "https", "www.youtube.com")
   video.description = add_alt_links(video.description)
@@ -316,7 +317,21 @@ get "/embed/:id" do |env|
     next env.redirect url
   end
 
-  autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay, controls = process_video_params(env.params.query, nil)
+  autoplay, video_loop, video_start, video_end, listen, raw, quality, controls = process_video_params(env.params.query, nil)
+  preferred_captions = [] of Caption
+  preferences = Preferences.from_json({
+    "video_loop"  => video_loop,
+    "autoplay"    => autoplay,
+    "speed"       => 1.0,
+    "quality"     => quality,
+    "volume"      => 100,
+    "max_results" => 0,
+    "sort"        => "",
+    "latest_only" => false,
+    "unseen_only" => false,
+    "dark_mode"   => false,
+  }.to_json)
+  aspect_ratio = nil
 
   begin
     video = get_video(id, PG_DB)

src/invidious/helpers/macros.cr

@@ -9,8 +9,8 @@ macro add_mapping(mapping)
     DB.mapping({{mapping}})
 end
 
-macro templated(filename)
+macro templated(filename, template = "layout")
-    render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/layout.ecr"
+    render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/#{{{template}}}.ecr"
 end
 
 macro rendered(filename)

src/invidious/videos.cr

@@ -475,7 +475,7 @@ def process_video_params(query, preferences)
   controls ||= 1
   controls = controls == 1
 
-  return autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay, controls
+  return autoplay, video_loop, video_start, video_end, listen, raw, quality, controls
 end
 
 def generate_thumbnails(json, id)

src/invidious/views/components/player.ecr

@@ -0,0 +1,153 @@
+<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
+    id="player" class="video-js"
+    <% if autoplay %>autoplay<% end %>
+    <% if video_loop %>loop<% end %>
+    <% if controls %>controls<% end %>>
+    <% if hlsvp %>
+        <source src="<%= hlsvp %>" type="application/x-mpegURL">
+    <% else %>
+        <% if listen %>
+            <% audio_streams.each_with_index do |fmt, i| %>
+                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
+            <% end %>
+        <% else %>
+            <% fmt_stream.each_with_index do |fmt, i| %>
+                <% if preferences %>
+                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
+                <% else %>
+                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
+                <% end %>
+            <% end %>
+        <% end %>
+
+        <% preferred_captions.each_with_index do |caption, i| %>
+        <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
+            label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
+        <% end %>
+
+        <% captions.each do |caption| %>
+        <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
+            label="<%= caption.name.simpleText %>">
+        <% end %>
+    <% end %>
+</video>
+
+<script>
+var options = {
+  <% if aspect_ratio %>
+  aspectRatio: "<%= aspect_ratio %>",
+  <% end %>
+  preload: "auto",
+  playbackRates: [0.5, 1, 1.5, 2],
+  controlBar: {
+    children: [
+      "playToggle",
+      "volumePanel",
+      "currentTimeDisplay",
+      "timeDivider",
+      "durationDisplay",
+      "progressControl",
+      "remainingTimeDisplay",
+      "captionsButton",
+      "qualitySelector",
+      "playbackRateMenuButton",
+      "fullscreenToggle"
+    ]
+  }
+};
+
+var shareOptions = {
+  socials: ["fb", "tw", "reddit", "mail"],
+
+  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
+  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,
+    customKeys: {
+      play: {
+        key: function(e) {
+          // Toggle play with K Key
+          return e.which === 75;
+        },
+        handler: function(player, options, e) {
+          if (player.paused()) {
+            player.play();
+          } else {
+            player.pause();
+          }
+        }
+      },
+      backward: {
+        key: function(e) {
+          // Go backward 5 seconds
+          return e.which === 74;
+        },
+        handler: function(player, options, e) {
+          player.currentTime(player.currentTime() - 5);
+        }
+      },
+      forward: {
+        key: function(e) {
+          // Go forward 5 seconds
+          return e.which === 76;
+        },
+        handler: function(player, options, e) {
+          player.currentTime(player.currentTime() + 5);
+        }
+      }
+    }
+  });
+});
+
+player.share(shareOptions);
+
+<% if video_start > 0 || video_end > 0 %>
+player.markers({
+  onMarkerReached: function(marker) {
+    if (marker.text === "End") {
+      if (player.loop()) {
+        player.markers.prev("Start");
+      } else {
+        player.pause();
+      }
+    }
+  },
+  markers: [
+    { time: <%= video_start %>, text: "Start" },
+    <% if video_end < 0 %>
+    { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
+    <% else %>
+    { time: <%= video_end %>, text: "End" }
+    <% end %>
+  ]
+});
+
+player.currentTime(<%= video_start %>);
+<% end %>
+
+<% if !listen %>
+var currentSources = player.currentSources();
+for (var i = 0; i < currentSources.length; i++) {
+  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
+    currentSources.splice(i);
+    i--;
+  }
+}
+
+player.src(currentSources);
+<% end %>
+
+<% if preferences %>
+player.volume(<%= preferences.volume.to_f / 100 %>);
+player.playbackRate(<%= preferences.speed %>);
+<% end %>
+</script>

src/invidious/views/components/player_sources.ecr

@@ -0,0 +1,12 @@
+<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
+<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
+<script src="https://unpkg.com/video.js@6.12.0/dist/video.min.js"></script>
+<script src="https://unpkg.com/videojs-hotkeys@0.2.22/build/videojs.hotkeys.min.js"></script>
+<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
+<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
+<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
+<% if hlsvp %>
+<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
+<% end %>

src/invidious/views/embed.ecr

@@ -2,26 +2,15 @@
 <html>
 
 <head>
-<meta charset="utf-8">
+  <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="thumbnail" content="<%= thumbnail %>">
+  <meta name="thumbnail" content="<%= thumbnail %>">
-<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
+  <%= rendered "components/player_sources" %>
-<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
+  <link rel="stylesheet" href="/css/default.css">
-<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
+  <title><%= HTML.escape(video.title) %> - Invidious</title>
-<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
+  <style>
-<script src="https://unpkg.com/video.js@6.12.0/dist/video.min.js"></script>
+  video, #my_video, .video-js, .vjs-default-skin
-<script src="https://unpkg.com/videojs-hotkeys@0.2.22/build/videojs.hotkeys.min.js"></script>
+  {
-<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
-<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
-<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
-<link rel="stylesheet" href="/css/default.css">
-<title><%= HTML.escape(video.title) %> - Invidious</title>
-</head>
-
-<body>
-<style>
-video, #my_video, .video-js, .vjs-default-skin
-{
     position: fixed; 
     right: 0; 
     bottom: 0;
@@ -30,151 +19,11 @@ video, #my_video, .video-js, .vjs-default-skin
     width: auto; 
     height: auto; 
     z-index: -100;
-}
-</style>
-
-<% if hlsvp %>
-<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
-<% end %>
-
-<video playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" 
-    <% if autoplay %>autoplay<% end %>
-    <% if controls %>controls<% end %>
-    <% if video_loop %>loop<% end %>
-    class="video-js vjs-default-skin">
-    <% if hlsvp %>
-        <source src="<%= hlsvp %>" type="application/x-mpegURL">
-    <% else %>
-        <% if listen %>
-            <% audio_streams.each_with_index do |fmt, i| %>
-                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
-            <% end %>
-        <% else %>
-            <% fmt_stream.each_with_index do |fmt, i| %>
-                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
-            <% end %>
-        <% end %>
-
-        <% captions.each do |caption| %>
-            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
-                label="<%= caption.name.simpleText %> ">
-        <% end %>
-    <% end %>
-</video>
-
-<script>
-var options = {
-  <% if autoplay %>
-  preload: "auto",
-  <% end %>
-  playbackRates: [0.5, 1, 1.5, 2],
-  controlBar: {
-    children: [
-      "playToggle",
-      "volumePanel",
-      "currentTimeDisplay",
-      "timeDivider",
-      "durationDisplay",
-      "progressControl",
-      "remainingTimeDisplay",
-      "captionsButton",
-      "qualitySelector",
-      "playbackRateMenuButton",
-      "fullscreenToggle"
-    ]
   }
-};
+  </style>
+</head>
 
-var shareOptions = {
+<body>
-  socials: ["fb", "tw", "reddit", "mail"],
+  <%= rendered "components/player" %>
-
-  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
-  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,
-    customKeys: {
-      play: {
-        key: function(e) {
-          // Toggle play with K Key
-          return e.which === 75;
-        },
-        handler: function(player, options, e) {
-          if (player.paused()) {
-            player.play();
-          } else {
-            player.pause();
-          }
-        }
-      },
-      backward: {
-        key: function(e) {
-          // Go backward 5 seconds
-          return e.which === 74;
-        },
-        handler: function(player, options, e) {
-          player.currentTime(player.currentTime() - 5);
-        }
-      },
-      forward: {
-        key: function(e) {
-          // Go forward 5 seconds
-          return e.which === 76;
-        },
-        handler: function(player, options, e) {
-          player.currentTime(player.currentTime() + 5);
-        }
-      }
-    }
-  });
-});
-
-player.share(shareOptions);
-
-<% if video_start > 0 || video_end > 0 %>
-player.markers({
-  onMarkerReached: function(marker) {
-    if (marker.text === "End") {
-      if (player.loop()) {
-        player.markers.prev("Start");
-      } else {
-        player.pause();
-      }
-    }
-  },
-  markers: [
-    { time: <%= video_start %>, text: "Start" },
-    <% if video_end < 0 %>
-    { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
-    <% else %>
-    { time: <%= video_end %>, text: "End" }
-    <% end %>
-  ]
-});
-
-player.currentTime(<%= video_start %>);
-<% end %>
-
-<% if !listen %>
-var currentSources = player.currentSources();
-for (var i = 0; i < currentSources.length; i++) {
-  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
-    currentSources.splice(i);
-    i--;
-  }
-}
-
-player.src(currentSources);
-<% end %>
-</script>
 </body>
-
 </html>

src/invidious/views/watch.ecr

@@ -22,175 +22,15 @@
 <meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
 <meta name="twitter:player:width" content="1280">
 <meta name="twitter:player:height" content="720">
-<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
+<%= rendered "components/player_sources" %>
-<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
-<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
-<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
-<script src="https://unpkg.com/video.js@6.12.0/dist/video.min.js"></script>
-<script src="https://unpkg.com/videojs-hotkeys@0.2.22/build/videojs.hotkeys.min.js"></script>
-<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
-<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
-<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
 
-<% if hlsvp %>
-<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
-<% end %>
-
 <div class="h-box">
-    <video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
+  <%= rendered "components/player" %>
-        id="player" class="video-js"
-        <% if autoplay %>autoplay<% end %>
-        <% if video_loop %>loop<% end %>
-        controls>
-        <% if hlsvp %>
-            <source src="<%= hlsvp %>" type="application/x-mpegURL">
-        <% else %>
-            <% if listen %>
-                <% audio_streams.each_with_index do |fmt, i| %>
-                    <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
-                <% end %>
-            <% else %>
-                <% fmt_stream.each_with_index do |fmt, i| %>
-                    <% if preferences %>
-                    <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
-                    <% else %>
-                    <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
-                    <% end %>
-                <% end %>
-            <% end %>
-
-            <% preferred_captions.each_with_index do |caption, i| %>
-            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
-                label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
-            <% end %>
-
-            <% captions.each do |caption| %>
-            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
-                label="<%= caption.name.simpleText %>">
-            <% end %>
-        <% end %>
-    </video>
 </div>
 
 <script>
-var options = {
-  aspectRatio: "16:9",
-  preload: "auto",
-  playbackRates: [0.5, 1, 1.5, 2],
-  controlBar: {
-    children: [
-      "playToggle",
-      "volumePanel",
-      "currentTimeDisplay",
-      "timeDivider",
-      "durationDisplay",
-      "progressControl",
-      "remainingTimeDisplay",
-      "captionsButton",
-      "qualitySelector",
-      "playbackRateMenuButton",
-      "fullscreenToggle"
-    ]
-  }
-};
-
-var shareOptions = {
-  socials: ["fb", "tw", "reddit", "mail"],
-
-  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
-  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,
-    customKeys: {
-      play: {
-        key: function(e) {
-          // Toggle play with K Key
-          return e.which === 75;
-        },
-        handler: function(player, options, e) {
-          if (player.paused()) {
-            player.play();
-          } else {
-            player.pause();
-          }
-        }
-      },
-      backward: {
-        key: function(e) {
-          // Go backward 5 seconds
-          return e.which === 74;
-        },
-        handler: function(player, options, e) {
-          player.currentTime(player.currentTime() - 5);
-        }
-      },
-      forward: {
-        key: function(e) {
-          // Go forward 5 seconds
-          return e.which === 76;
-        },
-        handler: function(player, options, e) {
-          player.currentTime(player.currentTime() + 5);
-        }
-      }
-    }
-  });
-});
-
-player.share(shareOptions);
-
-<% if video_start > 0 || video_end > 0 %>
-player.markers({
-  onMarkerReached: function(marker) {
-    if (marker.text === "End") {
-      if (player.loop()) {
-        player.markers.prev("Start");
-      } else {
-        player.pause();
-      }
-    }
-  },
-  markers: [
-    { time: <%= video_start %>, text: "Start" },
-    <% if video_end < 0 %>
-    { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
-    <% else %>
-    { time: <%= video_end %>, text: "End" }
-    <% end %>
-  ]
-});
-
-player.currentTime(<%= video_start %>);
-<% end %>
-
-<% if !listen %>
-var currentSources = player.currentSources();
-for (var i = 0; i < currentSources.length; i++) {
-  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
-    currentSources.splice(i);
-    i--;
-  }
-}
-
-player.src(currentSources);
-<% end %>
-
-<% if preferences %>
-player.volume(<%= preferences.volume.to_f / 100 %>);
-player.playbackRate(<%= preferences.speed %>);
-<% end %>
-
 function toggle(target) {
   body = target.parentNode.parentNode.children[1];
   if (body.style.display === null || body.style.display === "") {