lzc-video-player 0.0.0

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

@@ -0,0 +1,913 @@
+import Hls from "hls.js"
+import base from "@lazycatcloud/sdk/dist/extentions/base"
+import type { VideoInfo, VideoQualityLevel, VideoResolution } from "@/model"
+import type { Subtitle } from "@/model"
+import { EventEmitter } from "./EventEmitter"
+import type { LzcPlayer } from "../player"
+import { controller as webview } from "../useWebview"
+import {
+  doContinueAction,
+  doPauseAction,
+} from "../components/LzcOverlay/useCast"
+
+const IOS_FAKE_FULLSCREEN_TRANSITION_MS = 260
+
+export function isIos() {
+  return (
+    /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()) ||
+    !!navigator.userAgent.match(/Mac OS X\s+[^\s)]+.*?Mobile/)
+  )
+}
+/** Stub compatible with videojs-contrib-quality-levels. */
+export function createStubQualityLevels() {
+  const listeners: Record<string, ((e: any) => void)[]> = {}
+  return {
+    levels_: [] as Array<{
+      id: string
+      label: string
+      height: number
+      width: number
+      bitrate: number
+      enabled: boolean
+    }>,
+    selectedIndex_: -1,
+    on(event: string, fn: (e: any) => void) {
+      if (!listeners[event]) listeners[event] = []
+      listeners[event].push(fn)
+    },
+    trigger(e: any) {
+      const name = (e && e.type) || "change"
+      ;(listeners[name] || []).forEach((fn) => fn(e))
+    },
+  }
+}
+
+export type StubQualityLevels = ReturnType<typeof createStubQualityLevels>
+
+export interface NativePlayerOptions {
+  mediaPrefix?: string
+  showTopBar?: boolean
+  playMode?: "standard" | "direct"
+}
+
+/** Public API type consumed by provide/inject and composables. */
+export interface NativePlayerAPI extends LzcPlayer {
+  options_: NativePlayerOptions & { mediaPrefix: string }
+  setContainer(el: HTMLElement | null): void
+  _src: (
+    sources?:
+      | string
+      | { src: string; type?: string }
+      | Array<{ src: string; type?: string }>,
+  ) => string | void
+  qualityLevels(): StubQualityLevels
+  currentVideoName(): string
+}
+
+export class NativePlayer implements NativePlayerAPI, LzcPlayer {
+  private video: HTMLVideoElement
+  private events = new EventEmitter()
+  private hls: Hls | null = null
+  private _disposed = false
+  private _currentVideoInfo: VideoInfo | null = null
+  private _videoDisplayName = ""
+  private _fullscreenTarget: HTMLElement | null = null
+  private _container: HTMLElement | null = null
+  private _prevEnabled = false
+  private _nextEnabled = false
+  private _castMode = false
+  private _castSrc = ""
+  private _castPaused = false
+  private _scrubbing = false
+  private _durationOverride: number | null = null
+  private _currentTimeOverride: number | null = null
+  private _pendingHlsLevel: VideoQualityLevel | null = null
+  private _poster = ""
+  readonly options_: NativePlayerOptions & { mediaPrefix: string }
+  private _qualityLevels = createStubQualityLevels()
+  private _iosFakeFullscreen = false
+  private _iosFakeFullscreenCleanupTimer: ReturnType<typeof setTimeout> | null =
+    null
+  private _onViewportChange = () => {
+    if (!this._iosFakeFullscreen) return
+    this._syncIosFakeFullscreenLayout()
+  }
+
+  /** useSource may replace this with src2; keep original setSrc internally. */
+  _src: (
+    sources?:
+      | string
+      | { src: string; type?: string }
+      | Array<{ src: string; type?: string }>,
+  ) => string | void = () => ""
+
+  /** Optional callbacks for previous/next episode. */
+  playPrev?: () => void
+  playNext?: () => void
+
+  /** Optional modal bridge injected by player component. */
+  lzcModal?: () => { openModal: (page: string) => void; close: () => void }
+
+  /** Called by useSource via player.qualityLevels(). */
+  qualityLevels(): StubQualityLevels {
+    return this._qualityLevels
+  }
+
+  /** Exposed for controls: whether previous is available. */
+  get prevEnabled(): boolean {
+    return this._prevEnabled
+  }
+
+  /** Exposed for controls: whether next is available. */
+  get nextEnabled(): boolean {
+    return this._nextEnabled
+  }
+
+  private _onDocumentFullscreenChange = () => {
+    this.events.trigger("fullscreenchange")
+  }
+
+  constructor(videoEl: HTMLVideoElement, options: NativePlayerOptions = {}) {
+    this.video = videoEl
+    this.options_ = {
+      mediaPrefix: options.mediaPrefix ?? "/_lzc/media",
+      showTopBar: options.showTopBar !== false,
+      playMode: options.playMode ?? "standard",
+    }
+    this._src = this.setSrc.bind(this)
+    this._bindVideoEvents()
+    document.addEventListener(
+      "fullscreenchange",
+      this._onDocumentFullscreenChange,
+    )
+    this.on("changeBrightness", (e: any) => {
+      if (webview.IsApp()) {
+        webview.SetScreentBrightness(e?.brightness ?? 1)
+      } else {
+        console.log("adjust brightness only supported in app")
+      }
+    })
+    this.on("CastPause", () => {
+      if (this._castMode) {
+        this._castPaused = true
+      }
+    })
+    this.on("CastPlay", () => {
+      if (this._castMode) {
+        this._castPaused = false
+      }
+    })
+  }
+
+  private _bindVideoEvents() {
+    const evNames = [
+      "loadstart",
+      "loadedmetadata",
+      "loadeddata",
+      "canplay",
+      "canplaythrough",
+      "playing",
+      "play",
+      "pause",
+      "ended",
+      "seeking",
+      "seeked",
+      "timeupdate",
+      "volumechange",
+      "error",
+      "waiting",
+    ] as const
+    evNames.forEach((name) => {
+      this.video.addEventListener(name, (e) => this.events.trigger(name, e))
+    })
+  }
+
+  private _isHlsUrl(url: string): boolean {
+    return (
+      /\.m3u8(\?|$)/i.test(url) ||
+      /application\/x-mpegURL|application\/vnd\.apple\.mpegurl/i.test(url)
+    )
+  }
+
+  private setSrc(
+    sources?:
+      | string
+      | { src: string; type?: string }
+      | Array<{ src: string; type?: string }>,
+  ): string | void {
+    if (sources === undefined || sources === null) {
+      return this.currentSrc()
+    }
+    let src: string
+    let type = ""
+    if (typeof sources === "string") {
+      src = sources
+    } else if (Array.isArray(sources)) {
+      if (sources.length === 0) return
+      src = sources[0].src
+      type = sources[0].type ?? ""
+    } else {
+      src = sources.src
+      type = sources.type ?? ""
+    }
+    if (type === "video/lzc-cast") {
+      this._castMode = true
+      this._castSrc = src
+      this._castPaused = false
+      this._currentTimeOverride = 0
+      this._durationOverride = null
+      return undefined
+    }
+    if (this._castMode) {
+      this._castMode = false
+      this._castPaused = false
+    }
+    this._loadSource(src, type)
+    return undefined
+  }
+
+  private _loadSource(url: string, type: string) {
+    this._destroyHls()
+    this.resetQualityLevels()
+    const isHls = this._isHlsUrl(url) || type === "application/x-mpegURL"
+    if (!isHls) {
+      this._pendingHlsLevel = null
+      this.video.src = url
+      this.video.load()
+    }
+    if (isHls && !Hls.isSupported()) {
+      this._pendingHlsLevel = null
+      this.video.src = url
+      this.video.load()
+    }
+    if (isHls && Hls.isSupported()) {
+      this.hls = new Hls({ enableWorker: true })
+      this.hls.loadSource(url)
+      this.hls.attachMedia(this.video)
+      this.hls.on(Hls.Events.MANIFEST_PARSED, (_e, data) => {
+        this._qualityLevels.levels_ = (data.levels || []).map(
+          (lev: any, i: number) => {
+            const name = `${lev?.name || ""}`.trim()
+            const height = lev.height || 0
+            const label =
+              name === "origin"
+                ? "origin"
+                : name
+                  ? /p$/i.test(name)
+                    ? name
+                    : `${name}P`
+                  : height > 0
+                    ? `${height}P`
+                    : ""
+            return {
+              id: String(i),
+              label,
+              height,
+              width: lev.width || 0,
+              bitrate: lev.bitrate || 0,
+              enabled: true,
+            }
+          },
+        )
+        this._qualityLevels.levels_.forEach((level) => {
+          this._qualityLevels.trigger({
+            type: "addqualitylevel",
+            qualityLevel: level,
+          })
+        })
+        const pendingLevel = this._pendingHlsLevel
+        this._pendingHlsLevel = null
+        const pendingIndex = pendingLevel
+          ? this.findQualityLevelIndex(pendingLevel)
+          : -1
+        const currentIndex = this._qualityLevels.selectedIndex_
+        const selectedIndex =
+          pendingIndex >= 0 &&
+          pendingIndex < this._qualityLevels.levels_.length
+            ? pendingIndex
+            : currentIndex >= 0 && currentIndex < this._qualityLevels.levels_.length
+              ? currentIndex
+            : 0
+        this.applyHlsLevelIndex(selectedIndex, { trigger: true })
+      })
+    }
+  }
+
+  private applyHlsLevelIndex(index: number, options: { trigger?: boolean } = {}) {
+    if (!this.hls || index < 0 || index >= this._qualityLevels.levels_.length) {
+      return false
+    }
+    this.hls.currentLevel = index
+    this._qualityLevels.selectedIndex_ = index
+    this._qualityLevels.levels_.forEach((level, levelIndex) => {
+      level.enabled = levelIndex === index
+    })
+    if (options.trigger !== false) {
+      this._qualityLevels.trigger({ type: "change", selectedIndex: index })
+    }
+    return true
+  }
+
+  private findQualityLevelIndex(level: VideoQualityLevel) {
+    if (level.label === "origin" || level.id === "origin") {
+      const originIndex = this._qualityLevels.levels_.findIndex(
+        (item) => item.label === "origin",
+      )
+      if (originIndex >= 0) {
+        return originIndex
+      }
+    }
+
+    const idIndex = parseInt(level.id, 10)
+    if (
+      !Number.isNaN(idIndex) &&
+      idIndex >= 0 &&
+      idIndex < this._qualityLevels.levels_.length
+    ) {
+      return idIndex
+    }
+
+    return this._qualityLevels.levels_.findIndex(
+      (item) =>
+        item.id === level.id &&
+        item.height === level.height &&
+        item.bitrate === level.bitrate,
+    )
+  }
+
+  private resetQualityLevels(options: { trigger?: boolean } = {}) {
+    this._qualityLevels.levels_ = []
+    this._qualityLevels.selectedIndex_ = -1
+    if (options.trigger !== false) {
+      this._qualityLevels.trigger({ type: "change", selectedIndex: -1 })
+    }
+  }
+
+  private _destroyHls() {
+    if (this.hls) {
+      this.hls.destroy()
+      this.hls = null
+    }
+  }
+
+  play() {
+    if (this._castMode) {
+      this._castPaused = false
+      return doContinueAction().then(() => {
+        this.trigger("play")
+      })
+    }
+    return this.video.play()
+  }
+
+  pause() {
+    if (this._castMode) {
+      this._castPaused = true
+      void doPauseAction().then(() => {
+        this.trigger("pause")
+      })
+      return
+    }
+    this.video.pause()
+  }
+
+  paused(): boolean {
+    if (this._castMode) {
+      return this._castPaused
+    }
+    return this.video.paused
+  }
+
+  currentTime(): number
+  currentTime(seconds: number): void
+  currentTime(seconds?: number): number | void {
+    if (seconds === undefined) {
+      if (this._castMode && this._currentTimeOverride != null) {
+        return this._currentTimeOverride
+      }
+      return this.video.currentTime
+    }
+    if (this._castMode) {
+      this._currentTimeOverride = seconds
+      return
+    }
+    this.video.currentTime = seconds
+  }
+
+  duration(): number
+  duration(seconds: number): void
+  duration(seconds?: number): number | void {
+    if (seconds !== undefined) {
+      this._durationOverride = seconds
+      return
+    }
+    if (this._castMode && this._durationOverride != null) {
+      return this._durationOverride
+    }
+    return this.video.duration ?? 0
+  }
+
+  volume(): number
+  volume(percent: number): void
+  volume(percent?: number): number | Promise<number> | void {
+    if (webview.IsApp()) {
+      if (typeof percent === "number") {
+        webview.SetVoice(percent)
+        return
+      }
+      return webview.GetCurrentVolume()
+    }
+    if (percent === undefined) return this.video.volume
+    this.video.volume = Math.max(0, Math.min(1, percent))
+  }
+
+  muted(): boolean
+  muted(muted: boolean): void
+  muted(muted?: boolean): boolean | void {
+    if (muted === undefined) return this.video.muted
+    this.video.muted = muted
+  }
+
+  currentSrc(): string {
+    if (this._castMode && this._castSrc) return this._castSrc
+    return this.video.currentSrc || this.video.src || ""
+  }
+
+  src(
+    sources?:
+      | string
+      | { src: string; type?: string }
+      | Array<{ src: string; type?: string }>,
+  ): string | void {
+    return this._src(sources)
+  }
+
+  poster(url?: string): string | void {
+    if (url === undefined) return this._poster
+    this._poster = url
+  }
+
+  on(event: string, fn: (e?: any) => void) {
+    this.events.on(event, fn)
+  }
+
+  one(event: string, fn: (e?: any) => void) {
+    this.events.one(event, fn)
+  }
+
+  off(event: string, fn?: (e?: any) => void) {
+    this.events.off(event, fn)
+  }
+
+  ready(fn?: () => void) {
+    if (typeof fn !== "function") return
+    Promise.resolve().then(() => {
+      if (!this._disposed) fn()
+    })
+  }
+
+  trigger(
+    eventOrName: string | { type: string; [key: string]: unknown },
+    data?: unknown,
+  ) {
+    this.events.trigger(eventOrName as any, data)
+  }
+
+  dimensions(_w: number, _h: number) {
+    // no-op for minimal
+  }
+
+  id(): string {
+    return this.video.id || "native-player"
+  }
+
+  isDisposed(): boolean {
+    return this._disposed
+  }
+
+  dispose() {
+    if (this._disposed) return
+    this._disposed = true
+    this._setIosFakeFullscreen(false, { immediate: true })
+    document.removeEventListener(
+      "fullscreenchange",
+      this._onDocumentFullscreenChange,
+    )
+    this._destroyHls()
+    this.events.dispose()
+    this.video.src = ""
+    this.trigger("dispose")
+  }
+
+  /** Patched by useSource. */
+  currentVideoInfo(): VideoInfo | null {
+    return this._currentVideoInfo
+  }
+
+  currentVideoName(): string {
+    return this._videoDisplayName || this.currentSrc().split("/").pop() || ""
+  }
+
+  currentPreview(): undefined {
+    return undefined
+  }
+
+  getAvaliableSubtitles(): Subtitle[] | undefined {
+    return []
+  }
+
+  isSubtitleLoading(): boolean {
+    return false
+  }
+
+  currentSubtitle(): Subtitle | undefined {
+    return undefined
+  }
+
+  changeSubtitle(_sub: Subtitle | number) {}
+  clearSubtitle() {}
+  toggleSubtitleVisibility() {}
+  isSubtitleHidden(): boolean {
+    return false
+  }
+  setSubtitleHidden(_v: boolean) {}
+
+  isCastMode(): boolean {
+    return this._castMode
+  }
+
+  currentType(): string {
+    return this._castMode ? "video/lzc-cast" : "video/html5"
+  }
+
+  isNetdiskSource(): boolean {
+    return false
+  }
+
+  reloadSource(_index?: number) {}
+
+  supportResolution(): VideoQualityLevel[] {
+    return this._qualityLevels.levels_.length
+      ? [...this._qualityLevels.levels_]
+      : [{ id: "auto", label: "auto", height: 0, width: 0, bitrate: 0 }]
+  }
+
+  currentResolution(): VideoResolution | undefined {
+    const q = this._qualityLevels
+    if (q.selectedIndex_ < 0 || !q.levels_[q.selectedIndex_]) return undefined
+    const lev = q.levels_[q.selectedIndex_]
+    return {
+      id: lev.id,
+      res: Math.min(lev.height, lev.width),
+      width: lev.width,
+      height: lev.height,
+      auto: false,
+      origin: lev.label === "origin",
+    }
+  }
+
+  changeResolution(level: VideoQualityLevel) {
+    if (level.id === "auto") {
+      if (this.hls) {
+        this.hls.currentLevel = -1
+        this._qualityLevels.selectedIndex_ = -1
+        this._pendingHlsLevel = null
+        this._qualityLevels.levels_.forEach((item) => {
+          item.enabled = true
+        })
+        this._qualityLevels.trigger({ type: "change", selectedIndex: -1 })
+      }
+      return
+    }
+    const idx = this.findQualityLevelIndex(level)
+    if (idx < 0) {
+      if (!this.hls || this._qualityLevels.levels_.length === 0) {
+        this._pendingHlsLevel = { ...level }
+      }
+      return
+    }
+    if (!this.applyHlsLevelIndex(idx, { trigger: true })) {
+      this._pendingHlsLevel = { ...level }
+    }
+  }
+
+  enablePrev(v: boolean) {
+    this._prevEnabled = v
+    this.trigger("prevNextChange")
+  }
+
+  enableNext(v: boolean) {
+    this._nextEnabled = v
+    this.trigger("prevNextChange")
+  }
+
+  playbackRate(): number
+  playbackRate(rate: number): void
+  playbackRate(rate?: number): number | void {
+    if (rate === undefined) return this.video.playbackRate
+    this.video.playbackRate = rate
+    this.trigger("ratechange")
+  }
+
+  private _playbackRates = [0.75, 1, 1.25, 1.5, 2, 3]
+  playbackRates(rates?: number[]): number[] {
+    if (rates !== undefined) this._playbackRates = rates
+    return this._playbackRates
+  }
+
+  setFullscreenTarget(el: HTMLElement | null) {
+    this._fullscreenTarget = el
+  }
+
+  setContainer(el: HTMLElement | null) {
+    this._container = el
+  }
+
+  private _fullscreenElement(): HTMLElement {
+    return this._container || this._fullscreenTarget || this.video
+  }
+
+  private _readViewportSize(): { width: number; height: number } {
+    if (typeof window === "undefined") {
+      return { width: 0, height: 0 }
+    }
+    const vv = window.visualViewport
+    const width =
+      vv?.width ?? window.innerWidth ?? document.documentElement.clientWidth
+    const height =
+      vv?.height ?? window.innerHeight ?? document.documentElement.clientHeight
+    return {
+      width: Number.isFinite(width) ? width : 0,
+      height: Number.isFinite(height) ? height : 0,
+    }
+  }
+
+  private _syncIosFakeFullscreenLayout() {
+    const el = this._fullscreenElement()
+    const { width: viewportWidth, height: viewportHeight } =
+      this._readViewportSize()
+    const portrait = viewportHeight >= viewportWidth
+    const layoutWidth = portrait ? viewportHeight : viewportWidth
+    const layoutHeight = portrait ? viewportWidth : viewportHeight
+    const rotate = portrait ? 90 : 0
+
+    el.classList.add("vjs-ios-fake-fullscreen")
+    el.classList.remove("vjs-ios-fake-fullscreen-exiting")
+    el.classList.toggle("vjs-ios-fake-fullscreen-portrait", portrait)
+    el.classList.toggle("vjs-ios-fake-fullscreen-landscape", !portrait)
+    el.style.setProperty("--lzc-ios-fs-width", `${Math.round(layoutWidth)}px`)
+    el.style.setProperty("--lzc-ios-fs-height", `${Math.round(layoutHeight)}px`)
+    el.style.setProperty("--lzc-ios-fs-rotate", `${rotate}deg`)
+  }
+
+  private _clearIosFakeFullscreenLayout() {
+    const el = this._fullscreenElement()
+    el.classList.remove(
+      "vjs-ios-fake-fullscreen",
+      "vjs-ios-fake-fullscreen-portrait",
+      "vjs-ios-fake-fullscreen-landscape",
+      "vjs-ios-fake-fullscreen-exiting",
+    )
+    el.style.removeProperty("--lzc-ios-fs-width")
+    el.style.removeProperty("--lzc-ios-fs-height")
+    el.style.removeProperty("--lzc-ios-fs-rotate")
+  }
+
+  private _clearIosFakeFullscreenCleanupTimer() {
+    if (!this._iosFakeFullscreenCleanupTimer) return
+    clearTimeout(this._iosFakeFullscreenCleanupTimer)
+    this._iosFakeFullscreenCleanupTimer = null
+  }
+
+  private _prefersReducedMotion(): boolean {
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return false
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }
+
+  private _animateIosFakeFullscreenExit() {
+    const el = this._fullscreenElement()
+    const { width, height } = this._readViewportSize()
+
+    el.classList.add("vjs-ios-fake-fullscreen")
+    el.classList.add("vjs-ios-fake-fullscreen-exiting")
+    el.classList.remove(
+      "vjs-ios-fake-fullscreen-portrait",
+      "vjs-ios-fake-fullscreen-landscape",
+    )
+
+    const applyFinal = () => {
+      el.style.setProperty("--lzc-ios-fs-width", `${Math.round(width)}px`)
+      el.style.setProperty("--lzc-ios-fs-height", `${Math.round(height)}px`)
+      el.style.setProperty("--lzc-ios-fs-rotate", "0deg")
+    }
+
+    if (
+      typeof window !== "undefined" &&
+      typeof window.requestAnimationFrame === "function"
+    ) {
+      window.requestAnimationFrame(applyFinal)
+    } else {
+      applyFinal()
+    }
+
+    const duration = this._prefersReducedMotion()
+      ? 0
+      : IOS_FAKE_FULLSCREEN_TRANSITION_MS
+    this._iosFakeFullscreenCleanupTimer = setTimeout(() => {
+      this._iosFakeFullscreenCleanupTimer = null
+      this._clearIosFakeFullscreenLayout()
+    }, duration)
+  }
+
+  private _bindIosFakeFullscreenListeners() {
+    if (typeof window === "undefined") return
+    window.addEventListener("resize", this._onViewportChange)
+    window.addEventListener("orientationchange", this._onViewportChange)
+    const vv = window.visualViewport
+    if (vv) {
+      vv.addEventListener("resize", this._onViewportChange)
+    }
+  }
+
+  private _unbindIosFakeFullscreenListeners() {
+    if (typeof window === "undefined") return
+    window.removeEventListener("resize", this._onViewportChange)
+    window.removeEventListener("orientationchange", this._onViewportChange)
+    const vv = window.visualViewport
+    if (vv) {
+      vv.removeEventListener("resize", this._onViewportChange)
+    }
+  }
+
+  private _setIosFakeFullscreen(
+    value: boolean,
+    options?: { immediate?: boolean },
+  ) {
+    if (this._iosFakeFullscreen === value) {
+      if (value) {
+        this._syncIosFakeFullscreenLayout()
+      }
+      return
+    }
+    this._clearIosFakeFullscreenCleanupTimer()
+    this._iosFakeFullscreen = value
+    if (value) {
+      this._bindIosFakeFullscreenListeners()
+      this._syncIosFakeFullscreenLayout()
+    } else {
+      this._unbindIosFakeFullscreenListeners()
+      if (options?.immediate) {
+        this._clearIosFakeFullscreenLayout()
+      } else {
+        this._animateIosFakeFullscreenExit()
+      }
+    }
+    this.events.trigger("fullscreenchange")
+  }
+
+  private _isIosSafari(): boolean {
+    return isIos() || base.isIosWebShell()
+  }
+
+  requestFullscreen() {
+    if (this._isIosSafari()) {
+      this._setIosFakeFullscreen(true)
+      return
+    }
+    const el = this._fullscreenElement()
+    const request =
+      (el as any).requestFullscreen ||
+      (el as any).webkitRequestFullscreen ||
+      (el as any).webkitRequestFullScreen
+    if (typeof request === "function") {
+      try {
+        const result = request.call(el)
+        if (result && typeof result.catch === "function") {
+          result.catch(() => {})
+        }
+        return
+      } catch {
+        return
+      }
+    }
+  }
+
+  exitFullscreen() {
+    if (this._isIosSafari()) {
+      this._setIosFakeFullscreen(false)
+      return
+    }
+    if (document.fullscreenElement) {
+      document.exitFullscreen()
+    }
+  }
+
+  isFullscreen(): boolean {
+    if (this._isIosSafari()) {
+      return this._iosFakeFullscreen
+    }
+    const el = this._fullscreenElement()
+    return !!document.fullscreenElement && document.fullscreenElement === el
+  }
+
+  isUsingNativeSubtitleFallback(): boolean {
+    return false
+  }
+
+  /** Set by useSource hooks. */
+  setCurrentVideoInfo(info: VideoInfo | null) {
+    this._currentVideoInfo = info
+  }
+
+  setVideoDisplayName(name: string) {
+    this._videoDisplayName = name
+  }
+
+  /** Expose internal video element for useSource bindings. */
+  $video(): HTMLVideoElement {
+    return this.video
+  }
+
+  networkState(): number {
+    return this.video.networkState ?? 0
+  }
+
+  currentSource(): { src: string; type?: string } {
+    const src = this.currentSrc()
+    const isHls = this._isHlsUrl(src)
+    if (this._castMode) {
+      return { src, type: "video/lzc-cast" }
+    }
+    return { src, type: isHls ? "application/x-mpegURL" : "" }
+  }
+
+  currentWidth(): number {
+    const el = this._fullscreenElement()
+    return el.getBoundingClientRect().width
+  }
+
+  currentDimensions(): { width: number; height: number } {
+    const el = this._fullscreenElement()
+    const rect = el.getBoundingClientRect()
+    return { width: rect.width, height: rect.height }
+  }
+
+  addClass(name: string) {
+    const el = this._fullscreenElement()
+    el.classList.add(name)
+  }
+
+  removeClass(name: string) {
+    const el = this._fullscreenElement()
+    el.classList.remove(name)
+  }
+
+  hasClass(name: string): boolean {
+    const el = this._fullscreenElement()
+    return el.classList.contains(name)
+  }
+
+  ended(): boolean {
+    if (this._castMode) return false
+    return this.video.ended
+  }
+
+  seeking(): boolean {
+    if (this._castMode) return false
+    return this.video.seeking
+  }
+
+  scrubbing(): boolean {
+    return this._scrubbing
+  }
+
+  setScrubbing(value: boolean) {
+    this._scrubbing = value
+  }
+
+  bufferedEnd(): number {
+    if (this._castMode) {
+      return (this.currentTime() as number) || 0
+    }
+    const ranges = this.video.buffered
+    if (!ranges || ranges.length === 0) return 0
+    return ranges.end(ranges.length - 1)
+  }
+
+  error(): MediaError | null {
+    return this.video.error
+  }
+
+  async currentBrightness(): Promise<number> {
+    if (webview.IsApp()) {
+      return await webview.GetScreenBrightNess()
+    }
+    console.log("adjust brightness only supported in app")
+    return 1
+  }
+}