@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,13 +1,97 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, Transition as _Transition, withCtx as _withCtx } from "vue";
-const _hoisted_1 = ["data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-muted", "data-idle", "data-hover", "data-standalone"];
-const _hoisted_2 = { class: "magic-player-video-controls__bar" };
-const _hoisted_3 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_4 = { class: "magic-player-video-controls__item -grow" };
-const _hoisted_5 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_6 = { class: "magic-player-video-controls__item -shrink-0" };
-import { ref, computed, inject, provide } from "vue";
+<template>
+  <div
+    class="magic-player-video-controls"
+    :data-fullscreen="fullscreen"
+    :data-touched="touched"
+    :data-dragging="dragging"
+    :data-started="started"
+    :data-playing="playing"
+    :data-paused="paused"
+    :data-waiting="waiting"
+    :data-muted="muted"
+    :data-idle="idle"
+    :data-hover="controlsMouseEntered"
+    :data-standalone="standalone"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <transition :name="mappedTransition">
+      <div v-show="visible" class="magic-player-video-controls__bar">
+        <div
+          v-if="$slots.popover && seekedTime !== null && seekedTime >= 0"
+          ref="popover"
+          class="magic-player-video-controls__popover"
+          :style="{
+  marginLeft: `${popoverOffsetX}%`
+}"
+        >
+          <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">
+            <button v-if="paused || !started" @click="play">
+              <slot name="playIcon">
+                <icon-play />
+              </slot>
+            </button>
+            <button v-else @click="pause">
+              <slot name="pauseIcon">
+                <icon-pause />
+              </slot>
+            </button>
+          </div>
+          <div class="magic-player-video-controls__item -grow">
+            <slot name="timelineBefore" />
+            <div
+              ref="track"
+              class="magic-player-video-controls__timeline"
+              @mouseleave="onMouseleaveTimeline"
+            >
+              <magic-player-timeline />
+            </div>
+            <slot name="timelineAfter" />
+          </div>
+          <div class="magic-player-video-controls__item -shrink-0">
+            <button v-if="muted" @click="unmute">
+              <slot name="volumeOffIcon">
+                <icon-volume-off />
+              </slot>
+            </button>
+            <button v-else @click="mute">
+              <slot name="volumeOnIcon">
+                <icon-volume-on />
+              </slot>
+            </button>
+          </div>
+          <div class="magic-player-video-controls__item -shrink-0">
+            <button v-if="fullscreen" @click="exitFullscreen">
+              <slot name="fullscreenExitIcon">
+                <icon-fullscreen-exit />
+              </slot>
+            </button>
+            <button v-else @click="enterFullscreen">
+              <slot name="fullscreenEnterIcon">
+                <icon-fullscreen-enter />
+              </slot>
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  toRefs,
+  computed,
+  inject,
+  provide,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
 import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
@@ -15,208 +99,93 @@ import IconVolumeOn from "./icons/VolumeOn.vue";
 import IconVolumeOff from "./icons/VolumeOff.vue";
 import IconFullscreenEnter from "./icons/FullscreenEnter.vue";
 import IconFullscreenExit from "./icons/FullscreenExit.vue";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-up-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-up-out.css";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerVideoControls",
