lzc-video-player 0.0.0

package/src/components/Video/components/LzcOverlay/SubtitleLayer.vue

@@ -0,0 +1,321 @@
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import type { LzcPlayer } from "@/components/Video/player"
+import type { Subtitle } from "@/model"
+import { fetchSubtitleCues, type SubtitleCue } from "./useSubtitleTrack"
+import { useSubtitleRenderEngine } from "./useSubtitleRenderEngine"
+import { useSubtitlePreference } from "@/components/Video/useSubtitlePreference"
+import { isMobile } from "@/use/useUtils"
+
+const props = defineProps<{
+  player: LzcPlayer
+  active?: boolean
+}>()
+
+const cues = ref<SubtitleCue[]>([])
+const subtitle = ref<Subtitle>()
+const hidden = ref(false)
+const currentTime = ref(0)
+const renderMode = ref<"none" | "vtt" | "ass-octopus">("none")
+const viewportWidth = ref(0)
+const iosPortraitFakeFullscreen = ref(false)
+let loadToken = 0
+
+const renderEngine = useSubtitleRenderEngine(props.player)
+const { subtitleSizeLevel, getSubtitleSizePixels } = useSubtitlePreference()
+const DEFAULT_VTT_BOTTOM_OFFSET_PERCENT = 0
+const DEFAULT_VTT_TIME_OFFSET_SEC = 0
+const IOS_PORTRAIT_FAKE_FULLSCREEN_BOTTOM_OFFSET_PX = -80
+const CONTROLS_HIDDEN_BOTTOM_OFFSET_PX = -80
+const VTT_SCALE_BREAKPOINTS = {
+  mobileMaxWidth: 900,
+  largeScreenMinWidth: 1600,
+} as const
+const VTT_SCALE_PROFILES = {
+  mobile: {
+    baseWidth: 550,
+    minScale: 0.55,
+    maxScale: 1.1,
+  },
+  desktop: {
+    baseWidth: 900,
+    minScale: 1.1,
+    maxScale: 1.6,
+  },
+  largeScreen: {
+    baseWidth: 1600,
+    minScale: 1.6,
+    maxScale: 2.8,
+  },
+} as const
+
+function getCurrentTime() {
+  const value = props.player.currentTime?.()
+  currentTime.value = Number.isFinite(value as number) ? (value as number) : 0
+}
+
+function updateHidden() {
+  hidden.value = props.player.isSubtitleHidden?.() ?? false
+}
+
+function parseCssPixel(value: string): number {
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0
+}
+
+function updateFakeFullscreenState() {
+  iosPortraitFakeFullscreen.value =
+    isMobile() && props.player.hasClass("vjs-ios-fake-fullscreen-portrait")
+}
+
+function readFakeFullscreenWidth(): number {
+  if (!props.player.hasClass("vjs-ios-fake-fullscreen")) {
+    return 0
+  }
+  const container = props.player.$video().closest(".lzc-video-player")
+  if (container) {
+    const cssWidth =
+      getComputedStyle(container).getPropertyValue("--lzc-ios-fs-width")
+    const parsed = parseCssPixel(cssWidth)
+    if (parsed > 0) {
+      return parsed
+    }
+  }
+  const vv = window.visualViewport
+  const vw = vv?.width || window.innerWidth || 0
+  const vh = vv?.height || window.innerHeight || 0
+  return Math.max(vw, vh)
+}
+
+function updateViewportWidth() {
+  updateFakeFullscreenState()
+  const fakeFullscreenWidth = readFakeFullscreenWidth()
+  if (fakeFullscreenWidth > 0) {
+    viewportWidth.value = fakeFullscreenWidth
+    return
+  }
+  const dims = props.player.currentDimensions()
+  const next = Number.isFinite(dims.width) ? dims.width : 0
+  if (next > 0) {
+    viewportWidth.value = next
+    return
+  }
+  const fallback = props.player.$video()?.clientWidth || window.innerWidth || 0
+  viewportWidth.value = fallback > 0 ? fallback : 0
+}
+
+function computeVttScaleByViewportWidth(width: number): number {
+  let profile: typeof VTT_SCALE_PROFILES[keyof typeof VTT_SCALE_PROFILES] =
+    VTT_SCALE_PROFILES.desktop
+  if (width >= VTT_SCALE_BREAKPOINTS.largeScreenMinWidth) {
+    profile = VTT_SCALE_PROFILES.largeScreen
+  } else if (width < VTT_SCALE_BREAKPOINTS.mobileMaxWidth) {
+    profile = VTT_SCALE_PROFILES.mobile
+  }
+  if (!Number.isFinite(width) || width <= 0) {
+    return profile.minScale
+  }
+  const ratio = width / profile.baseWidth
+  return Math.min(profile.maxScale, Math.max(profile.minScale, ratio))
+}
+
+function getSubtitleVttUrl(current?: Subtitle): string {
+  if (!current) return ""
+  return (current.vtt_url || "").trim()
+}
+
+function resetOverlaySubtitleState() {
+  renderEngine.reset()
+  renderMode.value = "none"
+  cues.value = []
+}
+
+async function loadSubtitleCues() {
+  loadToken += 1
+  const currentToken = loadToken
+
+  const nextSubtitle = props.player.currentSubtitle?.()
+  const nextHidden = props.player.isSubtitleHidden?.() ?? false
+
+  subtitle.value = nextSubtitle
+  hidden.value = nextHidden
+
+  if (props.player.isUsingNativeSubtitleFallback?.() === true) {
+    resetOverlaySubtitleState()
+    return
+  }
+
+  const nextRenderMode = await renderEngine.selectMode(nextSubtitle, nextHidden)
+  if (currentToken !== loadToken) {
+    return
+  }
+
+  renderMode.value = nextRenderMode
+  if (renderMode.value !== "vtt") {
+    cues.value = []
+    return
+  }
+
+  if (!nextSubtitle || nextHidden) {
+    cues.value = []
+    return
+  }
+
+  const vttUrl = getSubtitleVttUrl(nextSubtitle)
+  if (!vttUrl) {
+    console.info(
+      "Current subtitle has no vtt_url and is skipped",
+      nextSubtitle,
+    )
+    cues.value = []
+    return
+  }
+
+  const parsed = await fetchSubtitleCues(vttUrl)
+  if (currentToken !== loadToken) {
+    return
+  }
+  cues.value = parsed
+  getCurrentTime()
+}
+
+const activeCues = computed(() => {
+  if (renderMode.value !== "vtt" || hidden.value || cues.value.length === 0) {
+    return []
+  }
+  const shifted = Math.max(0, currentTime.value + DEFAULT_VTT_TIME_OFFSET_SEC)
+  return cues.value.filter((cue) => shifted >= cue.start && shifted < cue.end)
+})
+
+const isControlsActive = computed(() => props.active !== false)
+
+const layerStyle = computed(() => ({
+  bottom: !isControlsActive.value
+    ? `${CONTROLS_HIDDEN_BOTTOM_OFFSET_PX}px`
+    : iosPortraitFakeFullscreen.value
+    ? `${IOS_PORTRAIT_FAKE_FULLSCREEN_BOTTOM_OFFSET_PX}px`
+    : `${DEFAULT_VTT_BOTTOM_OFFSET_PERCENT}%`,
+}))
+
+const cueStyle = computed(() => {
+  const base = getSubtitleSizePixels(subtitleSizeLevel.value)
+  const scale = computeVttScaleByViewportWidth(viewportWidth.value)
+  const fontSize = Math.round(base * scale)
+  return {
+    fontSize: `${fontSize}px`,
+  }
+})
+
+const onTimeUpdate = () => getCurrentTime()
+const onSeeked = () => getCurrentTime()
+const onRateChange = () => getCurrentTime()
+const onResize = () => updateViewportWidth()
+const onOrientationChange = () => updateViewportWidth()
+const onLoadedMetadata = () => updateViewportWidth()
+const onFullscreenChange = () => {
+  updateViewportWidth()
+  if (
+    typeof window !== "undefined" &&
+    typeof window.requestAnimationFrame === "function"
+  ) {
+    window.requestAnimationFrame(() => {
+      updateViewportWidth()
+    })
+  }
+}
+const onSubtitleReady = () => {
+  void loadSubtitleCues()
+}
+const onSubtitleChange = () => {
+  void loadSubtitleCues()
+}
+const onSubtitleVisibilityChange = () => {
+  updateHidden()
+  void loadSubtitleCues()
+}
+const onOpenVideo = () => {
+  resetOverlaySubtitleState()
+  subtitle.value = undefined
+  updateViewportWidth()
+  void loadSubtitleCues()
+}
+
+onMounted(() => {
+  getCurrentTime()
+  updateViewportWidth()
+  void loadSubtitleCues()
+
+  window.addEventListener("resize", onResize)
+  window.addEventListener("orientationchange", onOrientationChange)
+  props.player.on("loadedmetadata", onLoadedMetadata)
+  props.player.on("fullscreenchange", onFullscreenChange)
+  props.player.on("timeupdate", onTimeUpdate)
+  props.player.on("seeked", onSeeked)
+  props.player.on("ratechange", onRateChange)
+  props.player.on("subtitleReady", onSubtitleReady)
+  props.player.on("subtitlechange", onSubtitleChange)
+  props.player.on("subtitlevisibilitychange", onSubtitleVisibilityChange)
+  props.player.on("openVideo", onOpenVideo)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", onResize)
+  window.removeEventListener("orientationchange", onOrientationChange)
+  props.player.off("loadedmetadata", onLoadedMetadata)
+  props.player.off("fullscreenchange", onFullscreenChange)
+  props.player.off("timeupdate", onTimeUpdate)
+  props.player.off("seeked", onSeeked)
+  props.player.off("ratechange", onRateChange)
+  props.player.off("subtitleReady", onSubtitleReady)
+  props.player.off("subtitlechange", onSubtitleChange)
+  props.player.off("subtitlevisibilitychange", onSubtitleVisibilityChange)
+  props.player.off("openVideo", onOpenVideo)
+  renderEngine.dispose()
+})
+</script>
+
+<template>
+  <div
+    v-if="activeCues.length > 0"
+    class="subtitle-layer"
+    :style="layerStyle"
+    aria-hidden="true"
+  >
+    <div
+      v-for="(cue, idx) in activeCues"
+      :key="`${cue.start}-${cue.end}-${idx}`"
+      class="subtitle-cue"
+      :style="cueStyle"
+    >
+      {{ cue.text }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.subtitle-layer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 0 24px;
+  pointer-events: none;
+}
+
+.subtitle-cue {
+  max-width: min(90%, 1200px);
+  color: #fff;
+  text-align: center;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.9), -1px 0 0 rgba(0, 0, 0, 0.9),
+    0 1px 0 rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.9),
+    1px 1px 0 rgba(0, 0, 0, 0.75), -1px 1px 0 rgba(0, 0, 0, 0.75),
+    1px -1px 0 rgba(0, 0, 0, 0.75), -1px -1px 0 rgba(0, 0, 0, 0.75);
+}
+</style>

