lzc-video-player 0.0.0

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

@@ -0,0 +1,499 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed, onBeforeUnmount } from "vue"
+import type { LzcPlayer } from "@/components/Video/player"
+import type { Subtitle } from "@/model"
+import { t } from "@/i18n"
+import { isMobile } from "@/use/useUtils"
+import {
+  useSubtitlePreference,
+  type SubtitleSizeLevel,
+} from "@/components/Video/useSubtitlePreference"
+
+const props = defineProps<{ player: LzcPlayer }>()
+const subtitleList = ref<Subtitle[]>([])
+const currentSubtitle = ref<Subtitle>()
+const canvasRef = ref<HTMLCanvasElement>()
+const subtitleHiddenState = ref(false)
+const subtitleLoading = ref(false)
+const { subtitleSizeLevel, setSubtitleSizeLevel } = useSubtitlePreference()
+
+const maxTextWidth = 250
+
+const internal = computed(() =>
+  subtitleList.value.filter((i) => !i.is_external),
+)
+const external = computed(() => subtitleList.value.filter((i) => i.is_external))
+
+const maxSubtitleWidth = computed(() => {
+  const list = [...internal.value.map(getName), ...external.value.map(getName)].map(
+    calcTextWidth,
+  )
+  const max = Math.max(...list)
+  return Number.isFinite(max) ? max : 0
+})
+
+const style = computed(() => ({
+  width: maxSubtitleWidth.value > maxTextWidth ? "300px" : "",
+}))
+
+const list = computed(() =>
+  [
+    {
+      key: "internal",
+      label: t("src.components.video.components.lzc_modal.subtitle.internal"),
+      value: internal.value,
+    },
+    {
+      key: "external",
+      label: t("src.components.video.components.lzc_modal.subtitle.external"),
+      value: external.value,
+    },
+  ].filter((i) => i.value.length > 0),
+)
+const canToggleHiddenSubtitle = computed(() => subtitleList.value.length > 0)
+const subtitleSizeOptions = computed<Array<{
+  key: SubtitleSizeLevel
+  label: string
+}>>(() => [
+  {
+    key: "small",
+    label: t("src.components.video.components.lzc_modal.subtitle.size_small"),
+  },
+  {
+    key: "medium",
+    label: t("src.components.video.components.lzc_modal.subtitle.size_medium"),
+  },
+  {
+    key: "large",
+    label: t("src.components.video.components.lzc_modal.subtitle.size_large"),
+  },
+])
+
+const externalSubtitleSliceEnd = computed(() =>
+  findCommonPrefixRange(external.value.map(getName)),
+)
+
+const onSelect = (obj: Subtitle) => {
+  if (!isRenderable(obj)) {
+    return
+  }
+  if (isActive(obj) && !isHiddenSub.value) {
+    const modal = props.player.lzcModal?.()
+    modal?.close()
+    return
+  }
+  props.player.setSubtitleHidden(false)
+  updateSubtitleHiddenState()
+  props.player.changeSubtitle(obj)
+  currentSubtitle.value = props.player.currentSubtitle()
+  const modal = props.player.lzcModal?.()
+  modal?.close()
+}
+
+const isActive = (item: Subtitle) => {
+  return (
+    currentSubtitle.value?.name === item.name &&
+    currentSubtitle.value?.stream_index === item.stream_index
+  )
+}
+
+function isRenderable(item: Subtitle): boolean {
+  return hasRenderableSubtitleSource(item) || hasLegacySubtitleTarget(item)
+}
+
+function hasRenderableSubtitleSource(item: Subtitle): boolean {
+  return !!(item.vtt_url || item.ass_url || "").trim()
+}
+
+function hasLegacySubtitleTarget(item: Subtitle): boolean {
+  if (hasRenderableSubtitleSource(item)) {
+    return false
+  }
+  return Number.isInteger(item.stream_index) && item.stream_index >= 0
+}
+
+function showUnavailableNote(item: Subtitle): boolean {
+  return !hasRenderableSubtitleSource(item) && !hasLegacySubtitleTarget(item)
+}
+
+function getName(item: Subtitle) {
+  const name = (item.name || "").trim()
+  const lang = (item.language || "").trim()
+  return name || lang || `${item.stream_index + 1}`
+}
+
+function findCommonPrefixRange(strings: string[]) {
+  if (strings.length === 0) return null
+
+  let minLen = Math.min(...strings.map((s) => s.length))
+  let end = -1
+
+  for (let i = 0; i < minLen; i++) {
+    const char = strings[0][i]
+    if (strings.every((s) => s[i] === char)) {
+      end = i
+    } else {
+      break
+    }
+  }
+
+  if (end === -1) return null
+  return { end }
+}
+
+function calcTextWidth(text: string) {
+  const canvas = canvasRef.value
+  if (!canvas) {
+    return 0
+  }
+  const ctx = canvas.getContext("2d")
+  if (!ctx) {
+    return 0
+  }
+  ctx.font = "14px Arial, Helvetica, sans-serif"
+  return ctx.measureText(text).width
+}
+
+function truncateToTwoLines(
+  text: string,
+  end: number,
+  maxWidth = maxTextWidth,
+) {
+  if (text.length === end + 1) {
+    end -= 3
+    end = Math.max(0, end)
+  }
+  let width = 0
+  let lines = 1
+  let result = ""
+
+  for (let i = text.length - 1; i > end; i--) {
+    const ch = text[i]
+    const w = calcTextWidth(ch)
+
+    if (width + w > maxWidth) {
+      lines++
+      if (lines > 2) {
+        return result
+      }
+      width = 0
+    }
+
+    width += w
+    result = ch + result
+  }
+
+  const endSlice = result
+  result = ""
+
+  for (let i = 0; i < end + 1; i++) {
+    const ch = text[i]
+    const w = calcTextWidth(ch)
+
+    if (width + w > maxWidth) {
+      lines++
+      if (lines > 2) break
+      width = 0
+    }
+
+    width += w
+    result += ch
+  }
+  result += endSlice
+  const total = result.length
+  if (text.length === total) {
+    return result
+  }
+  const replaceStr = "..."
+  const endSize = text.length - end - 1
+  return (
+    result.slice(0, total - endSize - replaceStr.length) + replaceStr + endSlice
+  )
+}
+
+function truncateExternalSubtitle(subtitle: Subtitle) {
+  const range = externalSubtitleSliceEnd.value
+  const name = getName(subtitle)
+  if (!range) {
+    return name
+  }
+  const { end } = range
+  return truncateToTwoLines(name, end)
+}
+
+function loadSubTitle() {
+  subtitleLoading.value = props.player.isSubtitleLoading?.() ?? false
+  if (props.player.getAvaliableSubtitles) {
+    subtitleList.value = props.player.getAvaliableSubtitles() as Subtitle[]
+  }
+  if (props.player.currentSubtitle) {
+    currentSubtitle.value = props.player.currentSubtitle()
+  }
+  updateSubtitleHiddenState()
+}
+
+const isHiddenSub = computed(() => {
+  if (subtitleHiddenState.value !== undefined) {
+    return subtitleHiddenState.value
+  }
+  if (props.player.isSubtitleHidden) {
+    return props.player.isSubtitleHidden()
+  }
+  return false
+})
+
+const updateSubtitleHiddenState = () => {
+  if (props.player.isSubtitleHidden) {
+    subtitleHiddenState.value = props.player.isSubtitleHidden()
+  } else {
+    subtitleHiddenState.value = false
+  }
+}
+
+const hiddenSub = () => {
+  if (!canToggleHiddenSubtitle.value) {
+    return
+  }
+  if (props.player.isSubtitleHidden?.() === true) {
+    const modal = props.player.lzcModal?.()
+    modal?.close()
+    return
+  }
+  if (props.player.toggleSubtitleVisibility) {
+    props.player.toggleSubtitleVisibility()
+  }
+  updateSubtitleHiddenState()
+  currentSubtitle.value = props.player.currentSubtitle()
+  const modal = props.player.lzcModal?.()
+  modal?.close()
+}
+
+const onHiddenSubClick = () => {
+  if (!canToggleHiddenSubtitle.value) return
+  hiddenSub()
+}
+
+const onSubtitleSizeSelect = (level: SubtitleSizeLevel) => {
+  if (subtitleSizeLevel.value === level) return
+  setSubtitleSizeLevel(level)
+}
+
+const handleSubtitleVisibilityChange = () => {
+  updateSubtitleHiddenState()
+  currentSubtitle.value = props.player.currentSubtitle()
+}
+
+const handleSubtitleChange = () => {
+  updateSubtitleHiddenState()
+  currentSubtitle.value = props.player.currentSubtitle()
+}
+
+const handleSubtitleLoadingChange = () => {
+  loadSubTitle()
+}
+
+onMounted(() => {
+  loadSubTitle()
+
+  props.player.on("subtitleReady", loadSubTitle)
+  props.player.on("subtitleloadingchange", handleSubtitleLoadingChange)
+  props.player.on("subtitlevisibilitychange", handleSubtitleVisibilityChange)
+  props.player.on("subtitlechange", handleSubtitleChange)
+})
+
+onBeforeUnmount(() => {
+  props.player.off("subtitleReady", loadSubTitle)
+  props.player.off("subtitleloadingchange", handleSubtitleLoadingChange)
+  props.player.off("subtitlevisibilitychange", handleSubtitleVisibilityChange)
+  props.player.off("subtitlechange", handleSubtitleChange)
+})
+</script>
+
+<template>
+  <div class="subtitle" :style="style">
+    <canvas class="canvas" ref="canvasRef"></canvas>
+
+    <div class="group" :class="list.length ? '' : 'disabled'">
+      <div
+        class="item"
+        :class="[
+          isHiddenSub ? 'active' : '',
+          canToggleHiddenSubtitle ? '' : 'item-disabled',
+        ]"
+        @click="onHiddenSubClick"
+      >
+        <div class="line-clamp-2">
+          {{
+            t(
+              "src.components.video.components.lzc_modal.subtitle.hidden_subtitle",
+            )
+          }}
+          <span v-if="!isMobile() && canToggleHiddenSubtitle">/ Alt+H</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="group">
+      <div class="label">
+        {{ t("src.components.video.components.lzc_modal.subtitle.subtitle_size") }}
+      </div>
+      <div class="subtitle-size-list">
+        <div
+          v-for="item in subtitleSizeOptions"
+          :key="item.key"
+          class="subtitle-size-item"
+          :class="subtitleSizeLevel === item.key ? 'active' : ''"
+          @click="onSubtitleSizeSelect(item.key)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+
+    <template v-if="list.length">
+      <div v-for="{ key, label, value } in list" :key="key" class="group">
+        <div class="label">{{ label }}</div>
+        <div
+          v-for="(item, index) in value"
+          :key="`${key}-${index}`"
+          class="item"
+          :class="[
+            isHiddenSub ? '' : isActive(item) ? 'active' : '',
+            isRenderable(item) ? '' : 'item-disabled',
+          ]"
+          @click="onSelect(item)"
+        >
+          <div v-if="key === 'internal'" class="line-clamp-2">
+            {{ getName(item) }}
+            <span v-if="showUnavailableNote(item)" class="item-note">(VTT unavailable)</span>
+          </div>
+          <div v-else>
+            {{ truncateExternalSubtitle(item) }}
+            <span v-if="showUnavailableNote(item)" class="item-note">(VTT unavailable)</span>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div v-else-if="subtitleLoading" class="group">
+      <div class="item">
+        <div class="line-clamp-2 item disabled">
+          {{ t("src.components.video.components.lzc_modal.subtitle.loading") }}
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="group">
+      <div class="item">
+        <div class="line-clamp-2 item disabled">
+          {{
+            t("src.components.video.components.lzc_modal.subtitle.no_subtitle")
+          }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.canvas {
+  position: absolute;
+  transform: scale(0);
+}
+
+.subtitle {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 4px;
+  padding: 16px 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;
+  }
+}
+
+.group:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.label {
+  padding: 0 16px;
+  margin-bottom: 8px;
+  color: #828283;
+  font-size: 13px;
+}
+
+.item {
+  padding: 8px 16px;
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  &:not(.disabled):not(.item-disabled):hover,
+  &.active {
+    background: #ffffff33;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #5f86ff;
+  }
+
+  &.disabled {
+    padding: 0;
+  }
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.item.item-disabled {
+  color: #828283;
+  cursor: not-allowed;
+}
+
+.item-note {
+  margin-left: 4px;
+  font-size: 12px;
+  color: #b7b7b7;
+}
+
+.subtitle-size-list {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 16px;
+}
+
+.subtitle-size-item {
+  flex: 1 1 0;
+  min-width: 72px;
+  text-align: center;
+  padding: 6px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #c5c5c5;
+  background: rgba(255, 255, 255, 0.08);
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.18);
+  }
+
+  &.active {
+    color: #5f86ff;
+    background: #ffffff33;
+  }
+}
+</style>

package/src/components/Video/components/LzcModal/useModal.ts

@@ -0,0 +1,18 @@
+import { ref } from "vue"
+export const activePage = ref("")
+export const menuPosition = ref({
+  right: 0,
+  bottom: 0
+})
+
+export function setMenuPosition(event: { target: HTMLElement}) {
+  const {  target } = event
+  const container = target.closest('.lzc-video-player .video-js')
+  if (!(container instanceof HTMLElement)) {
+    return
+  }
+  const { right: containerRight, bottom: containerBottom } = container.getBoundingClientRect()
+  const { width, top, right } = target.getBoundingClientRect()
+  menuPosition.value.right = containerRight - right + width / 2
+  menuPosition.value.bottom = containerBottom - top
+}