iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

HLS video playback (#182)

Browse Source 
* HLS video playback

Signed-off-by: Adrian Lebioda <adrianlebioda@gmail.com>

* Add LibreJS compliance

* Locally host hls.js

* Notification about HLS under videos that support it

Signed-off-by: Adrian Lebioda <adrianlebioda@gmail.com>

* Use .contains() instead of .find() == None

* Make list of preferences constant

* Change headers_keys from Vector into Array

* Fix incorrect detecting of # in paths

* Remove trailing-slash-appending if statement

* Change HLS notification styling

Co-authored-by: spikecodes <19519553+spikecodes@users.noreply.github.com>
This commit is contained in:
Adrian Lebioda 2021-05-10 01:25:52 +00:00 committed by GitHub
parent dc9fbc1a05
commit 928907086c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 265 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/client.rs
View File

@ -13,10 +13,10 @@ pub async fn proxy(req: Request<Body>, format: &str) -> Result<Response<Body>, S
url = url.replace(&format!("{{{}}}", name), value); url = url.replace(&format!("{{{}}}", name), value);
} }
stream(&url).await stream(&url, &req).await
} }
async fn stream(url: &str) -> Result<Response<Body>, String> { async fn stream(url: &str, req: &Request<Body>) -> Result<Response<Body>, String> {
// First parameter is target URL (mandatory). // First parameter is target URL (mandatory).
let url = Uri::from_str(url).map_err(|_| "Couldn't parse URL".to_string())?; let url = Uri::from_str(url).map_err(|_| "Couldn't parse URL".to_string())?;
@ -26,8 +26,20 @@ async fn stream(url: &str) -> Result<Response<Body>, String> {
// Build the hyper client from the HTTPS connector. // Build the hyper client from the HTTPS connector.
let client: client::Client<_, hyper::Body> = client::Client::builder().build(https); let client: client::Client<_, hyper::Body> = client::Client::builder().build(https);
let mut builder = Request::get(url);
// Copy useful headers from original request
let headers = req.headers();
for &key in &["Range", "If-Modified-Since", "Cache-Control"] {
if let Some(value) = headers.get(key) {
builder = builder.header(key, value);
}
}
let stream_request = builder.body(Body::default()).expect("stream");
client client
.get(url) .request(stream_request)
.await .await
.map(|mut res| { .map(|mut res| {
let mut rm = |key: &str| res.headers_mut().remove(key); let mut rm = |key: &str| res.headers_mut().remove(key);
@ -40,6 +52,8 @@ async fn stream(url: &str) -> Result<Response<Body>, String> {
rm("x-cdn-client-region"); rm("x-cdn-client-region");
rm("x-cdn-name"); rm("x-cdn-name");
rm("x-cdn-server-region"); rm("x-cdn-server-region");
rm("x-reddit-cdn");
rm("x-reddit-video-features");
res res
}) })

10
src/main.rs
View File

@ -139,7 +139,7 @@ async fn main() {
"Referrer-Policy" => "no-referrer", "Referrer-Policy" => "no-referrer",
"X-Content-Type-Options" => "nosniff", "X-Content-Type-Options" => "nosniff",
"X-Frame-Options" => "DENY", "X-Frame-Options" => "DENY",
"Content-Security-Policy" => "default-src 'none'; manifest-src 'self'; media-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; img-src 'self' data:; form-action 'self'; frame-ancestors 'none';" "Content-Security-Policy" => "default-src 'none'; 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 { if let Some(expire_time) = hsts {
@ -158,9 +158,16 @@ async fn main() {
app.at("/logo.png").get(|_| pwa_logo().boxed()); app.at("/logo.png").get(|_| pwa_logo().boxed());
app.at("/touch-icon-iphone.png").get(|_| iphone_logo().boxed()); app.at("/touch-icon-iphone.png").get(|_| iphone_logo().boxed());
app.at("/apple-touch-icon.png").get(|_| iphone_logo().boxed()); app.at("/apple-touch-icon.png").get(|_| iphone_logo().boxed());
app
.at("/playHLSVideo.js")
.get(|_| resource(include_str!("../static/playHLSVideo.js"), "text/javascript", false).boxed());
app
.at("/hls.min.js")
.get(|_| resource(include_str!("../static/hls.min.js"), "text/javascript", false).boxed());
// Proxy media through Libreddit // Proxy media through Libreddit
app.at("/vid/:id/:size").get(|r| proxy(r, "https://v.redd.it/{id}/DASH_{size}").boxed()); 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("/img/:id").get(|r| proxy(r, "https://i.redd.it/{id}").boxed()); app.at("/img/:id").get(|r| proxy(r, "https://i.redd.it/{id}").boxed());
app.at("/thumb/:point/:id").get(|r| proxy(r, "https://{point}.thumbs.redditmedia.com/{id}").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()); app.at("/emoji/:id/:name").get(|r| proxy(r, "https://emoji.redditmedia.com/{id}/{name}").boxed());
@ -184,6 +191,7 @@ async fn main() {
// Configure settings // Configure settings
app.at("/settings").get(|r| settings::get(r).boxed()).post(|r| settings::set(r).boxed()); app.at("/settings").get(|r| settings::get(r).boxed()).post(|r| settings::set(r).boxed());
app.at("/settings/restore").get(|r| settings::restore(r).boxed()); app.at("/settings/restore").get(|r| settings::restore(r).boxed());
app.at("/settings/update").get(|r| settings::update(r).boxed());
// Subreddit services // Subreddit services
app.at("/r/:sub").get(|r| subreddit::community(r).boxed()); app.at("/r/:sub").get(|r| subreddit::community(r).boxed());

1
src/post.rs
View File

@ -106,6 +106,7 @@ async fn parse_post(json: &serde_json::Value) -> Post {
media, media,
thumbnail: Media { thumbnail: Media {
url: format_url(val(post, "thumbnail").as_str()), url: format_url(val(post, "thumbnail").as_str()),
alt_url: String::new(),
width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(), width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(), height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
poster: "".to_string(), poster: "".to_string(),

4
src/search.rs
View File

@ -31,6 +31,7 @@ struct SearchTemplate {
sub: String, sub: String,
params: SearchParams, params: SearchParams,
prefs: Preferences, prefs: Preferences,
url: String,
} }
// SERVICES // SERVICES
@ -56,6 +57,8 @@ pub async fn find(req: Request<Body>) -> Result<Response<Body>, String> {
Vec::new() Vec::new()
}; };
let url = String::from(req.uri().path_and_query().map_or("", |val| val.as_str()));
match Post::fetch(&path, String::new()).await { match Post::fetch(&path, String::new()).await {
Ok((posts, after)) => template(SearchTemplate { Ok((posts, after)) => template(SearchTemplate {
posts, posts,
@ -70,6 +73,7 @@ pub async fn find(req: Request<Body>) -> Result<Response<Body>, String> {
restrict_sr: param(&path, "restrict_sr"), restrict_sr: param(&path, "restrict_sr"),
}, },
prefs: Preferences::new(req), prefs: Preferences::new(req),
url,
}), }),
Err(msg) => error(req, msg).await, Err(msg) => error(req, msg).await,
} }

45
src/settings.rs
View File

@ -16,6 +16,21 @@ struct SettingsTemplate {
prefs: Preferences, prefs: Preferences,
} }
// CONSTANTS
const PREFS: [&str; 10] = [
"theme",
"front_page",
"layout",
"wide",
"comment_sort",
"post_sort",
"show_nsfw",
"use_hls",
"hide_hls_notification",
"subscriptions",
];
// FUNCTIONS // FUNCTIONS
// Retrieve cookies from request "Cookie" header // Retrieve cookies from request "Cookie" header
@ -50,9 +65,7 @@ pub async fn set(req: Request<Body>) -> Result<Response<Body>, String> {
let mut res = redirect("/settings".to_string()); let mut res = redirect("/settings".to_string());
let names = vec!["theme", "front_page", "layout", "wide", "comment_sort", "post_sort", "show_nsfw"]; for &name in &PREFS {
for name in names {
match form.get(name) { match form.get(name) {
Some(value) => res.insert_cookie( Some(value) => res.insert_cookie(
Cookie::build(name.to_owned(), value.to_owned()) Cookie::build(name.to_owned(), value.to_owned())
@ -68,8 +81,7 @@ pub async fn set(req: Request<Body>) -> Result<Response<Body>, String> {
Ok(res) Ok(res)
} }
// Set cookies using response "Set-Cookie" header fn set_cookies_method(req: Request<Body>, remove_cookies: bool) -> Response<Body> {
pub async fn restore(req: Request<Body>) -> Result<Response<Body>, String> {
// Split the body into parts // Split the body into parts
let (parts, _) = req.into_parts(); let (parts, _) = req.into_parts();
@ -85,16 +97,14 @@ pub async fn restore(req: Request<Body>) -> Result<Response<Body>, String> {
let form = url::form_urlencoded::parse(query).collect::<HashMap<_, _>>(); let form = url::form_urlencoded::parse(query).collect::<HashMap<_, _>>();
let names = vec!["theme", "front_page", "layout", "wide", "comment_sort", "post_sort", "show_nsfw", "subscriptions"];
let path = match form.get("redirect") { let path = match form.get("redirect") {
Some(value) => format!("/{}/", value), Some(value) => format!("/{}", value.replace("%26", "&").replace("%23", "#")),
None => "/".to_string(), None => "/".to_string(),
}; };
let mut res = redirect(path); let mut res = redirect(path);
for name in names { for &name in &PREFS {
match form.get(name) { match form.get(name) {
Some(value) => res.insert_cookie( Some(value) => res.insert_cookie(
Cookie::build(name.to_owned(), value.to_owned()) Cookie::build(name.to_owned(), value.to_owned())
@ -103,9 +113,22 @@ pub async fn restore(req: Request<Body>) -> Result<Response<Body>, String> {
.expires(OffsetDateTime::now_utc() + Duration::weeks(52)) .expires(OffsetDateTime::now_utc() + Duration::weeks(52))
.finish(), .finish(),
), ),
None => res.remove_cookie(name.to_string()), None => {
if remove_cookies {
res.remove_cookie(name.to_string())
}
}
}; };
} }
Ok(res) res
}
// Set cookies using response "Set-Cookie" header
pub async fn restore(req: Request<Body>) -> Result<Response<Body>, String> {
Ok(set_cookies_method(req, true))
}
pub async fn update(req: Request<Body>) -> Result<Response<Body>, String> {
Ok(set_cookies_method(req, false))
} }

4
src/subreddit.rs
View File

@ -16,6 +16,7 @@ struct SubredditTemplate {
sort: (String, String), sort: (String, String),
ends: (String, String), ends: (String, String),
prefs: Preferences, prefs: Preferences,
url: String,
} }
#[derive(Template)] #[derive(Template)]
@ -79,12 +80,15 @@ pub async fn community(req: Request<Body>) -> Result<Response<Body>, String> {
Subreddit::default() Subreddit::default()
}; };
let url = String::from(req.uri().path_and_query().map_or("", |val| val.as_str()));
template(SubredditTemplate { template(SubredditTemplate {
sub, sub,
posts, posts,
sort: (sort, param(&path, "t")), sort: (sort, param(&path, "t")),
ends: (param(&path, "after"), after), ends: (param(&path, "after"), after),
prefs: Preferences::new(req), prefs: Preferences::new(req),
url,
}) })
} }
Err(msg) => match msg.as_str() { Err(msg) => match msg.as_str() {

3
src/user.rs
View File

@ -16,6 +16,7 @@ struct UserTemplate {
sort: (String, String), sort: (String, String),
ends: (String, String), ends: (String, String),
prefs: Preferences, prefs: Preferences,
url: String,
} }
// FUNCTIONS // FUNCTIONS
@ -33,6 +34,7 @@ pub async fn profile(req: Request<Body>) -> Result<Response<Body>, String> {
// Request user posts/comments from Reddit // Request user posts/comments from Reddit
let posts = Post::fetch(&path, "Comment".to_string()).await; let posts = Post::fetch(&path, "Comment".to_string()).await;
let url = String::from(req.uri().path_and_query().map_or("", |val| val.as_str()));
match posts { match posts {
Ok((posts, after)) => { Ok((posts, after)) => {
@ -45,6 +47,7 @@ pub async fn profile(req: Request<Body>) -> Result<Response<Body>, String> {
sort: (sort, param(&path, "t")), sort: (sort, param(&path, "t")),
ends: (param(&path, "after"), after), ends: (param(&path, "after"), after),
prefs: Preferences::new(req), prefs: Preferences::new(req),
url,
}) })
} }
// If there is an error show error page // If there is an error show error page

69
src/utils.rs
View File

@ -75,6 +75,7 @@ pub struct Flags {
pub struct Media { pub struct Media {
pub url: String, pub url: String,
pub alt_url: String,
pub width: i64, pub width: i64,
pub height: i64, pub height: i64,
pub poster: String, pub poster: String,
@ -85,12 +86,28 @@ impl Media {
let mut gallery = Vec::new(); let mut gallery = Vec::new();
// If post is a video, return the video // If post is a video, return the video
let (post_type, url_val) = if data["preview"]["reddit_video_preview"]["fallback_url"].is_string() { let (post_type, url_val, alt_url_val) = if data["preview"]["reddit_video_preview"]["fallback_url"].is_string() {
// Return reddit video // Return reddit video
("video", &data["preview"]["reddit_video_preview"]["fallback_url"]) (
if data["preview"]["reddit_video_preview"]["is_gif"].as_bool().unwrap_or(false) {
"gif"
} else {
"video"
},
&data["preview"]["reddit_video_preview"]["fallback_url"],
Some(&data["preview"]["reddit_video_preview"]["hls_url"]),
)
} else if data["secure_media"]["reddit_video"]["fallback_url"].is_string() { } else if data["secure_media"]["reddit_video"]["fallback_url"].is_string() {
// Return reddit video // Return reddit video
("video", &data["secure_media"]["reddit_video"]["fallback_url"]) (
if data["preview"]["reddit_video_preview"]["is_gif"].as_bool().unwrap_or(false) {
"gif"
} else {
"video"
},
&data["secure_media"]["reddit_video"]["fallback_url"],
Some(&data["secure_media"]["reddit_video"]["hls_url"]),
)
} else if data["post_hint"].as_str().unwrap_or("") == "image" { } else if data["post_hint"].as_str().unwrap_or("") == "image" {
// Handle images, whether GIFs or pics // Handle images, whether GIFs or pics
let preview = &data["preview"]["images"][0]; let preview = &data["preview"]["images"][0];
@ -98,26 +115,26 @@ impl Media {
if mp4.is_object() { if mp4.is_object() {
// Return the mp4 if the media is a gif // Return the mp4 if the media is a gif
("gif", &mp4["source"]["url"]) ("gif", &mp4["source"]["url"], None)
} else { } else {
// Return the picture if the media is an image // Return the picture if the media is an image
if data["domain"] == "i.redd.it" { if data["domain"] == "i.redd.it" {
("image", &data["url"]) ("image", &data["url"], None)
} else { } else {
("image", &preview["source"]["url"]) ("image", &preview["source"]["url"], None)
} }
} }
} else if data["is_self"].as_bool().unwrap_or_default() { } else if data["is_self"].as_bool().unwrap_or_default() {
// If type is self, return permalink // If type is self, return permalink
("self", &data["permalink"]) ("self", &data["permalink"], None)
} else if data["is_gallery"].as_bool().unwrap_or_default() { } else if data["is_gallery"].as_bool().unwrap_or_default() {
// If this post contains a gallery of images // If this post contains a gallery of images
gallery = GalleryMedia::parse(&data["gallery_data"]["items"], &data["media_metadata"]); gallery = GalleryMedia::parse(&data["gallery_data"]["items"], &data["media_metadata"]);
("gallery", &data["url"]) ("gallery", &data["url"], None)
} else { } else {
// If type can't be determined, return url // If type can't be determined, return url
("link", &data["url"]) ("link", &data["url"], None)
}; };
let source = &data["preview"]["images"][0]["source"]; let source = &data["preview"]["images"][0]["source"];
@ -128,10 +145,13 @@ impl Media {
format_url(url_val.as_str().unwrap_or_default()) format_url(url_val.as_str().unwrap_or_default())
}; };
let alt_url = alt_url_val.map_or(String::new(), |val| format_url(val.as_str().unwrap_or_default()));
( (
post_type.to_string(), post_type.to_string(),
Self { Self {
url, url,
alt_url,
width: source["width"].as_i64().unwrap_or_default(), width: source["width"].as_i64().unwrap_or_default(),
height: source["height"].as_i64().unwrap_or_default(), height: source["height"].as_i64().unwrap_or_default(),
poster: format_url(source["url"].as_str().unwrap_or_default()), poster: format_url(source["url"].as_str().unwrap_or_default()),
@ -259,6 +279,7 @@ impl Post {
post_type, post_type,
thumbnail: Media { thumbnail: Media {
url: format_url(val(post, "thumbnail").as_str()), url: format_url(val(post, "thumbnail").as_str()),
alt_url: String::new(),
width: data["thumbnail_width"].as_i64().unwrap_or_default(), width: data["thumbnail_width"].as_i64().unwrap_or_default(),
height: data["thumbnail_height"].as_i64().unwrap_or_default(), height: data["thumbnail_height"].as_i64().unwrap_or_default(),
poster: "".to_string(), poster: "".to_string(),
@ -365,6 +386,8 @@ pub struct Preferences {
pub layout: String, pub layout: String,
pub wide: String, pub wide: String,
pub show_nsfw: String, pub show_nsfw: String,
pub hide_hls_notification: String,
pub use_hls: String,
pub comment_sort: String, pub comment_sort: String,
pub post_sort: String, pub post_sort: String,
pub subscriptions: Vec<String>, pub subscriptions: Vec<String>,
@ -379,6 +402,8 @@ impl Preferences {
layout: cookie(&req, "layout"), layout: cookie(&req, "layout"),
wide: cookie(&req, "wide"), wide: cookie(&req, "wide"),
show_nsfw: cookie(&req, "show_nsfw"), show_nsfw: cookie(&req, "show_nsfw"),
use_hls: cookie(&req, "use_hls"),
hide_hls_notification: cookie(&req, "hide_hls_notification"),
comment_sort: cookie(&req, "comment_sort"), comment_sort: cookie(&req, "comment_sort"),
post_sort: cookie(&req, "post_sort"), post_sort: cookie(&req, "post_sort"),
subscriptions: cookie(&req, "subscriptions").split('+').map(String::from).filter(|s| !s.is_empty()).collect(), subscriptions: cookie(&req, "subscriptions").split('+').map(String::from).filter(|s| !s.is_empty()).collect(),
@ -439,8 +464,32 @@ pub fn format_url(url: &str) -> String {
.unwrap_or_default() .unwrap_or_default()
}; };
macro_rules! chain {
() => {
{
String::new()
}
};
( $first_fn:expr, $($other_fns:expr), *) => {
{
let result = $first_fn;
if result.is_empty() {
chain!($($other_fns,)*)
}
else
{
result
}
}
};
}
match domain { match domain {
"v.redd.it" => capture(r"https://v\.redd\.it/(.*)/DASH_([0-9]{2,4}(\.mp4|$))", "/vid/", 2), "v.redd.it" => chain!(
capture(r"https://v\.redd\.it/(.*)/DASH_([0-9]{2,4}(\.mp4|$))", "/vid/", 2),
capture(r"https://v\.redd\.it/(.+)/(HLSPlaylist\.m3u8.*)$", "/hls/", 2)
),
"i.redd.it" => capture(r"https://i\.redd\.it/(.*)", "/img/", 1), "i.redd.it" => capture(r"https://i\.redd\.it/(.*)", "/img/", 1),
"a.thumbs.redditmedia.com" => capture(r"https://a\.thumbs\.redditmedia\.com/(.*)", "/thumb/a/", 1), "a.thumbs.redditmedia.com" => capture(r"https://a\.thumbs\.redditmedia\.com/(.*)", "/thumb/a/", 1),
"b.thumbs.redditmedia.com" => capture(r"https://b\.thumbs\.redditmedia\.com/(.*)", "/thumb/b/", 1), "b.thumbs.redditmedia.com" => capture(r"https://b\.thumbs\.redditmedia\.com/(.*)", "/thumb/b/", 1),

5
static/hls.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

77
static/playHLSVideo.js Normal file
View File

@ -0,0 +1,77 @@
// @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
(function () {
if (Hls.isSupported()) {
var videoSources = document.querySelectorAll("video source[type='application/vnd.apple.mpegurl']");
videoSources.forEach(function (source) {
var playlist = source.src;
var oldVideo = source.parentNode;
var autoplay = oldVideo.classList.contains("hls_autoplay");
// If HLS is supported natively then don't use hls.js
if (oldVideo.canPlayType(source.type)) {
if (autoplay) {
oldVideo.play();
}
return;
}
// Replace video with copy that will have all "source" elements removed
var newVideo = oldVideo.cloneNode(true);
var allSources = newVideo.querySelectorAll("source");
allSources.forEach(function (source) {
source.remove();
});
// Empty source to enable play event
newVideo.src = "about:blank";
oldVideo.parentNode.replaceChild(newVideo, oldVideo);
function initializeHls() {
newVideo.removeEventListener('play', initializeHls);
var hls = new Hls({ autoStartLoad: false });
hls.loadSource(playlist);
hls.attachMedia(newVideo);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
hls.loadLevel = hls.levels.length - 1;
hls.startLoad();
newVideo.play();
});
hls.on(Hls.Events.ERROR, function (event, data) {
var errorType = data.type;
var errorFatal = data.fatal;
if (errorFatal) {
switch (errorType) {
case Hls.ErrorType.NETWORK_ERROR:
hls.startLoad();
break;
case Hls.ErrorType.MEDIA_ERROR:
hls.recoverMediaError();
break;
default:
hls.destroy();
break;
}
}
console.error("HLS error", data);
});
}
newVideo.addEventListener('play', initializeHls);
if (autoplay) {
newVideo.play();
}
});
} else {
var videos = document.querySelectorAll("video.hls_autoplay");
videos.forEach(function (video) {
video.setAttribute("autoplay", "");
});
}
})();
// @license-end

13
static/style.css
View File

@ -664,6 +664,7 @@ a.search_subreddit:hover {
"post_score post_title post_thumbnail" 1fr "post_score post_title post_thumbnail" 1fr
"post_score post_media post_thumbnail" auto "post_score post_media post_thumbnail" auto
"post_score post_body post_thumbnail" auto "post_score post_body post_thumbnail" auto
"post_score post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto "post_score post_footer post_thumbnail" auto
/ minmax(40px, auto) minmax(0, 1fr) fit-content(min(20%, 152px)); / minmax(40px, auto) minmax(0, 1fr) fit-content(min(20%, 152px));
} }
@ -706,6 +707,17 @@ a.search_subreddit:hover {
grid-area: post_title; grid-area: post_title;
} }
.post_notification {
grid-area: post_notification;
margin: 5px 15px;
text-align: center;
font-size: 12px;
}
.post_notification a {
text-decoration: underline;
}
.post_flair { .post_flair {
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--background);
@ -1256,6 +1268,7 @@ td, th {
"post_title post_title post_thumbnail" 1fr "post_title post_title post_thumbnail" 1fr
"post_media post_media post_thumbnail" auto "post_media post_media post_thumbnail" auto
"post_body post_body post_thumbnail" auto "post_body post_body post_thumbnail" auto
"post_notification post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto "post_score post_footer post_thumbnail" auto
/ auto 1fr fit-content(min(20%, 152px)); / auto 1fr fit-content(min(20%, 152px));
} }

10
templates/post.html
View File

@ -68,7 +68,17 @@
</svg> </svg>
</a> </a>
{% else if post.post_type == "video" || post.post_type == "gif" %} {% 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>
<video class="post_media_video short hls_autoplay" width="{{ post.media.width }}" height="{{ post.media.height }}" 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>
<script src="/playHLSVideo.js"></script>
{% else %}
<video class="post_media_video" src="{{ post.media.url }}" controls autoplay loop><a href={{ post.media.url }}>Video</a></video> <video class="post_media_video" src="{{ post.media.url }}" controls autoplay loop><a href={{ post.media.url }}>Video</a></video>
{% call utils::render_hls_notification(post.permalink[1..]) %}
{% endif %}
{% else if post.post_type == "gallery" %} {% else if post.post_type == "gallery" %}
<div class="gallery"> <div class="gallery">
{% for image in post.gallery -%} {% for image in post.gallery -%}

12
templates/settings.html
View File

@ -52,6 +52,14 @@
<label for="show_nsfw">Show NSFW posts:</label> <label for="show_nsfw">Show NSFW posts:</label>
<input type="checkbox" name="show_nsfw" {% if prefs.show_nsfw == "on" %}checked{% endif %}> <input type="checkbox" name="show_nsfw" {% if prefs.show_nsfw == "on" %}checked{% endif %}>
</div> </div>
<div id="use_hls">
<label for="use_hls">Use HLS for videos</label>
<input type="checkbox" name="use_hls" {% if prefs.use_hls == "on" %}checked{% endif %}>
</div>
<div id="hide_hls_notification">
<label for="hide_hls_notification">Hide notification about possible HLS usage</label>
<input type="checkbox" name="hide_hls_notification" {% if prefs.hide_hls_notification == "on" %}checked{% endif %}>
</div>
<input id="save" type="submit" value="Save"> <input id="save" type="submit" value="Save">
</div> </div>
</form> </form>
@ -68,10 +76,10 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div id="settings_note"> <div id="settings_note">
<p><b>Note:</b> settings and subscriptions are saved in browser cookies. Clearing your cookies will reset them.</p><br> <p><b>Note:</b> settings and subscriptions are saved in browser cookies. Clearing your cookies will reset them.</p><br>
<p>You can restore your current settings and subscriptions after clearing your cookies using <a href="/settings/restore/?theme={{ prefs.theme }}&front_page={{ prefs.front_page }}&layout={{ prefs.layout }}&wide={{ prefs.wide }}&comment_sort={{ prefs.comment_sort }}&show_nsfw={{ prefs.show_nsfw }}&subscriptions={{ prefs.subscriptions.join("%2B") }}">this link</a>.</p> <p>You can restore your current settings and subscriptions after clearing your cookies using <a href="/settings/restore/?theme={{ prefs.theme }}&front_page={{ prefs.front_page }}&layout={{ prefs.layout }}&wide={{ prefs.wide }}&comment_sort={{ prefs.comment_sort }}&show_nsfw={{ prefs.show_nsfw }}&use_hls={{ prefs.use_hls }}&hide_hls_notification={{ prefs.hide_hls_notification }}&subscriptions={{ prefs.subscriptions.join("%2B") }}">this link</a>.</p>
</div> </div>
</div> </div>

4
templates/subreddit.html
View File

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

16
templates/utils.html
View File

@ -55,8 +55,14 @@
{% endif %} {% endif %}
{%- endmacro %} {%- 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 HSL</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_in_list(post) -%} {% macro post_in_list(post) -%}
<div class="post {% if post.flags.stickied %}stickied{% endif %}"> <div class="post {% if post.flags.stickied %}stickied{% endif %}" id="{{ post.id }}">
<p class="post_header"> <p class="post_header">
{% let community -%} {% let community -%}
{% if post.community.starts_with("u_") -%} {% if post.community.starts_with("u_") -%}
@ -95,7 +101,15 @@
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %} {% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %}
<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" controls loop autoplay><a href={{ post.media.url }}>Video</a></video> <video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" controls loop autoplay><a href={{ post.media.url }}>Video</a></video>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "video" %} {% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "video" %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<video class="post_media_video short" width="{{ post.media.width }}" height="{{ post.media.height }}" 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>
{% else %}
<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls autoplay><a href={{ post.media.url }}>Video</a></video> <video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls autoplay><a href={{ post.media.url }}>Video</a></video>
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26"), post.id)) %}
{% endif %}
{% else if post.post_type != "self" %} {% 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 %}"> <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 %}">
{% if post.thumbnail.url.is_empty() %} {% if post.thumbnail.url.is_empty() %}