Add script to resolve and fetch VideoJS files

scripts/fetch-videojs-dependencies.cr

@@ -0,0 +1,153 @@
+require "http"
+require "yaml"
+require "digest/sha1"
+require "option_parser"
+require "colorize"
+
+# Taken from https://crystal-lang.org/api/1.1.1/OptionParser.html
+minified = false
+OptionParser.parse do |parser|
+  parser.banner = "Usage: Fetch VideoJS dependencies [arguments]"
+  parser.on("-m", "--minified", "Use minified versions of VideoJS dependencies (performance and bandwidth benefit)") { minified = true }
+
+  parser.on("-h", "--help", "Show this help") do
+    puts parser
+    exit
+  end
+
+  parser.invalid_option do |flag|
+    STDERR.puts "ERROR: #{flag} is not a valid option."
+    STDERR.puts parser
+    exit(1)
+  end
+end
+
+required_dependencies = File.open("videojs-dependencies.yml") do |file|
+  YAML.parse(file).as_h
+end
+
+def update_versions_yaml(required_dependencies, minified, dep_name)
+  File.open("assets/videojs/#{dep_name}/versions.yml", "w") do |io|
+    YAML.build(io) do |builder|
+      builder.mapping do
+        # Versions
+        builder.scalar "version"
+        builder.scalar "#{required_dependencies[dep_name]["version"]}"
+
+        builder.scalar "minified"
+        builder.scalar minified
+      end
+    end
+  end
+end
+
+# The first step is to check which dependencies we'll need to install.
+# If the version we have requested in `videojs-dependencies.yml` is the
+# same as what we've installed, we shouldn't do anything. Likewise, if it's
+# different or the requested dependency just isn't present, then it needs to be
+# installed.
+
+# Since we can't know when videojs-youtube-annotations is updated, we'll just always fetch
+# a new copy each time.
+dependencies_to_install = [] of String
+
+required_dependencies.keys.each do |dep|
+  dep = dep.to_s
+  path = "assets/videojs/#{dep}"
+  # Check for missing dependencies
+  if !Dir.exists?(path)
+    Dir.mkdir(path)
+
+    update_versions_yaml(required_dependencies, minified, dep)
+    dependencies_to_install << dep
+  else
+    config = File.open("#{path}/versions.yml") do |file|
+      YAML.parse(file).as_h
+    end
+
+    if config["version"].as_s != required_dependencies[dep]["version"].as_s || config["minified"].as_bool != minified
+      `rm -rf #{path}/*`
+      dependencies_to_install << dep
+      update_versions_yaml(required_dependencies, minified, dep)
+    end
+  end
+end
+
+# Now we begin the fun part of installing the dependencies.
+# But first we'll setup a temp directory to store the plugins
+tmp_dir_path = "#{Dir.tempdir}/invidious-videojs-dep-install"
+Dir.mkdir(tmp_dir_path) if !Dir.exists? tmp_dir_path
+
+channel = Channel(String).new
+
+dependencies_to_install.each do |dep|
+  spawn do
+    dep_name = dep
+    download_path = "#{tmp_dir_path}/#{dep}"
+    dest_path = "assets/videojs/#{dep}"
+
+    HTTP::Client.get("https://registry.npmjs.org/#{dep}/-/#{dep}-#{required_dependencies[dep]["version"]}.tgz") do |response|
+      Dir.mkdir(download_path)
+      data = response.body_io.gets_to_end
+      File.write("#{download_path}/package.tgz", data)
+
+      if Digest::SHA1.hexdigest(data) != required_dependencies[dep]["shasum"]
+        raise Exception.new("Checksum for '#{dep}' failed")
+      end
+    end
+
+    # Unless we install an external dependency, crystal provides no way of extracting a tarball.
+    # Thus we'll go ahead and call a system command.
+    args = Process.parse_arguments("-zxvf '#{download_path}/package.tgz'  -C '#{download_path}'")
+    process = Process.new("tar", args: args)
+    process.wait.success? # => true
+
+    # Would use File.rename in the following steps but for some reason it just doesn't work here.
+    # Video.js itself is structured slightly differently
+    dep = "video" if dep == "video.js"
+
+    # This dep nests everything under an additional JS or CSS folder
+    if dep == "silvermine-videojs-quality-selector"
+      js_path = "js/"
+
+      # It also stores their quality selector as `quality-selector.css`
+      `mv #{download_path}/package/dist/css/quality-selector.css #{dest_path}/quality-selector.css`
+    else
+      js_path = ""
+    end
+
+    # Would use File.rename but for some reason it just doesn't work here.
+    if minified && File.exists?("#{download_path}/package/dist/#{dep}.min.js")
+      `mv #{download_path}/package/dist/#{js_path}#{dep}.min.js #{dest_path}/#{dep}.js`
+    else
+      `mv #{download_path}/package/dist/#{js_path}#{dep}.js #{dest_path}/#{dep}.js`
+    end
+
+    # Fetch CSS which isn't guaranteed to exist
+    #
+    # Also, video JS changes structure here once again...
+    dep = "video-js" if dep == "video"
+
+    # VideoJS marker uses a dot on the CSS files.
+    dep = "videojs.markers" if dep == "videojs-markers"
+
+    if File.exists?("#{download_path}/package/dist/#{dep}.css")
+      if minified && File.exists?("#{tmp_dir_path}/#{dep}/package/dist/#{dep}.min.css")
+        `mv #{download_path}/package/dist/#{dep}.min.css #{dest_path}/#{dep}.css`
+      else
+        `mv #{download_path}/package/dist/#{dep}.css #{dest_path}/#{dep}.css`
+      end
+    end
+
+    channel.send(dep_name)
+  end
+end
+
+puts "#{"Resolving".colorize(:green)} #{"VideoJS".colorize(:blue)} dependencies"
+dependencies_to_install.size.times do
+  result = channel.receive
+  puts "#{"Fetched".colorize(:green)} #{result.colorize(:blue)}"
+end
+
+# Cleanup
+`rm -rf #{tmp_dir_path}`

