mirror of
https://github.com/iv-org/invidious
synced 2024-11-03 03:40:35 +00:00
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 {
|
.pure-control-group label {
|
||||||
word-wrap: normal;
|
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 = env.params.body["speed"]?.try &.as(String).to_f32?
|
||||||
speed ||= CONFIG.default_user_preferences.speed
|
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 = env.params.body["quality"]?.try &.as(String)
|
||||||
quality ||= CONFIG.default_user_preferences.quality
|
quality ||= CONFIG.default_user_preferences.quality
|
||||||
|
|
||||||
@ -1546,6 +1549,7 @@ post "/preferences" do |env|
|
|||||||
locale: locale,
|
locale: locale,
|
||||||
max_results: max_results,
|
max_results: max_results,
|
||||||
notifications_only: notifications_only,
|
notifications_only: notifications_only,
|
||||||
|
player_style: player_style,
|
||||||
quality: quality,
|
quality: quality,
|
||||||
redirect_feed: redirect_feed,
|
redirect_feed: redirect_feed,
|
||||||
related_videos: related_videos,
|
related_videos: related_videos,
|
||||||
|
@ -73,6 +73,7 @@ struct ConfigPreferences
|
|||||||
locale: {type: String, default: "en-US"},
|
locale: {type: String, default: "en-US"},
|
||||||
max_results: {type: Int32, default: 40},
|
max_results: {type: Int32, default: 40},
|
||||||
notifications_only: {type: Bool, default: false},
|
notifications_only: {type: Bool, default: false},
|
||||||
|
video_player: {type: String, default: "invidious"},
|
||||||
quality: {type: String, default: "hd720"},
|
quality: {type: String, default: "hd720"},
|
||||||
redirect_feed: {type: Bool, default: false},
|
redirect_feed: {type: Bool, default: false},
|
||||||
related_videos: {type: Bool, default: true},
|
related_videos: {type: Bool, default: true},
|
||||||
|
@ -138,6 +138,7 @@ struct Preferences
|
|||||||
locale: {type: String, default: CONFIG.default_user_preferences.locale, converter: ProcessString},
|
locale: {type: String, default: CONFIG.default_user_preferences.locale, converter: ProcessString},
|
||||||
max_results: {type: Int32, default: CONFIG.default_user_preferences.max_results, converter: ClampInt},
|
max_results: {type: Int32, default: CONFIG.default_user_preferences.max_results, converter: ClampInt},
|
||||||
notifications_only: {type: Bool, default: CONFIG.default_user_preferences.notifications_only},
|
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},
|
quality: {type: String, default: CONFIG.default_user_preferences.quality, converter: ProcessString},
|
||||||
redirect_feed: {type: Bool, default: CONFIG.default_user_preferences.redirect_feed},
|
redirect_feed: {type: Bool, default: CONFIG.default_user_preferences.redirect_feed},
|
||||||
related_videos: {type: Bool, default: CONFIG.default_user_preferences.related_videos},
|
related_videos: {type: Bool, default: CONFIG.default_user_preferences.related_videos},
|
||||||
|
@ -258,6 +258,7 @@ struct VideoPreferences
|
|||||||
listen: Bool,
|
listen: Bool,
|
||||||
local: Bool,
|
local: Bool,
|
||||||
preferred_captions: Array(String),
|
preferred_captions: Array(String),
|
||||||
|
player_style: String,
|
||||||
quality: String,
|
quality: String,
|
||||||
raw: Bool,
|
raw: Bool,
|
||||||
region: String?,
|
region: String?,
|
||||||
@ -1264,6 +1265,7 @@ def process_video_params(query, preferences)
|
|||||||
continue_autoplay = query["continue_autoplay"]?.try &.to_i?
|
continue_autoplay = query["continue_autoplay"]?.try &.to_i?
|
||||||
listen = query["listen"]? && (query["listen"] == "true" || query["listen"] == "1").to_unsafe
|
listen = query["listen"]? && (query["listen"] == "true" || query["listen"] == "1").to_unsafe
|
||||||
local = query["local"]? && (query["local"] == "true" || query["local"] == "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 }
|
preferred_captions = query["subtitles"]?.try &.split(",").map { |a| a.downcase }
|
||||||
quality = query["quality"]?
|
quality = query["quality"]?
|
||||||
region = query["region"]?
|
region = query["region"]?
|
||||||
@ -1281,6 +1283,7 @@ def process_video_params(query, preferences)
|
|||||||
continue_autoplay ||= preferences.continue_autoplay.to_unsafe
|
continue_autoplay ||= preferences.continue_autoplay.to_unsafe
|
||||||
listen ||= preferences.listen.to_unsafe
|
listen ||= preferences.listen.to_unsafe
|
||||||
local ||= preferences.local.to_unsafe
|
local ||= preferences.local.to_unsafe
|
||||||
|
player_style ||= preferences.player_style
|
||||||
preferred_captions ||= preferences.captions
|
preferred_captions ||= preferences.captions
|
||||||
quality ||= preferences.quality
|
quality ||= preferences.quality
|
||||||
related_videos ||= preferences.related_videos.to_unsafe
|
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
|
continue_autoplay ||= CONFIG.default_user_preferences.continue_autoplay.to_unsafe
|
||||||
listen ||= CONFIG.default_user_preferences.listen.to_unsafe
|
listen ||= CONFIG.default_user_preferences.listen.to_unsafe
|
||||||
local ||= CONFIG.default_user_preferences.local.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
|
preferred_captions ||= CONFIG.default_user_preferences.captions
|
||||||
quality ||= CONFIG.default_user_preferences.quality
|
quality ||= CONFIG.default_user_preferences.quality
|
||||||
related_videos ||= CONFIG.default_user_preferences.related_videos.to_unsafe
|
related_videos ||= CONFIG.default_user_preferences.related_videos.to_unsafe
|
||||||
@ -1354,6 +1358,7 @@ def process_video_params(query, preferences)
|
|||||||
controls: controls,
|
controls: controls,
|
||||||
listen: listen,
|
listen: listen,
|
||||||
local: local,
|
local: local,
|
||||||
|
player_style: player_style,
|
||||||
preferred_captions: preferred_captions,
|
preferred_captions: preferred_captions,
|
||||||
quality: quality,
|
quality: quality,
|
||||||
raw: raw,
|
raw: raw,
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
|
<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"]=""'
|
onmouseenter='this["data-title"]=this["title"];this["title"]=""'
|
||||||
onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
|
onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
|
||||||
oncontextmenu='this["title"]=this["data-title"]'
|
oncontextmenu='this["title"]=this["data-title"]'
|
||||||
|
@ -112,6 +112,15 @@ function update_value(element) {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</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">
|
<div class="pure-control-group">
|
||||||
<label for="dark_mode"><%= translate(locale, "Dark mode: ") %></label>
|
<label for="dark_mode"><%= translate(locale, "Dark mode: ") %></label>
|
||||||
<input name="dark_mode" id="dark_mode" type="checkbox" <% if preferences.dark_mode %>checked<% end %>>
|
<input name="dark_mode" id="dark_mode" type="checkbox" <% if preferences.dark_mode %>checked<% end %>>
|
||||||
|
Loading…
Reference in New Issue
Block a user