lzc-video-player 0.0.0

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

@@ -0,0 +1,510 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch, inject } from "vue"
+import debounce from "lodash.debounce"
+import type { NativePlayerAPI } from "./NativePlayer"
+import { nativePlayerKey } from "./playerKey"
+import { useHistoryInfo } from "@/stores/playlist"
+import { isSourceEqual } from "@/use/useUtils"
+import { t } from "@/i18n"
+import { isMobile } from "@/use/useUtils"
+import PrevSvg from "@/icons/上一个.svg?inline"
+import NextSvg from "@/icons/下一个.svg?inline"
+import PlaySvg from "@/icons/播放.svg?inline"
+import PausedSvg from "@/icons/暂停.svg?inline"
+import FullscreenSvg from "@/icons/进入全屏.svg?inline"
+import ExitFullscreenSvg from "@/icons/退出全屏.svg?inline"
+
+const playerRef = inject(nativePlayerKey, ref<NativePlayerAPI | null>(null))
+const player = computed(() => playerRef.value)
+const store = useHistoryInfo()
+const fullscreenEnabled =
+  typeof document !== "undefined" && document.fullscreenEnabled
+
+const props = withDefaults(
+  defineProps<{
+    currentTime?: number
+    duration?: number
+    isPlaying?: boolean
+    isFullscreen?: boolean
+    prevEnabled?: boolean
+    nextEnabled?: boolean
+    hidePrevButton?: boolean
+    hideNextButton?: boolean
+    hidePlayList?: boolean
+    hideSubtitle?: boolean
+    hideResolution?: boolean
+  }>(),
+  {
+    currentTime: 0,
+    duration: 0,
+    isPlaying: true,
+    isFullscreen: false,
+    prevEnabled: false,
+    nextEnabled: false,
+    hidePrevButton: false,
+    hideNextButton: false,
+    hidePlayList: false,
+    hideSubtitle: false,
+    hideResolution: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "open-modal", page: string, ev: Event): void
+}>()
+
+const seeking = ref(false)
+const seekValue = ref(0)
+
+let rateQualityOff: (() => void) | null = null
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) return 0
+  return Math.min(100, Math.max(0, value))
+}
+
+const progressPercent = computed(() => {
+  const d = props.duration
+  if (d <= 0) return 0
+  return clampPercent((props.currentTime / d) * 100)
+})
+
+const displayProgressPercent = computed(() => {
+  const d = props.duration
+  if (seeking.value && d > 0) {
+    return clampPercent((seekValue.value / d) * 100)
+  }
+  return progressPercent.value
+})
+
+const displayCurrentTime = computed(() =>
+  seeking.value ? seekValue.value : props.currentTime,
+)
+
+const playbackRateText = ref("倍速")
+const resolutionText = ref("清晰度")
+
+function togglePlay() {
+  const p = player.value
+  if (!p) return
+  if (p.paused()) {
+    p.play()
+  } else {
+    p.pause()
+  }
+}
+
+const progressTrackRef = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+const hoverActive = ref(false)
+const hoverPercent = ref(0)
+
+const hoverTime = computed(() => {
+  const d = props.duration
+  if (d <= 0) return 0
+  const seconds = hoverPercent.value * d
+  return Math.max(0, Math.min(d, seconds))
+})
+
+function isIosPortraitFakeFullscreen(): boolean {
+  const p = player.value
+  if (!p?.isFullscreen()) return false
+  return p.hasClass("vjs-ios-fake-fullscreen-portrait")
+}
+
+function getPercentFromClientPoint(clientX: number, clientY: number): number {
+  const el = progressTrackRef.value
+  if (!el) return 0
+  const rect = el.getBoundingClientRect()
+  let pct = 0
+  if (isIosPortraitFakeFullscreen()) {
+    if (rect.height <= 0) return 0
+    // In portrait fake fullscreen, container rotates 90deg.
+    // Screen Y axis maps to timeline direction (top -> start, bottom -> end).
+    pct = (clientY - rect.top) / rect.height
+  } else {
+    if (rect.width <= 0) return 0
+    pct = (clientX - rect.left) / rect.width
+  }
+  pct = Math.max(0, Math.min(1, pct))
+  return pct
+}
+
+function isTouchLikeEvent(
+  e: MouseEvent | TouchEvent,
+): e is TouchEvent {
+  return "touches" in e || "changedTouches" in e
+}
+
+function getPercentFromEvent(e: MouseEvent | TouchEvent): number {
+  if (isTouchLikeEvent(e)) {
+    const t = e.touches[0] ?? e.changedTouches[0]
+    return getPercentFromClientPoint(t?.clientX ?? 0, t?.clientY ?? 0)
+  }
+  return getPercentFromClientPoint(e.clientX, e.clientY)
+}
+
+function onProgressMouseEnter(e: MouseEvent) {
+  if (isMobile()) return
+  hoverActive.value = true
+  hoverPercent.value = getPercentFromClientPoint(e.clientX, e.clientY)
+}
+
+function onProgressMouseMove(e: MouseEvent) {
+  if (isMobile()) return
+  hoverActive.value = true
+  hoverPercent.value = getPercentFromClientPoint(e.clientX, e.clientY)
+}
+
+function onProgressMouseLeave() {
+  hoverActive.value = false
+}
+
+function applySeek(pct: number) {
+  seeking.value = true
+  const d = props.duration || 1
+  seekValue.value = pct * d
+  const p = player.value
+  if (p) p.currentTime(seekValue.value)
+}
+
+function onProgressPointerDown(e: MouseEvent | TouchEvent) {
+  e.preventDefault()
+  dragging.value = true
+  const p = player.value
+  if (p) {
+    p.setScrubbing(true)
+    p.trigger({ type: "lzcSeekBarDown" })
+  }
+  const pct = getPercentFromEvent(e)
+  applySeek(pct)
+  if (e instanceof MouseEvent && !isMobile()) {
+    hoverActive.value = true
+    hoverPercent.value = pct
+  }
+  const onMove = (ev: MouseEvent | TouchEvent) => {
+    const p = getPercentFromEvent(ev)
+    applySeek(p)
+    if (ev instanceof MouseEvent && !isMobile()) {
+      hoverActive.value = true
+      hoverPercent.value = p
+    }
+    if (player.value) {
+      player.value.trigger({ type: "lzcSeekBarMove" })
+    }
+  }
+  const onUp = () => {
+    onSeekEnd()
+    document.removeEventListener("mousemove", onMove as (e: MouseEvent) => void)
+    document.removeEventListener("mouseup", onUp)
+    document.removeEventListener("touchmove", onMove as (e: TouchEvent) => void)
+    document.removeEventListener("touchend", onUp)
+  }
+  document.addEventListener("mousemove", onMove as (e: MouseEvent) => void)
+  document.addEventListener("mouseup", onUp)
+  document.addEventListener("touchmove", onMove as (e: TouchEvent) => void, {
+    passive: false,
+  })
+  document.addEventListener("touchend", onUp)
+}
+
+function onSeekEnd() {
+  dragging.value = false
+  const p = player.value
+  if (p) {
+    p.setScrubbing(false)
+    p.trigger({ type: "lzcSeekBarUp" })
+  }
+  hoverActive.value = false
+  // 不在此处设置 seeking=false，等 seeked 事件后再清除，避免进度点先跳过去又回弹
+}
+
+function onSeeked() {
+  seeking.value = false
+  const p = player.value
+  if (p) p.setScrubbing(false)
+  if (p) seekValue.value = p.currentTime() ?? 0
+}
+
+function subscribeRateQuality(p: NativePlayerAPI) {
+  const onRatechange = () => {
+    const r = p.playbackRate()
+    playbackRateText.value =
+      r !== 1
+        ? `${r} x`
+        : t(
+            "src.components.video.components.lzc_play_rate.speed_btn_text_2",
+            "倍速",
+          )
+  }
+  const updateResolutionText = () => {
+    const castMode = (p as { isCastMode?: () => boolean }).isCastMode?.()
+    if (castMode) {
+      resolutionText.value = t(
+        "src.components.video.components.lzc_resolution_button.definition_btn_text_2",
+        "清晰度",
+      )
+      return
+    }
+    const resolution = p.currentResolution()
+    if (resolution == undefined) {
+      resolutionText.value = t(
+        "src.components.video.components.lzc_resolution_button.definition_btn_text_2",
+        "清晰度",
+      )
+      return
+    }
+    let text: string
+    if (resolution.origin === true) {
+      text = t(
+        "src.components.video.components.lzc_resolution_button.original_quality_btn_text",
+        "原始画质",
+      )
+    } else {
+      text = `${resolution.res} P`
+    }
+    if (resolution.auto === true) {
+      text = t(
+        "src.components.video.components.lzc_resolution_button.auto_quality_btn_text",
+        "自动({{text}})",
+        { text },
+      )
+    }
+    resolutionText.value = text
+  }
+  const debouncedUpdateResolution = debounce(updateResolutionText, 1000, {
+    maxWait: 3000,
+  })
+  p.on("seeked", onSeeked)
+  p.on("ratechange", onRatechange)
+  p.on("timeupdate", debouncedUpdateResolution)
+  p.qualityLevels().on("change", updateResolutionText)
+  onRatechange()
+  updateResolutionText()
+  rateQualityOff = () => {
+    p.off("seeked", onSeeked)
+    p.off("ratechange", onRatechange)
+    p.off("timeupdate", debouncedUpdateResolution)
+  }
+}
+
+function openModal(page: string, ev: Event) {
+  emit("open-modal", page, ev)
+}
+
+function toggleFullscreen() {
+  const p = player.value
+  if (!p) return
+  if (p.isFullscreen()) {
+    p.exitFullscreen()
+  } else {
+    p.requestFullscreen()
+  }
+}
+
+function doPrev() {
+  const p = player.value
+  if (!p || !props.prevEnabled) return
+  if (p.playPrev) {
+    p.playPrev()
+    return
+  }
+  const currentIndex = store.infos.findIndex((info) =>
+    isSourceEqual(p.currentSrc(), info),
+  )
+  if (currentIndex > 0) {
+    p.trigger({ type: "openVideo", info: store.infos[currentIndex - 1] })
+  }
+}
+
+function doNext() {
+  const p = player.value
+  if (!p || !props.nextEnabled) return
+  if (p.playNext) {
+    p.playNext()
+    return
+  }
+  const currentIndex = store.infos.findIndex((info) =>
+    isSourceEqual(p.currentSrc(), info),
+  )
+  if (currentIndex >= 0 && currentIndex < store.infos.length - 1) {
+    p.trigger({ type: "openVideo", info: store.infos[currentIndex + 1] })
+  }
+}
+
+function formatTime(sec: number): string {
+  if (!Number.isFinite(sec) || sec < 0) return "0:00"
+  const totalSeconds = Math.floor(sec)
+  const h = Math.floor(totalSeconds / 3600)
+  const m = Math.floor((totalSeconds % 3600) / 60)
+  const s = totalSeconds % 60
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`
+}
+
+onMounted(() => {
+  const p = player.value
+  if (p) subscribeRateQuality(p)
+})
+
+onUnmounted(() => {
+  rateQualityOff?.()
+})
+
+watch(
+  player,
+  (p) => {
+    rateQualityOff?.()
+    if (p) subscribeRateQuality(p)
+  },
+  { immediate: false },
+)
+</script>
+
+<template>
+  <template v-if="player">
+    <div
+      class="lzc-native-controls relative flex flex-col text-white text-sm font-semibold leading-8"
+    >
+      <div class="flex flex-row items-center w-full min-h-[3.2rem]">
+        <span
+          class="text-[12px] font-semibold leading-[20px] text-white mr-[17px] tabular-nums shrink-0"
+        >
+          {{ formatTime(displayCurrentTime) }}
+        </span>
+        <div
+          ref="progressTrackRef"
+          class="flex-1 min-w-0 py-3 flex items-center cursor-pointer -my-3"
+          role="slider"
+          :aria-valuenow="displayProgressPercent"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          tabindex="0"
+          @mousedown="onProgressPointerDown"
+          @touchstart="onProgressPointerDown"
+          @mouseenter="onProgressMouseEnter"
+          @mousemove="onProgressMouseMove"
+          @mouseleave="onProgressMouseLeave"
+        >
+          <div class="flex-1 min-w-0 h-0.5 relative bg-white/30 rounded-sm">
+            <div
+              v-if="hoverActive && props.duration > 0"
+              class="absolute bottom-[calc(100%+8px)] -translate-x-1/2 px-1.5 py-0.5 rounded bg-black/80 text-white text-[11px] leading-4 whitespace-nowrap pointer-events-none"
+              :style="{ left: hoverPercent * 100 + '%' }"
+            >
+              {{ formatTime(hoverTime) }}
+            </div>
+            <div
+              class="absolute left-0 top-1/2 -translate-y-1/2 h-0.5 rounded-sm bg-[#5f86ff] pointer-events-none"
+              :style="{ width: displayProgressPercent + '%' }"
+            />
+            <div
+              class="absolute top-1/2 w-[12px] h-[12px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#5f86ff] shadow-[0_0_0_0.7rem_rgba(95,134,255,0.15)] pointer-events-none"
+              :style="{ left: displayProgressPercent + '%' }"
+            />
+          </div>
+        </div>
+        <span
+          class="text-[12px] font-semibold leading-[20px] text-white ml-[17px] tabular-nums shrink-0"
+        >
+          {{ formatTime(props.duration) }}
+        </span>
+      </div>
+      <div
+        class="flex flex-row items-center justify-between w-full min-h-16 gap-2"
+      >
+        <div
+          class="flex flex-row items-center shrink-0 gap-[12px] sm:gap-[16px]"
+        >
+          <img
+            v-if="!hidePrevButton"
+            :src="PrevSvg"
+            class="w-[16px] h-[16px] object-contain opacity-100 cursor-pointer flex-shrink-0"
+            :class="{ 'opacity-50 cursor-not-allowed': !prevEnabled }"
+            @click="doPrev"
+          />
+          <img
+            :src="props.isPlaying ? PausedSvg : PlaySvg"
+            class="w-[16px] h-[16px] object-contain opacity-100 cursor-pointer flex-shrink-0"
+            @click="togglePlay"
+          />
+          <img
+            v-if="!hideNextButton"
+            :src="NextSvg"
+            class="w-[16px] h-[16px] object-contain opacity-100 cursor-pointer flex-shrink-0"
+            :class="{ 'opacity-50 cursor-not-allowed': !nextEnabled }"
+            @click="doNext"
+          />
+        </div>
+        <div
+          class="flex flex-row items-center shrink-0 gap-[12px] sm:gap-[16px] text-white leading-[20px] text-[14px] font-semibold"
+        >
+          <div
+            v-if="!hideSubtitle"
+            class="w-auto h-full min-w-[2.4rem] py-0 px-1 border-none bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+            @click="openModal('Subtitle', $event)"
+          >
+            {{
+              t("src.components.video.components.lzc_sub_button.text", "字幕")
+            }}
+          </div>
+          <div
+            v-if="!hidePlayList"
+            class="w-auto h-full min-w-[2.4rem] py-0 px-1 border-none bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+            @click="openModal('LzcPlaylist', $event)"
+          >
+            {{
+              t(
+                "src.components.video.components.lzc_playlist_button.text_playlist",
+                "播放列表",
+              )
+            }}
+          </div>
+          <div
+            class="w-auto h-full min-w-[2.4rem] py-0 px-1 border-none bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+            @click="openModal('LzcPlayrate', $event)"
+          >
+            {{ playbackRateText }}
+          </div>
+          <div
+            v-if="!hideResolution"
+            class="w-auto h-full min-w-[2.4rem] py-0 px-1 border-none bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+            @click="openModal('LzcResolution', $event)"
+          >
+            {{ resolutionText }}
+          </div>
+          <img
+            v-if="!isMobile() && fullscreenEnabled"
+            :src="props.isFullscreen ? ExitFullscreenSvg : FullscreenSvg"
+            class="w-[16px] h-[16px] object-contain opacity-100 cursor-pointer flex-shrink-0"
+            @click="toggleFullscreen"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.lzc-native-controls {
+  padding-right: calc(1.25rem + var(--lzc-player-safe-area-right, 0px));
+  padding-bottom: var(--lzc-safe-area-inset-bottom);
+  padding-left: calc(1.25rem + var(--lzc-player-safe-area-left, 0px));
+  transition: padding 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+@media (min-width: 640px) {
+  .lzc-native-controls {
+    padding-right: calc(2rem + var(--lzc-player-safe-area-right, 0px));
+    padding-left: calc(2rem + var(--lzc-player-safe-area-left, 0px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lzc-native-controls {
+    transition: none;
+  }
+}
+</style>

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

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { computed, inject, ref, type CSSProperties } from "vue"
+import { useElementSize } from "@vueuse/core"
+import List from "@/components/Video/components/LzcModal/list.vue"
+import Playrate from "@/components/Video/components/LzcModal/playrate.vue"
+import Resolution from "@/components/Video/components/LzcModal/resolution.vue"
+import Subtitle from "@/components/Video/components/LzcModal/subtitle.vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+import { nativePlayerKey } from "./playerKey"
+
+const playerRef = inject(nativePlayerKey, ref<NativePlayerAPI | null>(null))
+const player = computed(() => playerRef.value)
+
+const props = defineProps<{
+  visible: boolean
+  activePage: string
+  position: { right: number; bottom: number }
+  directMode?: boolean
+}>()
+
+const emit = defineEmits<{ (e: "close"): void }>()
+
+const modalRootRef = ref<HTMLElement | null>(null)
+const modalContentRef = ref<HTMLElement | null>(null)
+const { width: rootWidth, height: rootHeight } = useElementSize(modalRootRef)
+const { width: contentWidth, height: contentHeight } = useElementSize(modalContentRef)
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+function readInheritedPx(name: string): number {
+  if (typeof window === "undefined" || typeof document === "undefined") return 0
+  const source = modalRootRef.value ?? document.documentElement
+  const value = window
+    .getComputedStyle(source)
+    .getPropertyValue(name)
+  const parsed = Number.parseFloat(value)
+  if (Number.isFinite(parsed) && value.trim().endsWith("px")) return parsed
+
+  const probe = document.createElement("div")
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.pointerEvents = "none"
+  probe.style.width = `var(${name})`
+  source.appendChild(probe)
+  const measured = probe.getBoundingClientRect().width
+  probe.remove()
+  return Number.isFinite(measured) ? measured : 0
+}
+
+function edgeMargin(side: "top" | "right" | "bottom" | "left"): number {
+  if (side === "left" || side === "right") {
+    return 20 + readInheritedPx(`--lzc-player-safe-area-${side}`)
+  }
+  return 20 + readInheritedPx(`--lzc-safe-area-inset-${side}`)
+}
+
+function calcRight(
+  targetRight: number,
+  elemWidth: number,
+  containerWidth: number,
+): number {
+  const minRight = edgeMargin("right")
+  const maxRight = Math.max(
+    minRight,
+    containerWidth - elemWidth - edgeMargin("left"),
+  )
+  return clamp(targetRight - elemWidth / 2, minRight, maxRight)
+}
+
+function calcBottom(
+  targetBottom: number,
+  elemHeight: number,
+  containerHeight: number,
+): number {
+  const minBottom = edgeMargin("bottom")
+  const maxBottom = Math.max(
+    minBottom,
+    containerHeight - elemHeight - edgeMargin("top"),
+  )
+  return clamp(targetBottom + 35, minBottom, maxBottom)
+}
+
+const style = computed<CSSProperties>(() => ({
+  right: `${calcRight(props.position.right, contentWidth.value, rootWidth.value)}px`,
+  bottom: `${calcBottom(props.position.bottom, contentHeight.value, rootHeight.value)}px`,
+  position: "absolute",
+}))
+
+function close() {
+  emit("close")
+}
+
+const isBlockedInDirectMode = computed(() => {
+  if (!props.directMode) return false
+  return ["Subtitle", "LzcPlaylist", "LzcResolution"].includes(props.activePage)
+})
+</script>
+
+<template>
+  <div
+    ref="modalRootRef"
+    v-show="visible"
+    class="absolute inset-0 z-[10] bg-gradient-to-b from-black/80 to-transparent"
+    @click.self="close"
+  >
+    <div
+      v-if="!isBlockedInDirectMode"
+      ref="modalContentRef"
+      class="absolute z-[11] overflow-visible text-white"
+      :style="style"
+      @click.stop
+    >
+      <Playrate
+        v-if="activePage === 'LzcPlayrate' && player"
+        :player="(player as any)"
+      />
+      <Resolution
+        v-else-if="activePage === 'LzcResolution' && player"
+        :player="(player as any)"
+      />
+      <List
+        v-else-if="activePage === 'LzcPlaylist' && player"
+        :player="(player as any)"
+      />
+      <Subtitle
+        v-else-if="activePage === 'Subtitle' && player"
+        :player="(player as any)"
+      />
+    </div>
+  </div>
+</template>