src/invidious/views/components/player_sources.ecr

@@ -1,18 +1,19 @@
-<link rel="stylesheet" href="/css/video-js.min.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/video.js/video-js.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/css/videojs-http-source-selector.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/videojs-http-source-selector/videojs-http-source-selector.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/css/videojs.markers.min.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/videojs-markers/videojs.markers.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/css/videojs-share.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/videojs-share/videojs-share.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/css/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/videojs-vtt-thumbnails/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/css/videojs-mobile-ui.css?v=<%= ASSET_COMMIT %>">
+<link rel="stylesheet" href="/videojs/videojs-mobile-ui/videojs-mobile-ui.css?v=<%= ASSET_COMMIT -%>">
+
 <link rel="stylesheet" href="/css/player.css?v=<%= ASSET_COMMIT %>">
 
-<script src="/js/video.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/video.js/video.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-mobile-ui.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-mobile-ui/videojs-mobile-ui.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-contrib-quality-levels.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-contrib-quality-levels/videojs-contrib-quality-levels.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-http-source-selector.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-http-source-selector/videojs-http-source-selector.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-markers.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-markers/videojs-markers.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-share.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-share/videojs-share.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/videojs-vtt-thumbnails.min.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-vtt-thumbnails/videojs-vtt-thumbnails.js?v=<%= ASSET_COMMIT %>"></script>
 
 
 <% if params.annotations %>
@@ -21,11 +22,11 @@
 <% end %>
 
 <% if params.listen || params.quality != "dash" %>
-    <link rel="stylesheet" href="/css/quality-selector.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/videojs/silvermine-videojs-quality-selector/quality-selector.css?v=<%= ASSET_COMMIT %>">
-    <script src="/js/silvermine-videojs-quality-selector.min.js?v=<%= ASSET_COMMIT %>"></script>
+    <script src="/videojs/silvermine-videojs-quality-selector/silvermine-videojs-quality-selector.min.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>
 
 <% if !params.listen && params.vr_mode %>
-    <link rel="stylesheet" href="/css/videojs-vr.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/videojs/videojs-vr/videojs-vr.css?v=<%= ASSET_COMMIT %>">
-    <script src="/js/videojs-vr.js?v=<%= ASSET_COMMIT %>"></script>
+    <script src="/videojs/videojs-vr/videojs-vr.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>

src/invidious/views/embed.ecr

@@ -6,8 +6,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/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/videojs/videojs-overlay/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
-    <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
+    <script src="videojs/videojs-overlay/videojs-overlay.js?v=<%= ASSET_COMMIT %>"></script>
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
     <title><%= HTML.escape(video.title) %> - Invidious</title>

src/invidious/views/licenses.ecr

@@ -67,7 +67,7 @@
 
         <tr>
             <td>
-                <a href="/js/silvermine-videojs-quality-selector.min.js?v=<%= ASSET_COMMIT %>">silvermine-videojs-quality-selector.min.js</a>
+                <a href="/videojs/silvermine-videojs-quality-selector/silvermine-videojs-quality-selector.min.js?v=<%= ASSET_COMMIT %>">silvermine-videojs-quality-selector</a>
             </td>
 
             <td>
