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:
parent
66b949bed1
commit
46577fb128
@ -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;
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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},
|
||||
|
@ -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},
|
||||
|
@ -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,
|
||||
|
@ -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"]'
|
||||
|
@ -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 %>>
|
||||
|
Loading…
Reference in New Issue
Block a user