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.
This commit is contained in:
Leon Klingele 2019-08-09 02:00:22 +02:00
parent 66b949bed1
commit 46577fb128
No known key found for this signature in database
GPG key ID: 0C8AF48831EEC211
7 changed files with 40 additions and 1 deletions

View file

@ -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;
}

View file

@ -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,

View file

@ -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},

View file

@ -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},

View file

@ -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,

View file

@ -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"]'

View file

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