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

package/dist/nuxt/module.json

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

package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue

@@ -482,20 +482,20 @@ dialog.magic-drawer__drag::backdrop {
 }
 
 /* Content */
-.magic-drawer--content-enter-active {
+.magic-drawer-content-enter-active {
   animation: var(--magic-drawer-enter-animation);
 }
 
-.magic-drawer--content-leave-active {
+.magic-drawer-content-leave-active {
   animation: var(--magic-drawer-leave-animation);
 }
 
 /* Backdrop */
-.magic-drawer--backdrop-enter-active {
+.magic-drawer-backdrop-enter-active {
   animation: fade-in 300ms ease;
 }
 
-.magic-drawer--backdrop-leave-active {
+.magic-drawer-backdrop-leave-active {
   animation: fade-out 300ms ease;
 }
 </style>

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -14,8 +14,8 @@ const defaultOptions = {
     disabled: false
   },
   transition: {
-    content: "magic-drawer--content",
-    backdrop: "magic-drawer--backdrop"
+    content: "magic-drawer-content",
+    backdrop: "magic-drawer-backdrop"
   },
   threshold: {
     lock: 0,

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

@@ -71,6 +71,7 @@ import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import {
   MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
   MagicPlayerTrackRef,
   MagicPlayerBarRef
 } from "../symbols";
@@ -78,6 +79,7 @@ const { instanceId } = defineProps({
   instanceId: { type: String, required: false }
 });
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
 if (!mappedInstanceId.value) {
   throw new Error(
@@ -105,7 +107,7 @@ const {
   touched,
   controlsMouseEntered
 } = toRefs(state);
-const { idle } = useIdle(3e3);
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
 initialize();
 onBeforeUnmount(() => {
   destroy();

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

@@ -12,47 +12,55 @@
     :data-hover="mouseEntered"
     @click.stop="togglePlay"
   >
-    <slot>
-      <transition name="fade" mode="out-in">
-        <button
-          v-if="defferedWaiting && started"
-          class="magic-player-overlay__button"
-        >
-          <slot name="waitingIcon">
-            <icon-waiting />
-          </slot>
-        </button>
-        <button
-          v-else-if="paused || !started"
-          class="magic-player-overlay__button"
-        >
-          <slot name="playIcon">
-            <icon-play />
-          </slot>
-        </button>
-        <button
-          v-else-if="started && !paused"
-          class="magic-player-overlay__button"
-        >
-          <slot name="pauseIcon">
-            <icon-pause />
-          </slot>
-        </button>
-      </transition>
-    </slot>
+    <transition :name="mappedOverlayTransition">
+      <div v-if="isVisible">
+        <slot>
+          <transition :name="mappedIconsTransition">
+            <button
+              v-if="defferedWaiting && started"
+              class="magic-player-overlay__button"
+            >
+              <slot name="waitingIcon">
+                <icon-waiting />
+              </slot>
+            </button>
+            <button
+              v-else-if="paused || !started"
+              class="magic-player-overlay__button"
+            >
+              <slot name="playIcon">
+                <icon-play />
+              </slot>
+            </button>
+            <button
+              v-else-if="started && !paused"
+              class="magic-player-overlay__button"
+            >
+              <slot name="pauseIcon">
+                <icon-pause />
+              </slot>
+            </button>
+          </transition>
+        </slot>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup>
-import { watch, ref, inject, toRefs } from "vue";
+import { watch, ref, computed, inject, toRefs } from "vue";
 import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconWaiting from "./icons/Waiting.vue";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
-import { MagicPlayerInstanceId } from "../symbols";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+const { transition } = defineProps({
+  transition: { type: Object, required: false }
+});
 const instanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 if (!instanceId) {
   throw new Error(
     "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
@@ -72,10 +80,26 @@ const {
   hasOverlay
 } = toRefs(state);
 hasOverlay.value = true;
+const mappedOverlayTransition = computed(
+  () => transition?.overlay ?? injectedOptions?.transition?.overlay
+);
+const mappedIconsTransition = computed(
+  () => transition?.icons ?? injectedOptions?.transition?.icons
+);
 const { togglePlay } = usePlayerVideoApi({
   id: instanceId
 });
-const { idle } = useIdle(3e3);
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
+const isVisible = computed(() => {
+  switch (true) {
+    case (playing.value && idle.value):
+    case (playing.value && !mouseEntered.value):
+    case (injectedOptions?.autoplay && (!started.value || !mouseEntered.value)):
+      return false;
+    default:
+      return true;
+  }
+});
 const defferedWaiting = ref(false);
 watch(
   () => waiting.value,
@@ -100,11 +124,16 @@ watch(
   inset: 0;
   background-color: var(--magic-player-overlay-background, rgba(0, 0, 0, 0.3));
   color: var(--magic-player-overlay-color, rgba(255, 255, 255, 1));
-  transition: var(--magic-player-overlay-transition, opacity 300ms ease);
+  cursor: pointer;
+}
+
+.magic-player-overlay div {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
 }
 
 .magic-player-overlay__button {
@@ -116,15 +145,25 @@ watch(
   outline: none;
   appearance: none;
   cursor: pointer;
-  width: var(--magic-player-overlay-button-size, 2.5rem);
-  height: var(--magic-player-overlay-button-size, 2.5rem);
+  width: var(--magic-player-overlay-button-size, 2rem);
+  height: var(--magic-player-overlay-button-size, 2rem);
+}
+
+.magic-player-overlay-enter-active {
+  animation: fade-in 150ms ease;
 }
 
-.magic-player-overlay[data-playing='true'][data-idle='true'] {
-  opacity: 0;
+.magic-player-overlay-leave-active {
+  animation: fade-out 150ms ease;
 }
 
-.magic-player-overlay[data-playing='true'][data-hover='false'] {
-  opacity: 0;
+.magic-player-icons-enter-active {
+  animation: none;
+  position: absolute;
+}
+
+.magic-player-icons-leave-active {
+  animation: none;
+  position: absolute;
 }
 </style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue.d.ts

@@ -1,14 +1,20 @@
-declare var __VLS_1: {}, __VLS_7: {}, __VLS_12: {}, __VLS_17: {};
+interface MagicPlayerOverlayProps {
+    transition?: {
+        overlay?: string;
+        icons?: string;
+    };
+}
+declare var __VLS_5: {}, __VLS_11: {}, __VLS_16: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_5) => any;
 } & {
-    waitingIcon?: (props: typeof __VLS_7) => any;
+    waitingIcon?: (props: typeof __VLS_11) => any;
 } & {
-    playIcon?: (props: typeof __VLS_12) => any;
+    playIcon?: (props: typeof __VLS_16) => any;
 } & {
-    pauseIcon?: (props: typeof __VLS_17) => any;
+    pauseIcon?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicPlayerOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -12,6 +12,7 @@
     :data-waiting="waiting"
     :data-loaded="loaded"
     :data-muted="muted"
+    @touchstart="onTouchstart"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
     @pointerdown="onPointerdown"
@@ -37,6 +38,7 @@ import {
 } from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
 import { usePlayerEmitter } from "../composables/private/usePlayerEmitter";
+import { usePlayerProvider } from "../composables/private/usePlayerProvider";
 const { id, options } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
@@ -53,19 +55,11 @@ const {
   loaded,
   fullscreen,
   touched,
-  mouseEntered
+  hasOverlay
 } = toRefs(state);
-const { initializeEmitter } = usePlayerEmitter({ id });
+const { onTouchstart, onMouseenter, onMouseleave, onPointerdown } = usePlayerProvider(id);
 const playerRef = useTemplateRef("player");
-function onMouseenter() {
-  mouseEntered.value = true;
-}
-function onMouseleave() {
-  mouseEntered.value = false;
-}
-function onPointerdown() {
-  touched.value = true;
-}
+const { initializeEmitter } = usePlayerEmitter({ id });
 onMounted(() => {
   initializeEmitter();
 });

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

@@ -54,7 +54,7 @@ const { initialize, destroy } = usePlayerRuntime({
 });
 const { initializeState } = usePlayerState(injectedInstanceId);
 const state = initializeState();
-const { muted, playing, started } = toRefs(state);
+const { muted, playing, started, loaded } = toRefs(state);
 usePlayerMediaApi({
   id: injectedInstanceId,
   mediaRef: elRef
@@ -100,9 +100,29 @@ if (manageViewport.value) {
       play();
     }
   });
+  watch(
+    loaded,
+    (value) => {
+      if (value && !started.value && isVisible.value && injectedOptions.autoplay) {
+        play();
+      }
+    },
+    { once: true }
+  );
 }
-onMounted(() => {
-  initialize();
+if (!manageViewport.value) {
+  watch(
+    loaded,
+    (value) => {
+      if (value && !started.value && injectedOptions.autoplay) {
+        play();
+      }
+    },
+    { once: true }
+  );
+}
+onMounted(async () => {
+  initialize(injectedOptions.autoplay);
   initializeFullscreen();
   if (injectedOptions.autoplay) {
     mute();

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

@@ -16,7 +16,7 @@
     @mouseleave="onMouseleave"
   >
     <transition :name="mappedTransition">
-      <div v-show="!hidden" class="magic-player-video-controls__bar">
+      <div v-show="visible" class="magic-player-video-controls__bar">
         <div
           v-if="$slots.popover"
           v-show="!!seekedTime && touched"
@@ -114,13 +114,13 @@ const {
   transition: { type: String, required: false }
 });
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const mappedInstanceId = computed(() => id ?? injectedInstanceId);
 if (!mappedInstanceId.value) {
   throw new Error(
     "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
   );
 }
-const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const mappedTransition = computed(
   () => transition ?? injectedOptions?.transition?.videoControls
 );
@@ -152,18 +152,19 @@ const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi
 });
 const elRef = useTemplateRef("el");
 const isVisible = useElementVisibility(elRef);
-const { idle } = useIdle(3e3);
-const hidden = computed(() => {
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
+const visible = computed(() => {
   switch (true) {
     case standalone:
-      return false;
+      return true;
     case !isVisible.value:
+    case (hasOverlay.value && !started.value):
     case (playing.value && idle.value):
-    case (hasOverlay.value && !touched.value && !started.value):
-    case (playing.value && !controlsMouseEntered.value && !mouseEntered.value):
-      return true;
-    default:
+    case (playing.value && !mouseEntered.value && !controlsMouseEntered.value):
+    case (injectedOptions?.autoplay && (!started.value || !mouseEntered.value)):
       return false;
+    default:
+      return true;
   }
 });
 initialize();

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

@@ -11,6 +11,7 @@ export function usePlayerMediaApi(args) {
     seeking,
     volume,
     rate,
+    loaded,
     waiting,
     started,
     ended,
@@ -28,18 +29,21 @@ export function usePlayerMediaApi(args) {
   }
   watch(volume, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.volume = volume.value;
+    if (el) {
+      el.volume = volume.value;
+    }
   });
   watch(muted, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.muted = muted.value;
+    if (el) {
+      el.muted = muted.value;
+    }
   });
   watch(rate, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.playbackRate = rate.value;
+    if (el) {
+      el.playbackRate = rate.value;
+    }
   });
   if (toValue(mediaRef)) {
     watch([mediaRef], () => {
@@ -51,27 +55,35 @@ export function usePlayerMediaApi(args) {
       }
     });
   }
+  watch(loaded, () => {
+    if (playing.value) {
+      const el = toValue(mediaRef);
+      if (el) {
+        el.play();
+      }
+    }
+  });
   const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(
     currentTime,
     (time) => {
       const el = toValue(mediaRef);
-      if (!el) return;
-      el.currentTime = unref(time);
+      if (el) {
+        el.currentTime = unref(time);
+      }
     }
   );
   const { ignoreUpdates: ignorePlayingUpdates } = watchIgnorable(
     playing,
-    (isPlaying) => {
+    (value) => {
       const el = toValue(mediaRef);
       if (!el) {
         return;
       }
-      if (isPlaying) {
+      if (value) {
         const playPromise = el.play();
-        if (playPromise !== void 0) {
-          playPromise.catch(() => {
-          });
-        }
+        playPromise?.catch(() => {
+          playing.value = false;
+        });
       } else {
         el.pause();
       }

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,35 @@
+import { toRefs } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { usePlayerState } from "./usePlayerState.mjs";
+export function usePlayerProvider(id) {
+  const { initializeState } = usePlayerState(id);
+  const state = initializeState();
+  const { mouseEntered, touched } = toRefs(state);
+  let cancelTouchend = void 0;
+  function onTouchend() {
+    cancelTouchend?.();
+    cancelTouchend = void 0;
+    mouseEntered.value = false;
+  }
+  function onTouchstart() {
+    mouseEntered.value = true;
+    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
+      passive: true
+    });
+  }
+  function onMouseenter() {
+    mouseEntered.value = true;
+  }
+  function onMouseleave() {
+    mouseEntered.value = false;
+  }
+  function onPointerdown() {
+    touched.value = true;
+  }
+  return {
+    onTouchstart,
+    onMouseenter,
+    onMouseleave,
+    onPointerdown
+  };
+}

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

@@ -7,7 +7,7 @@ export type UsePlayerRuntimeArgs = {
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
-    initialize: () => void;
+    initialize: (autoplay?: boolean) => void;
     destroy: () => void;
 };
 export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;

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

@@ -10,7 +10,9 @@ export function usePlayerRuntime(args) {
   const { loaded } = toRefs(state);
   function useNative() {
     const el = toValue(mediaRef);
-    if (!el || !src) return;
+    if (!el || !src) {
+      return;
+    }
     el.src = src;
     el.addEventListener(
       "loadeddata",
@@ -20,12 +22,12 @@ export function usePlayerRuntime(args) {
       { once: true }
     );
   }
-  async function useHlsJS() {
+  async function useHlsJS(autoplay = false) {
     const el = toValue(mediaRef);
-    if (!el) return;
-    useEventListener(mediaRef, "play", () => {
-      deferredLoading.value = true;
-    });
+    if (!el) {
+      return;
+    }
+    deferredLoading.value = autoplay;
     const { default: Hls } = await import("hls.js");
     hls = new Hls({ autoStartLoad: false });
     if (!Hls.isSupported()) {
@@ -52,11 +54,11 @@ export function usePlayerRuntime(args) {
       hls.attachMedia(el);
     }
   }
-  function initialize() {
+  function initialize(autoplay = false) {
     if (srcType === "native") {
       useNative();
     } else if (srcType === "hls") {
-      useHlsJS();
+      useHlsJS(autoplay);
     }
   }
   function destroy() {

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

@@ -51,7 +51,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         onPointermove: (e: PointerEvent) => void;
     };
     playerRuntime: {
-        initialize: () => void;
+        initialize: (autoplay?: boolean) => void;
         destroy: () => void;
     };
 };

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

@@ -8,7 +8,12 @@ export interface MagicPlayerOptions {
     playback?: ('viewport' | 'window')[] | false;
     loop?: boolean;
     transition?: {
-        videoControls: string;
+        videoControls?: string;
+        overlay?: string;
+        icons?: string;
+    };
+    threshold?: {
+        idle?: number;
     };
 }
 export interface RequiredMagicPlayerOptions {
@@ -20,6 +25,11 @@ export interface RequiredMagicPlayerOptions {
     loop: boolean;
     transition: {
         videoControls: string;
+        overlay: string;
+        icons: string;
+    };
+    threshold: {
+        idle: number;
     };
 }
 export type Buffered = [number, number][];

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.mjs

@@ -6,7 +6,12 @@ const defaultOptions = {
   autoplay: false,
   loop: false,
   transition: {
-    videoControls: "magic-player-video-controls"
+    videoControls: "magic-player-video-controls",
+    overlay: "magic-player-overlay",
+    icons: "magic-player-icons"
+  },
+  threshold: {
+    idle: 3e3
   }
 };
 export { defaultOptions };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.26",
+  "version": "1.0.0-beta.27",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -15,14 +15,14 @@
   "devDependencies": {
     "@maas/config": "^1.6.0",
     "@maas/mirror": "catalog:",
-    "@release-it/bumper": "^7.0.2",
+    "@release-it/bumper": "^7.0.5",
     "@types/node": "catalog:",
-    "eslint": "^9.25.1",
+    "eslint": "^9.26.0",
     "prettier": "catalog:",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "release-it": "^18.1.2",
     "tailwindcss": "catalog:",
-    "turbo": "^2.5.0",
+    "turbo": "^2.5.2",
     "typescript": "catalog:"
   },
   "exports": {
@@ -38,8 +38,8 @@
       "types": "./dist/plugins/index.d.ts",
       "import": "./dist/plugins/index.mjs"
     },
-    "./plugins/MagicPlayer/css": {
-      "import": "./dist/plugins/MagicPlayer/src/css"
+    "./plugins/MagicPlayer/css/*.css": {
+      "import": "./dist/plugins/MagicPlayer/src/css/*.css"
     },
     "./utils": {
       "types": "./dist/utils/index.d.mts",
@@ -142,7 +142,7 @@
   "volta": {
     "node": "20.18.1"
   },
-  "packageManager": "pnpm@10.8.1",
+  "packageManager": "pnpm@10.10.0",
   "pnpm": {
     "overrides": {
       "typescript": "catalog:"