lzc-video-player 0.0.0

package/src/components/Video/README.md

@@ -0,0 +1,3 @@
+# lzc-video-player
+
+## 组件内自动根据 user-agent 区分是否移动端还是 pc 端

package/src/components/Video/clientPlayer.ts

@@ -0,0 +1,348 @@
+import { computed, ref } from "vue"
+import { AppCommon } from "@lazycatcloud/sdk/dist/extentions/app_common"
+import type {
+  NativeVideoPlayerEvent,
+  NativeVideoPlayerOpenPayload,
+  NativeVideoPlayerPlaylistItem,
+} from "@lazycatcloud/sdk/dist/extentions/player"
+import { MiniDB } from "@lazycatcloud/minidb"
+import type { VideoInfo } from "@/model"
+import type { LzcPlayer } from "./player"
+import { isSourceEqual } from "@/use/useUtils"
+
+type PlayerCapability = {
+  name: string
+  version?: string
+}
+
+type PreparedPlaylistItem = NativeVideoPlayerPlaylistItem & {
+  id: string
+  file: string
+  sourceInfo: VideoInfo
+}
+
+type CapabilityCache = {
+  promise?: Promise<boolean>
+  value?: boolean
+}
+
+const capabilityCache: CapabilityCache = ((
+  globalThis as any
+).__lzcVideoPlayerClientPlayerCapability ||= {})
+const clientPlayerCapability = ref<boolean | undefined>(capabilityCache.value)
+const db: MiniDB = new MiniDB()
+const PROGRESS_UPDATE_INTERVAL = 5000
+
+export const hasClientPlayerCapability = computed(
+  () => clientPlayerCapability.value === true,
+)
+
+function setClientPlayerCapability(value: boolean) {
+  capabilityCache.value = value
+  clientPlayerCapability.value = value
+}
+
+export function initClientPlayerCapability() {
+  if (capabilityCache.value !== undefined) {
+    clientPlayerCapability.value = capabilityCache.value
+    return Promise.resolve(capabilityCache.value)
+  }
+
+  if (!capabilityCache.promise) {
+    capabilityCache.promise = (async () => {
+      try {
+        const capabilities =
+          (await AppCommon.GetCapabilitys()) as PlayerCapability[]
+        const available = capabilities.some(
+          (capability) => capability.name === "player",
+        )
+        setClientPlayerCapability(available)
+        return available
+      } catch (error) {
+        console.warn("[client-player] get capabilities failed", error)
+        setClientPlayerCapability(false)
+        return false
+      }
+    })()
+  }
+
+  return capabilityCache.promise
+}
+
+function toAbsoluteUrl(url: string) {
+  return new URL(url, window.location.origin).toString()
+}
+
+function readOwnerFromSourceUrl(sourceUrl?: string) {
+  if (!sourceUrl) {
+    return ""
+  }
+  try {
+    const url = new URL(sourceUrl, window.location.origin)
+    return url.searchParams.get("X_LZCAPI_UID") || ""
+  } catch {
+    return ""
+  }
+}
+
+function appendOwner(url: string, owner: string) {
+  if (!owner) {
+    return url
+  }
+  return `${url}${url.includes("?") ? "&" : "?"}owner=${owner}`
+}
+
+function encodePathSegments(path: string) {
+  return path
+    .split("/")
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join("/")
+}
+
+function buildWebdavFileUrl(info: VideoInfo) {
+  if (!info.fromNetdisk || !info.path) {
+    return ""
+  }
+  const path = encodePathSegments(info.path)
+  const url = toAbsoluteUrl(`/_lzc/files/home/${path}`)
+  return appendOwner(url, readOwnerFromSourceUrl(info.sourceUrl))
+}
+
+function getPlayableUrl(info: VideoInfo) {
+  const webdavUrl = buildWebdavFileUrl(info)
+  if (webdavUrl) {
+    return webdavUrl
+  }
+  const fallback =
+    info.originDirectUrl ||
+    info.resolvedSourceUrl ||
+    info.sourceUrl ||
+    info.originHlsUrl ||
+    ""
+  return fallback ? toAbsoluteUrl(fallback) : ""
+}
+
+function getCoverUrl(player: LzcPlayer, info: VideoInfo, currentInfo: VideoInfo) {
+  const poster = player.poster() as string | undefined
+  if (isSameVideo(info, currentInfo) && poster) {
+    return toAbsoluteUrl(poster)
+  }
+  if (info.fromNetdisk && info.path) {
+    const params = new URLSearchParams()
+    params.set("size", "200")
+    return toAbsoluteUrl(`/_lzc/thumbnail2/home${info.path}?${params}`)
+  }
+  return undefined
+}
+
+function isSameVideo(a: VideoInfo, b: VideoInfo) {
+  try {
+    return isSourceEqual(a.sourceUrl, b)
+  } catch {
+    return a.sourceUrl === b.sourceUrl || (!!a.path && a.path === b.path)
+  }
+}
+
+function buildPlaylist(player: LzcPlayer, allInfos: VideoInfo[]) {
+  const currentInfo = player.currentVideoInfo()
+  if (!currentInfo?.sourceUrl) {
+    return
+  }
+
+  const infos = allInfos.length ? allInfos : [currentInfo]
+  const normalizedInfos = infos.some((info) => isSameVideo(info, currentInfo))
+    ? infos
+    : [currentInfo, ...infos]
+  const index = Math.max(
+    0,
+    normalizedInfos.findIndex((info) => isSameVideo(info, currentInfo)),
+  )
+
+  const items: PreparedPlaylistItem[] = normalizedInfos
+    .map((info) => {
+      const file = getPlayableUrl(info)
+      if (!file) return undefined
+      return {
+        id: info.sourceUrl,
+        name: info.name,
+        file,
+        cover: getCoverUrl(player, info, currentInfo),
+        duration: info.duration || undefined,
+        startTime:
+          isSameVideo(info, currentInfo) && player.currentTime()
+            ? player.currentTime()
+            : info.currentTime || undefined,
+        sourceInfo: info,
+      }
+    })
+    .filter(Boolean) as PreparedPlaylistItem[]
+
+  if (!items.length) {
+    return
+  }
+
+  const payload: NativeVideoPlayerOpenPayload = {
+    playlist: {
+      index,
+      items: items.map((item) => ({
+        id: item.id,
+        name: item.name,
+        file: item.file,
+        cover: item.cover,
+        duration: item.duration,
+        startTime: item.startTime,
+      })),
+    },
+  }
+
+  return { payload, items, index }
+}
+
+function readNumber(payload: unknown, keys: string[]) {
+  if (!payload || typeof payload !== "object") {
+    return
+  }
+  const record = payload as Record<string, unknown>
+  for (const key of keys) {
+    const value = Number(record[key])
+    if (Number.isFinite(value)) {
+      return value
+    }
+  }
+}
+
+function findItemFromPayload(
+  payload: unknown,
+  items: PreparedPlaylistItem[],
+  fallback: PreparedPlaylistItem,
+) {
+  if (!payload || typeof payload !== "object") {
+    return fallback
+  }
+  const record = payload as Record<string, unknown>
+  const id =
+    typeof record.id === "string"
+      ? record.id
+      : typeof record.itemId === "string"
+        ? record.itemId
+        : typeof record.episodeId === "string"
+          ? record.episodeId
+          : undefined
+  if (id) {
+    return items.find((item) => item.id === id) || fallback
+  }
+
+  const file =
+    typeof record.file === "string"
+      ? record.file
+      : typeof record.sourceUrl === "string"
+        ? record.sourceUrl
+        : undefined
+  if (file) {
+    return items.find((item) => item.file === file) || fallback
+  }
+
+  const index = readNumber(payload, ["index", "currentIndex"])
+  if (index !== undefined && items[index]) {
+    return items[index]
+  }
+  return fallback
+}
+
+async function updateProgressHistory(
+  item: PreparedPlaylistItem,
+  payload: unknown,
+) {
+  const currentTime = readNumber(payload, [
+    "currentTime",
+    "timePos",
+    "time",
+    "position",
+    "positionSeconds",
+    "seconds",
+  ])
+  if (currentTime === undefined) {
+    return
+  }
+  const duration =
+    readNumber(payload, ["duration", "total", "totalTime"]) ||
+    Number(item.duration || item.sourceInfo.duration || 0)
+
+  const historyInfo = db.getCollection("historyInfo")
+  const history: VideoInfo = {
+    ...item.sourceInfo,
+    sourceUrl: item.sourceInfo.sourceUrl,
+    name: item.name || item.sourceInfo.name,
+    duration: Number.isFinite(duration) ? duration : 0,
+    currentTime,
+    invalid: false,
+    updateTime: Date.now(),
+  }
+  await historyInfo.upsertOrUpdate({ sourceUrl: history.sourceUrl }, history)
+}
+
+function subscribePlayerEvents(
+  subscribe: (listener: (event: NativeVideoPlayerEvent) => void) => () => void,
+  items: PreparedPlaylistItem[],
+  index: number,
+) {
+  let activeItem = items[index] || items[0]
+  let lastProgressAt = 0
+  let lastProgressEvent: NativeVideoPlayerEvent | undefined
+
+  const saveProgress = (event: NativeVideoPlayerEvent, force = false) => {
+    const now = Date.now()
+    if (!force && now - lastProgressAt < PROGRESS_UPDATE_INTERVAL) {
+      lastProgressEvent = event
+      return
+    }
+    lastProgressAt = now
+    lastProgressEvent = event
+    const item = findItemFromPayload(event.payload, items, activeItem)
+    void updateProgressHistory(item, event.payload)
+  }
+
+  const unsubscribe = subscribe((event) => {
+    if (event.name === "episode-switch") {
+      activeItem = findItemFromPayload(event.payload, items, activeItem)
+      lastProgressAt = 0
+    }
+    if (event.name === "progress") {
+      saveProgress(event)
+    }
+    if (event.name === "process-exit") {
+      if (lastProgressEvent) {
+        saveProgress(lastProgressEvent, true)
+      }
+      unsubscribe()
+    }
+  })
+}
+
+export async function openClientPlayer(
+  player: LzcPlayer,
+  allInfos: VideoInfo[],
+) {
+  if (!(await initClientPlayerCapability())) {
+    return false
+  }
+  const playlist = buildPlaylist(player, allInfos)
+  if (!playlist) {
+    return false
+  }
+
+  try {
+    const session = await AppCommon.OpenNativeVideoPlayer(playlist.payload)
+    player.pause()
+    subscribePlayerEvents(
+      (listener) => session.subscribe(listener),
+      playlist.items,
+      playlist.index,
+    )
+    return true
+  } catch (error) {
+    console.warn("[client-player] open failed", error)
+    return false
+  }
+}

