lzc-video-player 0.0.0

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

@@ -0,0 +1,287 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch } from "vue"
+import { AppCommon } from "@lazycatcloud/sdk/dist/extentions/app_common"
+import { useVideoName } from "./useCommon"
+import PlayingButtons from "./playingButtons.vue"
+import { isMobile } from "@/use/useUtils"
+import type { LzcPlayer } from "@/components/Video/player"
+
+type AppCommonWithStatusBar = typeof AppCommon & {
+  SetStatusBarHidden?: (hidden: boolean) => void | Promise<void>
+}
+
+const appCommon = AppCommon as AppCommonWithStatusBar
+const props = defineProps<{
+  player: LzcPlayer
+  active?: boolean
+  directMode?: boolean
+}>()
+const back = () => {
+  if (isMobile() && props.player.isFullscreen()) {
+    props.player.exitFullscreen()
+  } else {
+    props.player.trigger({ type: "back" })
+  }
+}
+const { videoName } = useVideoName(props.player)
+
+const showTopBar = ref(props.player.options_.showTopBar)
+const isPlaying = ref(!props.player.paused())
+const isActive = computed(() => props.active !== false)
+const isFakeFullscreen = ref(false)
+let fakeFullscreenSyncTimer: ReturnType<typeof setTimeout> | null = null
+const overlayClass = computed(() => ({
+  "vjs-has-started": true,
+  "vjs-user-inactive": !isActive.value,
+  "vjs-playing": isPlaying.value,
+}))
+const topBarVisible = computed(() => {
+  if (!showTopBar.value) return false
+  return !isPlaying.value || isActive.value
+})
+const shouldHideStatusBar = computed(
+  () => isFakeFullscreen.value || !topBarVisible.value,
+)
+function syncFakeFullscreenState() {
+  isFakeFullscreen.value = props.player.hasClass("vjs-ios-fake-fullscreen")
+}
+function scheduleFakeFullscreenStateSync() {
+  if (fakeFullscreenSyncTimer) {
+    clearTimeout(fakeFullscreenSyncTimer)
+  }
+  fakeFullscreenSyncTimer = setTimeout(() => {
+    fakeFullscreenSyncTimer = null
+    syncFakeFullscreenState()
+  }, 280)
+}
+const onFullscreenChange = () => {
+  if (props.player.isFullscreen()) {
+    // 全屏情况下，如果 showTopBar 为 false，将移动端强制展示 topbar，PC 端不显示
+    showTopBar.value = props.player.options_.showTopBar || isMobile()
+  } else {
+    showTopBar.value = props.player.options_.showTopBar
+  }
+  syncFakeFullscreenState()
+  if (
+    !props.player.isFullscreen() &&
+    props.player.hasClass("vjs-ios-fake-fullscreen")
+  ) {
+    scheduleFakeFullscreenStateSync()
+  }
+}
+
+const onPlay = () => {
+  isPlaying.value = true
+}
+const onPause = () => {
+  isPlaying.value = false
+}
+
+function setStatusBarHidden(hidden: boolean) {
+  try {
+    void appCommon.SetStatusBarHidden?.(hidden)
+  } catch {
+    // Older SDK/client builds may not expose this bridge yet.
+  }
+}
+
+onMounted(() => {
+  onFullscreenChange()
+  props.player.on("fullscreenchange", onFullscreenChange)
+  props.player.on("play", onPlay)
+  props.player.on("pause", onPause)
+  props.player.on("ended", onPause)
+})
+
+watch(
+  shouldHideStatusBar,
+  (hidden) => {
+    setStatusBarHidden(hidden)
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  if (fakeFullscreenSyncTimer) {
+    clearTimeout(fakeFullscreenSyncTimer)
+    fakeFullscreenSyncTimer = null
+  }
+  setStatusBarHidden(false)
+  props.player.off("fullscreenchange", onFullscreenChange)
+  props.player.off("play", onPlay)
+  props.player.off("pause", onPause)
+  props.player.off("ended", onPause)
+})
+</script>
+
+<template>
+  <div class="overlay horizontal" :class="overlayClass">
+    <div
+      data-no-play-toggle
+      class="vjs-overlay-padding top-space"
+      :class="showTopBar ? '' : 'invisible'"
+    >
+      <q-icon
+        data-no-play-toggle
+        @click="back"
+        name="svguse:#icon-返回.svg"
+        size="14px"
+      ></q-icon>
+      <span class="title">{{ videoName }}</span>
+    </div>
+
+    <div class="overlay-center">
+      <div
+        data-no-play-toggle
+        class="vjs-overlay-padding vertical-icons"
+      >
+        <PlayingButtons
+          :player="player"
+          :direct-mode="props.directMode"
+        ></PlayingButtons>
+      </div>
+      <slot></slot>
+    </div>
+    <div class="vjs-overlay-padding bottom-space"></div>
+  </div>
+
+  <div class="overlay vertical" :class="overlayClass">
+    <div
+      data-no-play-toggle
+      class="vjs-overlay-padding top-space"
+      :class="showTopBar ? '' : 'invisible'"
+    >
+      <q-icon
+        data-no-play-toggle
+        @click="back"
+        name="svguse:#icon-返回.svg"
+        size="14px"
+      ></q-icon>
+      <span class="title">{{ videoName }}</span>
+    </div>
+    <div class="overlay-center">
+      <div data-no-play-toggle class="vjs-overlay-padding vertical-icons">
+        <PlayingButtons
+          :player="player"
+          :direct-mode="props.directMode"
+        ></PlayingButtons>
+      </div>
+      <slot></slot>
+    </div>
+    <div class="vjs-overlay-padding bottom-space"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.overlay {
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+.top-space {
+  --lzc-player-top-padding: max(4rem, var(--lzc-safe-area-inset-top));
+
+  visibility: visible;
+  display: flex;
+  height: calc(4.2rem + var(--lzc-player-top-padding));
+  flex-direction: row;
+  align-items: center;
+  padding-top: var(--lzc-player-top-padding);
+  padding-left: calc(20px + var(--lzc-player-safe-area-left, 0px));
+  padding-right: calc(20px + var(--lzc-player-safe-area-right, 0px));
+  padding-bottom: 2rem;
+  background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+  opacity: 1;
+  gap: 1.4rem;
+  transition:
+    height 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    padding 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  .q-icon {
+    cursor: pointer;
+  }
+
+  .title {
+    flex: 1;
+    height: 2.2rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 2.2rem;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.overlay-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.vertical-icons {
+  position: absolute;
+  bottom: calc(3rem + var(--lzc-safe-area-inset-bottom));
+  right: var(--lzc-player-safe-area-right, 0px);
+
+  visibility: visible;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition:
+    right 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    bottom 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.bottom-space {
+  height: calc(9rem + var(--lzc-safe-area-inset-bottom));
+  visibility: visible;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+  opacity: 1;
+  transition: height 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.vjs-has-started.vjs-user-inactive.vjs-playing {
+  .top-space {
+    visibility: hidden;
+  }
+  .bottom-space {
+    visibility: hidden;
+  }
+  .vertical-icons {
+    visibility: hidden;
+  }
+}
+
+@media screen and (min-width: 667px) {
+  .horizontal {
+    display: flex;
+  }
+  .vertical {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 666px) {
+  .horizontal {
+    display: none;
+  }
+  .vertical {
+    display: flex;
+  }
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .top-space,
+  .vertical-icons,
+  .bottom-space {
+    transition: none;
+  }
+}
+</style>

package/src/components/Video/components/LzcOverlay/useCast.ts

@@ -0,0 +1,235 @@
+import sdk from "@/use/useSdk"
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+import type { Subscription } from "rxjs"
+import {
+  type RMPStatus,
+  type RemoteMediaPlayer,
+  RMPStatus_Status,
+  DoActionRequest_Action,
+  type DoActionRequest,
+} from "@lazycatcloud/sdk/dist/dlna/dlna"
+import { parseSecond } from "./useCommon"
+import { formatTime } from "../useLzcCommon"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+
+export const devices: Ref<RemoteMediaPlayer[]> = ref([])
+export const castSubscribe: Ref<Subscription | null> = ref(null)
+export const castDevice: Ref<RemoteMediaPlayer | null> = ref(null)
+export const castLoading: Ref<boolean> = ref(false)
+
+let _posInfoId: ReturnType<typeof setTimeout>
+let _castSessionId = 0
+
+export function useRefresh() {
+  let _refreshId: ReturnType<typeof setTimeout>
+  let _close = false
+  async function refresh() {
+    if (_close) {
+      return
+    }
+    try {
+      const res = await sdk.rmp.ScanRMP({})
+      devices.value = res.remoteMediaPlayers
+    } finally {
+      _refreshId = setTimeout(() => {
+        if (_refreshId) {
+          clearTimeout(_refreshId)
+        }
+        refresh()
+      }, 3000)
+    }
+  }
+
+  function unrefresh() {
+    if (_refreshId) {
+      clearTimeout(_refreshId)
+    }
+    _close = true
+  }
+
+  onMounted(refresh)
+  onUnmounted(unrefresh)
+}
+
+function cleanupCastSession(options?: { clearDevice?: boolean }) {
+  castSubscribe.value?.unsubscribe()
+  castSubscribe.value = null
+  if (options?.clearDevice === true) {
+    castDevice.value = null
+  }
+  castLoading.value = false
+  _castSessionId += 1
+  if (_posInfoId) {
+    clearTimeout(_posInfoId)
+  }
+}
+
+export function detachCastSession() {
+  cleanupCastSession({ clearDevice: false })
+}
+
+function subscribe(player: LzcPlayer) {
+  if (!castDevice.value) {
+    throw t(
+      "src.components.video.components.lzc_overlay.use_cast.error_not_device",
+      "没有选择投屏设备",
+    )
+  }
+  const initTime = player.currentTime()!
+  player.trigger({ type: "startCasting" })
+  _castSessionId += 1
+  const sessionId = _castSessionId
+
+  updatePosInfo(player, sessionId)
+
+  // 因为 subscribe 返回的一个消息为 status 3, 所以这里忽略第一个信息
+  let isFirst = false
+  const obs = sdk.rmp.Subscribe({ playerUuid: castDevice.value.uuid })
+  const wrapNext = (value: RMPStatus): void => {
+    if (!isFirst) {
+      isFirst = true
+      void doSeekAction(initTime).catch((err: any) => {
+        console.error(err)
+      })
+      return
+    }
+
+    switch (value.status) {
+      case RMPStatus_Status.Paused:
+        player.trigger({ type: "CastPause" })
+        player.trigger({ type: "pause" })
+        break
+      case RMPStatus_Status.Playing:
+        player.trigger({ type: "CastPlay" })
+        player.trigger({ type: "play" })
+        break
+      case RMPStatus_Status.Stopped:
+        cleanupCastSession({ clearDevice: true })
+        player.trigger({ type: "closeCasting" })
+        break
+    }
+  }
+  const wrapError = (err: any): void => {
+    console.error(err)
+    player.trigger({ type: "CastError" })
+    cleanupCastSession({ clearDevice: true })
+  }
+  const wrapComplete = () => {
+    console.log("subscribe complete!")
+  }
+  const sub = obs.subscribe({
+    next: wrapNext,
+    error: wrapError,
+    complete: wrapComplete,
+  })
+  // @ts-ignore
+  castSubscribe.value = sub
+}
+
+async function doAction(req: Partial<DoActionRequest>) {
+  if (castDevice.value && castDevice.value.uuid !== "") {
+    req.playerUuid = castDevice.value.uuid
+    return sdk.rmp.DoAction(req)
+  }
+  throw t(
+    "src.components.video.components.lzc_overlay.use_cast.not_selected_device",
+    "没有选择设备",
+  )
+}
+
+function updatePosInfo(player: LzcPlayer, sessionId: number) {
+  if (_posInfoId) {
+    clearTimeout(_posInfoId)
+  }
+  sdk.rmp
+    .GetPositionInfo({ playerUuid: castDevice.value?.uuid })
+    .then((res) => {
+      if (sessionId !== _castSessionId) {
+        return
+      }
+      const duration = parseSecond(res.trackDuration)
+      if (duration > 0 && !player.scrubbing()) {
+        player.duration(duration)
+      }
+
+      const time = parseSecond(res.absTime)
+      if (time > 0 && !player.scrubbing()) {
+        player.currentTime(time)
+        player.trigger({ type: "timeupdate" })
+      }
+
+      if (castSubscribe.value) {
+        _posInfoId = setTimeout(() => updatePosInfo(player, sessionId), 1000)
+      }
+    })
+}
+
+export async function doPlayAction(player: LzcPlayer, mediaFile: string) {
+  const urls = mediaFile.split("?")
+  if (urls.length == 2) {
+    // lzcinit dlna 不支持query参数
+    if (urls[0].includes("/_lzc/media/hls")) {
+      urls[0] = decodeURIComponent(urls[0])
+      urls[0] = urls[0].substring(urls[0].indexOf("/_lzc/media/hls"))
+    }
+    mediaFile = urls[0].startsWith("/")
+      ? urls[0]
+          .replace(/_lzc\/media\/hls/, "")
+          .replace("//", "/")
+          .replace("/master.m3u8", "")
+      : encodeURI(urls[0] + "?" + urls[1])
+  } else {
+    if (mediaFile.includes("/_lzc/media/hls")) {
+      mediaFile = decodeURIComponent(mediaFile)
+      mediaFile = mediaFile.substring(mediaFile.indexOf("/_lzc/media/hls"))
+    }
+    mediaFile = mediaFile.startsWith("/")
+      ? mediaFile
+          .replace(/_lzc\/media\/hls/, "")
+          .replace("//", "/")
+          .replace("/master.m3u8", "")
+      : encodeURI(mediaFile)
+  }
+  castLoading.value = true
+  try {
+    await doAction({
+      mediaFile: mediaFile,
+      action: DoActionRequest_Action.Play,
+    })
+    subscribe(player)
+  } finally {
+    castLoading.value = false
+  }
+}
+
+export async function doPauseAction() {
+  return doAction({
+    action: DoActionRequest_Action.Pause,
+  })
+}
+
+export async function doContinueAction() {
+  return doAction({
+    action: DoActionRequest_Action.Continue,
+  })
+}
+
+export async function doStopAction() {
+  await doAction({
+    action: DoActionRequest_Action.Stop,
+  })
+  return cleanupCastSession({ clearDevice: true })
+}
+
+export async function doSeekAction(time: number) {
+  return doAction({
+    action: DoActionRequest_Action.Seek,
+    seekTarget: formatTime(time),
+  })
+}
+
+export async function doPlayNextAction(player: LzcPlayer, mediaFile: string) {
+  detachCastSession()
+  return doPlayAction(player, mediaFile)
+}

package/src/components/Video/components/LzcOverlay/useCommon.ts

@@ -0,0 +1,41 @@
+import throttle from "lodash.throttle"
+import type { LzcPlayer } from "@/components/Video/player"
+import { ref, onMounted, onUnmounted } from "vue"
+
+export const useVideoName = (player: LzcPlayer) => {
+  const videoName = ref("")
+  const updateVideoName = () => {
+    videoName.value = player.currentVideoName?.() || ""
+  }
+  const throttledUpdate = throttle(updateVideoName, 3000, { leading: true })
+
+  onMounted(() => {
+    updateVideoName()
+    player.on("openVideo", updateVideoName)
+    player.on("loadedmetadata", updateVideoName)
+    player.on("canplay", updateVideoName)
+    player.on("play", updateVideoName)
+    player.on("timeupdate", throttledUpdate)
+  })
+
+  onUnmounted(() => {
+    player.off("openVideo", updateVideoName)
+    player.off("loadedmetadata", updateVideoName)
+    player.off("canplay", updateVideoName)
+    player.off("play", updateVideoName)
+    player.off("timeupdate", throttledUpdate)
+    throttledUpdate.cancel()
+  })
+
+  return {
+    videoName,
+  }
+}
+
+export function parseSecond(t: string | number): number {
+  if (typeof t === "number") {
+    return t
+  }
+  const [hour, minute, second] = t.split(":").map((d) => parseInt(d))
+  return hour * 3600 + minute * 60 + second
+}