lzc-video-player 0.0.0

package/src/components/Video/native/NativePlayer.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from "vue"
+import { NativePlayer } from "./NativePlayer"
+import type { NativePlayerOptions } from "./NativePlayer"
+
+const props = withDefaults(
+  defineProps<{
+    options?: NativePlayerOptions
+    poster?: string
+  }>(),
+  {},
+)
+
+const emit = defineEmits<{
+  (e: "ready", player: NativePlayer): void
+  (e: "destroy"): void
+}>()
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+let playerInstance: NativePlayer | null = null
+
+function getPlayer(): NativePlayer | null {
+  return playerInstance
+}
+
+onMounted(() => {
+  const el = videoRef.value
+  if (!el) return
+  playerInstance = new NativePlayer(el, props.options ?? {})
+  emit("ready", playerInstance)
+})
+
+onUnmounted(() => {
+  if (playerInstance && !playerInstance.isDisposed()) {
+    playerInstance.dispose()
+  }
+  playerInstance = null
+  emit("destroy")
+})
+
+defineExpose({
+  getPlayer,
+})
+</script>
+
+<template>
+  <video
+    ref="videoRef"
+    class="lzc-video-tech absolute inset-0 w-full h-full object-contain block bg-black"
+    playsinline
+    webkit-playsinline
+  />
+</template>

package/src/components/Video/native/index.ts

@@ -0,0 +1,9 @@
+export { EventEmitter } from "./EventEmitter"
+export {
+  NativePlayer,
+  createStubQualityLevels,
+  type NativePlayerAPI,
+  type NativePlayerOptions,
+  type StubQualityLevels,
+} from "./NativePlayer"
+export { default as NativePlayerComponent } from "./NativePlayer.vue"

package/src/components/Video/native/native-player.css