-  props: {
-    id: { type: String, required: false },
-    standalone: { type: Boolean, required: false, default: false },
-    transition: { type: String, required: false }
-  },
-  setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.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(
-      () => __props.transition ?? injectedOptions?.transition?.videoControls
-    );
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
-    const popoverRef = ref(void 0);
-    const { playing, waiting, muted } = usePlayerMediaApi({
-      id: mappedId.value
-    });
-    const {
-      touched,
-      mouseEntered,
-      isFullscreen,
-      play,
-      pause,
-      mute,
-      unmute,
-      enterFullscreen,
-      exitFullscreen
-    } = usePlayerVideoApi({ id: mappedId.value });
-    const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
-      id: mappedId.value,
-      barRef,
-      trackRef,
-      popoverRef
-    });
-    const { idle } = useIdle(3e3);
-    const hidden = computed(() => {
-      switch (true) {
-        case __props.standalone:
-          return false;
-        case (playing.value && idle.value):
-          return true;
-        case (playing.value && !mouseEntered.value):
-          return true;
-        case !touched.value:
-          return true;
-        default:
-          return false;
-      }
-    });
-    provide(MagicPlayerInstanceId, mappedId.value);
-    return (_ctx, _cache) => {
-      const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
-      return _openBlock(), _createElementBlock("div", {
-        class: "magic-player-video-controls",
-        "data-fullscreen": _unref(isFullscreen),
-        "data-touched": _unref(touched),
-        "data-playing": _unref(playing),
-        "data-paused": !_unref(playing),
-        "data-waiting": _unref(waiting),
-        "data-muted": _unref(muted),
-        "data-idle": _unref(idle),
-        "data-hover": _unref(mouseEntered),
-        "data-standalone": _ctx.standalone
-      }, [
-        _createVNode(_Transition, {
-          name: mappedTransition.value,
-          persisted: ""
-        }, {
-          default: _withCtx(() => [
-            _withDirectives(_createElementVNode(
-              "div",
-              _hoisted_2,
-              [
-                _ctx.$slots.popover ? _withDirectives((_openBlock(), _createElementBlock(
-                  "div",
-                  {
-                    key: 0,
-                    ref_key: "popoverRef",
-                    ref: popoverRef,
-                    class: "magic-player-video-controls__popover",
-                    style: _normalizeStyle({ marginLeft: `${_unref(popoverOffsetX)}%` })
-                  },
-                  [
-                    _renderSlot(_ctx.$slots, "popover")
-                  ],
-                  4
-                  /* STYLE */
-                )), [
-                  [_vShow, !!_unref(seekedTime) && _unref(touched)]
-                ]) : _createCommentVNode("v-if", true),
-                _createElementVNode(
-                  "div",
-                  {
-                    ref_key: "barRef",
-                    ref: barRef,
-                    class: "magic-player-video-controls__bar--inner"
-                  },
-                  [
-                    _createElementVNode("div", _hoisted_3, [
-                      !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[0] || (_cache[0] = //@ts-ignore
-                        (...args) => _unref(play) && _unref(play)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "playIcon", {}, () => [
-                          _createVNode(IconPlay)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
-                        (...args) => _unref(pause) && _unref(pause)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "pauseIcon", {}, () => [
-                          _createVNode(IconPause)
-                        ])
-                      ]))
-                    ]),
-                    _createElementVNode("div", _hoisted_4, [
-                      _renderSlot(_ctx.$slots, "timelineBefore"),
-                      _createElementVNode(
-                        "div",
-                        {
-                          ref_key: "trackRef",
-                          ref: trackRef,
-                          class: "magic-player-video-controls__timeline"
-                        },
-                        [
-                          _createVNode(_component_magic_player_timeline, { id: _ctx.id }, null, 8, ["id"])
-                        ],
-                        512
-                        /* NEED_PATCH */
-                      ),
-                      _renderSlot(_ctx.$slots, "timelineAfter")
-                    ]),
-                    _createElementVNode("div", _hoisted_5, [
-                      _unref(muted) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[2] || (_cache[2] = //@ts-ignore
-                        (...args) => _unref(unmute) && _unref(unmute)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "volumeOffIcon", {}, () => [
-                          _createVNode(IconVolumeOff)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[3] || (_cache[3] = //@ts-ignore
-                        (...args) => _unref(mute) && _unref(mute)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "volumeOnIcon", {}, () => [
-                          _createVNode(IconVolumeOn)
-                        ])
-                      ]))
-                    ]),
-                    _createElementVNode("div", _hoisted_6, [
-                      _unref(isFullscreen) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[4] || (_cache[4] = //@ts-ignore
-                        (...args) => _unref(exitFullscreen) && _unref(exitFullscreen)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "fullscreenExitIcon", {}, () => [
-                          _createVNode(IconFullscreenExit)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[5] || (_cache[5] = //@ts-ignore
-                        (...args) => _unref(enterFullscreen) && _unref(enterFullscreen)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "fullscreenEnterIcon", {}, () => [
-                          _createVNode(IconFullscreenEnter)
-                        ])
-                      ]))
-                    ])
-                  ],
-                  512
-                  /* NEED_PATCH */
-                )
-              ],
-              512
-              /* NEED_PATCH */
-            ), [
-              [_vShow, !hidden.value]
-            ])
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["name"])
-      ], 8, _hoisted_1);
-    };
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerTrackRef,
+  MagicPlayerPopoverRef,
+  MagicPlayerBarRef
+} from "../symbols";
+import "@maas/vue-equipment/utils/css/keyframes/fade-up-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-up-out.css";
+const {
+  id,
+  standalone = false,
+  transition
+} = defineProps({
+  id: { type: String, required: false },
+  standalone: { type: Boolean, required: false },
+  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 mappedTransition = computed(
+  () => transition ?? injectedOptions?.transition?.videoControls
+);
+const barRef = useTemplateRef("bar");
+const trackRef = useTemplateRef("track");
+const popoverRef = useTemplateRef("popover");
+const { initializeState } = usePlayerState(mappedInstanceId.value);
+const state = initializeState();
+const {
+  playing,
+  started,
+  paused,
+  waiting,
+  muted,
+  touched,
+  mouseEntered,
+  controlsMouseEntered,
+  fullscreen,
+  popoverOffsetX,
+  hasOverlay,
+  seekedTime,
+  dragging
+} = toRefs(state);
+const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
+const {
+  initialize,
+  destroy,
+  onMouseenter,
+  onMouseleave,
+  onMouseleaveTimeline
+} = usePlayerControlsApi({
+  id: mappedInstanceId.value,
+  barRef,
+  trackRef,
+  popoverRef
+});
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
+const visible = computed(() => {
+  switch (true) {
+    case standalone:
+      return true;
+    case (hasOverlay.value && !started.value):
+    case (playing.value && idle.value):
+    case (playing.value && !mouseEntered.value && !controlsMouseEntered.value):
+    case (injectedOptions?.autoplay && !started.value):
+    case (injectedOptions?.autoplay && !mouseEntered.value):
+    case (injectedOptions?.autoplay && !mouseEntered.value && !touched.value):
+      return false;
+    default:
+      return true;
   }
 });
+initialize();
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicPlayerInstanceId, mappedInstanceId.value);
+provide(MagicPlayerTrackRef, trackRef);
+provide(MagicPlayerPopoverRef, popoverRef);
+provide(MagicPlayerBarRef, barRef);
 </script>

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

@@ -1,44 +1,34 @@
-import '@maas/vue-equipment/utils/css/animations/fade-up-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-up-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-up-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-up-out.css';
 interface MagicPlayerControlsProps {
     id?: string;
     standalone?: boolean;
     transition?: string;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        popover?(_: {}): any;
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-        timelineBefore?(_: {}): any;
-        timelineAfter?(_: {}): any;
-        volumeOffIcon?(_: {}): any;
-        volumeOnIcon?(_: {}): any;
-        fullscreenExitIcon?(_: {}): any;
-        fullscreenEnterIcon?(_: {}): any;
-    };
-    refs: {
-        popoverRef: any;
-        barRef: any;
-        trackRef: any;
-    };
-    rootEl: any;
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_12: {}, __VLS_17: {}, __VLS_23: {}, __VLS_25: {}, __VLS_30: {}, __VLS_35: {}, __VLS_40: {};
+type __VLS_Slots = {} & {
+    popover?: (props: typeof __VLS_5) => any;
+} & {
+    playIcon?: (props: typeof __VLS_7) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_12) => any;
+} & {
+    timelineBefore?: (props: typeof __VLS_17) => any;
+} & {
+    timelineAfter?: (props: typeof __VLS_23) => any;
+} & {
+    volumeOffIcon?: (props: typeof __VLS_25) => any;
+} & {
+    volumeOnIcon?: (props: typeof __VLS_30) => any;
+} & {
+    fullscreenExitIcon?: (props: typeof __VLS_35) => any;
+} & {
+    fullscreenEnterIcon?: (props: typeof __VLS_40) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerControlsProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerControlsProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_component: import("vue").DefineComponent<MagicPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -3,15 +3,11 @@ export type UsePlayerAudioApiArgs = {
     id: MaybeRef<string>;
 };
 export declare function usePlayerAudioApi(args: UsePlayerAudioApiArgs): {
-    mouseEntered: import("vue").Ref<boolean, boolean>;
-    touched: import("vue").Ref<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
     seek: (time: number) => void;
     mute: () => void;
     unmute: () => void;
-    onMouseenter: () => void;
-    onMouseleave: () => void;
 };
 export type UsePlayerAudioApiReturn = ReturnType<typeof usePlayerAudioApi>;

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

@@ -1,19 +1,21 @@
-import { ref, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { toRefs, toValue } from "vue";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerAudioApi(args) {
   const { id } = args;
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(false);
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { currentTime, playing, paused, muted } = toRefs(state);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -24,57 +26,12 @@ export function usePlayerAudioApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
-  }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(id)) return;
-    if (payload.api === "player") {
-      switch (payload.key) {
-        case "mouseEntered":
-          mouseEntered.value = payload.value;
-          break;
-        case "touched":
-          touched.value = payload.value;
-          break;
-      }
-    }
-  });
-  watch(mouseEntered, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "mouseEntered",
-      value
-    });
-  });
-  watch(touched, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "touched",
-      value
-    });
-  });
   return {
-    mouseEntered,
-    touched,
     play,
     pause,
     togglePlay,
     seek,
     mute,
-    unmute,
-    onMouseenter,
-    onMouseleave
+    unmute
   };
 }

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