package/src/components/Video/components/LzcModal/components/simpleList.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineProps<{
+  items: any[]
+  isActive: (item: any, index: number) => boolean
+}>()
+defineEmits<{
+  (e: "select", item: any): void
+}>()
+</script>
+
+<template>
+  <div class="simple-list">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="item"
+      :class="isActive(item, index) ? 'active' : ''"
+      @click="$emit('select', { item, index })"
+    >
+      <slot :data="{ item, index }"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.simple-list {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  overflow-y: auto;
+  max-height: 400px;
+  @media (orientation: landscape) and (height < 600px) {
+    max-height: 200px;
+  }
+}
+
+.item {
+  padding: 8px 16px;
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  &:hover,
+  &.active {
+    background: #ffffff33;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #5f86ff;
+  }
+}
+</style>

package/src/components/Video/components/LzcModal/list.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { VideoInfo } from "@/model"
+import Playlist from "@/components/PlayList/index.vue"
+import type { LzcPlayer } from "@/components/Video/player"
+import { isSourceEqual } from "@/use/useUtils";
+
+const props = defineProps<{ player: LzcPlayer }>()
+function isPlaying(info: VideoInfo): boolean {
+  const currentInfo = props.player.currentVideoInfo()
+  if (currentInfo?.sourceUrl) {
+    try {
+      if (isSourceEqual(info.sourceUrl, currentInfo)) {
+        return true
+      }
+    } catch {
+      // Fallback comparison for non-standard URLs.
+    }
+    if (currentInfo.sourceUrl === info.sourceUrl) {
+      return true
+    }
+    if (currentInfo.path && info.path && currentInfo.path === info.path) {
+      return true
+    }
+  }
+
+  const currentSrc = props.player.currentSrc()
+  if (!currentSrc) {
+    return false
+  }
+  try {
+    return isSourceEqual(currentSrc, info)
+  } catch {
+    return currentSrc === info.sourceUrl
+  }
+}
+function onBack() {
+  props.player.trigger({ type: "back" })
+}
+function onOpen(info: VideoInfo) {
+  props.player.trigger({ type: "openVideo", info })
+}
+</script>
+
+<template>
+  <Playlist
+    class="modal-list"
+    :player="player"
+    :isPlaying="isPlaying"
+    @back="onBack"
+    @openVideo="onOpen"
+  ></Playlist>
+</template>

