mirrors/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-04 13:37:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: support dash playback using video.js

Browse source
This commit is contained in:
pimlie 2024-07-07 19:18:53 +02:00
parent 2b703127c8
commit 4f09c2e2ad
20 changed files with 921 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.env.example
View file

@ -30,6 +30,8 @@ REDLIB_DEFAULT_BLUR_SPOILER=off
REDLIB_DEFAULT_SHOW_NSFW=off
# Enable blurring NSFW content by default
REDLIB_DEFAULT_BLUR_NSFW=off
# Enable Video.js player by default
REDLIB_DEFAULT_USE_VJS=off
# Enable HLS video format by default
REDLIB_DEFAULT_USE_HLS=off
# Hide HLS notification by default

1
README.md
View file

@ -397,6 +397,7 @@ Assign a default value for each user-modifiable setting by passing environment v
| `BLUR_SPOILER` | `["on", "off"]` | `off` |
| `SHOW_NSFW` | `["on", "off"]` | `off` |
| `BLUR_NSFW` | `["on", "off"]` | `off` |
| `USE_VJS` | `["on", "off"]` | `off` |
| `USE_HLS` | `["on", "off"]` | `off` |
| `HIDE_HLS_NOTIFICATION` | `["on", "off"]` | `off` |
| `AUTOPLAY_VIDEOS` | `["on", "off"]` | `off` |

3
app.json
View file

@ -38,6 +38,9 @@
"REDLIB_DEFAULT_BLUR_NSFW": {
"required": false
},
"REDLIB_USE_VJS": {
"required": false
},
"REDLIB_USE_HLS": {
"required": false
},

1
contrib/redlib.conf
View file

@ -9,6 +9,7 @@ PORT=12345
#REDLIB_DEFAULT_BLUR_SPOILER=off
#REDLIB_DEFAULT_SHOW_NSFW=off
#REDLIB_DEFAULT_BLUR_NSFW=off
#REDLIB_DEFAULT_USE_VJS=off
#REDLIB_DEFAULT_USE_HLS=off
#REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION=off
#REDLIB_DEFAULT_AUTOPLAY_VIDEOS=off

6
src/config.rs
View file

