lzc-video-player 0.0.0

package/src/components/Video/NativeVideoPlayer.vue

@@ -0,0 +1,748 @@
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  provide,
+  unref,
+  watch,
+  getCurrentInstance,
+  createApp,
+  nextTick,
+} from "vue"
+import type { NativePlayerAPI } from "./native/NativePlayer"
+import NativePlayerComponent from "./native/NativePlayer.vue"
+import NativeControls from "./native/NativeControls.vue"
+import NativeModal from "./native/NativeModal.vue"
+import { useSource } from "./useSource"
+import { useHistoryInfo } from "@/stores/playlist"
+import { isMobile } from "@/use/useUtils"
+import { nativePlayerKey } from "./native/playerKey"
+import { useNativePlayerState } from "./native/useNativePlayerState"
+import { useNativePlayerHistory } from "./native/useNativePlayerHistory"
+import { useNativePlayerPlaylist } from "./native/useNativePlayerPlaylist"
+import { useNativePlayerModal } from "./native/useNativePlayerModal"
+import { useNativePlayerFullscreen } from "./native/useNativePlayerFullscreen"
+import { useEventListener } from "@vueuse/core"
+import { useKeyBind } from "@/use/useKeyBind"
+import type { Subtitle } from "@/model"
+import LzcOverlay from "./components/LzcOverlay/index.vue"
+import { useNativeCastMiddleware } from "./native/useNativeCastMiddleware"
+import BackgroundSvg from "@/icons/移动端_背景.webp?inline"
+import "./native/native-player.css"
+
+const emit = defineEmits<{
+  (e: "back"): void
+  (e: "init", player: NativePlayerAPI): void
+  (e: "fullscreenchange", value: boolean, id: string): void
+  (e: "controlBarActive", show: boolean): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    onInit?: (player: NativePlayerAPI) => void
+    options?: {
+      mediaPrefix?: string
+      autoplay?: boolean
+      preload?: string
+      showTopBar?: boolean
+      playMode?: "standard" | "direct"
+      hidePrevButton?: boolean
+      hideNextButton?: boolean
+      hidePlayList?: boolean
+      playPrev?: () => void
+      playNext?: () => void
+      [key: string]: unknown
+    }
+    poster?: string
+    shortcutToggle?: boolean
+    containerId?: string
+  }>(),
+  {
+    poster: BackgroundSvg,
+    shortcutToggle: true,
+    containerId: "native-player",
+  },
+)
+const safePlay = (p: NativePlayerAPI, scene: string) => {
+  void Promise.resolve(p.play()).catch((err: any) => {
+    if (err?.name !== "AbortError") {
+      console.error(`${scene} play failed`, err)
+    }
+  })
+}
+
+const isDirectMode = computed(() => props.options?.playMode === "direct")
+
+function createDialogFallback(q: any, getContainer?: () => HTMLElement | null) {
+  return (options?: {
+    component?: any
+    componentProps?: Record<string, unknown>
+  }) => {
+    if (typeof document === "undefined" || !options?.component) {
+      return {
+        onOk: () => {},
+        onCancel: () => {},
+        onDismiss: () => {},
+      }
+    }
+    const host = document.createElement("div")
+    host.setAttribute("data-no-play-toggle", "")
+    const container = getContainer?.() ?? null
+    const parent = container ?? document.body
+    parent.appendChild(host)
+    if (container) {
+      host.style.position = "absolute"
+      host.style.inset = "0"
+      host.style.zIndex = "50"
+      host.style.pointerEvents = "auto"
+    }
+    let app: ReturnType<typeof createApp> | null = null
+    const cleanup = () => {
+      if (app) {
+        app.unmount()
+        app = null
+      }
+      if (host.parentNode) host.parentNode.removeChild(host)
+    }
+    app = createApp(options.component, {
+      ...(options.componentProps || {}),
+      inline: true,
+      onClose: cleanup,
+      onOk: cleanup,
+      onHide: cleanup,
+    })
+    app.config.globalProperties.$q = q
+    app.provide("_q_", q)
+    app.mount(host)
+    nextTick(() => {
+      const inst = app?._instance?.proxy as any
+      if (inst?.show) inst.show()
+    })
+    return {
+      onOk: () => {},
+      onCancel: cleanup,
+      onDismiss: cleanup,
+    }
+  }
+}
+
+function ensureQuasarGlobals(getContainer?: () => HTMLElement | null) {
+  const inst = getCurrentInstance()
+  if (!inst) return null
+  const globals = inst.appContext.config.globalProperties as any
+  if (!globals.$q) {
+    globals.$q = {
+      iconMapFn: null,
+      lang: { rtl: false },
+      iconSet: {},
+      platform: { is: { ios: false, desktop: true, mobile: false } },
+      screen: { width: 0, height: 0, name: "md" },
+      config: {},
+      dark: { isActive: false },
+    }
+  }
+  const baseQ = globals.$q
+  if (baseQ.iconMapFn === undefined) baseQ.iconMapFn = null
+  if (!baseQ.lang) baseQ.lang = { rtl: false }
+  if (!baseQ.iconSet) baseQ.iconSet = {}
+  if (!baseQ.platform) {
+    baseQ.platform = { is: { ios: false, desktop: true, mobile: false } }
+  }
+  if (!baseQ.screen) {
+    baseQ.screen = { width: 0, height: 0, name: "md" }
+  }
+  if (!baseQ.config) baseQ.config = {}
+  if (!baseQ.dark) baseQ.dark = { isActive: false }
+
+  const fallbackDialog = createDialogFallback(baseQ, getContainer)
+  const baseDialog =
+    typeof baseQ.dialog === "function" ? baseQ.dialog.bind(baseQ) : undefined
+  const scopedQ = Object.create(baseQ)
+  scopedQ.dialog = (options?: {
+    component?: any
+    componentProps?: Record<string, unknown>
+  }) => {
+    if (baseDialog) {
+      return baseDialog(options)
+    }
+    return fallbackDialog(options)
+  }
+  return scopedQ
+}
+
+/** 无封面时传 undefined，避免 poster="null" 字符串导致 video 使用无效地址 */
+const effectivePoster = computed(() => {
+  const p = props.poster
+  if (p == null || p === "" || String(p) === "null") return undefined
+  return p
+})
+
+const containerRef = ref<HTMLElement | null>(null)
+const player = ref<NativePlayerAPI | null>(null)
+provide(nativePlayerKey, player)
+const quasar = ensureQuasarGlobals(() => containerRef.value)
+if (quasar) {
+  provide("_q_", quasar)
+}
+
+const store = useHistoryInfo()
+const state = useNativePlayerState(player)
+const history = useNativePlayerHistory(player, store)
+const playlist = useNativePlayerPlaylist(player, store, {
+  playPrev: props.options?.playPrev,
+  playNext: props.options?.playNext,
+})
+const modal = useNativePlayerModal()
+const fullscreen = useNativePlayerFullscreen(player, {
+  showTopBar: props.options?.showTopBar,
+})
+const controlsActive = ref(true)
+let controlsTimer: ReturnType<typeof setTimeout> | null = null
+let rootClickTimer: ReturnType<typeof setTimeout> | null = null
+const beforeHiddenSubtitle = ref<Subtitle | null>(null)
+const isCursorInactive = computed(
+  () => !isMobile() && state.isPlaying.value && !controlsActive.value,
+)
+
+function emitControlBar(value: boolean) {
+  if (controlsActive.value === value) return
+  controlsActive.value = value
+  emit("controlBarActive", value)
+}
+
+function scheduleControlsHide() {
+  if (controlsTimer) {
+    clearTimeout(controlsTimer)
+    controlsTimer = null
+  }
+  if (!state.isPlaying.value) {
+    emitControlBar(true)
+    return
+  }
+  controlsTimer = setTimeout(() => {
+    emitControlBar(false)
+  }, 3000)
+}
+
+function activateControls() {
+  emitControlBar(true)
+  scheduleControlsHide()
+}
+
+function getTargetElement(target: EventTarget | null): Element | null {
+  if (!target) return null
+  if (target instanceof Element) return target
+  if (target instanceof Node) return target.parentElement
+  return null
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  const el = getTargetElement(target)
+  if (!(el instanceof HTMLElement)) return false
+  if (el.isContentEditable) return true
+  return !!el.closest("input, textarea, select, [contenteditable='true']")
+}
+
+function shouldSkipClickToggle(target: EventTarget | null): boolean {
+  const el = getTargetElement(target)
+  if (!el) return false
+  if (el.closest("[data-no-play-toggle]")) return true
+  if (
+    el.closest(
+      "button, a, input, textarea, select, img, svg, path, [role='button'], [role='link'], .q-icon, .q-btn",
+    )
+  ) {
+    return true
+  }
+  return false
+}
+
+function togglePlayPauseByUser(scene: string) {
+  const p = player.value
+  if (!p || p.isDisposed() || p.isCastMode?.()) return
+  if (p.paused()) {
+    safePlay(p, scene)
+  } else {
+    p.pause()
+  }
+}
+
+function clearPendingRootClick() {
+  if (!rootClickTimer) return
+  clearTimeout(rootClickTimer)
+  rootClickTimer = null
+}
+
+function toggleFullscreenByUser() {
+  const p = player.value
+  if (!p || p.isDisposed()) return
+  if (p.isFullscreen()) {
+    p.exitFullscreen()
+  } else {
+    p.requestFullscreen()
+  }
+}
+
+function onRootClick(e: MouseEvent) {
+  if (isMobile()) return
+  activateControls()
+  if (e.button !== 0) return
+  if (shouldSkipClickToggle(e.target)) return
+  clearPendingRootClick()
+  rootClickTimer = setTimeout(() => {
+    rootClickTimer = null
+    togglePlayPauseByUser("click toggle")
+  }, 220)
+}
+
+function onRootDoubleClick(e: MouseEvent) {
+  if (isMobile()) return
+  activateControls()
+  if (e.button !== 0) return
+  if (shouldSkipClickToggle(e.target)) return
+  clearPendingRootClick()
+  toggleFullscreenByUser()
+}
+
+function onRootMouseMove() {
+  if (isMobile()) return
+  activateControls()
+}
+
+function onRootTouchStart(e: TouchEvent) {
+  if (!isMobile()) {
+    activateControls()
+    return
+  }
+  if (shouldSkipClickToggle(e.target)) return
+  if (controlsTimer) {
+    clearTimeout(controlsTimer)
+    controlsTimer = null
+  }
+  if (controlsActive.value) {
+    emitControlBar(false)
+    return
+  }
+  emitControlBar(true)
+  scheduleControlsHide()
+}
+
+const shortcutToggle = computed(() => props.shortcutToggle)
+
+function onBack() {
+  const p = player.value
+  if (isMobile() && p?.isFullscreen()) {
+    p.exitFullscreen()
+  } else {
+    history.updateHistory(false)
+    player.value?.dispose()
+    player.value = null
+    emit("back")
+  }
+}
+
+function openModal(page: string, ev: Event) {
+  modal.openModal(page, ev, containerRef.value)
+  activateControls()
+}
+
+function updateSubtitleHiddenHistory(p: NativePlayerAPI) {
+  const info = p.currentVideoInfo()
+  if (!info) return
+  if (p.isSubtitleHidden()) {
+    const sub = beforeHiddenSubtitle.value
+    if (sub) {
+      store.updateOrCreateHistory(
+        {
+          ...info,
+          beforeHiddenSubtitle: sub,
+        } as any,
+        null,
+      )
+    }
+  } else {
+    store.updateOrCreateHistory(
+      {
+        ...info,
+        beforeHiddenSubtitle: undefined,
+      } as any,
+      null,
+    )
+  }
+}
+
+function restoreHiddenSubtitle(p: NativePlayerAPI) {
+  const info = p.currentVideoInfo()
+  if (!info?.sourceUrl) return
+  const historyInfo = store.getHistoryInfo(info.sourceUrl)
+  const saved = historyInfo?.beforeHiddenSubtitle
+  if (!saved) return
+  const available = p.getAvaliableSubtitles?.() || []
+  const found = available.find(
+    (sub) => sub.name === saved.name && sub.stream_index === saved.stream_index,
+  )
+  if (found) {
+    beforeHiddenSubtitle.value = saved
+    p.setSubtitleHidden(true)
+  }
+}
+
+function hasAvailableSubtitles(p: NativePlayerAPI): boolean {
+  const available = p.getAvaliableSubtitles?.()
+  return Array.isArray(available) && available.length > 0
+}
+
+function getSortedPlaybackRates(p: NativePlayerAPI): number[] {
+  const rates = p
+    .playbackRates()
+    .filter((rate) => Number.isFinite(rate) && rate > 0)
+    .sort((a, b) => a - b)
+  return Array.from(new Set(rates))
+}
+
+function getSteppedPlaybackRate(
+  rates: number[],
+  currentRate: number,
+  direction: 1 | -1,
+): number | null {
+  const epsilon = 1e-6
+  if (direction > 0) {
+    for (const rate of rates) {
+      if (rate > currentRate + epsilon) return rate
+    }
+    return null
+  }
+  for (let i = rates.length - 1; i >= 0; i -= 1) {
+    if (rates[i] < currentRate - epsilon) return rates[i]
+  }
+  return null
+}
+
+function adjustPlaybackRateByShortcut(direction: 1 | -1) {
+  const p = player.value
+  if (!p || p.isDisposed() || p.isCastMode?.()) return
+  const currentRateValue = p.playbackRate()
+  if (
+    typeof currentRateValue !== "number" ||
+    !Number.isFinite(currentRateValue)
+  ) {
+    return
+  }
+  const rates = getSortedPlaybackRates(p)
+  if (!rates.length) return
+  const nextRate = getSteppedPlaybackRate(rates, currentRateValue, direction)
+  if (nextRate == null) return
+  p.playbackRate(nextRate)
+}
+
+function consumeKeyboardEvent(e: KeyboardEvent) {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+useEventListener("keydown", (e: KeyboardEvent) => {
+  if (!shortcutToggle.value) return
+  if (isMobile()) return
+  if (
+    e.shiftKey &&
+    !e.ctrlKey &&
+    !e.altKey &&
+    !e.metaKey &&
+    !e.repeat &&
+    !isEditableTarget(e.target)
+  ) {
+    if (e.code === "ArrowRight") {
+      consumeKeyboardEvent(e)
+      adjustPlaybackRateByShortcut(1)
+      return
+    }
+    if (e.code === "ArrowLeft") {
+      consumeKeyboardEvent(e)
+      adjustPlaybackRateByShortcut(-1)
+      return
+    }
+  }
+  if (e.code === "Space") {
+    if (isEditableTarget(e.target)) return
+    e.preventDefault()
+    togglePlayPauseByUser("keyboard toggle")
+  }
+})
+
+useKeyBind(
+  {
+    ArrowLeft: () => {
+      const p = player.value
+      if (!p) return
+      p.currentTime(Math.max(0, (p.currentTime() as number) - 5))
+    },
+    ArrowRight: () => {
+      const p = player.value
+      if (!p) return
+      p.currentTime(
+        Math.min(p.duration() as number, (p.currentTime() as number) + 5),
+      )
+    },
+    ArrowUp: async () => {
+      const p = player.value
+      if (!p) return
+      const v = await Promise.resolve(p.volume() as number)
+      p.volume(Math.min(100, v * 100 + 5) / 100)
+      p.trigger("lzcVolumeShow")
+    },
+    ArrowDown: async () => {
+      const p = player.value
+      if (!p) return
+      const v = await Promise.resolve(p.volume() as number)
+      p.volume(Math.max(0, v * 100 - 5) / 100)
+      p.trigger("lzcVolumeShow")
+    },
+  },
+  shortcutToggle,
+)
+
+useEventListener("keydown", (e: KeyboardEvent) => {
+  if (!shortcutToggle.value) return
+  if (e.altKey && (e.key === "h" || e.key === "H")) {
+    const p = player.value
+    if (!p || p.isDisposed()) return
+    if (isDirectMode.value) return
+    if (!hasAvailableSubtitles(p)) return
+    e.preventDefault()
+    p.toggleSubtitleVisibility()
+  }
+})
+
+function onPlayerReady(p: NativePlayerAPI) {
+  player.value = p
+  useSource(p as any, {
+    externalPrevNextControl: {
+      prev: !!props.options?.playPrev,
+      next: !!props.options?.playNext,
+    },
+  })
+  if (!isDirectMode.value) {
+    useNativeCastMiddleware(p as any)
+  }
+
+  if (containerRef.value) {
+    p.setFullscreenTarget(containerRef.value)
+    p.setContainer(containerRef.value)
+  }
+
+  playlist.bind(p)
+  p.lzcModal = () => ({
+    openModal: (page: string) => {
+      modal.modalPage.value = page
+      modal.modalVisible.value = true
+    },
+    close: modal.closeModal,
+  })
+  p.on("openVideo", () => {
+    modal.closeModal()
+    beforeHiddenSubtitle.value = null
+    activateControls()
+    setTimeout(() => {
+      state.videoName.value = p.currentVideoName() || ""
+    }, 0)
+    p.one("subtitleReady", () => restoreHiddenSubtitle(p))
+    p.one("canplay", () => {
+      if (!p.isCastMode?.() && props.options?.autoplay !== false) {
+        safePlay(p, "autoplay")
+      }
+      history.updateHistory(true)
+    })
+  })
+
+  state.bind(p)
+  history.bind(p)
+  fullscreen.bind(p)
+  p.on("fullscreenchange", () =>
+    emit("fullscreenchange", p.isFullscreen(), p.id()),
+  )
+
+  if (effectivePoster.value) p.poster(effectivePoster.value)
+  p.on("back", onBack)
+  p.on("play", scheduleControlsHide)
+  p.on("pause", () => emitControlBar(true))
+  p.on("ended", () => {
+    if (p.isCastMode()) return
+    if (p.nextEnabled && p.playNext) {
+      p.playNext()
+      return
+    }
+    p.pause()
+  })
+  p.on("subtitlevisibilitychange", () => updateSubtitleHiddenHistory(p))
+  const originalToggle = p.toggleSubtitleVisibility?.bind(p)
+  if (originalToggle) {
+    p.toggleSubtitleVisibility = () => {
+      if (!hasAvailableSubtitles(p)) return
+      const current = p.currentSubtitle?.()
+      if (!p.isSubtitleHidden() && current) {
+        beforeHiddenSubtitle.value = current
+      }
+      originalToggle()
+      updateSubtitleHiddenHistory(p)
+    }
+  }
+  if (props.onInit) props.onInit(p)
+  emit("init", p)
+  state.videoName.value = p.currentVideoName() || ""
+  if (typeof window !== "undefined") {
+    ;(window as any).player = p
+  }
+}
+
+function onPlayerDestroy() {
+  state.unbindIfNeeded()
+  history.unbindIfNeeded()
+  fullscreen.unbindIfNeeded()
+  player.value = null
+  if (typeof window !== "undefined") {
+    ;(window as any).player = null
+  }
+}
+
+onMounted(() => {
+  const meta = document.createElement("meta")
+  meta.name = "referrer"
+  meta.content = "no-referrer"
+  document.head.append(meta)
+  activateControls()
+})
+
+watch(
+  () => state.isPlaying.value,
+  () => {
+    scheduleControlsHide()
+  },
+)
+
+watch(
+  () => modal.modalVisible.value,
+  (visible) => {
+    if (visible) {
+      emitControlBar(true)
+    } else {
+      scheduleControlsHide()
+    }
+  },
+)
+
+onUnmounted(() => {
+  state.unbindIfNeeded()
+  history.unbindIfNeeded()
+  fullscreen.unbindIfNeeded()
+  clearPendingRootClick()
+  if (controlsTimer) {
+    clearTimeout(controlsTimer)
+    controlsTimer = null
+  }
+  history.debouncedUpdateHistory.cancel()
+  history.updateHistory(false)
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :id="props.containerId"
+    class="vjs-theme-lzc lzc-video-player lzc-player-root"
+    :class="{
+      'lzc-user-active': !isCursorInactive,
+      'lzc-user-inactive': isCursorInactive,
+    }"
+    @mousemove="onRootMouseMove"
+    @touchstart="onRootTouchStart"
+    @click.capture="onRootClick"
+    @dblclick.capture="onRootDoubleClick"
+  >
+    <div
+      class="lzc-video-stage relative w-full h-full min-h-0 overflow-hidden flex flex-col"
+    >
+      <NativePlayerComponent
+        :options="{
+          mediaPrefix: props.options?.mediaPrefix,
+          showTopBar: props.options?.showTopBar,
+          playMode: props.options?.playMode,
+        }"
+        :poster="effectivePoster"
+        @ready="onPlayerReady"
+        @destroy="onPlayerDestroy"
+      />
+      <div class="lzc-player-foreground absolute inset-0 z-[20]" v-if="player">
+        <LzcOverlay
+          :player="player as any"
+          :active="controlsActive"
+          :direct-mode="isDirectMode"
+        />
+      </div>
+      <div
+        v-show="unref(state.isSourceLoading)"
+        class="lzc-player-source-loading absolute inset-0 bg-black pointer-events-none z-[10]"
+        aria-hidden="true"
+      ></div>
+      <div
+        v-show="unref(state.isSourceLoading) || unref(state.showSpinner)"
+        class="lzc-player-spinner absolute inset-0 flex items-center justify-center pointer-events-none z-[30]"
+        aria-hidden="true"
+      >
+        <div
+          class="w-9 h-9 -m-[22px_0_0_-22px] rounded-full border-2 border-[#5f86ff] border-r-transparent border-b-[#5f86ff] border-l-transparent animate-spin"
+        ></div>
+      </div>
+      <NativeModal
+        class="lzc-player-modal"
+        data-no-play-toggle
+        :visible="unref(modal.modalVisible)"
+        :active-page="unref(modal.modalPage)"
+        :position="unref(modal.modalPosition)"
+        :direct-mode="isDirectMode"
+        @close="modal.closeModal"
+      />
+      <div
+        data-no-play-toggle
+        class="lzc-player-controls absolute left-0 right-0 bottom-0 z-[40]"
+        :class="{ invisible: !controlsActive }"
+      >
+        <NativeControls
+          :current-time="unref(state.currentTime)"
+          :duration="unref(state.duration)"
+          :is-playing="unref(state.isPlaying)"
+          :is-fullscreen="unref(state.isFullscreen)"
+          :prev-enabled="unref(state.prevEnabled)"
+          :next-enabled="unref(state.nextEnabled)"
+          :hide-prev-button="props.options?.hidePrevButton"
+          :hide-next-button="props.options?.hideNextButton"
+          :hide-play-list="props.options?.hidePlayList || isDirectMode"
+          :hide-subtitle="isDirectMode"
+          :hide-resolution="isDirectMode"
+          @open-modal="openModal"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lzc-player-root {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+}
+
+.lzc-player-root.lzc-user-active {
+  cursor: default;
+}
+
+.lzc-player-root.lzc-user-inactive,
+.lzc-player-root.lzc-user-inactive * {
+  cursor: none !important;
+}
+</style>