@@ -123,7 +123,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-contrib-quality-levels.min.js?v=<%= ASSET_COMMIT %>">videojs-contrib-quality-levels.min.js</a>
+                <a href="/videojs/videojs-contrib-quality-levels/videojs-contrib-quality-levels.js?v=<%= ASSET_COMMIT %>">videojs-contrib-quality-levels.js</a>
             </td>
 
             <td>
@@ -137,7 +137,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-http-source-selector.min.js?v=<%= ASSET_COMMIT %>">videojs-http-source-selector.min.js</a>
+                <a href="/videojs/videojs-http-source-selector/videojs-http-source-selector.js?v=<%= ASSET_COMMIT %>">videojs-http-source-selector.js</a>
             </td>
 
             <td>
@@ -151,7 +151,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-mobile-ui.min.js?v=<%= ASSET_COMMIT %>">videojs-mobile-ui.min.js</a>
+                <a href="/videojs/videojs-mobile-ui/videojs-mobile-ui.js?v=<%= ASSET_COMMIT %>">videojs-mobile-ui.js</a>
             </td>
 
             <td>
@@ -165,7 +165,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-markers.min.js?v=<%= ASSET_COMMIT %>">videojs-markers.min.js</a>
+                <a href="/videojs/videojs-markers/videojs-markers.js?v=<%= ASSET_COMMIT %>">videojs-markers.js</a>
             </td>
 
             <td>
@@ -179,7 +179,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>">videojs-overlay.min.js</a>
+                <a href="/js/videojs/videojs-overlay/videojs-overlay.js?v=<%= ASSET_COMMIT %>">videojs/videojs-overlay/videojs-overlay.js</a>
             </td>
 
             <td>
@@ -193,7 +193,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-share.min.js?v=<%= ASSET_COMMIT %>">videojs-share.min.js</a>
+                <a href="/videojs/videojs-share/videojs-share.js?v=<%= ASSET_COMMIT %>">videojs-share.js</a>
             </td>
 
             <td>
@@ -207,7 +207,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-vtt-thumbnails.min.js?v=<%= ASSET_COMMIT %>">videojs-vtt-thumbnails.min.js</a>
+                <a href="/videojs/videojs-vtt-thumbnails/videojs-vtt-thumbnails.js?v=<%= ASSET_COMMIT %>">videojs-vtt-thumbnails.js</a>
             </td>
 
             <td>
@@ -235,7 +235,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-vr.js?v=<%= ASSET_COMMIT %>">videojs-vr.js</a>
+                <a href="/videojs/videojs-vr/videojs-vr.js?v=<%= ASSET_COMMIT %>">videojs-vr.js</a>
             </td>
 
             <td>
@@ -249,7 +249,7 @@
 
         <tr>
             <td>
-                <a href="/js/video.min.js?v=<%= ASSET_COMMIT %>">video.min.js</a>
+                <a href="/videojs/video.js/video.js?v=<%= ASSET_COMMIT %>">video.js</a>
             </td>
 
             <td>

videojs-dependencies.yml

@@ -0,0 +1,45 @@
+video.js:
+  version: 7.14.3
+  shasum: 0b612c09a0a81ef9bce65c710e73291cb06dc32c
+
+videojs-contrib-quality-levels:
+  version: 2.1.0
+  shasum: 046e9e21ed01043f512b83a1916001d552457083
+
+videojs-http-source-selector:
+  version: 1.1.6
+  shasum: 073aadbea0106ba6c98d6b611094dbf8554ffa1f
+
+videojs-markers:
+  version: 1.0.1
+  shasum: d7f8d804253fd587813271f8db308a22b9f7df34
+
+videojs-mobile-ui:
+  version: 0.6.1
+  shasum: 0e146c4c481cbee0729cb5e162e558b455562cd0
+
+videojs-overlay:
+  version: 2.1.4
+  shasum: 5a103b25374dbb753eb87960d8360c2e8f39cc05
+
+videojs-share:
+  version: 3.2.1
+  shasum: 0a3024b981387b9d21c058c829760a72c14b8ceb
+
+videojs-vr:
+  version: 1.8.0
+  shasum: 7f2f07f760d8a329c615acd316e49da6ee8edd34
+
+videojs-vtt-thumbnails:
+  version: 0.0.13
+  shasum: d1e7d47f4ed80bb52f5fc4f4bad4bfc871f5970f
+
+silvermine-videojs-quality-selector:
+  version: 1.1.2
+  shasum: 94033ff9ee52ba6da1263b97c9a74d5b3dfdf711
+
+# videojs-youtube-annotations:
+#   github: https://github.com/afrmtbl/videojs-youtube-annotations
+
+
+