@maas/vue-equipment 0.21.2 → 0.21.3

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.21.1"
+  "version": "0.21.2"
 }

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

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
@@ -54,7 +54,7 @@ const { playing, muted } = usePlayerMediaApi({
   mediaRef: videoRef,
 })
 
-usePlayerRuntime({
+const { initialize, destroy } = usePlayerRuntime({
   id: props.id,
   mediaRef: videoRef,
   src: props.src,
@@ -100,10 +100,15 @@ const computedStyle = computed(() => {
 })
 
 onMounted(() => {
+  initialize()
   if (props.autoplay) {
     muted.value = true
   }
 })
+
+onBeforeUnmount(() => {
+  destroy()
+})
 </script>
 
 <style>

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

@@ -15,10 +15,10 @@ export function usePlayerControlsApi(args) {
   const popoverRect = ref(void 0);
   const { trackRef, barRef, popoverRef } = args;
   const { buffered, duration, playing, currentTime } = usePlayerMediaApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const { play, pause, seek } = usePlayerVideoApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const dragging = ref(false);
   const mouseEntered = ref(false);

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

@@ -8,5 +8,7 @@ export type UsePlayerRuntimeArgs = {
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
     loaded: import("vue").Ref<boolean>;
+    initialize: () => void;
+    destroy: () => void;
 };
 export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;

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

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, toValue } from "vue";
+import { ref, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerRuntime(args) {
   let hls;
@@ -34,16 +34,16 @@ export function usePlayerRuntime(args) {
       });
     }
   };
-  onMounted(() => {
+  function initialize() {
     if (srcType === "native") {
       useNative();
     } else if (srcType === "hls") {
       useHlsJS();
     }
-  });
-  onUnmounted(() => {
+  }
+  function destroy() {
     hls?.destroy();
-  });
+  }
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
     if (payload.id !== toValue(args.id))
@@ -65,6 +65,8 @@ export function usePlayerRuntime(args) {
     });
   });
   return {
-    loaded
+    loaded,
+    initialize,
+    destroy
   };
 }

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

@@ -1,13 +1,13 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type MaybeRef } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
     playerRef?: MaybeRef<HTMLElement | undefined>;
     videoRef?: MaybeRef<HTMLVideoElement | undefined>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: Ref<boolean>;
-    isFullscreen: Ref<boolean>;
-    touched: Ref<boolean>;
+    mouseEntered: import("vue").Ref<boolean>;
+    isFullscreen: import("vue").Ref<boolean>;
+    touched: import("vue").Ref<boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;

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

@@ -6,7 +6,7 @@ import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerVideoApi(args) {
   const fullscreenTarget = ref(void 0);
   const { playing, currentTime, muted } = usePlayerMediaApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const { playerRef, videoRef } = args;
   const touched = ref(false);

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

@@ -59,6 +59,9 @@ export declare function usePlayerApi(args: usePlayerApiArgs): {
     };
     playerRuntime: {
         loaded: import("vue").Ref<boolean>;
+        initialize: () => void;
+        destroy: () => void;
     };
 };
+export type UsePlayerApiApiReturn = ReturnType<typeof usePlayerApi>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.21.2",
+  "version": "0.21.3",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",