@ -60,6 +60,10 @@ pub struct Config {
#[serde(alias = "LIBREDDIT_DEFAULT_BLUR_NSFW")]
pub(crate) default_blur_nsfw: Option<String>,
#[serde(rename = "REDLIB_DEFAULT_USE_VJS")]
#[serde(alias = "LIBREDDIT_DEFAULT_USE_VJS")]
pub(crate) default_use_vjs: Option<String>,
#[serde(rename = "REDLIB_DEFAULT_USE_HLS")]
#[serde(alias = "LIBREDDIT_DEFAULT_USE_HLS")]
pub(crate) default_use_hls: Option<String>,
@ -137,6 +141,7 @@ impl Config {
default_blur_spoiler: parse("REDLIB_DEFAULT_BLUR_SPOILER"),
default_show_nsfw: parse("REDLIB_DEFAULT_SHOW_NSFW"),
default_blur_nsfw: parse("REDLIB_DEFAULT_BLUR_NSFW"),
default_use_vjs: parse("REDLIB_DEFAULT_USE_VJS"),
default_use_hls: parse("REDLIB_DEFAULT_USE_HLS"),
default_hide_hls_notification: parse("REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION"),
default_hide_awards: parse("REDLIB_DEFAULT_HIDE_AWARDS"),
@ -163,6 +168,7 @@ fn get_setting_from_config(name: &str, config: &Config) -> Option<String> {
"REDLIB_DEFAULT_BLUR_SPOILER" => config.default_blur_spoiler.clone(),
"REDLIB_DEFAULT_SHOW_NSFW" => config.default_show_nsfw.clone(),
"REDLIB_DEFAULT_BLUR_NSFW" => config.default_blur_nsfw.clone(),
"REDLIB_DEFAULT_USE_VJS" => config.default_use_vjs.clone(),
"REDLIB_DEFAULT_USE_HLS" => config.default_use_hls.clone(),
"REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION" => config.default_hide_hls_notification.clone(),
"REDLIB_DEFAULT_WIDE" => config.default_wide.clone(),

7
src/instance_info.rs
View file

@ -144,8 +144,9 @@ impl InstanceInfo {
["Blur Spoiler", &convert(&self.config.default_blur_spoiler)],
["Show NSFW", &convert(&self.config.default_show_nsfw)],
["Blur NSFW", &convert(&self.config.default_blur_nsfw)],
["Use Video.js", &convert(&self.config.default_use_vjs)],
["Use HLS", &convert(&self.config.default_use_hls)],
["Hide HLS notification", &convert(&self.config.default_hide_hls_notification)],
["Hide Video.js/HLS notification", &convert(&self.config.default_hide_hls_notification)],
["Subscriptions", &convert(&self.config.default_subscriptions)],
["Filters", &convert(&self.config.default_filters)],
])
@ -178,8 +179,9 @@ impl InstanceInfo {
Default blur Spoiler: {:?}\n
Default show NSFW: {:?}\n
Default blur NSFW: {:?}\n
Default use Video.js: {:?}\n
Default use HLS: {:?}\n
Default hide HLS notification: {:?}\n
Default hide Video.js/HLS notification: {:?}\n
Default subscriptions: {:?}\n
Default filters: {:?}\n",
self.package_name,
@ -202,6 +204,7 @@ impl InstanceInfo {
self.config.default_blur_spoiler,
self.config.default_show_nsfw,
self.config.default_blur_nsfw,
self.config.default_use_vjs,
self.config.default_use_hls,
self.config.default_hide_hls_notification,
self.config.default_subscriptions,

21
src/main.rs
View file

@ -189,7 +189,7 @@ async fn main() {
"Referrer-Policy" => "no-referrer",
"X-Content-Type-Options" => "nosniff",
"X-Frame-Options" => "DENY",
"Content-Security-Policy" => "default-src 'none'; font-src 'self'; script-src 'self' blob:; manifest-src 'self'; media-src 'self' data: blob: about:; style-src 'self' 'unsafe-inline'; base-uri 'none'; img-src 'self' data:; form-action 'self'; frame-ancestors 'none'; connect-src 'self'; worker-src blob:;"
"Content-Security-Policy" => "default-src 'none'; font-src 'self' data:; script-src 'self' blob:; manifest-src 'self'; media-src 'self' data: blob: about:; style-src 'self' 'unsafe-inline'; base-uri 'none'; img-src 'self' data:; form-action 'self'; frame-ancestors 'none'; connect-src 'self'; worker-src blob:;"
};
if let Some(expire_time) = hsts {
@ -232,10 +232,29 @@ async fn main() {
app
.at("/highlighted.js")
.get(|_| resource(include_str!("../static/highlighted.js"), "text/javascript", false).boxed());
app
.at("/video.min.js")
.get(|_| resource(include_str!("../static/video.min.js"), "text/javascript", false).boxed());
app
.at("/video-js.min.css")
.get(|_| resource(include_str!("../static/video-js.min.css"), "text/css", false).boxed());
app
.at("/videojs-contrib-quality-levels.js")
.get(|_| resource(include_str!("../static/videojs-contrib-quality-levels.js"), "text/javascript", false).boxed());
app
.at("/jb-videojs-hls-quality-selector.min.js")
.get(|_| resource(include_str!("../static/jb-videojs-hls-quality-selector.min.js"), "text/javascript", false).boxed());
app
.at("/player.js")
.get(|_| resource(include_str!("../static/player.js"), "text/javascript", false).boxed());
app
.at("/player.css")
.get(|_| resource(include_str!("../static/player-invidious.css"), "text/css", false).boxed());
// Proxy media through Redlib
app.at("/vid/:id/:size").get(|r| proxy(r, "https://v.redd.it/{id}/DASH_{size}").boxed());
app.at("/hls/:id/*path").get(|r| proxy(r, "https://v.redd.it/{id}/{path}").boxed());
app.at("/dash/:id/*path").get(|r| proxy(r, "https://v.redd.it/{id}/{path}").boxed());
app.at("/img/*path").get(|r| proxy(r, "https://i.redd.it/{path}").boxed());
app.at("/thumb/:point/:id").get(|r| proxy(r, "https://{point}.thumbs.redditmedia.com/{id}").boxed());
app.at("/emoji/:id/:name").get(|r| proxy(r, "https://emoji.redditmedia.com/{id}/{name}").boxed());

3
src/settings.rs
View file

@ -19,7 +19,7 @@ struct SettingsTemplate {
// CONSTANTS
const PREFS: [&str; 17] = [
const PREFS: [&str; 18] = [
"theme",
"front_page",
"layout",
@ -29,6 +29,7 @@ const PREFS: [&str; 17] = [
"blur_spoiler",
"show_nsfw",
"blur_nsfw",
"use_vjs",
"use_hls",
"hide_hls_notification",
"autoplay_videos",

45
src/utils.rs
View file

@ -165,7 +165,8 @@ pub struct Flags {
#[derive(Debug)]
pub struct Media {
pub url: String,
pub alt_url: String,
pub hls_url: String,
pub dash_url: String,
pub width: i64,
pub height: i64,
pub poster: String,
@ -182,23 +183,26 @@ impl Media {
let crosspost_parent_media = &data["crosspost_parent_list"][0]["secure_media"]["reddit_video"];
// If post is a video, return the video
let (post_type, url_val, alt_url_val) = if data_preview["fallback_url"].is_string() {
let (post_type, url_val, hls_url_val, dash_url_val) = if data_preview["fallback_url"].is_string() {
(
if data_preview["is_gif"].as_bool().unwrap_or(false) { "gif" } else { "video" },
&data_preview["fallback_url"],
Some(&data_preview["hls_url"]),
Some(&data_preview["dash_url"]),
)
} else if secure_media["fallback_url"].is_string() {
(
if secure_media["is_gif"].as_bool().unwrap_or(false) { "gif" } else { "video" },
&secure_media["fallback_url"],
Some(&secure_media["hls_url"]),
Some(&secure_media["dash_url"]),
)
} else if crosspost_parent_media["fallback_url"].is_string() {
(
if crosspost_parent_media["is_gif"].as_bool().unwrap_or(false) { "gif" } else { "video" },
&crosspost_parent_media["fallback_url"],
Some(&crosspost_parent_media["hls_url"]),
Some(&crosspost_parent_media["dash_url"]),
)
} else if data["post_hint"].as_str().unwrap_or("") == "image" {
// Handle images, whether GIFs or pics
@ -207,34 +211,35 @@ impl Media {
if mp4.is_object() {
// Return the mp4 if the media is a gif
("gif", &mp4["source"]["url"], None)
("gif", &mp4["source"]["url"], None, None)
} else {
// Return the picture if the media is an image
if data["domain"] == "i.redd.it" {
("image", &data["url"], None)
("image", &data["url"], None, None)
} else {
("image", &preview["source"]["url"], None)
("image", &preview["source"]["url"], None, None)
}
}
} else if data["is_self"].as_bool().unwrap_or_default() {
// If type is self, return permalink
("self", &data["permalink"], None)
("self", &data["permalink"], None, None)
} else if data["is_gallery"].as_bool().unwrap_or_default() {
// If this post contains a gallery of images
gallery = GalleryMedia::parse(&data["gallery_data"]["items"], &data["media_metadata"]);
("gallery", &data["url"], None)
("gallery", &data["url"], None, None)
} else if data["is_reddit_media_domain"].as_bool().unwrap_or_default() && data["domain"] == "i.redd.it" {
// If this post contains a reddit media (image) URL.
("image", &data["url"], None)
("image", &data["url"], None, None)
} else {
// If type can't be determined, return url
("link", &data["url"], None)
("link", &data["url"], None, None)
};
let source = &data["preview"]["images"][0]["source"];
let alt_url = alt_url_val.map_or(String::new(), |val| format_url(val.as_str().unwrap_or_default()));
let hls_url = hls_url_val.map_or(String::new(), |val| format_url(val.as_str().unwrap_or_default()));
let dash_url = dash_url_val.map_or(String::new(), |val| format_url(val.as_str().unwrap_or_default()));
let download_name = if post_type == "image" || post_type == "gif" || post_type == "video" {
let permalink_base = url_path_basename(data["permalink"].as_str().unwrap_or_default());
@ -249,7 +254,8 @@ impl Media {
post_type.to_string(),
Self {
url: format_url(url_val.as_str().unwrap_or_default()),
alt_url,
hls_url,
dash_url,
// Note: in the data["is_reddit_media_domain"] path above
// width and height will be 0.
width: source["width"].as_i64().unwrap_or_default(),
@ -396,7 +402,8 @@ impl Post {
post_type,
thumbnail: Media {
url: format_url(val(post, "thumbnail").as_str()),
alt_url: String::new(),
hls_url: String::new(),
dash_url: String::new(),
width: data["thumbnail_width"].as_i64().unwrap_or_default(),
height: data["thumbnail_height"].as_i64().unwrap_or_default(),
poster: String::new(),
@ -598,6 +605,7 @@ pub struct Preferences {
pub blur_nsfw: String,
pub hide_hls_notification: String,
pub hide_sidebar_and_summary: String,
pub use_vjs: String,
pub use_hls: String,
pub autoplay_videos: String,
pub fixed_navbar: String,
@ -635,6 +643,7 @@ impl Preferences {
show_nsfw: setting(req, "show_nsfw"),
hide_sidebar_and_summary: setting(req, "hide_sidebar_and_summary"),
blur_nsfw: setting(req, "blur_nsfw"),
use_vjs: setting(req, "use_vjs"),
use_hls: setting(req, "use_hls"),
hide_hls_notification: setting(req, "hide_hls_notification"),
autoplay_videos: setting(req, "autoplay_videos"),
@ -735,7 +744,8 @@ pub async fn parse_post(post: &Value) -> Post {
media,
thumbnail: Media {
url: format_url(val(post, "thumbnail").as_str()),
alt_url: String::new(),
hls_url: String::new(),
dash_url: String::new(),
width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
poster: String::new(),
@ -836,6 +846,7 @@ static REGEX_URL_NP: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://np\.reddit
static REGEX_URL_PLAIN: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://reddit\.com/(.*)").unwrap());
static REGEX_URL_VIDEOS: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://v\.redd\.it/(.*)/DASH_([0-9]{2,4}(\.mp4|$|\?source=fallback))").unwrap());
static REGEX_URL_VIDEOS_HLS: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://v\.redd\.it/(.+)/(HLSPlaylist\.m3u8.*)$").unwrap());
static REGEX_URL_VIDEOS_DASH: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://v\.redd\.it/(.+)/(DASHPlaylist\.mpd.*)$").unwrap());
static REGEX_URL_IMAGES: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://i\.redd\.it/(.*)").unwrap());
static REGEX_URL_THUMBS_A: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://a\.thumbs\.redditmedia\.com/(.*)").unwrap());
static REGEX_URL_THUMBS_B: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://b\.thumbs\.redditmedia\.com/(.*)").unwrap());
@ -868,7 +879,7 @@ pub fn format_url(url: &str) -> String {
}
};
( $first_fn:expr, $($other_fns:expr), *) => {
( $first_fn:expr $(, $other_fns:expr)* $(,)?) => {
{
let result = $first_fn;
if result.is_empty() {
@ -887,7 +898,11 @@ pub fn format_url(url: &str) -> String {
"old.reddit.com" => capture(&REGEX_URL_OLD, "/", 1),
"np.reddit.com" => capture(&REGEX_URL_NP, "/", 1),
"reddit.com" => capture(&REGEX_URL_PLAIN, "/", 1),
"v.redd.it" => chain!(capture(&REGEX_URL_VIDEOS, "/vid/", 2), capture(&REGEX_URL_VIDEOS_HLS, "/hls/", 2)),
"v.redd.it" => chain!(
capture(&REGEX_URL_VIDEOS, "/vid/", 2),
capture(&REGEX_URL_VIDEOS_HLS, "/hls/", 2),
capture(&REGEX_URL_VIDEOS_DASH, "/dash/", 2)
),
"i.redd.it" => capture(&REGEX_URL_IMAGES, "/img/", 1),
"a.thumbs.redditmedia.com" => capture(&REGEX_URL_THUMBS_A, "/thumb/a/", 1),
"b.thumbs.redditmedia.com" => capture(&REGEX_URL_THUMBS_B, "/thumb/b/", 1),

2
static/jb-videojs-hls-quality-selector.min.js vendored Normal file
View file

@ -0,0 +1,2 @@
/*! @name jb-videojs-hls-quality-selector @version 2.0.2 @license MIT */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).jbVideojsHlsQualitySelector=e(t.videojs)}(this,(function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=e(t);const l=i.default.getComponent("MenuButton"),s=i.default.getComponent("Menu"),n=i.default.getComponent("Component"),u=i.default.dom;class o extends l{constructor(t){super(t,{title:t.localize("Quality"),name:"QualityButton"})}createItems(){return[]}createMenu(){const t=new s(this.player_,{menuButton:this});if(t.addClass("hls-quality-button"),this.hideThreshold_=0,this.options_.title){const i=u.createEl("li",{className:"vjs-menu-title",innerHTML:(e=this.options_.title,"string"!=typeof e?e:e.charAt(0).toUpperCase()+e.slice(1)),tabIndex:-1}),l=new n(this.player_,{el:i});this.hideThreshold_+=1,t.addItem(l)}var e;if(this.items=this.createItems(),this.items)for(let e=0;e<this.items.length;e++)t.addItem(this.items[e]);return t}}const a=i.default.getComponent("MenuItem");class r extends a{constructor(t,e,i,l){super(t,{label:e.label,selectable:!0,selected:e.selected||!1}),this.item=e,this.qualityButton=i,this.plugin=l}handleClick(){for(let t=0;t<this.qualityButton.items.length;++t)this.qualityButton.items[t].selected(!1);this.plugin.setQuality(this.item.value),this.selected(!0)}}const h={},c=i.default.registerPlugin||i.default.plugin;class d{constructor(t,e){this.player=t,this.config=e,this.player.qualityLevels&&(this.createQualityButton(),this.bindPlayerEvents())}getHls(){return this.player.tech({IWillNotUseThisInPlugins:!0}).vhs}bindPlayerEvents(){this.player.qualityLevels().on("addqualitylevel",this.onAddQualityLevel.bind(this))}createQualityButton(){const t=this.player;this._qualityButton=new o(t);const e=t.controlBar.children().length-2,i=t.controlBar.addChild(this._qualityButton,{componentClass:"qualitySelector"},this.config.placementIndex||e);if(i.addClass("vjs-quality-selector"),this.config.displayCurrentQuality)this.setButtonInnerText(this.player.localize("Auto"));else{const t=` ${this.config.vjsIconClass||"vjs-icon-hd"}`;i.menuButton_.$(".vjs-icon-placeholder").className+=t}i.removeClass("vjs-hidden")}setButtonInnerText(t){this._qualityButton.menuButton_.$(".vjs-icon-placeholder").innerHTML=t}getQualityMenuItem(t){const e=this.player;return new r(e,t,this._qualityButton,this)}onAddQualityLevel(){const t=this.player,e=t.qualityLevels().levels_||[],i=[];for(let t=0;t<e.length;++t){const{width:l,height:s}=e[t],n=l>s?s:l;if(n&&!i.filter((t=>t.item&&t.item.value===n)).length){const t=this.getQualityMenuItem.call(this,{label:n+"p",value:n});i.push(t)}}i.sort(((t,e)=>"object"!=typeof t||"object"!=typeof e||t.item.value<e.item.value?-1:t.item.value>e.item.value?1:0)),i.push(this.getQualityMenuItem.call(this,{label:t.localize("Auto"),value:"auto",selected:!0})),this._qualityButton&&(this._qualityButton.createItems=function(){return i},this._qualityButton.update())}setQuality(t){const e=this.player.qualityLevels();this._currentQuality=t,this.config.displayCurrentQuality&&this.setButtonInnerText("auto"===t?this.player.localize("Auto"):`${t}p`);for(let i=0;i<e.length;++i){const{width:l,height:s}=e[i],n=l>s?s:l;e[i].enabled=n===t||"auto"===t}this._qualityButton.unpressButton()}getCurrentQuality(){return this._currentQuality||"auto"}}const y=function(t){this.ready((()=>{((t,e)=>{t.addClass("vjs-hls-quality-selector"),t.hlsQualitySelector=new d(t,e)})(this,i.default.obj.merge(h,t))}))};return c("hlsQualitySelector",y),y.VERSION="2.0.2",y}));

264
static/player-invidious.css Normal file
View file

@ -0,0 +1,264 @@
/* Youtube player style */
.video-js.player-style-youtube .vjs-progress-control {
height: 0;
}
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
position: absolute;
right: 0;
left: 0;
width: 100%;
margin: 0;
}
.video-js.player-style-youtube .vjs-control-bar {
background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0,0.5));
}
.video-js.player-style-youtube .vjs-slider {
background-color: rgba(255,255,255,0.2);
}
.video-js.player-style-youtube .vjs-load-progress > div {
background-color: rgba(255,255,255,0.5);
}
.video-js.player-style-youtube .vjs-play-progress {
background-color: red;
}
.video-js.player-style-youtube .vjs-progress-control:hover .vjs-progress-holder {
font-size: 15px;
}
.video-js.player-style-youtube .vjs-control-bar > .vjs-spacer {
flex: 1;
order: 2;
}
.video-js.player-style-youtube .vjs-play-progress .vjs-time-tooltip {
display: none;
}
.video-js.player-style-youtube .vjs-play-progress::before {
color: red;
font-size: 0.85em;
display: none;
}
.video-js.player-style-youtube .vjs-progress-holder:hover .vjs-play-progress::before {
display: unset;
}
.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: -0.81666em;
margin-left: -1.5em;
}
.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu {
margin-bottom: 2em;
}
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px;
margin-bottom: 10px;}
ul.vjs-menu-content::-webkit-scrollbar {
display: none;
}
.vjs-user-inactive {
cursor: none;
}
.video-js .vjs-text-track-display > div > div > div {
background-color: rgba(0, 0, 0, 0.75) !important;
border-radius: 9px !important;
padding: 5px !important;
}
.vjs-play-control,
.vjs-volume-panel,
.vjs-current-time,
.vjs-time-control,
.vjs-duration,
.vjs-progress-control,
.vjs-remaining-time {
order: 1;
}
.vjs-captions-button {
order: 2;
}
.vjs-audio-button {
order: 3;
}
.vjs-quality-selector,
.video-js .vjs-http-source-selector {
order: 4;
}
.vjs-playback-rate {
order: 5;
}
.vjs-share-control {
order: 6;
}
.vjs-fullscreen-control {
order: 7;
}
.vjs-playback-rate > .vjs-menu {
width: 50px;
}
.vjs-control-bar {
display: flex;
flex-direction: row;
scrollbar-width: none;
}
.vjs-control-bar::-webkit-scrollbar {
display: none;
}
.video-js .vjs-icon-cog {
font-size: 18px;
}
.video-js .vjs-control-bar,
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: rgba(35, 35, 35, 0.75);
}
.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover {
background-color: rgba(255, 255, 255, 0.75);
color: rgba(49, 49, 51, 0.75);
}
.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover {
background-color: rgba(0, 182, 240, 0.75);
}
/* Progress Bar */
.video-js .vjs-slider {
background-color: rgba(15, 15, 15, 0.5);
}
.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
background: rgba(87, 87, 88, 1);
}
.video-js .vjs-slider:hover,
.video-js button:hover {
color: rgba(0, 182, 240, 1);
}
.video-js.player-style-invidious .vjs-play-progress {
background-color: rgba(0, 182, 240, 1);
}
/* Overlay */
.video-js .vjs-overlay {
background-color: rgba(35, 35, 35, 0.75) !important;
}
.video-js .vjs-overlay * {
color: rgba(255, 255, 255, 1) !important;
text-align: center;
}
/* ProgressBar marker */
.vjs-marker {
background-color: rgba(255, 255, 255, 1);
z-index: 0;
}
/* Big "Play" Button */
.video-js .vjs-big-play-button {
background-color: rgba(35, 35, 35, 0.5);
}
.video-js:hover .vjs-big-play-button {
background-color: rgba(35, 35, 35, 0.75);
}
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
display: block;
}
.video-js .vjs-time-divider {
min-width: 0px;
padding-left: 0px;
padding-right: 0px;
}
.video-js .vjs-poster {
background-size: cover;
object-fit: cover;
}
.player-dimensions.vjs-fluid {
padding-top: 82vh;
}
video.video-js {
position: absolute;
height: 100%;
}
#player-container {
position: relative;
padding-left: 0;
padding-right: 0;
margin-left: 1em;
margin-right: 1em;
padding-bottom: 82vh;
height: 0;
}
.mobile-operations-bar {
display: flex;
position: absolute;
top: 0;
right: 1px !important;
left: initial !important;
width: initial !important;
}
.mobile-operations-bar ul {
position: absolute !important;
bottom: unset !important;
top: 1.5em;
}
@media screen and (max-width: 700px) {
.video-js .vjs-share {
justify-content: unset;
}
}
@media screen and (max-width: 650px) {
.vjs-modal-dialog-content {
overflow-x: hidden;
}
}

121
static/player.js Normal file
View file

@ -0,0 +1,121 @@
const codecs = {
dash: {
mimeType: 'application/dash+xml',
isSupported: 'MediaSource' in window
},
hls: {
mimeType: 'application/vnd.apple.mpegurl',
isSupported: undefined
}
}
document.addEventListener('DOMContentLoaded', () => {
var observer = new IntersectionObserver(handleVideoIntersect, {
rootMargin: '100px',
});
var videoElements = document.querySelectorAll(".post_media_content > video[data-dash]");
// Check if native hls playback is supported, if so we are probably on an apple device
var videoEl = videoElements[0];
if (videoEl) {
var canPlay = videoEl.canPlayType(codecs.hls.mimeType)
// Maybe is f.e. returned by Firefox on iOS
codecs.hls.isSupported = canPlay === 'probably' || canPlay === 'maybe';
}
videoElements.forEach((el) => observer.observe(el));
});
function handleVideoIntersect(entries) {
entries.forEach((entry) => {
var videoEl = entry.target;
var player = videojs.getPlayer(videoEl);
if (entry.intersectionRatio > 0) {
if (!player) {
initPlayer(videoEl);
}
} else {
if (player) {
player.pause();
}
}
});
}
function initPlayer(videoEl, forceAutoplay = false) {
var srcDash = videoEl.dataset.dash;
var srcHls = videoEl.dataset.hls;
delete videoEl.dataset.dash;
delete videoEl.dataset.hls;
if (!srcDash) {
return;
}
const autoplay = forceAutoplay || videoEl.classList.contains('autoplay');
if (srcHls && codecs.hls.isSupported) {
// Try to play HLS video with native playback
videoEl.src = srcHls;
videoEl.controls = true;
videoEl.addEventListener('error', (err) => {
if (err.target.error.code === 4) { // Failed to init decoder
codecs.hls.isSupported = false;
// Re-init player but try to use dash instead, probably
// canPlayType returned 'maybe' and after trying to play
// the video it wasn't supported after all
videoEl.dataset.dash = srcDash;
initPlayer(videoEl, true);
}
});
if (autoplay) {
videoEl.play();
}
return;
}
player = videojs(videoEl, {
autoplay,
controls: true,
controlBar: {
children: [
'playToggle',
'progressControl',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'volumePanel',
'audioTrackButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle'
]
},
html5: {
vhs: {
enableLowInitialPlaylist: true,
limitRenditionByPlayerDimensions: true,
useBandwidthFromLocalStorage: true,
}
},
plugins: {
hlsQualitySelector: {
displayCurrentQuality: true
}
}
});
if (srcDash && codecs.dash.isSupported) {
player.src({
src: srcDash,
type: codecs.dash.mimeType
});
}
return player;
}

56
static/style.css
View file

@ -107,14 +107,20 @@
outline: 2px solid var(--accent);
}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, select, input {
accent-color: var(--accent);
margin: 0;
html, body {
color: var(--text);
font-family: "Inter", sans-serif;
}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, select, input {
margin: 0;
}
input {
accent-color: var(--accent);
}
html.fixed_navbar {
scroll-padding-top: 50px;
}
@ -499,7 +505,7 @@ aside {
/* Feeds */
#feeds {
.feeds {
position: relative;
border-radius: 5px;
border: var(--panel-border);
@ -510,11 +516,11 @@ aside {
display: inline-block;
}
#feeds > summary {
.feeds > summary {
padding: 8px 15px;
}
#feed_list {
.feed_list {
position: absolute;
display: flex;
min-width: 100%;
@ -527,24 +533,24 @@ aside {
z-index: 1;
}
#feed_list > p {
.feed_list > p {
font-size: 13px;
opacity: 0.5;
padding: 5px 20px;
margin-top: 10px;
}
#feed_list > a {
.feed_list > a {
padding: 10px 20px;
transition: 0.2s background;
}
#feed_list > .selected {
.feed_list > .selected {
background-color: var(--accent);
color: var(--foreground);
}
#feed_list > a:not(.selected):hover {
.feed_list > a:not(.selected):hover {
background-color: var(--foreground);
}
@ -950,15 +956,37 @@ a.search_subreddit:hover {
}
.post_media_video {
width: auto;
height: auto;
max-width: 100%;
max-height: 512px;
display: block;
margin: auto;
}
.post_media_image.short svg, .post_media_image.short img{
video.post_media_video {
width: auto;
height: auto;
}
.post_media_video.video-js {
background-color: inherit;
position: relative;
font-size: 12px;
}
.post_media_video.video-js ul {
font-size: 11px;
}
.post_media_video.video-js .vjs-time-control {
display: block;
padding: 0 0.3em;
}
.post_media_video.video-js .vjs-time-divider {
min-width: auto;
}
.post_media_image.short svg, .post_media_image.short img {
width: auto;
height: auto;
max-width: 100%;

1
static/video-js.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

52
static/video.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

285
static/videojs-contrib-quality-levels.js Normal file
View file

@ -0,0 +1,285 @@
/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
typeof define === 'function' && define.amd ? define(['video.js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsContribQualityLevels = factory(global.videojs));
})(this, (function (videojs) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation) {
let level = this; // eslint-disable-line
level.id = representation.id;
level.label = level.id;
level.width = representation.width;
level.height = representation.height;
level.bitrate = representation.bandwidth;
level.frameRate = representation.frameRate;
level.enabled_ = representation.enabled;
Object.defineProperty(level, 'enabled', {
/**
* Get whether the QualityLevel is enabled.
*
* @return {boolean} True if the QualityLevel is enabled.
*/
get() {
return level.enabled_();
},
/**
* Enable or disable the QualityLevel.
*
* @param {boolean} enable true to enable QualityLevel, false to disable.
*/
set(enable) {
level.enabled_(enable);
}
});
return level;
}
}
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
class QualityLevelList extends videojs__default["default"].EventTarget {
/**
* Creates a QualityLevelList.
*/
constructor() {
super();
let list = this; // eslint-disable-line
list.levels_ = [];
list.selectedIndex_ = -1;
/**
* Get the index of the currently selected QualityLevel.
*
* @returns {number} The index of the selected QualityLevel. -1 if none selected.
* @readonly
*/
Object.defineProperty(list, 'selectedIndex', {
get() {
return list.selectedIndex_;
}
});
/**
* Get the length of the list of QualityLevels.
*
* @returns {number} The length of the list.
* @readonly
*/
Object.defineProperty(list, 'length', {
get() {
return list.levels_.length;
}
});
list[Symbol.iterator] = () => list.levels_.values();
return list;
}
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation) {
let qualityLevel = this.getQualityLevelById(representation.id);
// Do not add duplicate quality levels
if (qualityLevel) {
return qualityLevel;
}
const index = this.levels_.length;
qualityLevel = new QualityLevel(representation);
if (!('' + index in this)) {
Object.defineProperty(this, index, {
get() {
return this.levels_[index];
}
});
}
this.levels_.push(qualityLevel);
this.trigger({
qualityLevel,
type: 'addqualitylevel'
});
return qualityLevel;
}
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel) {
let removed = null;
for (let i = 0, l = this.length; i < l; i++) {
if (this[i] === qualityLevel) {
removed = this.levels_.splice(i, 1)[0];
if (this.selectedIndex_ === i) {
this.selectedIndex_ = -1;
} else if (this.selectedIndex_ > i) {
this.selectedIndex_--;
}
break;
}
}
if (removed) {
this.trigger({
qualityLevel,
type: 'removequalitylevel'
});
}
return removed;
}
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id) {
for (let i = 0, l = this.length; i < l; i++) {
const level = this[i];
if (level.id === id) {
return level;
}
}
return null;
}
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose() {
this.selectedIndex_ = -1;
this.levels_.length = 0;
}
}
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
QualityLevelList.prototype.allowedEvents_ = {
change: 'change',
addqualitylevel: 'addqualitylevel',
removequalitylevel: 'removequalitylevel'
};
// emulate attribute EventHandler support to allow for feature detection
for (const event in QualityLevelList.prototype.allowedEvents_) {
QualityLevelList.prototype['on' + event] = null;
}
var version = "4.1.0";
/**
* Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
* event handlers.
*
* @param {Player} player Player object.
* @param {Object} options Plugin options object.
* @return {QualityLevelList} a list of QualityLevels
*/
const initPlugin = function (player, options) {
const originalPluginFn = player.qualityLevels;
const qualityLevelList = new QualityLevelList();
const disposeHandler = function () {
qualityLevelList.dispose();
player.qualityLevels = originalPluginFn;
player.off('dispose', disposeHandler);
};
player.on('dispose', disposeHandler);
player.qualityLevels = () => qualityLevelList;
player.qualityLevels.VERSION = version;
return qualityLevelList;
};
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
const qualityLevels = function (options) {
return initPlugin(this, videojs__default["default"].obj.merge({}, options));
};
// Register the plugin with video.js.
videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
// Include the version number.
qualityLevels.VERSION = version;
return qualityLevels;
}));

1
templates/base.html
View file

@ -24,6 +24,7 @@
<link rel="manifest" type="application/json" href="/manifest.json">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/style.css?v={{ env!("CARGO_PKG_VERSION") }}">
{% call utils::render_video_js() %}
{% endblock %}
</head>
<body class="

17
templates/settings.html
View file

@ -87,16 +87,25 @@
<input type="checkbox" name="hide_sidebar_and_summary" {% if prefs.hide_sidebar_and_summary == "on" %}checked{% endif %}>
</div>
<div class="prefs-group">
<label for="use_hls">Use HLS for videos</label>
<details id="feeds">
<label for="use_vjs">Use Video.js for videos</label>
<details class="feeds">
<summary>Why?</summary>
<div id="feed_list" class="helper">Reddit videos require JavaScript (via HLS.js) to be enabled to be played with audio. Therefore, this toggle lets you either use Redlib JS-free or utilize this feature.</div>
<div class="feed_list helper">Reddit videos require JavaScript to be played with audio. Therefore, this toggle lets you either use Redlib JS-free (without audio) or with.</div>
</details>
<input type="hidden" value="off" name="use_vjs">
<input type="checkbox" name="use_vjs" id="use_vjs" {% if prefs.use_vjs == "on" %}checked{% endif %}>
</div>
<div class="prefs-group">
<label for="use_hls">Use HLS for videos</label>
<details class="feeds">
<summary>Why?</summary>
<div class="feed_list helper">See comment for Video.js which is recommended. Redlib previously only supported HLS using hls.js, therefore it's still provided. HLS support using hls.js might be removed in a future release.</div>
</details>
<input type="hidden" value="off" name="use_hls">
<input type="checkbox" name="use_hls" id="use_hls" {% if prefs.use_hls == "on" %}checked{% endif %}>
</div>
<div class="prefs-group">
<label for="hide_hls_notification">Hide notification about possible HLS usage</label>
<label for="hide_hls_notification">Hide notification about possible Video.js/HLS usage</label>
<input type="hidden" value="off" name="hide_hls_notification">
<input type="checkbox" name="hide_hls_notification" id="hide_hls_notification" {% if prefs.hide_hls_notification == "on" %}checked{% endif %}>
</div>

4
templates/subreddit.html
View file

@ -64,10 +64,6 @@
{% call utils::post_in_list(post) %}
{% endif %}
{% endfor %}
{% if prefs.use_hls == "on" %}
<script src="/hls.min.js"></script>
<script src="/playHLSVideo.js"></script>
{% endif %}
</div>
{% endif %}

107
templates/utils.html
View file

@ -38,9 +38,9 @@
{%- endmacro %}
{% macro sub_list(current) -%}
<details id="feeds">
<details class="feeds">
<summary>Feeds</summary>
<div id="feed_list">
<div class="feed_list">
<p>MAIN FEEDS</p>
<a href="/">Home</a>
<a href="/r/popular">Popular</a>
@ -55,12 +55,6 @@
</details>
{%- endmacro %}
{% macro render_hls_notification(redirect_url) -%}
{% if post.post_type == "video" && !post.media.alt_url.is_empty() && prefs.hide_hls_notification != "on" %}
<div class="post_notification"><p><a href="/settings/update/?use_hls=on&redirect={{ redirect_url }}">Enable HLS</a> to view with audio, or <a href="/settings/update/?hide_hls_notification=on&redirect={{ redirect_url }}">disable this notification</a></p></div>
{% endif %}
{%- endmacro %}
{% macro post(post) -%}
{% set post_should_be_blurred = post.flags.spoiler && prefs.blur_spoiler=="on" -%}
<!-- POST CONTENT -->
@ -120,21 +114,7 @@
</a>
</div>
{% else if post.post_type == "video" || post.post_type == "gif" %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<script src="/hls.min.js"></script>
<div class="post_media_content">
<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}{%if post_should_be_blurred %} post_nsfw_blur{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls>
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
</div>
<script src="/playHLSVideo.js"></script>
{% else %}
<div class="post_media_content">
<video class="post_media_video{%if post_should_be_blurred %} post_nsfw_blur{% endif %}" src="{{ post.media.url }}" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %} loop><a href={{ post.media.url }}>Video</a></video>
</div>
{% call render_hls_notification(post.permalink[1..]) %}
{% endif %}
{% call render_video_html(post, "post") %}
{% else if post.post_type == "gallery" %}
<div class="gallery">
{% for image in post.gallery -%}
@ -211,7 +191,7 @@
{% macro post_in_list(post) -%}
{% set post_should_be_blurred = (post.flags.nsfw && prefs.blur_nsfw=="on") || (post.flags.spoiler && prefs.blur_spoiler=="on") -%}
<div class="post {% if post.flags.stickied %}stickied{% endif %}" id="{{ post.id }}">
<div id="{{ post.id }}" class="post{% if post.flags.stickied %} stickied{% endif %}">
<p class="post_header">
{% let community -%}
{% if post.community.starts_with("u_") -%}
@ -263,19 +243,7 @@
</a>
</div>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<div class="post_media_content">
<video class="post_media_video short {%if post_should_be_blurred %}post_nsfw_blur{% endif %} {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none">
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
</div>
{% else %}
<div class="post_media_content">
<video class="post_media_video short {%if post_should_be_blurred %}post_nsfw_blur{% endif %}" src="{{ post.media.url }}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
</div>
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
{% endif %}
{% call render_video_html(post, "list") %}
{% else if post.post_type != "self" %}
<a class="post_thumbnail {% if post.thumbnail.url.is_empty() %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}" rel="nofollow">
{% if post.thumbnail.url.is_empty() %}
@ -367,3 +335,68 @@
{% when None %}
{% endmatch %}
{%- endmacro %}
{% macro render_video_audio_notification(redirect_url) -%}
{% if prefs.hide_hls_notification != "on" && redirect_url != "" %}
<div class="post_notification">
<p>Enable <a href="/settings/update/?use_vjs=on&redirect={{ redirect_url }}">Video.js</a> (recommended) or <a href="/settings/update/?use_hls=on&redirect={{ redirect_url }}">HLS</a> to view with audio,
or <a href="/settings/update/?hide_hls_notification=on&redirect={{ redirect_url }}">disable this notification</a>
</p>
</div>
{% endif %}
{%- endmacro %}
{% macro render_video_js() -%}
{% if prefs.use_vjs == "on" -%}
<link href="/video-js.min.css" rel="stylesheet">
<link href="/player.css" rel="stylesheet">
<script src="/video.min.js" defer></script>
<script src="/videojs-contrib-quality-levels.js" defer></script>
<script src="/jb-videojs-hls-quality-selector.min.js" defer></script>
<script src="/player.js" defer></script>
{% else if prefs.use_hls == "on" -%}
<script src="/hls.min.js" defer></script>
<script src="/playHLSVideo.js" defer></script>
{% endif %}
{%- endmacro %}
{% macro render_video_html(post, view_type) -%}
<br/>
{% if post.post_type == "video" || post.post_type == "gif" %}
{% set use_vjs = prefs.use_vjs == "on" && !post.media.dash_url.is_empty() %}
{% set use_hls = !use_vjs && prefs.use_hls == "on" && !post.media.hls_url.is_empty() %}
<div class="post_media_content">
<video
id="vid_{{ post.id }}"
class="post_media_video short{% if use_vjs %} video-js player-style-invidious{% endif %}{% if post_should_be_blurred %} post_nsfw_blur{% endif %}{% if prefs.autoplay_videos == "on" %} autoplay{% endif -%}"
poster="{{ post.media.poster }}"
preload="none"
{% if post.media.width > 0 && post.media.height > 0 -%}
width="{{ post.media.width }}"
height="{{ post.media.height }}"
{% endif -%}
{% if use_vjs -%}
{# dont show controls to hide switch from native player to video.js #}
data-dash="{{ post.media.dash_url }}"
data-hls="{{ post.media.hls_url }}"
{% else %}
controls
{% endif -%}
>
{% if use_hls -%}
<source src="{{ post.media.hls_url }}" type="application/vnd.apple.mpegurl" />
{% endif -%}
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
</div>
{% if !use_vjs && !use_hls && prefs.hide_hls_notification != "on" %}
{% if view_type == "list" %}
{% set post_id = post.id.clone() %}
{% call render_video_audio_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post_id)) %}
{% else if view_type == "post" %}
{% call render_video_audio_notification(post.permalink[1..]) %}
{% endif %}
{% endif %}
{% endif %}
{%- endmacro %}