@maas/vue-equipment 0.12.0 → 0.12.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.11.6"
+  "version": "0.12.0"
 }

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

@@ -11,6 +11,7 @@
       class="magic-player-video"
       preload="auto"
       playsinline
+      disablePictureInPicture
     />
     <div v-show="!loaded || !touched" class="magic-player-poster">
       <slot name="poster" />
@@ -20,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, toRefs } from 'vue'
+import { ref, computed } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
@@ -32,6 +33,7 @@ export type MagicPlayerProps = {
   src: string
   ratio?: string
   fill?: boolean
+  autoplay?: boolean
 }
 
 const props = withDefaults(defineProps<MagicPlayerProps>(), {
@@ -39,6 +41,7 @@ const props = withDefaults(defineProps<MagicPlayerProps>(), {
   src: '',
   ratio: '16:9',
   fill: false,
+  autoplay: false,
 })
 
 const playerRef = ref<HTMLDivElement | undefined>(undefined)
@@ -53,16 +56,24 @@ const { instance } = usePlayerApi({
   src: props.src,
 })
 
-const { playing } = toRefs(instance.value?.mediaApi)
-const { touched } = toRefs(instance.value?.playerApi)
+const { playing } = instance.value?.mediaApi
+const { touched } = instance.value?.playerApi
 const { onMouseenter, onMouseleave } = instance.value?.playerApi
-const { loaded } = toRefs(instance.value?.runtimeProvider)
+const { loaded } = instance.value?.runtimeProvider
 
-useIntersectionObserver(playerRef, ([{ isIntersecting }]) => {
-  if (!isIntersecting && playing.value) {
-    instance.value.playerApi.pause()
-  }
-})
+useIntersectionObserver(
+  playerRef,
+  ([{ isIntersecting }]) => {
+    if (!isIntersecting && playing.value) {
+      instance.value.playerApi.pause()
+    } else if (isIntersecting && !playing.value && props.autoplay) {
+      instance.value.playerApi.play()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 
 const computedRatio = computed(() => {
   if (props.ratio) {
@@ -84,12 +95,15 @@ const computedStyle = computed(() => {
 </script>
 
 <style lang="css">
+:root {
+  --magic-player-aspect-ratio: 16 / 9;
+}
+
 .magic-player {
-  --aspect-ratio: 16 / 9;
   position: relative;
   width: 100%;
   overflow: hidden;
-  aspect-ratio: var(--aspect-ratio);
+  aspect-ratio: var(--magic-player-aspect-ratio);
 }
 
 .magic-player-video {

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

@@ -5,6 +5,7 @@ export type MagicPlayerProps = {
     src: string;
     ratio?: string;
     fill?: boolean;
+    autoplay?: boolean;
 };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     fill: {
@@ -28,6 +29,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    autoplay: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     fill: {
         type: import("vue").PropType<boolean>;
@@ -50,11 +55,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    autoplay: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>>, {
     fill: boolean;
     srcType: SourceType;
     src: string;
     ratio: string;
+    autoplay: boolean;
 }, {}>, {
     poster?(_: {}): any;
     default?(_: {}): any;

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

@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref } from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -99,11 +99,9 @@ const { instance } = usePlayerApi({
   popoverRef: popoverRef,
 })
 
-const { playing, waiting, muted } = toRefs(instance.value?.mediaApi)
-const { touched, mouseEntered, isFullscreen } = toRefs(
-  instance.value?.playerApi,
-)
-const { popoverOffsetX, seekedTime } = toRefs(instance.value?.controlsApi)
+const { playing, waiting, muted } = instance.value.mediaApi
+const { touched, mouseEntered, isFullscreen } = instance.value.playerApi
+const { popoverOffsetX, seekedTime } = instance.value.controlsApi
 
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } =
   instance.value.playerApi

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

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { shallowRef, onMounted, watch, computed, toRefs, type Ref } from 'vue'
+import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
@@ -39,7 +39,7 @@ const props = defineProps<Props>()
 
 const { instance } = usePlayerApi(props.id)
 
-const { seekedTime } = toRefs(instance.value.controlsApi)
+const { seekedTime } = instance.value.controlsApi
 const { pixelRatio } = useDevicePixelRatio()
 
 const canvas = shallowRef() as Ref<HTMLCanvasElement>

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

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import {} from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -49,9 +49,8 @@ const props = defineProps<Props>()
 
 const { instance } = usePlayerApi(props.id)
 
-const { playing, waiting } = toRefs(instance.value.mediaApi)
-const { mouseEntered } = toRefs(instance.value.playerApi)
-const { togglePlay } = instance.value.playerApi
+const { playing, waiting } = instance.value.mediaApi
+const { mouseEntered, togglePlay } = instance.value.playerApi
 
 const { idle } = useIdle(3000)
 </script>

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

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import {} from 'vue'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
 interface Props {
@@ -51,7 +51,7 @@ const {
   seekedPercentage,
   scrubbedPercentage,
   bufferedPercentage,
-} = toRefs(instance.value.controlsApi)
+} = instance.value.controlsApi
 
 const {
   onMouseenter,

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, toValue, toRefs } from "vue";
+import { ref, computed, watch, toValue } from "vue";
 import {
   useResizeObserver,
   useEventListener,
@@ -9,7 +9,7 @@ import { usePlayerStore } from "./usePlayerStore.mjs";
 export function useControlsApi(args) {
   const { findInstance } = usePlayerStore();
   const instance = findInstance(toValue(args.id));
-  const { buffered, duration, playing, currentTime } = toRefs(instance.mediaApi);
+  const { buffered, duration, playing, currentTime } = instance.mediaApi;
   const { play, pause, seek } = instance.playerApi;
   const dragging = ref(false);
   const mouseEntered = ref(false);

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

@@ -1,4 +1,4 @@
-import { ref, watch, toRefs, toValue } from "vue";
+import { ref, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerStore } from "./usePlayerStore.mjs";
@@ -8,7 +8,7 @@ export function usePlayerInternalApi(args) {
   const fullscreenTarget = isIOS() ? args.videoRef : args.playerRef;
   const { findInstance } = usePlayerStore();
   const instance = findInstance(toValue(args.id));
-  const { currentTime, playing, muted } = toRefs(instance.mediaApi);
+  const { currentTime, playing, muted } = instance.mediaApi;
   const {
     isFullscreen,
     enter: enterFullscreen,

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

@@ -1,17 +1,19 @@
-import { type Ref } from 'vue';
+import { type ShallowRef } from 'vue';
 import type { UseMediaApiReturn } from './useMediaApi.js';
 import type { UsePlayerInternalApiReturn } from './usePlayerInternalApi.js';
 import type { UseRuntimeSourceProviderReturn } from './useRuntimeSourceProvider.js';
 import type { UseControlsApiReturn } from './useControlsApi.js';
+import type { UsePlayerApiArgs } from '../../types.js';
 export interface PlayerInstance {
     id: string;
     mediaApi: UseMediaApiReturn;
     playerApi: UsePlayerInternalApiReturn;
     controlsApi: UseControlsApiReturn;
     runtimeProvider: UseRuntimeSourceProviderReturn;
+    args: UsePlayerApiArgs;
 }
 export declare function usePlayerStore(): {
-    playerStore: Ref<PlayerInstance[]>;
+    playerStore: ShallowRef<PlayerInstance[]>;
     findInstance: (id: string) => PlayerInstance;
     addInstance: (id: string) => PlayerInstance;
     removeInstance: (id: string) => void;

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

@@ -1,13 +1,19 @@
-import { ref, reactive } from "vue";
-const playerStore = ref([]);
+import { shallowRef, reactive } from "vue";
+const playerStore = shallowRef([]);
 export function usePlayerStore() {
+  const defaultMediaApi = reactive({});
+  const defaultPlayerApi = reactive({});
+  const defaultControlsApi = reactive({});
+  const defaultRuntimeProvider = reactive({});
+  const defaultArgs = reactive({});
   function createInstance(id) {
     const instance = {
       id,
-      mediaApi: reactive({}),
-      playerApi: reactive({}),
-      controlsApi: reactive({}),
-      runtimeProvider: reactive({})
+      mediaApi: defaultMediaApi,
+      playerApi: defaultPlayerApi,
+      controlsApi: defaultControlsApi,
+      runtimeProvider: defaultRuntimeProvider,
+      args: defaultArgs
     };
     return instance;
   }

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

@@ -1,5 +1,6 @@
+import { type MaybeRef } from 'vue';
 import type { UsePlayerApiArgs } from '../types.js';
-export declare function usePlayerApi(args: UsePlayerApiArgs): {
+export declare function usePlayerApi(args: UsePlayerApiArgs | MaybeRef<string>): {
     instance: import("vue").ComputedRef<import("./private/usePlayerStore").PlayerInstance>;
 };
 export type UsePlayerApiReturn = ReturnType<typeof usePlayerApi>;

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

@@ -19,7 +19,7 @@ type UseRuntimeSourceProviderArgs = {
     srcType: SourceType;
     src: string;
 };
-type UsePlayerApiArgs = MaybeRef<string> | (Partial<UseMediaApiArgs & UseControlsApiArgs & UsePlayerInternalApiArgs & UseRuntimeSourceProviderArgs> & {
+type UsePlayerApiArgs = Partial<UseMediaApiArgs & UseControlsApiArgs & UsePlayerInternalApiArgs & UseRuntimeSourceProviderArgs> & {
     id: MaybeRef<string>;
-});
+};
 export type { SourceType, UseMediaApiArgs, UsePlayerApiArgs, UseControlsApiArgs, UsePlayerInternalApiArgs, UseRuntimeSourceProviderArgs, };

package/package.json

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