@maas/vue-equipment 0.11.6 → 0.12.1

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

@@ -14,16 +14,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { shallowRef, onMounted, watch, computed } from 'vue'
+import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
-import { useInjectControls } from '../composables/useControls'
-
-const { controlsApi } = useInjectControls()
-const { seekedTime } = controlsApi
-
-import type { Ref } from 'vue'
+import { usePlayerApi } from '../composables/usePlayerApi'
 
 type Props = {
+  id: string
   playbackId: string
 }
 
@@ -40,13 +36,17 @@ type MuxStoryboard = {
 }
 
 const props = defineProps<Props>()
+
+const { instance } = usePlayerApi(props.id)
+
+const { seekedTime } = instance.value.controlsApi
+const { pixelRatio } = useDevicePixelRatio()
+
 const canvas = shallowRef() as Ref<HTMLCanvasElement>
-let context: CanvasRenderingContext2D | undefined = undefined
 const storyboard = shallowRef<MuxStoryboard | undefined>()
+let context: CanvasRenderingContext2D | undefined = undefined
 let image: HTMLImageElement | undefined = undefined
 
-const { pixelRatio } = useDevicePixelRatio()
-
 const thumbWidth = computed(() => {
   if (!storyboard.value) return 0
   return storyboard.value.tile_width / pixelRatio.value
@@ -112,7 +112,7 @@ function drawFrame(time: number) {
 }
 
 onMounted(init)
-watch(() => seekedTime.value, drawFrame)
+watch(() => seekedTime?.value, drawFrame)
 </script>
 
 <style lang="css">

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

@@ -1,9 +1,17 @@
 declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
     playbackId: {
         type: import("vue").PropType<string>;
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
     playbackId: {
         type: import("vue").PropType<string>;
         required: true;

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

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="magic-player-overlay"
+    :class="{
+      '-playing': playing,
+      '-paused': !playing,
+      '-idle': idle,
+      '-not-idle': !idle,
+      '-hover': mouseEntered,
+      '-not-hover': !mouseEntered,
+    }"
+    @click.stop="togglePlay"
+  >
+    <template v-if="waiting">
+      <button class="magic-player-overlay__button">
+        <slot name="waitingIcon">
+          <icon-waiting />
+        </slot>
+      </button>
+    </template>
+    <template v-else>
+      <button v-if="!playing" class="magic-player-overlay__button">
+        <slot name="playIcon">
+          <icon-play />
+        </slot>
+      </button>
+      <button v-else class="magic-player-overlay__button">
+        <slot name="pauseIcon">
+          <icon-pause />
+        </slot>
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {} 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 { usePlayerApi } from '../composables/usePlayerApi'
+
+interface Props {
+  id: string
+}
+
+const props = defineProps<Props>()
+
+const { instance } = usePlayerApi(props.id)
+
+const { playing, waiting } = instance.value.mediaApi
+const { mouseEntered, togglePlay } = instance.value.playerApi
+
+const { idle } = useIdle(3000)
+</script>
+
+<style lang="css">
+:root {
+  --magic-player-overlay-background-color: rgba(0, 0, 0, 0.3);
+  --magic-player-overlay-color: rgba(255, 255, 255, 1);
+  --magic-player-overlay-button-size: 2.5rem;
+}
+
+.magic-player-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--magic-player-overlay-background-color);
+  color: var(--magic-player-overlay-color);
+  transition-duration: 300ms;
+  transition-property: opacity;
+  transition-timing-function: ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.magic-player-overlay__button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  width: var(--magic-player-overlay-button-size);
+  height: var(--magic-player-overlay-button-size);
+}
+
+.magic-player-overlay.-playing.-idle,
+.magic-player-overlay.-playing.-not-hover {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,21 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>>, {}, {}>, {
+    waitingIcon?(_: {}): any;
+    playIcon?(_: {}): any;
+    pauseIcon?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,11 +2,11 @@
   <div class="magic-player-timeline">
     <div
       class="magic-player-timeline__target"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-      @pointerdown="onPointerDown"
-      @pointerup="onPointerUp"
-      @pointermove="onPointerMove"
+      @mouseenter="onMouseenter"
+      @mouseleave="onMouseleave"
+      @pointerdown="onPointerdown"
+      @pointerup="onPointerup"
+      @pointermove="onPointermove"
     >
       <div class="magic-player-timeline__slider-track">
         <div
@@ -21,7 +21,7 @@
             :style="{ left: `${bufferedPercentage}%` }"
           />
           <div
-            v-show="entered"
+            v-show="mouseEntered"
             class="magic-player-timeline__slider-seeked"
             :style="{ left: `${seekedPercentage}%` }"
           />
@@ -36,20 +36,30 @@
 </template>
 
 <script setup lang="ts">
-import { useInjectControls } from '../composables/useControls'
+import {} from 'vue'
+import { usePlayerApi } from '../composables/usePlayerApi'
+
+interface Props {
+  id: string
+}
+
+const props = defineProps<Props>()
+const { instance } = usePlayerApi(props.id)
 
-const { controlsApi } = useInjectControls()
 const {
-  entered,
+  mouseEntered,
   seekedPercentage,
   scrubbedPercentage,
   bufferedPercentage,
-  onMouseEnter,
-  onMouseLeave,
-  onPointerDown,
-  onPointerUp,
-  onPointerMove,
-} = controlsApi
+} = instance.value.controlsApi
+
+const {
+  onMouseenter,
+  onMouseleave,
+  onPointerdown,
+  onPointerup,
+  onPointermove,
+} = instance.value.controlsApi
 </script>
 
 <style lang="css">

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

@@ -1,2 +1,12 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>>, {}, {}>;
 export default _default;

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

@@ -7,7 +7,7 @@
       fill="none"
       stroke-width="4"
       stroke-linecap="round"
-    ></circle>
+    />
   </svg>
 </template>
 

package/dist/plugins/MagicPlayer/src/composables/{useControlsApi.d.ts → private/useControlsApi.d.ts}

@@ -1,6 +1,6 @@
-import type { UseControlsArgs } from '../types.js';
-export declare function useControlsApi(args: UseControlsArgs): {
-    entered: import("vue").Ref<boolean>;
+import type { UseControlsApiArgs } from '../../types.js';
+export declare function useControlsApi(args: UseControlsApiArgs): {
+    mouseEntered: import("vue").Ref<boolean>;
     dragging: import("vue").Ref<boolean>;
     seekedTime: import("vue").Ref<number>;
     seekedPercentage: import("vue").Ref<number>;
@@ -8,10 +8,10 @@ export declare function useControlsApi(args: UseControlsArgs): {
     bufferedPercentage: import("vue").ComputedRef<any>;
     thumbPercentage: import("vue").Ref<number>;
     popoverOffsetX: import("vue").Ref<number>;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onPointerDown: (e: MouseEvent | TouchEvent) => void;
-    onPointerUp: () => void;
-    onPointerMove: (e: MouseEvent | TouchEvent) => void;
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+    onPointerdown: (e: MouseEvent | TouchEvent) => void;
+    onPointerup: () => void;
+    onPointermove: (e: MouseEvent | TouchEvent) => void;
 };
 export type UseControlsApiReturn = ReturnType<typeof useControlsApi>;

package/dist/plugins/MagicPlayer/src/composables/{useControlsApi.mjs → private/useControlsApi.mjs}

@@ -5,20 +5,23 @@ import {
   defaultWindow
 } from "@vueuse/core";
 import { clampValue, mapValue } from "@maas/vue-equipment/utils";
-import { useInjectPlayer } from "./usePlayer.mjs";
+import { usePlayerStore } from "./usePlayerStore.mjs";
 export function useControlsApi(args) {
-  const { mediaApi, playerApi } = useInjectPlayer();
-  const { playing, buffered, duration, currentTime } = mediaApi;
-  const { play, pause, seek } = playerApi;
-  const entered = ref(false);
+  const { findInstance } = usePlayerStore();
+  const instance = findInstance(toValue(args.id));
+  const { buffered, duration, playing, currentTime } = instance.mediaApi;
+  const { play, pause, seek } = instance.playerApi;
   const dragging = ref(false);
+  const mouseEntered = ref(false);
   const seekedTime = ref(0);
   const seekedPercentage = ref(0);
   const scrubbedPercentage = ref(0);
   const thumbPercentage = ref(0);
   const popoverOffsetX = ref(0);
   const bufferedPercentage = computed(() => {
-    const endBuffer = buffered.value.length > 0 ? buffered.value[0][1] : 0;
+    if (!instance?.mediaApi)
+      return 0;
+    const endBuffer = buffered.value?.length > 0 ? buffered.value[0][1] : 0;
     const percentage = endBuffer / duration.value * 100;
     return clampValue(percentage, 0, thumbPercentage.value);
   });
@@ -60,30 +63,30 @@ export function useControlsApi(args) {
     }
     getPopoverOffsetX();
   }
-  function onMouseEnter() {
+  function onMouseenter() {
     getTimelineTrackSize();
     getPopoverSizes();
-    entered.value = true;
+    mouseEntered.value = true;
   }
-  function onMouseLeave() {
-    entered.value = false;
+  function onMouseleave() {
+    mouseEntered.value = false;
     dragging.value = false;
     seekedTime.value = 0;
   }
-  function onPointerDown(e) {
+  function onPointerdown(e) {
     dragging.value = true;
     resumePlay.value = playing.value;
     pause();
     const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
     seekToTrackPosition(x);
   }
-  function onPointerUp() {
+  function onPointerup() {
     dragging.value = false;
     if (resumePlay.value) {
       play();
     }
   }
-  function onPointerMove(e) {
+  function onPointermove(e) {
     const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
     seekToTrackPosition(x);
   }
@@ -111,7 +114,7 @@ export function useControlsApi(args) {
     }
   );
   return {
-    entered,
+    mouseEntered,
     dragging,
     seekedTime,
     seekedPercentage,
@@ -119,10 +122,10 @@ export function useControlsApi(args) {
     bufferedPercentage,
     thumbPercentage,
     popoverOffsetX,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerDown,
-    onPointerUp,
-    onPointerMove
+    onMouseenter,
+    onMouseleave,
+    onPointerdown,
+    onPointerup,
+    onPointermove
   };
 }

package/dist/plugins/MagicPlayer/src/composables/{useMediaApi.d.ts → private/useMediaApi.d.ts}

@@ -1,5 +1,5 @@
-import { type MaybeRef } from 'vue';
-export declare function useMediaApi(target: MaybeRef<HTMLMediaElement | null | undefined>): {
+import type { UseMediaApiArgs } from '../../types.js';
+export declare function useMediaApi(args: UseMediaApiArgs): {
     currentTime: import("vue").Ref<number>;
     duration: import("vue").Ref<number>;
     waiting: import("vue").Ref<boolean>;

package/dist/plugins/MagicPlayer/src/composables/{useMediaApi.mjs → private/useMediaApi.mjs}

@@ -1,6 +1,6 @@
 import { ref, watch, unref, toValue } from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
-export function useMediaApi(target) {
+export function useMediaApi(args) {
   const currentTime = ref(0);
   const duration = ref(0);
   const seeking = ref(false);
@@ -12,26 +12,27 @@ export function useMediaApi(target) {
   const stalled = ref(false);
   const buffered = ref([]);
   const muted = ref(false);
+  const { mediaRef } = args;
   function timeRangeToArray(timeRanges) {
     let ranges = [];
     for (let i = 0; i < timeRanges.length; ++i)
       ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];
     return ranges;
   }
-  watch([target, volume], () => {
-    const el = toValue(target);
+  watch([mediaRef, volume], () => {
+    const el = toValue(mediaRef);
     if (!el)
       return;
     el.volume = volume.value;
   });
-  watch([target, muted], () => {
-    const el = toValue(target);
+  watch([mediaRef, muted], () => {
+    const el = toValue(mediaRef);
     if (!el)
       return;
     el.muted = muted.value;
   });
-  watch([target, rate], () => {
-    const el = toValue(target);
+  watch([mediaRef, rate], () => {
+    const el = toValue(mediaRef);
     if (!el)
       return;
     el.playbackRate = rate.value;
@@ -39,7 +40,7 @@ export function useMediaApi(target) {
   const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(
     currentTime,
     (time) => {
-      const el = toValue(target);
+      const el = toValue(mediaRef);
       if (!el)
         return;
       el.currentTime = unref(time);
@@ -48,58 +49,58 @@ export function useMediaApi(target) {
   const { ignoreUpdates: ignorePlayingUpdates } = watchIgnorable(
     playing,
     (isPlaying) => {
-      const el = toValue(target);
+      const el = toValue(mediaRef);
       if (!el)
         return;
       isPlaying ? el.play() : el.pause();
     }
   );
-  useEventListener(target, "timeupdate", () => {
+  useEventListener(mediaRef, "timeupdate", () => {
     ignoreCurrentTimeUpdates(
-      () => currentTime.value = toValue(target).currentTime
+      () => currentTime.value = toValue(mediaRef).currentTime
     );
   });
-  useEventListener(target, "durationchange", () => {
-    duration.value = toValue(target).duration;
+  useEventListener(mediaRef, "durationchange", () => {
+    duration.value = toValue(mediaRef).duration;
   });
-  useEventListener(target, "progress", () => {
-    buffered.value = timeRangeToArray(toValue(target).buffered);
+  useEventListener(mediaRef, "progress", () => {
+    buffered.value = timeRangeToArray(toValue(mediaRef).buffered);
   });
-  useEventListener(target, "seeking", () => {
+  useEventListener(mediaRef, "seeking", () => {
     seeking.value = true;
   });
-  useEventListener(target, "seeked", () => {
+  useEventListener(mediaRef, "seeked", () => {
     seeking.value = false;
   });
-  useEventListener(target, ["waiting", "loadstart"], () => {
+  useEventListener(mediaRef, ["waiting", "loadstart"], () => {
     waiting.value = true;
     ignorePlayingUpdates(() => playing.value = false);
   });
-  useEventListener(target, "loadeddata", () => {
+  useEventListener(mediaRef, "loadeddata", () => {
     waiting.value = false;
   });
-  useEventListener(target, "playing", () => {
+  useEventListener(mediaRef, "playing", () => {
     waiting.value = false;
     ended.value = false;
     ignorePlayingUpdates(() => playing.value = true);
   });
-  useEventListener(target, "ratechange", () => {
-    rate.value = toValue(target).playbackRate;
+  useEventListener(mediaRef, "ratechange", () => {
+    rate.value = toValue(mediaRef).playbackRate;
   });
-  useEventListener(target, "stalled", () => {
+  useEventListener(mediaRef, "stalled", () => {
     stalled.value = true;
   });
-  useEventListener(target, "ended", () => {
+  useEventListener(mediaRef, "ended", () => {
     ended.value = true;
   });
-  useEventListener(target, "pause", () => {
+  useEventListener(mediaRef, "pause", () => {
     playing.value = false;
   });
-  useEventListener(target, "play", () => {
+  useEventListener(mediaRef, "play", () => {
     playing.value = true;
   });
-  useEventListener(target, "volumechange", () => {
-    const el = toValue(target);
+  useEventListener(mediaRef, "volumechange", () => {
+    const el = toValue(mediaRef);
     if (!el)
       return;
     volume.value = el.volume;

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

@@ -0,0 +1,18 @@
+import type { UsePlayerInternalApiArgs } from '../../types.js';
+export declare function usePlayerInternalApi(args: UsePlayerInternalApiArgs): {
+    mouseEntered: import("vue").Ref<boolean>;
+    isFullscreen: import("vue").Ref<boolean>;
+    touched: import("vue").Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
+    toggleFullscreen: () => Promise<void>;
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+};
+export type UsePlayerInternalApiReturn = ReturnType<typeof usePlayerInternalApi>;

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

@@ -0,0 +1,63 @@
+import { ref, watch, toValue } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import { isIOS } from "@maas/vue-equipment/utils";
+import { usePlayerStore } from "./usePlayerStore.mjs";
+export function usePlayerInternalApi(args) {
+  const touched = ref(false);
+  const mouseEntered = ref(false);
+  const fullscreenTarget = isIOS() ? args.videoRef : args.playerRef;
+  const { findInstance } = usePlayerStore();
+  const instance = findInstance(toValue(args.id));
+  const { currentTime, playing, muted } = instance.mediaApi;
+  const {
+    isFullscreen,
+    enter: enterFullscreen,
+    exit: exitFullscreen,
+    toggle: toggleFullscreen
+  } = useFullscreen(fullscreenTarget);
+  function play() {
+    playing.value = true;
+  }
+  function pause() {
+    playing.value = false;
+  }
+  function togglePlay() {
+    playing.value = !playing.value;
+  }
+  function seek(time) {
+    currentTime.value = time;
+  }
+  function mute() {
+    muted.value = true;
+  }
+  function unmute() {
+    muted.value = false;
+  }
+  function onMouseenter() {
+    mouseEntered.value = true;
+  }
+  function onMouseleave() {
+    mouseEntered.value = false;
+  }
+  watch(playing, () => {
+    if (!touched.value) {
+      touched.value = true;
+    }
+  });
+  return {
+    mouseEntered,
+    isFullscreen,
+    touched,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    mute,
+    unmute,
+    enterFullscreen,
+    exitFullscreen,
+    toggleFullscreen,
+    onMouseenter,
+    onMouseleave
+  };
+}

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

@@ -0,0 +1,20 @@
+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: ShallowRef<PlayerInstance[]>;
+    findInstance: (id: string) => PlayerInstance;
+    addInstance: (id: string) => PlayerInstance;
+    removeInstance: (id: string) => void;
+};