Add support for player styles

This currently includes the following styles:

- Invidious, the default
- YouTube, using a centered play button and always visible video control bar

Implements https://github.com/omarroth/invidious/issues/670.
Supersedes https://github.com/omarroth/invidious/pull/661.

assets/css/default.css

@@ -433,3 +433,22 @@ video.video-js {
 .pure-control-group label {
   word-wrap: normal;
 }
+
+.video-js.player-style-invidious {
+  /* This is already the default */
+}
+
+.video-js.player-style-youtube .vjs-control-bar {
+   display: flex;
+   flex-direction: row;
+}
+.video-js.player-style-youtube .vjs-big-play-button {
+  /*
+    Styles copied from video-js.min.css, definition of
+    .vjs-big-play-centered .vjs-big-play-button
+  */
+  top: 50%;
+  left: 50%;
+  margin-top: -.81666em;
+  margin-left: -1.5em;
+}

src/invidious.cr

@@ -1478,6 +1478,9 @@ post "/preferences" do |env|
   speed = env.params.body["speed"]?.try &.as(String).to_f32?
   speed ||= CONFIG.default_user_preferences.speed
 
+  player_style = env.params.body["player_style"]?.try &.as(String)
+  player_style ||= CONFIG.default_user_preferences.player_style
+
   quality = env.params.body["quality"]?.try &.as(String)
   quality ||= CONFIG.default_user_preferences.quality
 
@@ -1546,6 +1549,7 @@ post "/preferences" do |env|
     locale:                 locale,
     max_results:            max_results,
     notifications_only:     notifications_only,
+    player_style:           player_style,
     quality:                quality,
     redirect_feed:          redirect_feed,
     related_videos:         related_videos,

src/invidious/helpers/helpers.cr

@@ -73,6 +73,7 @@ struct ConfigPreferences
     locale:                 {type: String, default: "en-US"},
     max_results:            {type: Int32, default: 40},
     notifications_only:     {type: Bool, default: false},
+    video_player:           {type: String, default: "invidious"},
     quality:                {type: String, default: "hd720"},
     redirect_feed:          {type: Bool, default: false},
     related_videos:         {type: Bool, default: true},

src/invidious/users.cr

@@ -138,6 +138,7 @@ struct Preferences
     locale:                 {type: String, default: CONFIG.default_user_preferences.locale, converter: ProcessString},
     max_results:            {type: Int32, default: CONFIG.default_user_preferences.max_results, converter: ClampInt},
     notifications_only:     {type: Bool, default: CONFIG.default_user_preferences.notifications_only},
+    player_style:           {type: String, default: CONFIG.default_user_preferences.player_style, converter: ProcessString},
     quality:                {type: String, default: CONFIG.default_user_preferences.quality, converter: ProcessString},
     redirect_feed:          {type: Bool, default: CONFIG.default_user_preferences.redirect_feed},
     related_videos:         {type: Bool, default: CONFIG.default_user_preferences.related_videos},

src/invidious/videos.cr

@@ -258,6 +258,7 @@ struct VideoPreferences
     listen:             Bool,
     local:              Bool,
     preferred_captions: Array(String),
+    player_style:       String,
     quality:            String,
     raw:                Bool,
     region:             String?,
@@ -1264,6 +1265,7 @@ def process_video_params(query, preferences)
   continue_autoplay = query["continue_autoplay"]?.try &.to_i?
   listen = query["listen"]? && (query["listen"] == "true" || query["listen"] == "1").to_unsafe
   local = query["local"]? && (query["local"] == "true" || query["local"] == "1").to_unsafe
+  player_style = query["player_style"]?
   preferred_captions = query["subtitles"]?.try &.split(",").map { |a| a.downcase }
   quality = query["quality"]?
   region = query["region"]?
@@ -1281,6 +1283,7 @@ def process_video_params(query, preferences)
     continue_autoplay ||= preferences.continue_autoplay.to_unsafe
     listen ||= preferences.listen.to_unsafe
     local ||= preferences.local.to_unsafe
+    player_style ||= preferences.player_style
     preferred_captions ||= preferences.captions
     quality ||= preferences.quality
     related_videos ||= preferences.related_videos.to_unsafe
@@ -1296,6 +1299,7 @@ def process_video_params(query, preferences)
   continue_autoplay ||= CONFIG.default_user_preferences.continue_autoplay.to_unsafe
   listen ||= CONFIG.default_user_preferences.listen.to_unsafe
   local ||= CONFIG.default_user_preferences.local.to_unsafe
+  player_style ||= CONFIG.default_user_preferences.player_style
   preferred_captions ||= CONFIG.default_user_preferences.captions
   quality ||= CONFIG.default_user_preferences.quality
   related_videos ||= CONFIG.default_user_preferences.related_videos.to_unsafe
@@ -1354,6 +1358,7 @@ def process_video_params(query, preferences)
     controls: controls,
     listen: listen,
     local: local,
+    player_style: player_style,
     preferred_captions: preferred_captions,
     quality: quality,
     raw: raw,

src/invidious/views/components/player.ecr

@@ -1,5 +1,5 @@
 <video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
-    id="player" class="video-js"
+    id="player" class="video-js player-style-<%= params.player_style %>"
     onmouseenter='this["data-title"]=this["title"];this["title"]=""'
     onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
     oncontextmenu='this["title"]=this["data-title"]'

src/invidious/views/preferences.ecr

@@ -112,6 +112,15 @@ function update_value(element) {
                 </select>
             </div>
 
+            <div class="pure-control-group">
+                <label for="player_style"><%= translate(locale, "Player style: ") %></label>
+                <select name="player_style" id="player_style">
+                    <% {"invidous", "youtube"}.each do |option| %>
+                        <option value="<%= option %>" <% if preferences.player_style == option %> selected <% end %>><%= translate(locale, option) %></option>
+                    <% end %>
+                </select>
+            </div>
+
             <div class="pure-control-group">
                 <label for="dark_mode"><%= translate(locale, "Dark mode: ") %></label>
                 <input name="dark_mode" id="dark_mode" type="checkbox" <% if preferences.dark_mode %>checked<% end %>>