From 1cccef12a404b2eb866ad64532654e11e8a1e5f2 Mon Sep 17 00:00:00 2001
From: spikecodes <19519553+spikecodes@users.noreply.github.com>
Date: Tue, 23 Nov 2021 22:43:25 -0800
Subject: [PATCH] Add settings helper for HLS toggle

---
 Cargo.lock              | 2 +-
 Cargo.toml              | 2 +-
 static/style.css        | 6 ++++++
 templates/settings.html | 7 ++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a148983..dd06672 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -608,7 +608,7 @@ checksum = "8521a1b57e76b1ec69af7599e75e38e7b7fad6610f037db8c79b127201b5d119"
 
 [[package]]
 name = "libreddit"
-version = "0.19.0"
+version = "0.19.1"
 dependencies = [
  "askama",
  "async-recursion",
diff --git a/Cargo.toml b/Cargo.toml
index 92d2587..1ce7a72 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -3,7 +3,7 @@ name = "libreddit"
 description = " Alternative private front-end to Reddit"
 license = "AGPL-3.0"
 repository = "https://github.com/spikecodes/libreddit"
-version = "0.19.0"
+version = "0.19.1"
 authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"]
 edition = "2018"
 
diff --git a/static/style.css b/static/style.css
index c1edc5e..8d22a52 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1191,6 +1191,12 @@ input[type="submit"] {
 	color: var(--accent);
 }
 
+.helper {
+	padding: 10px;
+	width: 250px;
+	background: var(--highlighted) !important;
+}
+
 /* Markdown */
 
 .md {
diff --git a/templates/settings.html b/templates/settings.html
index 42b1045..0ca2b64 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -60,7 +60,12 @@
 				<input type="checkbox" name="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}>
 			</div>
 			<div id="use_hls">
-				<label for="use_hls">Use HLS for videos</label>
+				<label for="use_hls">Use HLS for videos
+					<details id="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 Libreddit JS-free or utilize this feature.</div>
+					</details>
+				</label>
 				<input type="hidden" value="off" name="use_hls">
 				<input type="checkbox" name="use_hls" {% if prefs.use_hls == "on" %}checked{% endif %}>
 			</div>