package/src/components/Video/components/LzcModal/playrate.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+import SimpleList from "./components/simpleList.vue"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+const props = defineProps<{ player: LzcPlayer }>()
+const rates = [3.0, 2.0, 1.5, 1.25, 1.0, 0.75]
+props.player.playbackRates(rates)
+
+// player 不能响应式更新, 所以使用一个内部变量，而不是使用 computed
+const currentRate = ref(props.player.playbackRate())
+const onSelect = ({ item }: { item: number }) => {
+  props.player.playbackRate(item)
+  const modal = props.player.lzcModal?.()
+  modal?.close()
+}
+const isActive = (item: number, _: number) => {
+  return item === currentRate.value
+}
+props.player.on("ratechange", function () {
+  currentRate.value = props.player.playbackRate()
+  props.player.trigger({
+    type: "tipToast",
+    // eslint-disable-next-line no-undef
+    toastValue: t(
+      "src.components.video.components.lzc_modal.play_rate.toast_playback_rate",
+      "{{rate}}倍速播放中",
+      { rate: currentRate.value },
+    ),
+    toastIcon: "svguse:#icon-倍速.svg",
+  })
+})
+</script>
+
+<template>
+  <SimpleList class="playrate" :items="rates" :isActive="isActive" @select="onSelect">
+    <template #default="{ data }"> {{ data.item }} x </template>
+  </SimpleList>
+</template>
+
+<style lang="scss" scoped>
+.playrate {
+  width: 140px;
+}
+</style>

