@maas/vue-equipment 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.26",
+  "version": "1.0.0-beta.28",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -2,6 +2,7 @@
   <div
     class="magic-player-audio-controls"
     :data-touched="touched"
+    :data-dragging="dragging"
     :data-started="started"
     :data-playing="playing"
     :data-paused="paused"
@@ -105,6 +106,7 @@ const {
   muted,
   waiting,
   touched,
+  dragging,
   controlsMouseEntered
 } = toRefs(state);
 const { idle } = useIdle(injectedOptions?.threshold?.idle);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue

@@ -46,42 +46,25 @@ const storyboard = shallowRef();
 let context = void 0;
 let image = void 0;
 const thumbWidth = computed(() => {
-  if (!storyboard.value) return 0;
+  if (!storyboard.value) {
+    return 0;
+  }
   return storyboard.value.tile_width / pixelRatio.value;
 });
 const thumbHeight = computed(() => {
-  if (!storyboard.value) return 0;
+  if (!storyboard.value) {
+    return 0;
+  }
   return storyboard.value.tile_height / pixelRatio.value;
 });
 function getMuxId(url) {
   const match = url?.match(/mux\.com\/([^\/]+)/);
   return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
 }
-async function init() {
-  const parsedPlaybackId = getMuxId(injectedOptions?.src);
-  const mappedPlaybackId = playbackId ?? parsedPlaybackId;
-  if (!mappedPlaybackId) {
-    console.error(
-      "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
-    );
+function drawFrame(time) {
+  if (!storyboard.value || !context || !image || !time) {
     return;
   }
-  try {
-    storyboard.value = await fetch(
-      `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
-    ).then((res) => res.json());
-    if (!storyboard.value) throw new Error();
-    image = new Image();
-    image.src = storyboard.value.url;
-    await image.decode();
-    context = canvasRef.value?.getContext("2d");
-    context?.drawImage(image, 0, 0);
-  } catch (e) {
-    console.error("Can not initialize timeine preview.", e);
-  }
-}
-function drawFrame(time) {
-  if (!storyboard.value || !context || !image) return;
   const { tile_height, tile_width, tiles } = storyboard.value;
   let closestIndex = -1;
   let minDifference = Infinity;
@@ -106,8 +89,38 @@ function drawFrame(time) {
     tile_height
   );
 }
-onMounted(init);
-watch(() => seekedTime?.value, drawFrame);
+async function initialize() {
+  const parsedPlaybackId = getMuxId(injectedOptions?.src);
+  const mappedPlaybackId = playbackId ?? parsedPlaybackId;
+  if (!mappedPlaybackId) {
+    console.error(
+      "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
+    );
+    return;
+  }
+  try {
+    storyboard.value = await fetch(
+      `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
+    ).then((res) => res.json());
+    if (!storyboard.value) {
+      throw new Error();
+    }
+    image = new Image();
+    image.src = storyboard.value.url;
+    await image.decode();
+    context = canvasRef.value?.getContext("2d");
+    drawFrame(seekedTime.value);
+  } catch (e) {
+    console.error("Can not initialize timeline preview", e);
+  }
+}
+onMounted(() => {
+  initialize();
+});
+watch(
+  () => seekedTime?.value,
+  (value) => drawFrame(value)
+);
 </script>
 
 <style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerProvider.vue

@@ -12,7 +12,6 @@
     :data-waiting="waiting"
     :data-loaded="loaded"
     :data-muted="muted"
-    @touchstart="onTouchstart"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
     @pointerdown="onPointerdown"
@@ -54,10 +53,9 @@ const {
   muted,
   loaded,
   fullscreen,
-  touched,
-  hasOverlay
+  touched
 } = toRefs(state);
-const { onTouchstart, onMouseenter, onMouseleave, onPointerdown } = usePlayerProvider(id);
+const { onMouseenter, onMouseleave, onPointerdown } = usePlayerProvider(id);
 const playerRef = useTemplateRef("player");
 const { initializeEmitter } = usePlayerEmitter({ id });
 onMounted(() => {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    ref="el"
     class="magic-player-video-controls"
     :data-fullscreen="fullscreen"
     :data-touched="touched"
+    :data-dragging="dragging"
     :data-started="started"
     :data-playing="playing"
     :data-paused="paused"
@@ -18,13 +18,16 @@
     <transition :name="mappedTransition">
       <div v-show="visible" class="magic-player-video-controls__bar">
         <div
-          v-if="$slots.popover"
-          v-show="!!seekedTime && touched"
+          v-if="$slots.popover && seekedTime !== null && seekedTime >= 0"
           ref="popover"
           class="magic-player-video-controls__popover"
-          :style="{ marginLeft: `${popoverOffsetX}%` }"
+          :style="{
+  marginLeft: `${popoverOffsetX}%`
+}"
         >
-          <slot name="popover" />
+          <div v-show="popoverOffsetX !== null">
+            <slot name="popover" />
+          </div>
         </div>
         <div ref="bar" class="magic-player-video-controls__bar--inner">
           <div class="magic-player-video-controls__item -shrink-0">
@@ -85,7 +88,7 @@ import {
   useTemplateRef,
   onBeforeUnmount
 } from "vue";
-import { useElementVisibility, useIdle } from "@vueuse/core";
+import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconVolumeOn from "./icons/VolumeOn.vue";
@@ -141,7 +144,8 @@ const {
   fullscreen,
   popoverOffsetX,
   hasOverlay,
-  seekedTime
+  seekedTime,
+  dragging
 } = toRefs(state);
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
 const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
@@ -150,18 +154,17 @@ const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi
   trackRef,
   popoverRef
 });
-const elRef = useTemplateRef("el");
-const isVisible = useElementVisibility(elRef);
 const { idle } = useIdle(injectedOptions?.threshold?.idle);
 const visible = computed(() => {
   switch (true) {
     case standalone:
       return true;
-    case !isVisible.value:
     case (hasOverlay.value && !started.value):
     case (playing.value && idle.value):
     case (playing.value && !mouseEntered.value && !controlsMouseEntered.value):
-    case (injectedOptions?.autoplay && (!started.value || !mouseEntered.value)):
+    case (injectedOptions?.autoplay && !started.value):
+    case (injectedOptions?.autoplay && !mouseEntered.value):
+    case (injectedOptions?.autoplay && !mouseEntered.value && !touched.value):
       return false;
     default:
       return true;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerControlsApi.mjs

@@ -101,6 +101,7 @@ export function usePlayerControlsApi(args) {
   }
   function resetStateAndListeners() {
     dragging.value = false;
+    touched.value = false;
     cancelTouchend?.();
     cancelPointerup?.();
     cancelPointermove?.();
@@ -149,7 +150,11 @@ export function usePlayerControlsApi(args) {
   function onMouseleave() {
     controlsMouseEntered.value = false;
     if (!dragging.value) {
-      seekedTime.value = 0;
+      seekedTime.value = null;
+      popoverOffsetX.value = null;
+      seekedPercentage.value = 0;
+      scrubbedPercentage.value = 0;
+      thumbPercentage.value = 0;
     }
   }
   let watchTrack = null;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerProvider.d.ts

@@ -1,6 +1,5 @@
 import { type MaybeRef } from 'vue';
 export declare function usePlayerProvider(id: MaybeRef<string>): {
-    onTouchstart: () => void;
     onMouseenter: () => void;
     onMouseleave: () => void;
     onPointerdown: () => void;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerProvider.mjs

@@ -1,21 +1,19 @@
 import { toRefs } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerProvider(id) {
   const { initializeState } = usePlayerState(id);
   const state = initializeState();
   const { mouseEntered, touched } = toRefs(state);
+  let cancelPointerup = void 0;
   let cancelTouchend = void 0;
-  function onTouchend() {
+  function onPointerup() {
+    touched.value = false;
+    cancelPointerup?.();
     cancelTouchend?.();
+    cancelPointerup = void 0;
     cancelTouchend = void 0;
-    mouseEntered.value = false;
-  }
-  function onTouchstart() {
-    mouseEntered.value = true;
-    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
-      passive: true
-    });
   }
   function onMouseenter() {
     mouseEntered.value = true;
@@ -25,9 +23,10 @@ export function usePlayerProvider(id) {
   }
   function onPointerdown() {
     touched.value = true;
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
   }
   return {
-    onTouchstart,
     onMouseenter,
     onMouseleave,
     onPointerdown

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.mjs

@@ -24,11 +24,11 @@ export function usePlayerState(id) {
       fullscreenTarget: null,
       mouseEntered: false,
       controlsMouseEntered: false,
-      seekedTime: 0,
+      seekedTime: null,
       seekedPercentage: 0,
       scrubbedPercentage: 0,
       thumbPercentage: 0,
-      popoverOffsetX: 0,
+      popoverOffsetX: null,
       hasOverlay: false,
       hasControls: false,
       controlsBarRect: void 0,

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -17,11 +17,11 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     dragging: import("vue").Ref<boolean, boolean>;
     fullscreen: import("vue").Ref<boolean, boolean>;
     currentTime: import("vue").Ref<number, number>;
-    seekedTime: import("vue").Ref<number, number>;
+    seekedTime: import("vue").Ref<number | null, number | null>;
     seekedPercentage: import("vue").Ref<number, number>;
     scrubbedPercentage: import("vue").Ref<number, number>;
     thumbPercentage: import("vue").Ref<number, number>;
-    popoverOffsetX: import("vue").Ref<number, number>;
+    popoverOffsetX: import("vue").Ref<number | null, number | null>;
     audioApi: {
         play: () => void;
         pause: () => void;

package/dist/plugins/MagicPlayer/src/css/magic-player-audio-controls.css

@@ -1,7 +1,6 @@
 @import './magic-player-timeline.css';
 @import './magic-player-display-time.css';
 
-/* We keep this variable since it's used in multiple places */
 :root {
   --magic-player-audio-controls-height: 3rem;
 }

package/dist/plugins/MagicPlayer/src/css/magic-player-timeline.css

@@ -20,6 +20,10 @@
   cursor: pointer;
 }
 
+[data-dragging='true'] .magic-player-timeline__target {
+  cursor: grabbing;
+}
+
 .magic-player-timeline__track {
   position: relative;
   width: 100%;

package/dist/plugins/MagicPlayer/src/types/index.d.ts

@@ -55,11 +55,11 @@ export interface PlayerState {
     fullscreenTarget: HTMLElement | null;
     mouseEntered: boolean;
     controlsMouseEntered: boolean;
-    seekedTime: number;
+    seekedTime: number | null;
     seekedPercentage: number;
     scrubbedPercentage: number;
     thumbPercentage: number;
-    popoverOffsetX: number;
+    popoverOffsetX: number | null;
     hasOverlay: boolean;
     hasControls: boolean;
     controlsBarRect: DOMRect | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.29",
   "contributors": [
     {
       "name": "Robin Scholz",