lzc-video-player 0.0.0

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

@@ -0,0 +1,496 @@
+<script lang="ts" setup>
+import { ref, type Ref } from "vue"
+import {
+  type TouchPanEvent,
+  computeBrightness,
+  computeVolume,
+  computeProgress,
+} from "./helper"
+import { formatTime } from "../useLzcCommon"
+import PlayingLayout from "./playingLayout.vue"
+import { useDebounceFn } from "@vueuse/shared"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+import SubtitleLayer from "./SubtitleLayer.vue"
+
+const props = defineProps<{
+  player: LzcPlayer
+  active?: boolean
+  directMode?: boolean
+}>()
+const sensitivityRef = ref<HTMLElement | null>(null)
+
+const frameCanvas: Ref<HTMLCanvasElement | null> = ref(null)
+const updateFrameCanvas = (toTime: number) => {
+  if (!frameCanvas.value) {
+    return
+  }
+  const info = props.player.currentPreview()
+  if (!info) {
+    return
+  }
+  const index = Math.trunc(
+    (toTime % (info.len * info.interval)) / info.interval,
+  )
+  const wh = Math.sqrt(info.len)
+  const rowIndex = Math.trunc(index / wh)
+  const colIndex = index == 0 ? 0 : (index % wh) - 1
+
+  const ctx = frameCanvas.value.getContext("2d")
+  const sx = colIndex * info.width
+  const sy = rowIndex * info.height
+  ctx?.drawImage(
+    info.image,
+    sx,
+    sy,
+    info.width,
+    info.height,
+    0,
+    0,
+    frameCanvas.value.width,
+    frameCanvas.value.height,
+  )
+}
+
+// tip toast
+const tipToastActive = ref(false)
+const tipToastValue = ref("")
+const tipToastIcon = ref("")
+const tipToastCloseTimeout = ref(0)
+props.player.on("tipToast", (e: any) => {
+  tipToastActive.value = true
+  tipToastValue.value = e.toastValue
+  tipToastIcon.value = e.toastIcon
+  let timeout = 1000
+  if (e.uncloseable) {
+    return
+  }
+  if (e.timeout != undefined) {
+    timeout = e.timeout
+  }
+  setTimeout(() => {
+    tipToastActive.value = false
+  }, timeout)
+})
+//
+const topTipIcon = ref("")
+const topTipActive = ref(false)
+const topTipPercent = ref(0.5)
+const centerTipActive = ref(false)
+const frameTipActive = ref(false)
+const frameTipTime = ref("")
+
+const progressCache: Ref<number> = ref(0)
+const volumeCache: Ref<number> = ref(0)
+const brightnessCache: Ref<number> = ref(0)
+const currentDirection: Ref<string> = ref("")
+let dataLoading = false
+
+interface GestureRect {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+function isIosPortraitFakeFullscreen(): boolean {
+  return (
+    props.player.isFullscreen() &&
+    props.player.hasClass("vjs-ios-fake-fullscreen-portrait")
+  )
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value))
+}
+
+function readGestureRect(): GestureRect {
+  const el = sensitivityRef.value
+  if (el) {
+    const rect = el.getBoundingClientRect()
+    if (rect.width > 0 && rect.height > 0) {
+      return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+      }
+    }
+  }
+  const dim = props.player.currentDimensions()
+  return {
+    left: 0,
+    top: 0,
+    width: dim.width,
+    height: dim.height,
+  }
+}
+
+function mapDirectionForIosPortraitFakeFullscreen(
+  direction: TouchPanEvent["direction"],
+): TouchPanEvent["direction"] {
+  switch (direction) {
+    case "up":
+      return "left"
+    case "down":
+      return "right"
+    case "left":
+      return "down"
+    case "right":
+      return "up"
+    default:
+      return direction
+  }
+}
+
+function normalizePanEvent(event: TouchPanEvent): {
+  panEvent: TouchPanEvent
+  dimensions: { width: number; height: number }
+} {
+  const rect = readGestureRect()
+  const localLeft = clamp(event.position.left - rect.left, 0, rect.width)
+  const localTop = clamp(event.position.top - rect.top, 0, rect.height)
+
+  if (!isIosPortraitFakeFullscreen()) {
+    return {
+      panEvent: {
+        ...event,
+        position: {
+          left: localLeft,
+          top: localTop,
+        },
+      },
+      dimensions: {
+        width: rect.width,
+        height: rect.height,
+      },
+    }
+  }
+
+  // In iOS portrait fake fullscreen, the player container is rotated 90deg.
+  // Map pan coordinates back to the visual (pre-rotation) player coordinate system.
+  return {
+    panEvent: {
+      ...event,
+      direction: mapDirectionForIosPortraitFakeFullscreen(event.direction),
+      position: {
+        left: localTop,
+        top: clamp(rect.width - localLeft, 0, rect.width),
+      },
+      offset: {
+        x: event.offset.y,
+        y: -event.offset.x,
+      },
+      delta: {
+        x: event.delta.y,
+        y: -event.delta.x,
+      },
+    },
+    dimensions: {
+      width: rect.height,
+      height: rect.width,
+    },
+  }
+}
+
+const handlePan = async (event: TouchPanEvent) => {
+  const { panEvent, dimensions } = normalizePanEvent(event)
+  if (panEvent.isFinal) {
+    currentDirection.value = ""
+
+    topTipActive.value = false
+    topTipIcon.value = ""
+
+    frameTipActive.value = false
+    frameTipTime.value = ""
+    volumeCache.value = 0
+    brightnessCache.value = 0
+    progressCache.value = 0
+    return
+  }
+  if (panEvent.isFirst) {
+    currentDirection.value = panEvent.direction
+  }
+
+  const totalWidth = dimensions.width
+  if (currentDirection.value == "up" || currentDirection.value == "down") {
+    if (panEvent.isFirst) {
+      topTipActive.value = true
+      dataLoading = true
+      try {
+        volumeCache.value = await props.player.volume()!
+        brightnessCache.value = await props.player.currentBrightness()
+      } finally {
+        dataLoading = false
+      }
+    }
+    if (dataLoading) {
+      return
+    }
+    const isBrightness = panEvent.position.left < totalWidth / 2
+    if (isBrightness) {
+      topTipIcon.value = "svguse:#icon-亮度.svg"
+      const { percent, brightness } = computeBrightness(
+        brightnessCache.value,
+        panEvent,
+        dimensions,
+      )
+      topTipPercent.value = percent
+      props.player.trigger({
+        type: "changeBrightness",
+        brightness: brightness,
+      })
+    } else {
+      topTipIcon.value = "svguse:#icon-音量.svg"
+      const { percent, volume } = computeVolume(
+        volumeCache.value,
+        panEvent,
+        dimensions,
+      )
+      topTipPercent.value = percent
+      props.player.volume(volume)
+    }
+  } else {
+    if (panEvent.isFirst) {
+      progressCache.value = props.player.currentTime()!
+      frameTipActive.value = true
+      props.player.removeClass("vjs-ended")
+    }
+    const toTime = computeProgress(
+      props.player.duration()!,
+      progressCache.value,
+      panEvent,
+      dimensions,
+    )
+    frameTipTime.value = formatTime(toTime)
+    // 更新进度条
+    props.player.currentTime(toTime)
+    props.player.trigger({ type: "timeupdate" })
+    updateFrameCanvas(toTime)
+  }
+}
+const resetTopTipByDb = useDebounceFn(() => resetTopTip(), 1500)
+props.player.on("pause", () => {
+  if (props.player.ended() || props.player.seeking()) {
+    centerTipActive.value = false
+    return
+  }
+  centerTipActive.value = true
+})
+props.player.on("play", () => {
+  centerTipActive.value = false
+})
+props.player.on("lzcSeekBarDown", () => {
+  frameTipActive.value = true
+})
+props.player.on("lzcSeekBarMove", () => {
+  const time = props.player.currentTime()!
+  frameTipTime.value = formatTime(time)
+  updateFrameCanvas(time)
+})
+props.player.on("lzcSeekBarUp", () => {
+  frameTipActive.value = false
+  frameTipTime.value = ""
+})
+props.player.on("lzcVolumeShow", async () => {
+  topTipActive.value = true
+  topTipIcon.value = "svguse:#icon-音量.svg"
+  topTipPercent.value = (await props.player.volume()!) / 1
+  resetTopTipByDb()
+})
+
+const handleCenterTipClick = async () => {
+  if (!props.player.paused()) {
+    return
+  }
+  try {
+    await props.player.play()
+  } catch {
+    // Ignore play errors (e.g. autoplay restrictions).
+  }
+}
+
+function resetTopTip() {
+  topTipActive.value = false
+  topTipIcon.value = ""
+}
+</script>
+
+<template>
+  <PlayingLayout
+    :player="player"
+    :active="props.active"
+    :direct-mode="props.directMode"
+  >
+    <SubtitleLayer :player="player" :active="props.active" />
+    <div
+      ref="sensitivityRef"
+      class="sensitivity"
+      v-touch-pan.prevent="handlePan"
+    >
+      <div class="top-tip-container" v-if="tipToastActive">
+        <div class="top-tip">
+          <q-icon
+            class="icon"
+            :name="tipToastIcon"
+            v-if="tipToastIcon"
+          ></q-icon>
+          <span class="toast-text">{{ tipToastValue }}</span>
+        </div>
+      </div>
+
+      <div class="top-tip-container" v-else-if="topTipActive">
+        <div class="top-tip">
+          <q-icon class="icon" :name="topTipIcon"></q-icon>
+          <div class="progress">
+            <div :style="`width: ${topTipPercent * 100}%;`"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="center-tip-container" v-else>
+        <div class="frame-tip" v-if="frameTipActive">
+          <div class="frame-img">
+            <q-img>
+              <canvas ref="frameCanvas"></canvas>
+              <div class="absolute-bottom text-subtitle2 frame-time">
+                {{ frameTipTime }}
+              </div>
+            </q-img>
+          </div>
+        </div>
+        <div
+          class="center-tip"
+          v-else-if="centerTipActive"
+          @click="handleCenterTipClick"
+        >
+          <q-icon class="icon" name="svguse:#icon-暂停.svg"></q-icon>
+          {{
+            t(
+              "src.components.video.lzc_overlay.playing.play_btn_text",
+              "已暂停",
+            )
+          }}
+        </div>
+      </div>
+    </div>
+  </PlayingLayout>
+</template>
+
+<style lang="scss" scoped>
+@mixin vjs-overlay-note-background() {
+  background: rgb(0, 0, 0, 0.45);
+  border-radius: 0.6rem;
+}
+
+@mixin vjs-overlay-note-text() {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 1.7rem;
+  padding: 0.9rem 1.3rem;
+  margin: auto;
+}
+
+@mixin vjs-overlay-note-background-top() {
+  position: absolute;
+  width: 100%;
+  top: 8rem;
+}
+
+.sensitivity {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.top-tip-container {
+  display: flex;
+  height: 3.4rem;
+  flex-direction: row;
+  justify-content: center;
+
+  .top-tip {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include vjs-overlay-note-background;
+    @include vjs-overlay-note-text;
+
+    .icon {
+      height: 1.6rem;
+      width: 1.6rem;
+      margin-right: 0.8rem;
+    }
+
+    .progress {
+      width: 13rem;
+      height: 0.2rem;
+      background-color: rgba(255, 255, 255, 0.3);
+      border-radius: 0.1rem;
+
+      > div {
+        background-color: rgba(255, 255, 255, 1);
+        height: 0.2rem;
+      }
+    }
+
+    .toast-text {
+      font-size: 1.2rem;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+}
+
+.center-tip-container {
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .center-tip {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include vjs-overlay-note-background;
+    @include vjs-overlay-note-text;
+
+    .icon {
+      height: 1.6rem;
+      width: 1.6rem;
+      margin-right: 0.8rem;
+    }
+  }
+
+  .frame-tip {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .frame-img {
+      width: 12rem;
+      height: 6.76rem;
+      margin-right: 1.6rem;
+
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .frame-time {
+      padding: unset;
+      margin: 0.6rem auto;
+      text-align: center;
+      background: unset;
+
+      height: 1.7rem;
+      font-size: 1.2rem;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.7rem;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { useQuasar } from "quasar"
+import { devices } from "./useCast"
+import Cast from "./cast.vue"
+import { isMobile } from "@/use/useUtils"
+import FullscreenIcon from "@/icons/全屏.svg"
+import CastIcon from "@/icons/投屏.svg"
+import ClientPlayerIcon from "@/icons/懒猫播放器-icon.png"
+import type { LzcPlayer } from "@/components/Video/player"
+import {
+  hasClientPlayerCapability,
+  initClientPlayerCapability,
+  openClientPlayer,
+} from "@/components/Video/clientPlayer"
+import { useHistoryInfo } from "@/stores/playlist"
+
+const props = defineProps<{
+  player: LzcPlayer
+  directMode?: boolean
+}>()
+const store = useHistoryInfo()
+const fullscreen = () => {
+  if (props.player.isFullscreen()) {
+    props.player.exitFullscreen()
+  } else {
+    props.player.requestFullscreen()
+  }
+}
+const q = useQuasar()
+const open = () => {
+  q.dialog({
+    component: Cast,
+    componentProps: {
+      player: props.player,
+    },
+  })
+}
+const openNativePlayer = () => {
+  void openClientPlayer(props.player, store.infos)
+}
+
+void initClientPlayerCapability()
+</script>
+
+<template>
+  <button
+    v-if="isMobile()"
+    @click="fullscreen"
+    data-no-play-toggle
+    class="icon-button fullscreen-button"
+    type="button"
+  >
+    <img :src="FullscreenIcon" class="w-[20px] h-[20px]" />
+  </button>
+  <span
+    v-if="!props.directMode && devices.length >= 0"
+    class="cast-button-wrap"
+    data-no-play-toggle
+  >
+    <button
+      v-if="hasClientPlayerCapability"
+      @click="openNativePlayer"
+      data-no-play-toggle
+      class="icon-button client-player-button"
+      type="button"
+    >
+      <img :src="ClientPlayerIcon" class="w-[20px] h-[20px]" />
+    </button>
+    <button
+      @click="open"
+      data-no-play-toggle
+      class="icon-button"
+      type="button"
+    >
+      <img :src="CastIcon" class="w-[20px] h-[20px]" />
+    </button>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.cast-button-wrap {
+  position: relative;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-button {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.client-player-button {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+}
+
+@media screen and (max-width: 666px) {
+  .fullscreen-button {
+    position: relative;
+  }
+
+  .client-player-button {
+    bottom: calc(200% + 16px);
+  }
+}
+</style>