lzc-video-player 0.0.0

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

@@ -0,0 +1,225 @@
+import { ref, type Ref } from "vue"
+import type { NativePlayerAPI } from "./NativePlayer"
+import throttle from "lodash.throttle"
+
+export function useNativePlayerState(player: Ref<NativePlayerAPI | null>) {
+  const showBigPlay = ref(true)
+  const showSpinner = ref(false)
+  const isSourceLoading = ref(false)
+  const videoName = ref("")
+  const isPlaying = ref(true)
+  const currentTime = ref(0)
+  const duration = ref(0)
+  const prevEnabled = ref(false)
+  const nextEnabled = ref(false)
+  const isFullscreen = ref(false)
+
+  let unbind: (() => void) | null = null
+  let alive = true
+
+  function bind(p: NativePlayerAPI) {
+    alive = true
+    let subtitleSwitching = false
+    const canUpdate = () => {
+      if (!alive) return false
+      if (p.isDisposed?.()) return false
+      try {
+        const video = p.$video?.()
+        if (video && !video.isConnected) return false
+      } catch {
+        return false
+      }
+      return true
+    }
+
+    const updateVideoName = () => {
+      if (!canUpdate()) return
+      videoName.value = p.currentVideoName() || ""
+    }
+    const throttledVideoName = throttle(updateVideoName, 3000, {
+      leading: true,
+    })
+
+    const onPlay = () => {
+      if (!canUpdate()) return
+      showBigPlay.value = false
+      isPlaying.value = true
+      updateVideoName()
+    }
+    const onPause = () => {
+      if (!canUpdate()) return
+      if (p.currentSrc()) showBigPlay.value = true
+      isPlaying.value = false
+    }
+    const onEnded = () => {
+      if (!canUpdate()) return
+      showBigPlay.value = true
+      isPlaying.value = false
+    }
+    const onWaiting = () => {
+      if (!canUpdate()) return
+      showSpinner.value = true
+    }
+    const onLoadstart = () => {
+      if (!canUpdate()) return
+      isSourceLoading.value = true
+    }
+    const onSeeking = () => {
+      if (!canUpdate()) return
+      showSpinner.value = true
+    }
+    const onSeeked = () => {
+      if (!canUpdate()) return
+      showSpinner.value = false
+    }
+    const onPlaying = () => {
+      if (!canUpdate()) return
+      isSourceLoading.value = false
+      showSpinner.value = false
+    }
+    const onLoadedData = () => {
+      if (!canUpdate()) return
+      isSourceLoading.value = false
+    }
+    const onCanplay = () => {
+      if (!canUpdate()) return
+      isSourceLoading.value = false
+      showSpinner.value = false
+    }
+    const readNumber = (reader: () => number | void) => {
+      try {
+        const value = reader()
+        return Number.isFinite(value as number) ? (value as number) : 0
+      } catch {
+        return 0
+      }
+    }
+
+    const syncTimeline = () => {
+      if (!canUpdate()) return
+      if (typeof p.currentTime !== "function" || typeof p.duration !== "function")
+        return
+      const nextTime = readNumber(() => p.currentTime())
+      const nextDuration = readNumber(() => p.duration())
+
+      // Subtitle switching temporarily reloads source and may report 0/0.
+      // Keep previous timeline until metadata is stable again.
+      if (subtitleSwitching) {
+        if (nextDuration <= 0) {
+          return
+        }
+        if (currentTime.value > 1 && nextTime === 0) {
+          duration.value = nextDuration
+          return
+        }
+        subtitleSwitching = false
+      }
+
+      currentTime.value = nextTime
+      duration.value = nextDuration
+    }
+
+    const onTimeupdate = () => {
+      syncTimeline()
+    }
+    const onSeekedSync = () => {
+      if (!canUpdate()) return
+      if (typeof p.currentTime !== "function") return
+      currentTime.value = readNumber(() => p.currentTime())
+    }
+    const onLoadedMetadata = () => {
+      syncTimeline()
+    }
+    const onSubtitleChange = () => {
+      subtitleSwitching = true
+    }
+    const onOpenVideo = () => {
+      subtitleSwitching = false
+    }
+    const onError = () => {
+      subtitleSwitching = false
+      isSourceLoading.value = false
+    }
+    const onPrevNextChange = () => {
+      if (!canUpdate()) return
+      prevEnabled.value = p.prevEnabled
+      nextEnabled.value = p.nextEnabled
+    }
+    const onFullscreenChange = () => {
+      if (!canUpdate()) return
+      isFullscreen.value = p.isFullscreen()
+    }
+
+    p.on("loadstart", onLoadstart)
+    p.on("play", onPlay)
+    p.on("pause", onPause)
+    p.on("ended", onEnded)
+    p.on("waiting", onWaiting)
+    p.on("seeking", onSeeking)
+    p.on("seeked", onSeeked)
+    p.on("playing", onPlaying)
+    p.on("loadeddata", onLoadedData)
+    p.on("canplay", onCanplay)
+    p.on("loadedmetadata", onLoadedMetadata)
+    p.on("timeupdate", onTimeupdate)
+    p.on("seeked", onSeekedSync)
+    p.on("subtitlechange", onSubtitleChange)
+    p.on("openVideo", onOpenVideo)
+    p.on("error", onError)
+    p.on("prevNextChange", onPrevNextChange)
+    p.on("fullscreenchange", onFullscreenChange)
+    p.on("play", updateVideoName)
+    p.on("timeupdate", throttledVideoName)
+
+    onTimeupdate()
+    updateVideoName()
+    onPrevNextChange()
+    onFullscreenChange()
+
+    unbind = () => {
+      alive = false
+      p.off("loadstart", onLoadstart)
+      p.off("play", onPlay)
+      p.off("pause", onPause)
+      p.off("ended", onEnded)
+      p.off("waiting", onWaiting)
+      p.off("seeking", onSeeking)
+      p.off("seeked", onSeeked)
+      p.off("playing", onPlaying)
+      p.off("loadeddata", onLoadedData)
+      p.off("canplay", onCanplay)
+      p.off("loadedmetadata", onLoadedMetadata)
+      p.off("timeupdate", onTimeupdate)
+      p.off("seeked", onSeekedSync)
+      p.off("subtitlechange", onSubtitleChange)
+      p.off("openVideo", onOpenVideo)
+      p.off("error", onError)
+      p.off("prevNextChange", onPrevNextChange)
+      p.off("fullscreenchange", onFullscreenChange)
+      p.off("play", updateVideoName)
+      p.off("timeupdate", throttledVideoName)
+      throttledVideoName.cancel()
+    }
+  }
+
+  function unbindIfNeeded() {
+    alive = false
+    unbind?.()
+    unbind = null
+  }
+
+  return {
+    showBigPlay,
+    showSpinner,
+    isSourceLoading,
+    videoName,
+    isPlaying,
+    currentTime,
+    duration,
+    prevEnabled,
+    nextEnabled,
+    isFullscreen,
+    bind,
+    unbindIfNeeded,
+  }
+}

package/src/components/Video/player.ts

@@ -0,0 +1,99 @@
+import type {
+  PreviewInfo,
+  Subtitle,
+  VideoInfo,
+  VideoQualityLevel,
+  VideoResolution,
+} from "@/model"
+
+export type SourceObject = { src: string; type?: string }
+
+export interface QualityLevelList {
+  levels_: VideoQualityLevel[]
+  selectedIndex_: number
+  on: (event: string, fn: (e: any) => void) => void
+  trigger: (e: any) => void
+}
+
+export interface LzcModalHandle {
+  openModal: (page: string) => void
+  close: () => void
+}
+
+export interface LzcPlayer {
+  options_: {
+    mediaPrefix: string
+    showTopBar?: boolean
+    playMode?: "standard" | "direct"
+  }
+  qualityLevels(): QualityLevelList
+  play(): Promise<void>
+  pause(): void
+  paused(): boolean
+  currentTime(seconds?: number): number | void
+  duration(seconds?: number): number | void
+  volume(percent?: number): number | Promise<number> | void
+  muted(muted?: boolean): boolean | void
+  currentSrc(): string
+  src(sources?: string | SourceObject | SourceObject[] | null): string | void
+  poster(url?: string): string | void
+  on(event: string, fn: (e?: any) => void): void
+  one(event: string, fn: (e?: any) => void): void
+  off(event: string, fn?: (e?: any) => void): void
+  ready?(fn: () => void): void
+  trigger(
+    eventOrName: string | { type: string; [k: string]: unknown },
+    data?: unknown,
+  ): void
+  currentVideoInfo(): VideoInfo | null
+  currentVideoName(): string | undefined
+  currentPreview(): PreviewInfo | undefined
+  supportResolution(): VideoQualityLevel[]
+  currentResolution(): VideoResolution | undefined
+  changeResolution(level: VideoQualityLevel): void
+  logicalQualityLevels?(): VideoQualityLevel[]
+  getAvaliableSubtitles(): Subtitle[] | undefined
+  isSubtitleLoading(): boolean
+  currentSubtitle(): Subtitle | undefined
+  changeSubtitle(sub: Subtitle | number): void
+  clearSubtitle(): void
+  toggleSubtitleVisibility(): void
+  isSubtitleHidden(): boolean
+  setSubtitleHidden(value: boolean): void
+  isUsingNativeSubtitleFallback?(): boolean
+  currentBrightness(): Promise<number>
+  isCastMode(): boolean
+  isNetdiskSource(): boolean
+  reloadSource(index?: number): void
+  playPrev?: () => void
+  playNext?: () => void
+  enablePrev(value: boolean): void
+  enableNext(value: boolean): void
+  readonly prevEnabled: boolean
+  readonly nextEnabled: boolean
+  setFullscreenTarget(el: HTMLElement | null): void
+  requestFullscreen(): void
+  exitFullscreen(): void
+  isFullscreen(): boolean
+  $video(): HTMLVideoElement
+  playbackRate(rate?: number): number | void
+  playbackRates(rates?: number[]): number[]
+  lzcModal?: () => LzcModalHandle
+  id(): string
+  isDisposed(): boolean
+  dispose(): void
+  networkState(): number
+  currentSource(): { src: string; type?: string }
+  currentType(): string
+  currentWidth(): number
+  currentDimensions(): { width: number; height: number }
+  addClass(name: string): void
+  removeClass(name: string): void
+  hasClass(name: string): boolean
+  ended(): boolean
+  seeking(): boolean
+  scrubbing(): boolean
+  setScrubbing(value: boolean): void
+  bufferedEnd(): number
+  error(): MediaError | null
+}

