@maas/vue-equipment 0.40.0 → 1.0.0-beta.2

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

@@ -13,13 +13,9 @@ export function usePlayerControlsApi(args) {
   const barRect = ref(void 0);
   const trackRect = ref(void 0);
   const popoverRect = ref(void 0);
-  const { trackRef, barRef, popoverRef } = args;
-  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({
-    id: args.id
-  });
-  const { play, pause, seek } = usePlayerVideoApi({
-    id: args.id
-  });
+  const { id, trackRef, barRef, popoverRef } = args;
+  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({ id });
+  const { play, pause, seek } = usePlayerVideoApi({ id });
   const dragging = ref(false);
   const mouseEntered = ref(false);
   const seekedTime = ref(0);
@@ -119,8 +115,8 @@ export function usePlayerControlsApi(args) {
     defaultWindow,
     "resize",
     () => {
-      getTimelineTrackSize;
-      getPopoverSizes;
+      getTimelineTrackSize();
+      getPopoverSizes();
     },
     {
       passive: true
@@ -128,7 +124,7 @@ export function usePlayerControlsApi(args) {
   );
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "controls") {
       switch (payload.key) {
         case "dragging": {
@@ -176,7 +172,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(dragging, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "dragging",
       value
@@ -184,7 +180,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(mouseEntered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "mouseEntered",
       value
@@ -192,7 +188,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(seekedTime, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "seekedTime",
       value
@@ -200,7 +196,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(seekedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "seekedPercentage",
       value
@@ -208,7 +204,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(scrubbedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "scrubbedPercentage",
       value
@@ -216,7 +212,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(bufferedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "bufferedPercentage",
       value
@@ -224,7 +220,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(thumbPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "thumbPercentage",
       value
@@ -232,7 +228,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(popoverOffsetX, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "popoverOffsetX",
       value
@@ -240,7 +236,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(resumePlay, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "resumePlay",
       value
@@ -249,7 +245,7 @@ export function usePlayerControlsApi(args) {
   watch(barRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "barRect",
       value
@@ -258,7 +254,7 @@ export function usePlayerControlsApi(args) {
   watch(trackRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "trackRect",
       value
@@ -267,7 +263,7 @@ export function usePlayerControlsApi(args) {
   watch(popoverRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "popoverRect",
       value

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

@@ -13,7 +13,7 @@ export function usePlayerMediaApi(args) {
   const stalled = ref(false);
   const buffered = ref([]);
   const muted = ref(false);
-  const { mediaRef } = args;
+  const { mediaRef, id } = args;
   const remainingTime = computed(() => duration.value - currentTime.value);
   function timeRangeToArray(timeRanges) {
     let ranges = [];
@@ -122,7 +122,7 @@ export function usePlayerMediaApi(args) {
   });
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "media") {
       switch (payload.key) {
         case "currentTime":
@@ -163,7 +163,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(currentTime, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "currentTime",
       value
@@ -171,7 +171,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(duration, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "duration",
       value
@@ -179,7 +179,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(seeking, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "seeking",
       value
@@ -187,7 +187,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(volume, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "volume",
       value
@@ -195,7 +195,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(rate, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "rate",
       value
@@ -203,7 +203,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(waiting, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "waiting",
       value
@@ -211,7 +211,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(ended, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "ended",
       value
@@ -219,7 +219,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(playing, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "playing",
       value
@@ -227,7 +227,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(stalled, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "stalled",
       value
@@ -235,7 +235,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(buffered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "buffered",
       value
@@ -243,7 +243,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(muted, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "muted",
       value

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

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
-import type { MagicPlayerSourceType } from '../../types/index.js';
+import type { MagicPlayerOptions } from '../../types/index.js';
 export type UsePlayerRuntimeArgs = {
     id: MaybeRef<string>;
     mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
-    srcType?: MagicPlayerSourceType;
+    srcType?: MagicPlayerOptions['srcType'];
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {

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

@@ -6,7 +6,7 @@ export function usePlayerRuntime(args) {
   const loaded = ref(false);
   const defferedLoading = ref(false);
   const { mediaRef, srcType, src } = args;
-  const useNative = () => {
+  function useNative() {
     const el = toValue(mediaRef);
     if (!el || !src) return;
     el.src = src;
@@ -17,8 +17,8 @@ export function usePlayerRuntime(args) {
       },
       { once: true }
     );
-  };
-  const useHlsJS = async () => {
+  }
+  async function useHlsJS() {
     const el = toValue(mediaRef);
     if (!el) return;
     useEventListener(mediaRef, "play", () => {
@@ -49,7 +49,7 @@ export function usePlayerRuntime(args) {
       hls.loadSource(src);
       hls.attachMedia(el);
     }
-  };
+  }
   function initialize() {
     if (srcType === "native") {
       useNative();

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

@@ -4,11 +4,9 @@ import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerVideoApi(args) {
+  const { id, playerRef, videoRef } = args;
   const fullscreenTarget = ref(void 0);
-  const { playing, currentTime, muted } = usePlayerMediaApi({
-    id: args.id
-  });
-  const { playerRef, videoRef } = args;
+  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
   const touched = ref(false);
   const mouseEntered = ref(false);
   const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
@@ -82,7 +80,7 @@ export function usePlayerVideoApi(args) {
   }
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "player") {
       switch (payload.key) {
         case "mouseEntered":
@@ -99,7 +97,7 @@ export function usePlayerVideoApi(args) {
   });
   watch(mouseEntered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "mouseEntered",
       value
@@ -107,7 +105,7 @@ export function usePlayerVideoApi(args) {
   });
   watch(touched, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "touched",
       value
@@ -116,7 +114,7 @@ export function usePlayerVideoApi(args) {
   watch(fullscreenTarget, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "fullscreenTarget",
       value

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

@@ -1,8 +1,5 @@
-import type { MaybeRef } from '@vueuse/core';
-type usePlayerApiArgs = {
-    id: MaybeRef<string>;
-};
-export declare function useMagicPlayer(args: usePlayerApiArgs): {
+import type { MaybeRef } from 'vue';
+export declare function useMagicPlayer(id: MaybeRef<string>): {
     mediaApi: {
         currentTime: import("vue").Ref<number, number>;
         remainingTime: import("vue").ComputedRef<number>;
@@ -75,4 +72,3 @@ export declare function useMagicPlayer(args: usePlayerApiArgs): {
     };
 };
 export type UseMagicPlayerReturn = ReturnType<typeof useMagicPlayer>;
-export {};

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.mjs

@@ -2,11 +2,11 @@ import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
 import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
-export function useMagicPlayer(args) {
-  const mediaApi = usePlayerMediaApi({ id: args.id });
-  const videoApi = usePlayerVideoApi({ id: args.id });
-  const controlsApi = usePlayerControlsApi({ id: args.id });
-  const playerRuntime = usePlayerRuntime({ id: args.id });
+export function useMagicPlayer(id) {
+  const mediaApi = usePlayerMediaApi({ id });
+  const videoApi = usePlayerVideoApi({ id });
+  const controlsApi = usePlayerControlsApi({ id });
+  const playerRuntime = usePlayerRuntime({ id });
   return {
     mediaApi,
     videoApi,

package/dist/plugins/MagicPlayer/src/css/magic-player-audio-controls.css

@@ -0,0 +1,95 @@
+@import './magic-player-timeline.css';
+@import './magic-player-display-time.css';
+
+/* We keep this variable since it's used in multiple places */
+:root {
+  --magic-player-audio-controls-height: 3rem;
+}
+
+.magic-player-audio-controls {
+  width: 100%;
+  pointer-events: none;
+}
+
+.magic-player-audio-controls__bar {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  pointer-events: auto;
+}
+
+.magic-player-audio-controls__bar--inner {
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--magic-player-audio-controls-height);
+  padding: 0;
+  color: inherit;
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-audio-controls__item {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.magic-player-audio-controls__item.-shrink-0 {
+  flex-shrink: 0;
+}
+
+.magic-player-audio-controls__item.-grow {
+  flex-grow: 1;
+}
+
+.magic-player-audio-controls__item button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  outline: none;
+  appearance: none;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  width: 3rem;
+  height: var(--magic-player-audio-controls-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magic-player-audio-controls__item button svg {
+  display: block;
+  width: 1.25rem;
+  height: auto;
+}
+
+.magic-player-audio-controls__timeline {
+  width: 100%;
+}
+
+@container (max-width: 480px) {
+  .magic-player-audio-controls__item[data-slot='display-time-current'] {
+    display: none;
+  }
+}
+
+@container (max-width: 320px) {
+  .magic-player-audio-controls__item[data-slot='display-time-duration'] {
+    display: none;
+  }
+  .magic-player-audio-controls__item[data-slot='timeline'] {
+    padding-right: 1rem;
+  }
+}
+
+@container (max-width: 240px) {
+  .magic-player-audio-controls__item[data-slot='timeline'] {
+    display: none;
+  }
+  .magic-player-audio-controls__bar--inner {
+    justify-content: center;
+  }
+}

package/dist/plugins/MagicPlayer/src/css/magic-player-display-time.css

@@ -0,0 +1,10 @@
+.magic-player-display-time {
+  height: 100%;
+  width: 4rem;
+  font-size: 0.875rem;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+}

package/dist/plugins/MagicPlayer/src/css/magic-player-timeline.css

@@ -0,0 +1,89 @@
+:root {
+  --magic-player-timeline-track-height: 0.25rem;
+}
+
+.magic-player-timeline {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-timeline-track-height);
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-timeline__target {
+  position: relative;
+  width: 100%;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.magic-player-timeline__track {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-timeline-track-height);
+  background: rgba(250, 250, 250, 0.15);
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__inner-track {
+  position: relative;
+  border-radius: 50rem;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.magic-player-timeline__thumb {
+  position: absolute;
+  width: var(--magic-player-timeline-track-height);
+  height: var(--magic-player-timeline-track-height);
+  z-index: 10;
+}
+
+.magic-player-timeline__thumb-handle {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 300ms ease;
+  z-index: 10;
+  background-color: rgba(250, 250, 250, 1);
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__scrubbed,
+.magic-player-timeline__seeked,
+.magic-player-timeline__buffered {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-left: calc(-100% + var(--magic-player-timeline-track-height));
+  background: currentColor;
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__scrubbed {
+  z-index: 1;
+  min-width: var(--magic-player-timeline-track-height);
+  display: flex;
+}
+
+.magic-player-timeline__seeked {
+  opacity: 0.25;
+}
+
+.magic-player-timeline__buffered {
+  opacity: 0.15;
+}
+
+.magic-player-timeline:hover .magic-player-timeline__thumb-handle {
+  transform: translate3d(-50%, -50%, 0) scale(1);
+}

package/dist/plugins/MagicPlayer/src/css/magic-player-video-controls.css

@@ -0,0 +1,115 @@
+@import './magic-player-timeline.css';
+@import './magic-player-display-time.css';
+
+:root {
+  --magic-player-video-controls-left: 1.5rem;
+  --magic-player-video-controls-height: 3rem;
+}
+
+@media (max-width: 640px) {
+  :root {
+    --magic-player-video-controls-height: 2.5rem;
+    --magic-player-video-controls-left: 0.75rem;
+  }
+}
+
+.magic-player-video-controls {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  pointer-events: none;
+}
+
+.magic-player-video-controls-enter-active {
+  animation: fade-up-in 150ms ease;
+}
+
+.magic-player-video-controls-leave-active {
+  animation: fade-up-out 150ms ease;
+}
+
+.magic-player-video-controls__bar {
+  position: absolute;
+  width: calc(100% - (var(--magic-player-video-controls-left) * 2));
+  bottom: 1.5rem;
+  left: var(--magic-player-video-controls-left);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  pointer-events: auto;
+}
+
+.magic-player-video-controls__bar--inner {
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--magic-player-video-controls-height);
+  padding: 0 0.75rem;
+  background-color: rgba(32, 32, 32, 0.8);
+  backdrop-filter: blur(80px);
+  color: rgba(255, 255, 255, 1);
+  border-radius: 50rem;
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-video-controls__item {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.magic-player-video-controls__item.-shrink-0 {
+  flex-shrink: 0;
+}
+
+.magic-player-video-controls__item.-grow {
+  flex-grow: 1;
+}
+
+.magic-player-video-controls__item button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  outline: none;
+  appearance: none;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  width: 3rem;
+  height: var(--magic-player-video-controls-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magic-player-video-controls__item button svg {
+  display: block;
+  width: 1.25rem;
+  height: auto;
+}
+
+.magic-player-video-controls__timeline {
+  width: 100%;
+}
+
+.magic-player-video-controls[data-standalone='true'] {
+  position: relative;
+  inset: unset;
+  width: 100%;
+  --magic-player-video-controls-left: 0;
+  & .magic-player-video-controls__bar--inner {
+    background-color: transparent;
+    backdrop-filter: none;
+  }
+
+  & .magic-player-video-controls__bar {
+    position: relative;
+    bottom: 0;
+    padding: 0;
+    background-color: transparent;
+    border-radius: unset;
+    backdrop-filter: none;
+  }
+}

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

@@ -0,0 +1,5 @@
+import type { InjectionKey, MaybeRef } from 'vue';
+import type { MagicPlayerOptions } from '../types/index.js';
+declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
+declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey };

package/dist/plugins/MagicPlayer/src/symbols/index.mjs

@@ -0,0 +1,3 @@
+const MagicPlayerInstanceId = Symbol();
+const MagicPlayerOptionsKey = Symbol();
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey };