Mini-Player controls patch (#1688)

* Remove draggable component from mini player on mobile

* Replace draggable disabling method

* Clean code

ui/component/fileRenderFloating/view.jsx

@@ -375,15 +375,15 @@ export default function FileRenderFloating(props: Props) {
 
   return (
     <Draggable
-      onDrag={!isMobile ? handleDragMove : undefined}
-      onStart={!isMobile ? handleDragStart : undefined}
-      onStop={!isMobile ? handleDragStop : undefined}
+      onDrag={handleDragMove}
+      onStart={handleDragStart}
+      onStop={handleDragStop}
       defaultPosition={position}
       position={isFloating ? position : { x: 0, y: 0 }}
       bounds="parent"
-      disabled={noFloatingPlayer}
-      handle={!isMobile ? '.draggable' : ''}
+      handle=".draggable"
       cancel=".button"
+      disabled={noFloatingPlayer}
     >
       <div
         className={classnames([CONTENT_VIEWER_CLASS], {

ui/scss/component/_content.scss

@@ -93,7 +93,6 @@
 
           .icon {
             flex-shrink: 0;
-            // width:20px;
           }
         }
       }
@@ -101,20 +100,6 @@
       .autoplay-countdown {
         display: none;
       }
-    }
-
-    .vjs-control-bar {
-      display: inline-block !important;
-      opacity: 1 !important;
-
-      &::before {
-        background: unset !important;
-      }
-    }
-
-    .vjs-control {
-      display: none;
-    }
 
       .vjs-play-control {
         transform: unset !important;
@@ -135,6 +120,7 @@
             font-size: 2.2em !important;
             line-height: 32px !important;
             background-size: 60%;
+            pointer-events: none;
           }
         }
 
@@ -152,6 +138,34 @@
           display: none !important;
         }
       }
+    }
+
+    .vjs-control-bar {
+      display: inline-block !important;
+      opacity: 1 !important;
+
+      .vjs-progress-control.vjs-control {
+        top: 40px;
+        margin: unset !important;
+        width: 100%;
+        max-width: 100%;
+        .vjs-slider {
+          margin: 0 !important;
+          div,
+          span {
+            height: 3px !important;
+          }
+        }
+      }
+
+      &::before {
+        background: unset !important;
+      }
+    }
+
+    .vjs-control {
+      display: none;
+    }
 
     .vjs-play-control.vjs-playing {
       .vjs-icon-placeholder::before {
@@ -171,21 +185,6 @@
       }
     }
 
-    .video-js {
-      .vjs-progress-control.vjs-control {
-        top: 38px;
-        margin: unset !important;
-        max-width: 100%;
-        .vjs-slider {
-          margin: 0 !important;
-          div,
-          span {
-            height: 2px !important;
-          }
-        }
-      }
-    }
-
     .content__info {
       margin-top: -50px;
       opacity: 0;