package/src/components/Video/theme/index.scss

@@ -0,0 +1,291 @@
+$text-color: #ffffff;
+$button-color: #ffffff;
+$progress-played-color: #5f86ff;
+$progress-color: rgba(255, 255, 255, 0.3);
+
+// videojs.css 中
+// - 去掉 .vjs-loading-spinner
+@use "videojs.css";
+
+@mixin progress-text() {
+  font-size: 1.2rem;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: $text-color;
+  line-height: 2rem;
+}
+
+@mixin control-bar-text() {
+  font-size: 1.4rem;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 2rem;
+}
+
+.video-js {
+  .vjs-load-progress {
+    background: $progress-color;
+  }
+
+  .vjs-control {
+    width: unset;
+  }
+  .vjs-text-track-display div {
+    font-size: 1.6rem;
+  }
+}
+
+// 在播放的时候隐藏进度条
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-progress {
+  visibility: visible;
+  opacity: 0;
+  pointer-events: none;
+  transition: visibility 0.1s, opacity 0.1s;
+}
+
+// 投屏的时候展示进度条
+.vjs-has-started.vjs-user-inactive.vjs-playing.vjs-cast .vjs-progress,
+.vjs-has-started.vjs-user-inactive.vjs-playing.vjs-cast .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+.vjs-modal-dialog {
+  .vjs-modal-dialog-content {
+    display: none;
+  }
+}
+
+// 在 modal 的时候隐藏进度条
+.vjs-controls-disabled .vjs-progress,
+.vjs-using-native-controls .vjs-progress {
+  display: none !important;
+}
+
+// 加载时显示 loading
+.vjs-waiting:not(.vjs-cast) .vjs-loading-spinner,
+.vjs-seeking:not(.vjs-scrubbing):not(.vjs-error):not(.vjs-cast)
+  .vjs-loading-spinner {
+  visibility: visible;
+  animation: rotation 1s linear infinite;
+  @keyframes rotation {
+    to {
+      visibility: visible;
+    }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+.vjs-cast .vjs-overlay {
+  background: #000000;
+}
+
+// 错误的时候也需要显示 control-bar 和 progress
+.vjs-error .vjs-control-bar,
+.vjs-error .vjs-progress {
+  display: flex !important;
+}
+.vjs-error .vjs-loading-spinner {
+  display: none;
+}
+.vjs-error .vjs-overlay {
+  background: #000000;
+}
+
+.vjs-theme-lzc {
+  .vjs-loading-spinner {
+    visibility: hidden;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border-top: 3px solid $progress-played-color;
+    border-right: 3px solid transparent;
+    margin: -22px 0 0 -22px;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border-bottom: 3px solid $progress-played-color;
+      border-left: 3px solid transparent;
+    }
+  }
+
+  .vjs-control-bar {
+    display: flex;
+    flex-direction: row;
+    padding: 0 2rem;
+    height: 4rem;
+    bottom: 2rem;
+
+    background: none;
+    gap: 0px 12px;
+    @media screen and (width > 480px) {
+      gap: 0px 16px;
+    }
+
+    .vjs-custom-control-spacer {
+      flex: 1;
+      display: block;
+    }
+
+    .vjs-playlist-button-control,
+    .vjs-playrate-button-control,
+    .vjs-fullscreen-button-control,
+    .vjs-resolution-button-control,
+    .vjs-subtitle-button-control {
+      @include control-bar-text;
+    }
+  }
+
+  .vjs-button {
+    &:hover {
+      color: $button-color;
+      background: none;
+    }
+
+    > .vjs-icon-placeholder {
+      &::before {
+        font-size: 2.4rem;
+      }
+    }
+  }
+
+  .vjs-time-control {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .vjs-volume-panel {
+    display: none;
+  }
+
+  .vjs-picture-in-picture-control {
+    display: none;
+  }
+
+  .vjs-modal-dialog {
+    z-index: 60;
+    overflow: hidden;
+  }
+
+  .vjs-progress {
+    width: 100%;
+    position: absolute;
+    bottom: 6.3rem;
+    padding: 0px 2rem;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    // 上下居中
+    .vjs-current-time-display,
+    .vjs-remaining-time-display {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      @include progress-text;
+    }
+    .vjs-current-time-display {
+      margin-right: 1.7rem;
+    }
+    .vjs-remaining-time-display {
+      margin-left: 1.7rem;
+    }
+
+    // 调整padding高度，增大事件触发的范围
+    .vjs-progress-holder {
+      height: 0.2rem;
+      padding: 1.2rem 0rem;
+      border-radius: 0.15rem;
+      cursor: pointer;
+      margin: 0;
+      // 使用这个class来画未加载的进度条
+      &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 0.2rem;
+        background: $progress-color;
+      }
+
+      .vjs-load-progress,
+      .vjs-play-progress {
+        height: 0.2rem;
+        top: 1.2rem;
+      }
+
+      .vjs-play-progress {
+        background: $progress-played-color;
+        &:before {
+          content: "";
+          width: 2.6rem;
+          height: 2.6rem;
+          position: absolute;
+          right: -1.3rem;
+          top: -1.3rem;
+          background: $progress-played-color;
+          border-radius: 1.8rem;
+          opacity: 0.15;
+          z-index: 1;
+        }
+        &:after {
+          content: "";
+          width: 1.2rem;
+          height: 1.2rem;
+          position: absolute;
+          right: -0.6rem;
+          top: -0.6rem;
+          background: $progress-played-color;
+          border-radius: 0.65rem;
+          z-index: 1;
+        }
+      }
+    }
+  }
+
+  .vjs-overlay {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+    left: 0;
+    top: 0;
+
+    .vjs-overlay-padding {
+      padding: 0 2rem;
+      background-origin: border-box;
+    }
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .vjs-theme-lzc {
+    .vjs-control-bar {
+      padding: 0 4.4rem;
+    }
+    .vjs-progress {
+      padding: 0 4.4rem;
+    }
+    .vjs-overlay {
+      .vjs-overlay-padding {
+        padding: 0 4.4rem;
+      }
+    }
+  }
+}