@@ -0,0 +1,183 @@
+@tailwind components;
+@tailwind utilities;
+
+/* Scoped reset to keep Tailwind utilities working without global preflight. */
+.lzc-video-player,
+.lzc-video-player::backdrop {
+  box-sizing: border-box;
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
+}
+
+.lzc-video-player *,
+.lzc-video-player *::before,
+.lzc-video-player *::after {
+  box-sizing: inherit;
+}
+
+.lzc-video-player {
+  position: relative;
+  isolation: isolate;
+  --lzc-player-safe-area-left: 0px;
+  --lzc-player-safe-area-right: 0px;
+}
+
+.lzc-video-player .lzc-video-stage {
+  isolation: isolate;
+}
+
+.lzc-video-player .lzc-video-tech {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lzc-video-player .lzc-player-foreground,
+.lzc-video-player .lzc-player-spinner,
+.lzc-video-player .lzc-player-modal,
+.lzc-video-player .lzc-player-controls {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lzc-video-player .lzc-player-foreground {
+  z-index: 20;
+}
+
+.lzc-video-player .lzc-player-spinner {
+  z-index: 30;
+}
+
+.lzc-video-player .lzc-player-modal {
+  z-index: 35;
+}
+
+.lzc-video-player .lzc-player-controls {
+  z-index: 40;
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: var(--lzc-ios-fs-width, 100vw) !important;
+  height: var(--lzc-ios-fs-height, 100vh) !important;
+  --lzc-safe-area-inset-top: 0px;
+  --lzc-safe-area-inset-bottom: 0px;
+  --lzc-safe-area-inset-left: var(
+    --lzc-safe-area-left,
+    env(safe-area-inset-left, 0px)
+  );
+  --lzc-safe-area-inset-right: var(
+    --lzc-safe-area-right,
+    env(safe-area-inset-right, 0px)
+  );
+  --lzc-player-safe-area-left: var(--lzc-safe-area-inset-left);
+  --lzc-player-safe-area-right: var(--lzc-safe-area-inset-right);
+  transform: translate(-50%, -50%) rotate(var(--lzc-ios-fs-rotate, 0deg));
+  transform-origin: center center;
+  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: transform;
+  z-index: 9999 !important;
+  background: #000;
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen-portrait {
+  --lzc-safe-area-inset-left: var(
+    --lzc-safe-area-top,
+    env(safe-area-inset-top, 0px)
+  );
+  --lzc-safe-area-inset-right: var(
+    --lzc-safe-area-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+  --lzc-player-safe-area-left: var(--lzc-safe-area-inset-left);
+  --lzc-player-safe-area-right: var(--lzc-safe-area-inset-right);
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen-exiting {
+  --lzc-safe-area-inset-top: var(
+    --lzc-safe-area-top,
+    env(safe-area-inset-top, 0px)
+  );
+  --lzc-safe-area-inset-bottom: var(
+    --lzc-safe-area-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+  --lzc-player-safe-area-left: 0px;
+  --lzc-player-safe-area-right: 0px;
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen,
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-video-stage {
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-video-tech {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-player-foreground,
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-player-spinner,
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-player-modal,
+.lzc-video-player.vjs-ios-fake-fullscreen .lzc-player-controls {
+  -webkit-transform: translate3d(0, 0, 1px);
+  transform: translate3d(0, 0, 1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lzc-video-player.vjs-ios-fake-fullscreen {
+    transition: none;
+  }
+}

package/src/components/Video/native/playerKey.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from "vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+
+export const nativePlayerKey: InjectionKey<Ref<NativePlayerAPI | null>> =
+  Symbol("nativePlayer")

package/src/components/Video/native/useNativeCastMiddleware.ts

@@ -0,0 +1,50 @@
+import type { VideoInfo } from "@/model"
+import type { LzcPlayer } from "../player"
+import {
+  detachCastSession,
+  doPlayNextAction,
+  doSeekAction,
+} from "../components/LzcOverlay/useCast"
+
+export function useNativeCastMiddleware(player: LzcPlayer) {
+  player.on("startCasting", (e: any) => {
+    if (e?.preview === true) {
+      return
+    }
+    player.src({
+      src: player.currentSrc(),
+      type: "video/lzc-cast",
+    })
+  })
+
+  player.on("closeCasting", () => {
+    if (!player.isCastMode()) {
+      detachCastSession()
+      return
+    }
+    const time = player.currentTime() as number
+    const src = player.currentSrc()
+    detachCastSession()
+    player.src({ src })
+    if (Number.isFinite(time)) {
+      player.currentTime(time)
+    }
+  })
+
+  player.on("lzcSeekBarUp", () => {
+    if (player.isCastMode()) {
+      doSeekAction((player.currentTime() as number) || 0)
+    }
+  })
+
+  player.on("openVideo", async (e: any) => {
+    if (!player.isCastMode()) return
+    const info = e.info as VideoInfo
+    console.debug("cast openVideo: ", info)
+    await doPlayNextAction(player, info.sourceUrl)
+    player.src({
+      src: info.sourceUrl,
+      type: "video/lzc-cast",
+    })
+  })
+}

package/src/components/Video/native/useNativePlayer.ts

@@ -0,0 +1,3 @@
+// useNativePlayer - composable version of NativePlayer
+export type { NativePlayerOptions, StubQualityLevels, NativePlayer } from "./NativePlayer"
+export { createStubQualityLevels } from "./NativePlayer"

package/src/components/Video/native/useNativePlayerFullscreen.ts

@@ -0,0 +1,44 @@
+import { ref, type Ref } from "vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+import { isMobile } from "@/use/useUtils"
+
+export function useNativePlayerFullscreen(
+  player: Ref<NativePlayerAPI | null>,
+  options: { showTopBar?: boolean },
+) {
+  const showTopBar = ref(true)
+  let boundPlayer: NativePlayerAPI | null = null
+
+  function onFullscreenChange() {
+    const p = player.value
+    if (!p) return
+    if (p.isFullscreen()) {
+      showTopBar.value = options.showTopBar !== false || isMobile()
+    } else {
+      showTopBar.value = options.showTopBar !== false
+    }
+  }
+
+  function bind(p: NativePlayerAPI) {
+    if (boundPlayer === p) return
+    if (boundPlayer) {
+      boundPlayer.off("fullscreenchange", onFullscreenChange)
+    }
+    boundPlayer = p
+    p.on("fullscreenchange", onFullscreenChange)
+    onFullscreenChange()
+  }
+
+  function unbindIfNeeded() {
+    if (!boundPlayer) return
+    boundPlayer.off("fullscreenchange", onFullscreenChange)
+    boundPlayer = null
+  }
+
+  return {
+    showTopBar,
+    onFullscreenChange,
+    bind,
+    unbindIfNeeded,
+  }
+}

package/src/components/Video/native/useNativePlayerHistory.ts

@@ -0,0 +1,69 @@
+import type { Ref } from "vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+import debounce from "lodash.debounce"
+import { makeVideoFrame } from "../videoFrame"
+import type { useHistoryInfo } from "@/stores/playlist"
+
+export function useNativePlayerHistory(
+  player: Ref<NativePlayerAPI | null>,
+  store: ReturnType<typeof useHistoryInfo>,
+) {
+  function updateHistory(updateCover: boolean) {
+    const p = player.value
+    if (!p || p.isDisposed()) return
+    const currentInfo = p.currentVideoInfo()
+    if (!currentInfo) return
+    const info = {
+      ...currentInfo,
+      duration: p.duration() ?? currentInfo.duration,
+      currentTime: p.currentTime() ?? currentInfo.currentTime,
+      name: p.currentVideoName() ?? currentInfo.name,
+    }
+    if (p.ended()) {
+      info.currentTime = 0
+    }
+    const blobFn = updateCover ? () => makeVideoFrame(p as any) : null
+    store.updateOrCreateHistory(info as any, blobFn)
+  }
+
+  const debouncedUpdateHistory = debounce(() => updateHistory(false), 5000, {
+    maxWait: 15000,
+  })
+
+  let unbind: (() => void) | null = null
+
+  function bind(p: NativePlayerAPI) {
+    unbind?.()
+    const onBack = () => updateHistory(false)
+    const onPause = () => updateHistory(true)
+    const onPlay = () => debouncedUpdateHistory()
+    const onSubtitleChange = () => debouncedUpdateHistory()
+    p.on("back", onBack)
+    p.on("seeked", debouncedUpdateHistory)
+    p.on("pause", onPause)
+    p.on("play", onPlay)
+    p.on("timeupdate", debouncedUpdateHistory)
+    p.on("ended", onBack)
+    p.on("subtitlechange", onSubtitleChange)
+    unbind = () => {
+      p.off("back", onBack)
+      p.off("seeked", debouncedUpdateHistory)
+      p.off("pause", onPause)
+      p.off("play", onPlay)
+      p.off("timeupdate", debouncedUpdateHistory)
+      p.off("ended", onBack)
+      p.off("subtitlechange", onSubtitleChange)
+      debouncedUpdateHistory.cancel()
+      unbind = null
+    }
+  }
+
+  return {
+    updateHistory,
+    debouncedUpdateHistory,
+    bind,
+    unbindIfNeeded: () => {
+      unbind?.()
+    },
+  }
+}

package/src/components/Video/native/useNativePlayerModal.ts

@@ -0,0 +1,68 @@
+import { ref } from "vue"
+
+export function useNativePlayerModal() {
+  const modalVisible = ref(false)
+  const modalPage = ref("")
+  const modalPosition = ref({ right: 0, bottom: 0 })
+
+  function getTargetLayoutRect(target: HTMLElement, containerEl: HTMLElement) {
+    let left = 0
+    let top = 0
+    let node: HTMLElement | null = target
+    while (node && node !== containerEl) {
+      left += node.offsetLeft
+      top += node.offsetTop
+      node = node.offsetParent as HTMLElement | null
+    }
+    if (node === containerEl) {
+      return {
+        left,
+        top,
+        width: target.offsetWidth || 0,
+        height: target.offsetHeight || 0,
+      }
+    }
+    return null
+  }
+
+  function setMenuPosition(ev: Event, containerEl: HTMLElement | null) {
+    const target =
+      (ev.target as HTMLElement)?.closest?.("button") ||
+      (ev.target as HTMLElement)
+    if (!target || !containerEl) return
+    const layoutRect = getTargetLayoutRect(target, containerEl)
+    const fallbackTargetRect = target.getBoundingClientRect()
+    const fallbackContainerRect = containerEl.getBoundingClientRect()
+    const left = layoutRect
+      ? layoutRect.left
+      : fallbackTargetRect.left - fallbackContainerRect.left
+    const top = layoutRect
+      ? layoutRect.top
+      : fallbackTargetRect.top - fallbackContainerRect.top
+    const width = layoutRect ? layoutRect.width : fallbackTargetRect.width
+    modalPosition.value = {
+      right: containerEl.clientWidth - (left + width / 2),
+      bottom: containerEl.clientHeight - top,
+    }
+  }
+
+  function openModal(page: string, ev: Event, containerEl: HTMLElement | null) {
+    setMenuPosition(ev, containerEl)
+    modalPage.value = page
+    modalVisible.value = true
+  }
+
+  function closeModal() {
+    modalVisible.value = false
+    modalPage.value = ""
+  }
+
+  return {
+    modalVisible,
+    modalPage,
+    modalPosition,
+    openModal,
+    closeModal,
+    setMenuPosition,
+  }
+}

package/src/components/Video/native/useNativePlayerPlaylist.ts

@@ -0,0 +1,67 @@
+import type { Ref } from "vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+import type { useHistoryInfo } from "@/stores/playlist"
+import { isSourceEqual } from "@/use/useUtils"
+import type { VideoInfo } from "@/model"
+
+export function useNativePlayerPlaylist(
+  player: Ref<NativePlayerAPI | null>,
+  store: ReturnType<typeof useHistoryInfo>,
+  options: {
+    playPrev?: () => void
+    playNext?: () => void
+  },
+) {
+  function findCurrentIndex(p: NativePlayerAPI): number {
+    const currentInfo = p.currentVideoInfo()
+    if (currentInfo?.sourceUrl) {
+      const idxByInfo = store.infos.findIndex((info: VideoInfo) => {
+        try {
+          return isSourceEqual(info.sourceUrl, currentInfo)
+        } catch {
+          if (info.sourceUrl === currentInfo.sourceUrl) return true
+          return !!info.path && !!currentInfo.path && info.path === currentInfo.path
+        }
+      })
+      if (idxByInfo >= 0) return idxByInfo
+    }
+
+    const src = p.currentSrc()
+    return store.infos.findIndex((info: VideoInfo) => {
+      try {
+        return isSourceEqual(src, info)
+      } catch {
+        return info.sourceUrl === src
+      }
+    })
+  }
+
+  function bind(p: NativePlayerAPI) {
+    p.playPrev = () => {
+      if (options.playPrev) {
+        options.playPrev()
+        return
+      }
+      store.ready.then(() => {
+        const idx = findCurrentIndex(p)
+        if (idx > 0) p.trigger({ type: "openVideo", info: store.infos[idx - 1] })
+      })
+    }
+    p.playNext = () => {
+      if (options.playNext) {
+        options.playNext()
+        return
+      }
+      store.ready.then(() => {
+        const idx = findCurrentIndex(p)
+        if (idx >= 0 && idx < store.infos.length - 1) {
+          p.trigger({ type: "openVideo", info: store.infos[idx + 1] })
+        }
+      })
+    }
+  }
+
+  return {
+    bind,
+  }
+}