3 files changed, 87 insertions, 10 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 80bf6a20..88ec6ef1 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -145,6 +145,24 @@ img.thumbnail {
   object-fit: cover;
 }
 
+div.watched-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,.4);
+}
+
+div.watched-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  width: 100%;
+  background-color: red;
+}
+
 .length {
   z-index: 100;
   position: absolute;
@@ -490,13 +508,17 @@ hr {
 }
 
 /* Description Expansion Styling*/
-#descexpansionbutton {
-  display: none
+#descexpansionbutton,
+#music-desc-expansion {
+  display: none;
 }
 
 #descexpansionbutton ~ div {
   overflow: hidden;
-  height: 8.3em;
+}
+
+#descexpansionbutton:not(:checked) ~ div {
+  max-height: 8.3em;
 }
 
 #descexpansionbutton:checked ~ div {
@@ -509,7 +531,8 @@ hr {
   margin-top: 20px;
 }
 
-label[for="descexpansionbutton"]:hover {
+label[for="descexpansionbutton"]:hover,
+label[for="music-desc-expansion"]:hover {
   cursor: pointer;
 }
 
@@ -521,14 +544,38 @@ h4,
 h5,
 p,
 #descriptionWrapper,
-#description-box {
-	unicode-bidi: plaintext;
-	text-align: start;
+#description-box,
+#music-description-box {
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 #descriptionWrapper {
-	max-width: 600px;
-	white-space: pre-wrap;
+  max-width: 600px;
+  white-space: pre-wrap;
+}
+
+#music-description-box {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ #music-description-box {
+  display: block;
+}
+
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down {
+  display: inline;
+}
+
+/* Select all the music items except the first one */
+.music-item + .music-item {
+  border-top: 1px solid #ffffff;
 }
 
 /* Center the "invidious" logo on the search page */
@@ -539,3 +586,7 @@ p,
 
 /* Wider settings name to less word wrap */
 .pure-form-aligned .pure-control-group label { width: 19em; }
+
+.channel-emoji {
+  margin: 0 2px;
+}
diff --git a/assets/js/themes.js b/assets/js/themes.js
index 76767d5f..84a9f6d9 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -22,9 +22,11 @@ function setTheme(theme) {
     if (theme === THEME_DARK) {
         toggle_theme.children[0].className = 'icon ion-ios-sunny';
         document.body.className = 'dark-theme';
-    } else {
+    } else if (theme === THEME_LIGHT) {
         toggle_theme.children[0].className = 'icon ion-ios-moon';
         document.body.className = 'light-theme';
+    } else {
+        document.body.className = 'no-theme';
     }
 }
 
diff --git a/assets/js/watched_indicator.js b/assets/js/watched_indicator.js
new file mode 100644
index 00000000..e971cd80
--- /dev/null
+++ b/assets/js/watched_indicator.js
@@ -0,0 +1,24 @@
+'use strict';
+var save_player_pos_key = 'save_player_pos';
+
+function get_all_video_times() {
+    return helpers.storage.get(save_player_pos_key) || {};
+}
+
+document.querySelectorAll('.watched-indicator').forEach(function (indicator) {
+    var watched_part = get_all_video_times()[indicator.dataset.id];
+    var total = parseInt(indicator.dataset.length, 10);
+    if (watched_part === undefined) {
+        watched_part = total;
+    }
+    var percentage = Math.round((watched_part / total) * 100);
+
+    if (percentage < 5) {
+        percentage = 5;
+    }
+    if (percentage > 90) {
+        percentage = 100;
+    }
+
+    indicator.style.width = percentage + '%';
+});