@maas/vue-equipment 0.1.2 → 0.2.0

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

@@ -0,0 +1,262 @@
+<template>
+  <div
+    class="magic-player-controls"
+    :class="{
+      '-fullscreen': isFullscreen,
+      '-touched': touched,
+      '-untouched': !touched,
+      '-playing': playing,
+      '-paused': !playing,
+      '-waiting': waiting,
+      '-idle': idle,
+      '-not-idle': !idle,
+      '-hover': isMouseEnter,
+      '-not-hover': !isMouseEnter,
+    }"
+    @mouseenter="isMouseEnter = true"
+    @mouseleave="isMouseEnter = false"
+  >
+    <div class="magic-player-controls__overlay" @click.stop="togglePlay">
+      <template v-if="waiting">
+        <button>
+          <icon-waiting />
+        </button>
+      </template>
+      <template v-else>
+        <button v-if="!playing">
+          <icon-play />
+        </button>
+        <button v-else>
+          <icon-pause />
+        </button>
+      </template>
+    </div>
+    <div class="magic-player-controls__bar">
+      <div
+        v-if="$slots.seekPopover"
+        v-show="!!seekedTime && touched"
+        ref="popoverRef"
+        class="magic-player-controls__popover"
+        :style="{ marginLeft: `${popoverOffsetX}%` }"
+      >
+        <slot name="seekPopover" />
+      </div>
+      <div class="magic-player-controls__bar--inner" ref="barRef">
+        <div class="magic-player-controls__item -shrink-0">
+          <button v-if="!playing" @click="play">
+            <icon-play />
+          </button>
+          <button v-else @click="pause">
+            <icon-pause />
+          </button>
+        </div>
+        <div class="magic-player-controls__item -grow">
+          <div class="magic-player-controls__timeline" ref="trackRef">
+            <magic-player-timeline />
+          </div>
+        </div>
+        <div class="magic-player-controls__item -shrink-0">
+          <button v-if="muted" @click="unmute">
+            <icon-volume-off />
+          </button>
+          <button v-else @click="mute">
+            <icon-volume-on />
+          </button>
+        </div>
+        <div class="magic-player-controls__item -shrink-0">
+          <button v-if="isFullscreen" @click="exitFullscreen">
+            <icon-fullscreen-exit />
+          </button>
+          <button v-else @click="enterFullscreen">
+            <icon-fullscreen-enter />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useIdle } from '@vueuse/core'
+import IconPlay from './icons/Play.vue'
+import IconPause from './icons/Pause.vue'
+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 IconWaiting from './icons/Waiting.vue'
+import { useInjectPlayer } from '../composables/usePlayer'
+import { useProvideControls } from '../composables/useControls'
+
+const barRef = ref<HTMLDivElement | undefined>(undefined)
+const trackRef = ref<HTMLDivElement | undefined>(undefined)
+const popoverRef = ref<HTMLDivElement | undefined>(undefined)
+
+const { mediaApi, playerApi } = useInjectPlayer()
+const { controlsApi } = useProvideControls({
+  barRef: barRef,
+  trackRef: trackRef,
+  popoverRef: popoverRef,
+})
+
+const { playing, muted, waiting } = mediaApi
+const {
+  touched,
+  isFullscreen,
+  play,
+  pause,
+  togglePlay,
+  mute,
+  unmute,
+  enterFullscreen,
+  exitFullscreen,
+} = playerApi
+
+const { popoverOffsetX, seekedTime } = controlsApi
+
+const { idle } = useIdle(3000)
+const isMouseEnter = ref(false)
+
+defineExpose({
+  controlsApi,
+})
+</script>
+
+<style lang="postcss">
+:root {
+  --magic-player-controls-height: 3rem;
+  --magic-player-controls-bottom: 1.5rem;
+  --magic-player-controls-padding: 0.75rem;
+  --magic-player-controls-gap: 1rem;
+  --magic-player-controls-border-radius: 50rem;
+  --magic-player-controls-background-color: rgba(32, 32, 32, 0.8);
+  --magic-player-controls-backdrop-filter: blur(80px);
+  --magic-player-controls-color: rgba(255, 255, 255, 1);
+  --magic-player-controls-icon-width: 1.25rem;
+  --magic-player-controls-overlay-background-color: rgba(0, 0, 0, 0.3);
+  --magic-player-controls-overlay-color: rgba(255, 255, 255, 1);
+  --magic-player-controls-transition-duration: 300ms;
+  --magic-player-controls-transition-timing-function: ease-out:
+}
+
+@media (max-width: 640px) {
+  :root {
+    --magic-player-controls-height: 2.5rem;
+    --magic-player-controls-bottom: 0.75rem;
+    --magic-player-controls-padding: 0.5rem;
+  }
+}
+
+.magic-player-controls {
+  position: absolute;
+  inset: 0;
+}
+
+.magic-player-controls__overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--magic-player-controls-overlay-background-color);
+  color: var(--magic-player-controls-overlay-color);
+  transition-duration: 300ms;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.magic-player-controls__overlay button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
+.magic-player-controls__bar {
+  position: absolute;
+  width: calc(100% - (var(--magic-player-controls-bottom) * 2));
+  bottom: var(--magic-player-controls-bottom);
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--magic-player-controls-gap);
+  transition-duration: var(--magic-player-controls-transition-duration);
+  transition-timing-function: var(--magic-player-controls-transition-timing-function);
+  transition-property: opacity, transform;
+}
+
+.magic-player-controls__bar--inner {
+  width: 100%;
+  height: var(--magic-player-controls-height);
+  padding: 0 var(--magic-player-controls-padding);
+  background-color: var(--magic-player-controls-background-color);
+  backdrop-filter: var(--magic-player-controls-backdrop-filter);
+  color: var(--magic-player-controls-color);
+  border-radius: var(--magic-player-controls-border-radius);
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-controls__item {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.magic-player-controls__item.-shrink-0 {
+  flex-shrink: 0;
+}
+
+.magic-player-controls__item.-grow {
+  flex-grow: 1;
+}
+
+.magic-player-controls__item button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  outline: none;
+  appearance: none;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  width: var(--magic-player-controls-height);
+  height: var(--magic-player-controls-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magic-player-controls__item button svg {
+  display: block;
+  width: var(--magic-player-controls-icon-width);
+  height: auto;
+}
+
+.magic-player-controls__timeline {
+  width: 100%;
+}
+
+.magic-player-controls.-playing.-idle .magic-player-controls__bar,
+.magic-player-controls.-playing.-not-hover .magic-player-controls__bar,
+.magic-player-controls.-untouched .magic-player-controls__bar {
+  opacity: 0;
+  transform: translate(-50%, 25%);
+}
+
+.magic-player-controls.-playing.-idle .magic-player-controls__overlay,
+.magic-player-controls.-playing.-not-hover .magic-player-controls__overlay {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,25 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    controlsApi: {
+        entered: import("vue").Ref<boolean>;
+        dragging: import("vue").Ref<boolean>;
+        seekedTime: import("vue").Ref<number>;
+        seekedPercentage: import("vue").Ref<number>;
+        scrubbedPercentage: import("vue").Ref<number>;
+        bufferedPercentage: import("vue").ComputedRef<number>;
+        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;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    seekPopover?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,132 @@
+<template>
+  <div
+    :style="{
+      width: `${thumbWidth}px`,
+      height: `${thumbHeight}px`,
+    }"
+    class="magic-player-mux-popover"
+  >
+    <canvas
+      ref="canvas"
+      :width="storyboard?.tile_width"
+      :height="storyboard?.tile_height"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { shallowRef, onMounted, watch, computed } from 'vue'
+import { useDevicePixelRatio } from '@vueuse/core'
+import { useInjectControls } from '../composables/useControls'
+
+const { controlsApi } = useInjectControls()
+const { seekedTime } = controlsApi
+
+import type { Ref } from 'vue'
+
+type Props = {
+  playbackId: string
+}
+
+type MuxStoryboard = {
+  url: string
+  tile_width: number
+  tile_height: number
+  duration: number
+  tiles: Array<{
+    start: number
+    x: number
+    y: number
+  }>
+}
+
+const props = defineProps<Props>()
+const canvas = shallowRef() as Ref<HTMLCanvasElement>
+let context: CanvasRenderingContext2D | undefined = undefined
+const storyboard = shallowRef<MuxStoryboard | undefined>()
+let image: HTMLImageElement | undefined = undefined
+
+const { pixelRatio } = useDevicePixelRatio()
+
+const thumbWidth = computed(() => {
+  if (!storyboard.value) return 0
+  return storyboard.value.tile_width / pixelRatio.value
+})
+
+const thumbHeight = computed(() => {
+  if (!storyboard.value) return 0
+  return storyboard.value.tile_height / pixelRatio.value
+})
+
+async function init() {
+  if (!props.playbackId) return
+
+  try {
+    storyboard.value = await fetch(
+      `https://image.mux.com/${props.playbackId}/storyboard.json`
+    ).then((res) => res.json())
+
+    if (!storyboard.value) throw new Error()
+
+    image = new Image()
+    image.src = storyboard.value.url
+    await image.decode()
+
+    context = canvas.value.getContext('2d')!
+    context.drawImage(image, 0, 0)
+  } catch (e: any) {
+    console.error('Can not initialize timeine preview.', e)
+  }
+}
+
+function drawFrame(time: number) {
+  if (!storyboard.value || !context || !image) return
+
+  const { tile_height, tile_width, tiles } = storyboard.value
+
+  let closestIndex = -1
+  let minDifference = Infinity
+
+  for (let i = 0; i < tiles.length; i++) {
+    const { start } = tiles[i]
+    const difference = Math.abs(start - time)
+
+    if (difference < minDifference) {
+      minDifference = difference
+      closestIndex = i
+    }
+  }
+
+  const tile = tiles[closestIndex]
+
+  context.drawImage(
+    image,
+    tile.x,
+    tile.y,
+    tile_width,
+    tile_height,
+    0,
+    0,
+    tile_width,
+    tile_height
+  )
+}
+
+onMounted(init)
+watch(() => seekedTime.value, drawFrame)
+</script>
+
+<style lang="postcss">
+:root {
+  --magic-player-popover-border-radius: 0.25rem;
+}
+
+.magic-player-mux-popover {
+  border-radius: var(--magic-player-popover-border-radius);
+  overflow: hidden;
+}
+
+canvas {
+  width: 100%;
+  height: auto;
+}
+</style>

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    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<{
+    playbackId: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,155 @@
+<template>
+  <div class="magic-player-timeline">
+    <div
+      class="magic-player-timeline__target"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+      @pointerdown="onPointerDown"
+      @pointerup="onPointerUp"
+      @pointermove="onPointerMove"
+    >
+      <div class="magic-player-timeline__slider-track">
+        <div
+          class="magic-player-timeline__slider-thumb"
+          :style="{ left: `${scrubbedPercentage}%` }"
+        >
+          <div class="magic-player-timeline__slider-thumb-handle" />
+        </div>
+        <div class="magic-player-timeline__slider-inner-track">
+          <div
+            class="magic-player-timeline__slider-buffered"
+            :style="{ left: `${bufferedPercentage}%` }"
+          />
+          <div
+            v-show="entered"
+            class="magic-player-timeline__slider-seeked"
+            :style="{ left: `${seekedPercentage}%` }"
+          />
+          <div
+            class="magic-player-timeline__slider-scrubbed"
+            :style="{ left: `${scrubbedPercentage}%` }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useInjectControls } from '../composables/useControls'
+
+const { controlsApi } = useInjectControls()
+const {
+  entered,
+  seekedPercentage,
+  scrubbedPercentage,
+  bufferedPercentage,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerDown,
+  onPointerUp,
+  onPointerMove,
+} = controlsApi
+</script>
+
+<style lang="postcss">
+:root {
+  --magic-player-target-height: 56px;
+  --magic-player-track-height: 4px;
+  --magic-player-track-bg-color: rgba(250, 250, 250, 0.15);
+  --magic-player-thumb-size: 1rem;
+  --magic-player-thumb-bg-color: rgba(250, 250, 250, 1);
+}
+
+.magic-player-timeline {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-track-height);
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-timeline__target {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-target-height);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.magic-player-timeline__slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-track-height);
+  background: var(--magic-player-track-bg-color);
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__slider-inner-track {
+  position: relative;
+  border-radius: 50rem;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.magic-player-timeline__slider-thumb {
+  position: absolute;
+  width: var(--magic-player-track-height);
+  height: var(--magic-player-track-height);
+  z-index: 10;
+}
+
+.magic-player-timeline__slider-thumb-handle {
+  position: absolute;
+  width: var(--magic-player-thumb-size);
+  height: var(--magic-player-thumb-size);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 300ms ease-out;
+  z-index: 10;
+  background-color: var(--magic-player-thumb-bg-color);
+  border-radius: 50rem;
+}
+.magic-player-timeline__slider-scrubbed,
+.magic-player-timeline__slider-seeked,
+.magic-player-timeline__slider-buffered {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-left: calc(-100% + var(--magic-player-track-height));
+  background: currentColor;
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__slider-scrubbed {
+  z-index: 1;
+  min-width: var(--magic-player-track-height);
+  display: flex;
+}
+
+.magic-player-timeline__slider-seeked {
+  opacity: 0.25;
+}
+
+.magic-player-timeline__slider-buffered {
+  opacity: 0.15;
+}
+
+.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.magic-player-timeline__seek-popover {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  transform: translateX(-50%);
+}
+</style>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="1"
+      y="6"
+      width="22"
+      height="12"
+      rx="3"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+<template>
+  <svg viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="12"
+      rx="3"
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 4C6.89543 4 6 4.89543 6 6V18C6 19.1046 6.89543 20 8 20C9.10457 20 10 19.1046 10 18V6C10 4.89543 9.10457 4 8 4Z"
+    />
+    <path
+      d="M16 4C14.8954 4 14 4.89543 14 6V18C14 19.1046 14.8954 20 16 20C17.1046 20 18 19.1046 18 18V6C18 4.89543 17.1046 4 16 4Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 4.76619C5 3.9889 5.84797 3.50878 6.5145 3.9087L18.5708 11.1425C19.2182 11.5309 19.2182 12.4691 18.5708 12.8575L6.5145 20.0913C5.84797 20.4912 5 20.0111 5 19.2338V4.76619Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.4 4.2C17.0592 3.70557 18 4.17595 18 5V6.17513L20.3643 4.22807C20.7906 3.87698 21.4208 3.93797 21.7719 4.36429C22.123 4.79062 22.062 5.42084 21.6357 5.77193L4.6357 19.7719C4.20938 20.123 3.57916 20.062 3.22807 19.6357C2.87698 19.2094 2.93797 18.5792 3.36429 18.2281L6.35555 15.7647C6.13812 15.5812 6 15.3068 6 15V9C6 8.44772 6.44772 8 7 8H11.3333L16.4 4.2Z"
+    />
+    <path
+      d="M11.4962 16.1221L18 10.766V19C18 19.824 17.0592 20.2944 16.4 19.8L11.4962 16.1221Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+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<{}>>, {}, {}>;
+export default _default;