package/src/components/Video/components/LzcModal/resolution.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue"
+import type { LzcPlayer } from "@/components/Video/player"
+import SimpleList from "./components/simpleList.vue"
+import type { VideoQualityLevel } from "@/model"
+import { t } from "@/i18n"
+
+const props = defineProps<{ player: LzcPlayer }>()
+const qualityVersion = ref(0)
+
+const getResolutions = (): VideoQualityLevel[] => {
+  let resolutions = props.player.supportResolution()
+  if (props.player.logicalQualityLevels) {
+    const logicalLevels = props.player.logicalQualityLevels()
+    if (logicalLevels.length > 0) {
+      resolutions = logicalLevels
+    }
+  }
+  if (resolutions.length < 1 || resolutions == undefined) {
+    console.error(
+      "failed to get support resolutions",
+      props.player.supportResolution(),
+    )
+    resolutions = props.player.qualityLevels().levels_ as VideoQualityLevel[]
+  }
+  return resolutions
+}
+
+const resolutions = computed(() => {
+  void qualityVersion.value
+  return getResolutions()
+})
+
+// player 不能响应式更新，所以使用一个内部变量，而不是使用 computed
+const currentRes = ref(props.player.currentResolution())
+
+props.player.qualityLevels().on("change", function () {
+  qualityVersion.value += 1
+  currentRes.value = props.player.currentResolution()
+  if (currentRes.value == undefined) {
+    return
+  }
+  const tips = currentRes.value?.origin
+    ? t("src.components.video.components.lzc_modal.resolution.raw", "原始画质")
+    : `${currentRes.value?.res}P`
+  props.player.trigger({
+    type: "tipToast",
+    toastValue: t(
+      "src.components.video.components.lzc_modal.resolution.switched_to",
+      "已成功切换至 {{tips}} 清晰度",
+      { tips: tips },
+    ),
+    toastIcon: "",
+  })
+})
+
+props.player.qualityLevels().on("addqualitylevel", function () {
+  qualityVersion.value += 1
+})
+
+const onSelect = ({ item }: { item: VideoQualityLevel }) => {
+  const res = ref(props.player.currentResolution())
+  const modal = props.player.lzcModal?.()
+  res.value = props.player.currentResolution()
+
+  // 点击当前已选清晰度：只关闭弹框，不提示“已成功切换”。
+  if (res.value?.id === item.id) {
+    modal?.close()
+    return
+  }
+
+  props.player.changeResolution(item)
+  modal?.close()
+  props.player.trigger({
+    type: "tipToast",
+    toastValue: t(
+      "src.components.video.components.lzc_modal.resolution.switching",
+      "切换中，请稍等",
+    ),
+    toastIcon: "",
+    timeout: 5000,
+    //uncloseable: true,
+  })
+}
+
+const isActive = (item: VideoQualityLevel, index: number) => {
+  if (currentRes.value?.auto) {
+    return item.id == "auto"
+  } else if (currentRes.value?.origin) {
+    return item.label === "origin"
+  } else {
+    return item.id === currentRes.value?.id
+  }
+}
+
+const text = (item: VideoQualityLevel) => {
+  if (item.label === "origin") {
+    return t(
+      "src.components.video.components.lzc_modal.resolution.text_raw",
+      "原始画质",
+    )
+  }
+  if (item.id === "auto") {
+    return t(
+      "src.components.video.components.lzc_modal.resolution.auto",
+      "自动",
+    )
+  }
+  return item.label || `${Math.min(item.height, item.width)} P`
+}
+</script>
+
+<template>
+  <SimpleList :items="resolutions" :isActive="isActive" @select="onSelect">
+    <template #default="{ data }"> {{ text(data.item) }} </template>
+  </SimpleList>
+</template>