@quasar/quasar-ui-qmediaplayer 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/icon-set/bootstrap-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/eva-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/fontawesome-v5-pro.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/fontawesome-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/ionicons-v4.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/ionicons-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/line-awesome.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/material-icons-outlined.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/material-icons-round.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/material-icons-sharp.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/material-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/mdi-v3.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/mdi-v4.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/mdi-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-bootstrap-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-eva-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-fontawesome-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-ionicons-v4.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-ionicons-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-line-awesome.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-material-icons-outlined.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-material-icons-round.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-material-icons-sharp.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-material-icons.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-mdi-v4.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-mdi-v5.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/svg-themify.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/icon-set/themify.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */

package/dist/index.common.js

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.2
+ * @quasar/quasar-ui-qmediaplayer v2.0.0-beta.3
  * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */
@@ -18,13 +18,6 @@ function hSlot (slot, otherwise) {
     : otherwise
 }
 
-const getMousePosition = function (e, type = 'x') {
-  if (type === 'x') {
-    return e.pageX
-  }
-  return e.pageY
-};
-
 const padTime = (val) => {
   val = Math.floor(val);
   if (val < 10) {
@@ -118,7 +111,7 @@ var QMediaPlayer = vue.defineComponent({
     },
     controlsDisplayTime: {
       type: Number,
-      default: 2000
+      default: 4000
     },
     playbackRates: Array,
     // initial playback rate
@@ -188,6 +181,7 @@ var QMediaPlayer = vue.defineComponent({
         errorText: null,
         controls: false,
         showControls: true,
+        inControls: false,
         volume: 60,
         muted: false,
         currentTime: 0.01,
@@ -468,12 +462,15 @@ var QMediaPlayer = vue.defineComponent({
       }
     });
 
+    // watch(() => state.inControls, (val) => {
+    //   console.log('inControls:', val)
+    // })
+
     vue.onBeforeMount(() => {
       canRender.value = window !== undefined; // SSR
       if (canRender.value === true) {
         __setupLang();
         __setupIcons();
-        document.body.addEventListener('mousemove', __mouseMoveAction, false);
       }
     });
 
@@ -485,8 +482,6 @@ var QMediaPlayer = vue.defineComponent({
         // make sure noScroll is not left in unintended state
         document.body.classList.remove('no-scroll');
 
-        document.body.removeEventListener('mousemove', __mouseMoveAction);
-
         __removeSourceEventListeners();
         __removeMediaEventListeners();
 
@@ -515,28 +510,37 @@ var QMediaPlayer = vue.defineComponent({
         }
         else {
           /* eslint-disable-next-line no-console */
-          console.error('QMediaPlayer: loadFileBlob method requires a FileList');
+          console.error('[QMediaPlayer]: loadFileBlob method requires a FileList');
         }
       }
       return false
     }
 
     function showControls () {
+      // no controls - always off
+      if (state.noControls) {
+        state.showControls = false;
+        return
+      }
+      // bottom controls - always on
       if (state.bottomControls) {
+        state.showControls = true;
         return
       }
+      // kill timer, if there is one
       if (timer.hideControlsTimer) {
         clearTimeout(timer.hideControlsTimer);
         timer.hideControlsTimer = null;
       }
-      if (state.noControls) {
-        return
-      }
+      // show controls
       state.showControls = true;
+      // check if hide cursor (fullscreen)
       __checkCursor();
+      // set the timer
       if (props.controlsDisplayTime !== -1 && !props.mobileMode && __isVideo.value) {
         timer.hideControlsTimer = setTimeout(() => {
-          if (!__showingMenu()) {
+          // hide controls, but not if menu is showing
+          if (!__showingMenu() && state.inControls !== true) {
             state.showControls = false;
             timer.hideControlsTimer = null;
             __checkCursor();
@@ -544,14 +548,24 @@ var QMediaPlayer = vue.defineComponent({
           else {
             showControls();
           }
+          // user configured display time (in ms)
         }, props.controlsDisplayTime);
       }
     }
 
     function hideControls () {
+      if (state.inControls) return
+      // no controls - always off
+      if (state.noControls) {
+        state.showControls = false;
+        return
+      }
+      // bottom controls - always on
       if (state.bottomControls) {
+        state.showControls = true;
         return
       }
+      // clear timer if there is one
       if (timer.hideControlsTimer) {
         clearTimeout(timer.hideControlsTimer);
       }
@@ -800,9 +814,9 @@ var QMediaPlayer = vue.defineComponent({
           }
           else {
             /* eslint-disable-next-line no-console */
-            console.error(`QMediaPlayer: no language loaded called '${ lang }'`);
+            console.error(`[QMediaPlayer]: no language loaded called '${ lang }'`);
             /* eslint-disable-next-line no-console */
-            console.error('Be sure to load the UMD version of the language in a script tag before using with UMD');
+            console.error('[QMediaPlayer]: Be sure to load the UMD version of the language in a script tag before using with UMD');
           }
         }
         else {
@@ -811,7 +825,7 @@ var QMediaPlayer = vue.defineComponent({
           }
           catch (e) {
             /* eslint-disable-next-line no-console */
-            console.error(`QMediaPlayer: cannot find language file called '${ lang }'`);
+            console.error(`[QMediaPlayer]: cannot find language file called '${ lang }'`);
           }
         }
       }
@@ -840,9 +854,9 @@ var QMediaPlayer = vue.defineComponent({
           }
           else {
             /* eslint-disable-next-line no-console */
-            console.error(`QMediaPlayer: no icon set loaded called '${ set }'`);
+            console.error(`[QMediaPlayer]: no icon set loaded called '${ set }'`);
             /* eslint-disable-next-line no-console */
-            console.error('Be sure to load the UMD version of the icon set in a script tag before using with UMD');
+            console.error('[QMediaPlayer]:Be sure to load the UMD version of the icon set in a script tag before using with UMD');
           }
         }
         else {
@@ -851,7 +865,7 @@ var QMediaPlayer = vue.defineComponent({
           }
           catch (e) {
             /* eslint-disable-next-line no-console */
-            console.error(`QMediaPlayer: cannot find icon set file called '${ set }'`);
+            console.error(`[QMediaPlayer]: cannot find icon set file called '${ set }'`);
           }
         }
       }
@@ -939,7 +953,7 @@ var QMediaPlayer = vue.defineComponent({
       else if (event.type === 'canplay') {
         state.playReady = true;
         state.displayTime = timeParse($media.value.currentTime);
-        __mouseEnterVideo();
+        showControls();
         emit('ready');
       }
       else if (event.type === 'canplaythrough') {
@@ -1075,7 +1089,6 @@ var QMediaPlayer = vue.defineComponent({
       if (props.mobileMode !== true) {
         togglePlay();
       }
-      toggleControls();
     }
 
     function __bigButtonClick (e) {
@@ -1090,15 +1103,11 @@ var QMediaPlayer = vue.defineComponent({
       settingsMenuVisible.value = val;
     }
 
-    function __mouseEnterVideo (e) {
-      if (!props.bottomControls && !props.mobileMode && !__isAudio.value) {
-        showControls();
-      }
-    }
-
     function __mouseLeaveVideo (e) {
-      if (!props.bottomControls && !props.mobileMode && !__isAudio.value) {
-        hideControls();
+      if (e.relatedTarget && e.relatedTarget.className === 'q-pa-md') {
+        if (!props.bottomControls && !props.mobileMode && !__isAudio.value && state.inControls !== true) {
+          hideControls();
+        }
       }
     }
 
@@ -1108,21 +1117,25 @@ var QMediaPlayer = vue.defineComponent({
       }
     }
 
+    function __getParentEl (el, className) {
+      if (!el) return null
+      if (el.className.startsWith(className)) {
+        return el
+      }
+      return __getParentEl(el.offsetParent, className)
+    }
+
     function __showControlsIfValid (e) {
-      if (__showingMenu()) {
+      const pos = $media.value.getBoundingClientRect();
+      const el = __getParentEl(e.target, 'q-media');
+      if (!el) return
+      var rect = el.getBoundingClientRect();
+      if (!pos || !rect) return false
+      if (rect.left === pos.left && rect.top === pos.top && rect.height === pos.height && rect.width === pos.width) {
         showControls();
         return true
       }
-      const x = getMousePosition(e, 'x');
-      const y = getMousePosition(e, 'y');
-      const pos = $media.value.getBoundingClientRect();
-      if (!pos) return false
-      if (x > pos.left && x < pos.left + pos.width) {
-        if (y > pos.top + pos.height - (props.dense ? 40 : 80) && y < pos.top + pos.height) {
-          showControls();
-          return true
-        }
-      }
+
       return false
     }
 
@@ -1306,6 +1319,14 @@ var QMediaPlayer = vue.defineComponent({
       return '50%'
     }
 
+    function __mouseEnterControls () {
+      state.inControls = true;
+    }
+    function __mouseLeaveControls () {
+      state.inControls = false;
+    }
+
+
     // Rendering Methods
 
     function __renderVideo () {
@@ -1460,7 +1481,9 @@ var QMediaPlayer = vue.defineComponent({
       const slot = slots.controls;
 
       const events = {
-        onClick: __stopAndPrevent
+        onClick: __stopAndPrevent,
+        onMouseenter: __mouseEnterControls,
+        onMouseleave: __mouseLeaveControls,
       };
 
       if (slot) {
@@ -1928,7 +1951,6 @@ var QMediaPlayer = vue.defineComponent({
     function __renderMediaPlayer () {
       const events = {
         onMousemove: __mouseMoveAction,
-        onMouseenter: __mouseEnterVideo,
         onMouseleave: __mouseLeaveVideo,
         onClick: __videoClick
       };
@@ -1983,7 +2005,7 @@ var QMediaPlayer = vue.defineComponent({
   }
 });
 
-const version = '2.0.0-beta.2';
+const version = '2.0.0-beta.3';
 
 var Plugin = {
   version,