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.

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 %>>