package/src/components/Video/components/LzcOverlay/cast.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useDialogPluginComponent } from "quasar"
+import type { RemoteMediaPlayer } from "@lazycatcloud/sdk/dist/dlna/dlna"
+import { devices, castDevice, castLoading, doPlayAction } from "./useCast"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+
+const props = defineProps<{ player: LzcPlayer; inline?: boolean }>()
+const emit = defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits,
+  "close",
+])
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()
+const isInline = computed(() => props.inline === true)
+
+const closeCastDialog = () => {
+  if (isInline.value) {
+    emit("close")
+  } else {
+    onDialogOK()
+  }
+}
+
+const onSelect = (d: RemoteMediaPlayer) => {
+  castDevice.value = d
+  doPlayAction(props.player, props.player.src(null)!)
+    .then(() => {
+      closeCastDialog()
+    })
+    .catch((err: any) => {
+      console.error(err)
+    })
+}
+
+
+props.player.on("dispose", () => {
+  if (isInline.value) {
+    emit("close")
+  } else {
+    onDialogHide()
+  }
+})
+</script>
+
+<template>
+  <div class="lzc-video-player">
+    <div
+      v-if="isInline"
+      class="cast-inline-backdrop"
+      @click.self="emit('close')"
+    >
+      <div class="cast">
+        <div class="title">
+          <span>{{
+            t(
+              "src.components.video.components.lzc_overlay.cast.film_delivery",
+              "影片投送",
+            )
+          }}</span>
+        </div>
+        <div class="search">
+          <span>{{
+            t(
+              "src.components.video.components.lzc_overlay.cast.searching",
+              "正在搜索设备…",
+            )
+          }}</span>
+        </div>
+        <q-list class="list">
+          <q-item
+            clickable
+            v-for="d in devices"
+            :key="d.uuid"
+            @click="onSelect(d)"
+          >
+            <q-item-section avatar v-if="castDevice?.uuid === d.uuid">
+              <div class="device-icon">
+                <span v-if="castLoading" class="casting"></span>
+                <q-icon v-else name="svguse:#icon-选择.svg"></q-icon>
+              </div>
+            </q-item-section>
+            <q-item-section class="device-name">
+              {{ d.name }}
+            </q-item-section>
+            <q-item-section side v-if="castDevice?.lanRegion != ''">
+              <div class="device-icon">
+                <q-icon
+                  name="svguse:#icon-box.svg"
+                  v-if="castDevice?.lanRegion == 'box'"
+                ></q-icon>
+                <q-icon name="svguse:#icon-client.svg" v-else></q-icon>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </div>
+    <q-dialog v-else ref="dialogRef" @hide="onDialogHide">
+      <div class="cast">
+        <div class="title">
+          <span>{{
+            t(
+              "src.components.video.components.lzc_overlay.cast.film_delivery",
+              "影片投送",
+            )
+          }}</span>
+        </div>
+        <div class="search">
+          <span>{{
+            t(
+              "src.components.video.components.lzc_overlay.cast.searching",
+              "正在搜索设备…",
+            )
+          }}</span>
+        </div>
+        <q-list class="list">
+          <q-item
+            clickable
+            v-for="d in devices"
+            :key="d.uuid"
+            @click="onSelect(d)"
+          >
+            <q-item-section avatar v-if="castDevice?.uuid === d.uuid">
+              <div class="device-icon">
+                <span v-if="castLoading" class="casting"></span>
+                <q-icon v-else name="svguse:#icon-选择.svg"></q-icon>
+              </div>
+            </q-item-section>
+            <q-item-section class="device-name">
+              {{ d.name }}
+            </q-item-section>
+            <q-item-section side v-if="castDevice?.lanRegion != ''">
+              <div class="device-icon">
+                <q-icon
+                  name="svguse:#icon-box.svg"
+                  v-if="castDevice?.lanRegion == 'box'"
+                ></q-icon>
+                <q-icon name="svguse:#icon-client.svg" v-else></q-icon>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin bb() {
+  border-bottom: 0.05rem solid rgba(255, 255, 255, 0.1);
+}
+.cast {
+  min-width: 37.5rem;
+  height: 26.7rem;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+  border-radius: 1.2rem;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.title {
+  height: 5.6rem;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  @include bb;
+
+  span {
+    height: 2.5rem;
+    font-size: 1.8rem;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 2.5rem;
+  }
+}
+.search {
+  height: 3.9rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0rem 2rem;
+
+  @include bb;
+
+  span {
+    height: 1.7rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 1.7rem;
+  }
+}
+.list {
+  > .q-item {
+    padding: 0rem 1.9rem;
+    height: 5.6rem;
+    align-items: center;
+    @include bb;
+  }
+
+  :deep(.q-item__section--avatar) {
+    min-width: 2.5rem;
+  }
+}
+.device-icon {
+  color: white;
+  width: 1.6rem;
+}
+.device-name {
+  height: 2rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 2rem;
+}
+.casting {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border-top: 3px solid #5f86ff;
+  border-right: 3px solid transparent;
+
+  display: block;
+  animation: rotation 1s linear infinite;
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.cast-inline-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+</style>