fix: rollback to popper.js v1, fix playmode dropdown, and now volume popover can be closed by clicking outside.

media/file.py

@@ -56,7 +56,9 @@ class FileItem(BaseItem):
             super().__init__(from_dict)
             self.artist = from_dict['artist']
             self.thumbnail = from_dict['thumbnail']
-            if not self.validate():
+            try:
+                self.validate()
+            except ValidationFailedError:
                 self.ready = "failed"
 
         self.type = "file"

static/css/custom.css

@@ -122,6 +122,7 @@
     font-size: 20px;
     border-radius: 4px;
     display: none;
+    /* margin-bottom: 5px; */
 }
 #volume-popover[data-show] {
     display: flex;
@@ -132,9 +133,11 @@
 #volume-popover-arrow,
 #volume-popover-arrow::before {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   z-index: -1;
+  top: 16px;
+  left: 46px;
 }
 
 #volume-popover-arrow::before {

static/js/custom.js

@@ -749,18 +749,15 @@ const volume_popover_div = document.querySelector("#volume-popover");
 let volume_popover_instance = null;
 let volume_popover_show = false;
 
+volume_popover_btn.addEventListener('click', function(e){ e.stopPropagation(); })
+
 function toggleVolumePopover(){
     if (volume_popover_show){
-        volume_popover_instance = Popper.createPopper(volume_popover_btn, volume_popover_div, {
+        volume_popover_instance = new Popper(volume_popover_btn, volume_popover_div, {
             placement: 'top',
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 8]
-                    }
-                }
-            ]
+            modifiers: {
+                offset: { offset: '0, 8' }
+            }
         } );
         volume_popover_div.setAttribute('data-show', '');
     } else {
@@ -771,6 +768,14 @@ function toggleVolumePopover(){
         }
     }
     volume_popover_show = !volume_popover_show;
+
+    document.addEventListener('click', function(){
+        volume_popover_div.removeAttribute('data-show');
+        if (volume_popover_instance){
+            volume_popover_instance.destroy();
+            volume_popover_instance = null;
+        }
+    }, { once: true } );
 }
 
 let volume_update_timer;

templates/index.html

@@ -70,7 +70,7 @@
                 <a onclick="request('post', {action : 'volume_up'})">
                     <i class="fa fa-volume-up" aria-hidden="true"></i>
                 </a>
-                <div id="volume-popover-arrow" data-popper-arrow></div>
+                <div id="volume-popover-arrow"></div>
             </div>
 
         </div>