feat(frontend): hide chapter controls if media has no chapters

open-dynaMIX · Jan 4, 2020 · 8974f94 · 8974f94
1 parent 50b6284
commit 8974f94
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 27 deletions.
diff --git a/webui-page/index.html b/webui-page/index.html
@@ -67,9 +67,9 @@ <h3 id="album">Album</h3>
           <td>Audio-delay:</td>
           <td id="audio-delay"></td>
         </tr>
-        <tr id="chapterInfo">
+        <tr class="chapter">
           <td>Chapter:</td>
-          <td id="chapter"></td>
+          <td id="chapterContent"></td>
         </tr>
       </table>
     </div>
@@ -109,12 +109,12 @@ <h3 id="album">Album</h3>
       </div>
     </div>
 
-    <div onClick="send('add_chapter', '-1')" class="button left blue chapterButton chapterButtonSub">
+    <div onClick="send('add_chapter', '-1')" class="button left blue chapter">
       <div class="content icon-content">
         <i class="fas fa-step-backward"></i>
       </div>
     </div>
-    <div onClick="send('add_chapter', '1')" class="button right blue chapterButton chapterButtonAdd">
+    <div onClick="send('add_chapter', '1')" class="button right blue chapter">
       <div class="content icon-content">
         <i class="fas fa-step-forward"></i>
       </div>

diff --git a/webui-page/webui.css b/webui-page/webui.css
@@ -60,9 +60,8 @@ h3 {
   font-size: 150px;
 }
 
-.button.disabled, .button.disabled:hover, .button.disabled:active {
-  filter: brightness(30%);
-  cursor: auto;
+.hidden {
+  display: none;
 }
 
 .button:hover {

diff --git a/webui-page/webui.js b/webui-page/webui.js
@@ -366,31 +366,19 @@ function playlist_loop_cycle() {
 }
 
 function setChapter(chapters, chapter) {
-  var chapterButtons = document.getElementsByClassName('chapterButton');
-  var chapterAddButtons = document.getElementsByClassName('chapterButtonAdd');
-  var chapterSubButtons = document.getElementsByClassName('chapterButtonSub');
-  var chapterTd = document.getElementById('chapter');
-  var chapterInfo = document.getElementById('chapterInfo');
+  var chapterElements = document.getElementsByClassName('chapter');
+  var chapterContent = document.getElementById('chapterContent');
   if (chapters === 0) {
-    [].slice.call(chapterButtons).forEach(function (div) {
-      div.onclick = null;
-      div.classList.add('disabled');
+    [].slice.call(chapterElements).forEach(function (div) {
+      div.classList.add('hidden');
     });
-    chapterTd.innerText = "0/0";
-    chapterInfo.style.display = "none";
+    chapterContent.innerText = "0/0";
   } else {
-    [].slice.call(chapterAddButtons).forEach(function (div) {
-      div.onclick = function() {send('add_chapter', '1')};
-      div.classList.remove('disabled');
+    [].slice.call(chapterElements).forEach(function (div) {
+      div.classList.remove('hidden');
     });
-    [].slice.call(chapterSubButtons).forEach(function (div) {
-      div.onclick = function() {send('add_chapter', '-1')};
-      div.classList.remove('disabled');
-    });
-    chapterTd.innerText = chapter + 1 + "/" + chapters;
-    chapterInfo.style.display = "";
+    chapterContent.innerText = chapter + 1 + "/" + chapters;
   }
-
 }
 
 function setLoop(loopFile, loopPlaylist) {