@@ -1,44 +1,18 @@
 import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerControlsApiArgs = {
     id: MaybeRef<string>;
-    barRef?: Ref<HTMLDivElement | undefined>;
-    trackRef?: Ref<HTMLDivElement | undefined>;
-    popoverRef?: Ref<HTMLDivElement | undefined>;
+    barRef?: Ref<HTMLDivElement | null>;
+    trackRef?: Ref<HTMLDivElement | null>;
+    popoverRef?: Ref<HTMLDivElement | null>;
 };
 export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
-    mouseEntered: Ref<boolean, boolean>;
-    dragging: Ref<boolean, boolean>;
-    seekedTime: Ref<number, number>;
-    seekedPercentage: Ref<number, number>;
-    scrubbedPercentage: Ref<number, number>;
+    initialize: () => void;
+    destroy: () => void;
     bufferedPercentage: import("vue").ComputedRef<number>;
-    thumbPercentage: Ref<number, number>;
-    popoverOffsetX: Ref<number, number>;
     onMouseenter: () => void;
     onMouseleave: () => void;
-    onPointerdown: (e: MouseEvent | TouchEvent) => void;
-    onPointerup: () => void;
-    onPointermove: (e: MouseEvent | TouchEvent) => void;
-    trackRect: Ref<{
-        height: number;
-        width: number;
-        x: number;
-        y: number;
-        readonly bottom: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        toJSON: () => any;
-    } | undefined, DOMRect | {
-        height: number;
-        width: number;
-        x: number;
-        y: number;
-        readonly bottom: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        toJSON: () => any;
-    } | undefined>;
+    onMouseleaveTimeline: () => void;
+    onPointerdown: (e: PointerEvent) => void;
+    onPointermove: (e: PointerEvent) => void;
 };
 export type UsePlayerControlsApiReturn = ReturnType<typeof usePlayerControlsApi>;