diff options
| -rw-r--r-- | src/invidious.cr | 19 | ||||
| -rw-r--r-- | src/invidious/helpers/macros.cr | 4 | ||||
| -rw-r--r-- | src/invidious/videos.cr | 2 | ||||
| -rw-r--r-- | src/invidious/views/components/player.ecr | 153 | ||||
| -rw-r--r-- | src/invidious/views/components/player_sources.ecr | 12 | ||||
| -rw-r--r-- | src/invidious/views/embed.ecr | 191 | ||||
| -rw-r--r-- | src/invidious/views/watch.ecr | 164 |
7 files changed, 207 insertions, 338 deletions
diff --git a/src/invidious.cr b/src/invidious.cr index ec6c0553..0cf6eb72 100644 --- a/src/invidious.cr +++ b/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) diff --git a/src/invidious/helpers/macros.cr b/src/invidious/helpers/macros.cr index 377b2cab..bcb01c4b 100644 --- a/src/invidious/helpers/macros.cr +++ b/src/invidious/helpers/macros.cr @@ -9,8 +9,8 @@ macro add_mapping(mapping) DB.mapping({{mapping}}) end -macro templated(filename) - render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/layout.ecr" +macro templated(filename, template = "layout") + render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/#{{{template}}}.ecr" end macro rendered(filename) diff --git a/src/invidious/videos.cr b/src/invidious/videos.cr index faed9b6f..e14f88f4 100644 --- a/src/invidious/videos.cr +++ b/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) diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr new file mode 100644 index 00000000..30d9f724 --- /dev/null +++ b/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> diff --git a/src/invidious/views/components/player_sources.ecr b/src/invidious/views/components/player_sources.ecr new file mode 100644 index 00000000..0132a57f --- /dev/null +++ b/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 %> diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr index b267e512..61dfe0ea 100644 --- a/src/invidious/views/embed.ecr +++ b/src/invidious/views/embed.ecr @@ -2,179 +2,28 @@ <html> <head> -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width, initial-scale=1"> -<meta name="thumbnail" content="<%= thumbnail %>"> -<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> -<link rel="stylesheet" href="/css/default.css"> -<title><%= HTML.escape(video.title) %> - Invidious</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="thumbnail" content="<%= thumbnail %>"> + <%= rendered "components/player_sources" %> + <link rel="stylesheet" href="/css/default.css"> + <title><%= HTML.escape(video.title) %> - Invidious</title> + <style> + video, #my_video, .video-js, .vjs-default-skin + { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + z-index: -100; + } + </style> </head> <body> -<style> -video, #my_video, .video-js, .vjs-default-skin -{ - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - 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" - ] - } -}; - -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 %> -</script> + <%= rendered "components/player" %> </body> - </html>
\ No newline at end of file diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 2095ec73..822c87e8 100644 --- a/src/invidious/views/watch.ecr +++ b/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"> -<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> +<%= rendered "components/player_sources" %> <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) %>" - 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> + <%= rendered "components/player" %> </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 === "") { |