Add settings helper for HLS toggle

Cargo.lock

@@ -608,7 +608,7 @@ checksum = "8521a1b57e76b1ec69af7599e75e38e7b7fad6610f037db8c79b127201b5d119"
 
 [[package]]
 name = "libreddit"
-version = "0.19.0"
+version = "0.19.1"
 dependencies = [
  "askama",
  "async-recursion",

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"
 

static/style.css

@@ -1191,6 +1191,12 @@ input[type="submit"] {
 	color: var(--accent);
 }
 
+.helper {
+	padding: 10px;
+	width: 250px;
+	background: var(--highlighted) !important;
+}
+
 /* Markdown */
 
 .md {

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>