lzc-video-player 0.0.0

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

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from "vue"
+import { castDevice, doStopAction } from "./useCast"
+import { useVideoName } from "./useCommon"
+import CastingJPG from "@/icons/投送中.jpg?inline"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+
+const props = defineProps<{
+  player: LzcPlayer
+}>()
+const { videoName } = useVideoName(props.player)
+
+const castError = ref(false)
+props.player.on("CastError", () => {
+  castError.value = true
+})
+props.player.on("startCasting", () => {
+  castError.value = false
+})
+
+const back = () => {
+  castError.value = false
+  props.player.trigger({ type: "closeCasting" })
+}
+const closeCast = async () => {
+  castError.value = false
+  const wasCastMode = props.player.isCastMode()
+  props.player.trigger({ type: "closeCasting" })
+  if (!wasCastMode) {
+    return
+  }
+  try {
+    await doStopAction()
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+onMounted(() => {
+  props.player.addClass("vjs-cast")
+  if (!props.player.isFullscreen()) {
+    props.player.requestFullscreen()
+  }
+})
+
+onUnmounted(() => {
+  props.player.removeClass("vjs-cast")
+  if (props.player.isFullscreen()) {
+    props.player.exitFullscreen()
+  }
+})
+</script>
+
+<template>
+  <div class="overlay">
+    <div class="vjs-overlay-padding top">
+      <q-icon name="svguse:#icon-返回.svg" @click="back"></q-icon>
+      <div class="casting-tip">
+        <q-img :src="CastingJPG">
+          <div
+            class="absolute-full flex flex-center img-text"
+            v-if="!castError"
+          >
+            <span>{{
+              t(
+                "src.components.video.components.lzc_overlay.casting.text_casting",
+                "投送中",
+              )
+            }}</span>
+            <span>{{ castDevice?.name }}</span>
+          </div>
+        </q-img>
+      </div>
+      <q-icon name="svguse:#icon-关闭投屏.svg" @click="closeCast"></q-icon>
+    </div>
+
+    <div class="vjs-overlay-padding text error-text" v-if="castError">
+      <span>{{
+        t(
+          "src.components.video.components.lzc_overlay.casting.screen_casting_failed",
+          "投屏失败",
+        )
+      }}</span>
+      <div class="back-button" @click="closeCast">
+        {{
+          t(
+            "src.components.video.components.lzc_overlay.casting.button_back_play",
+            "返回播放",
+          )
+        }}
+      </div>
+    </div>
+    <div class="vjs-overlay-padding text cast-text" v-else>
+      {{
+        t(
+          "src.components.video.components.lzc_overlay.casting.screen_casting_tips_content",
+          "正在投送《\{\{videoName\}\}》，您可以在当前设备上进行其他操作，不会影响播放",
+          {
+            videoName,
+          },
+        )
+      }}
+    </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 {
+  display: flex;
+  flex-direction: row;
+
+  > span {
+    margin-top: 3rem;
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+
+  .casting-tip {
+    flex: 1;
+    text-align: center;
+
+    > .q-img {
+      max-width: 36.9rem;
+      height: 11rem;
+
+      .img-text {
+        display: flex;
+        flex-direction: column;
+
+        span:first-of-type {
+          height: 2rem;
+          font-size: 1.4rem;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 2rem;
+        }
+
+        span:last-of-type {
+          height: 1.7rem;
+          font-size: 1.2rem;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 1.7rem;
+        }
+      }
+    }
+  }
+}
+
+.text {
+  flex: 1;
+  flex-shrink: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.cast-text {
+  height: 1.7rem;
+  font-size: 1.2rem;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 1.7rem;
+}
+.error-text {
+  > span {
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 2rem;
+    margin: 1.3rem 0.2rem;
+  }
+  .back-button {
+    width: 12.8rem;
+    height: 3.6rem;
+    border-radius: 2.45rem;
+    border: 0.05rem solid #979797;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+
+.bottom-space {
+  height: 9rem;
+}
+</style>

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

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import PlayingLayout from "./playingLayout.vue"
+import { t } from "@/i18n"
+import type { LzcPlayer } from "@/components/Video/player"
+
+const props = defineProps<{
+  player: LzcPlayer
+}>()
+const errorMsg = computed(() => {
+  const e = props.player.error() as MediaError
+  switch (e.code) {
+    case 1:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.request_assets_over_title",
+          "请求资源终断，请重新播放",
+        ),
+        subtitle: "",
+      }
+    case 2:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.paly_failed_title",
+          "播放失败，网络错误导致媒体下载中途失败",
+        ),
+        subtitle: "",
+      }
+    case 3:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.decode_failed_title",
+          "视频解码失败",
+        ),
+        subtitle: t(
+          "src.components.video.components.lzc_overlay.error.decode_failed_subtitle",
+          "支持的视频格式有: mp4, m3u8, mkv",
+        ),
+      }
+    case 4:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.file_not_exist_title",
+          "加载视频失败，可能是因为没有访问权限或者文件已经不存在",
+        ),
+        subtitle: "",
+      }
+    case 5:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.encrypted_video_title",
+          "加密视频，没有密码解密",
+        ),
+        subtitle: "",
+      }
+    default:
+      return {
+        title: t(
+          "src.components.video.components.lzc_overlay.error.unknown_error_title",
+          "未知错误",
+        ),
+        subtitle: e.message,
+      }
+  }
+})
+</script>
+
+<template>
+  <PlayingLayout :player="player">
+    <div class="error-content">
+      <q-item>
+        <q-item-section class="items-center">
+          <q-item-label class="title">{{ errorMsg.title }}</q-item-label>
+          <q-item-label caption lines="2" class="subtitle">
+            {{ errorMsg.subtitle }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </div>
+  </PlayingLayout>
+</template>
+
+<style lang="scss" scoped>
+.error-content {
+  flex: 1;
+
+  display: flex;
+  justify-content: center;
+}
+.title {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 1.7rem;
+}
+.subtitle {
+  font-size: 1.1rem;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 1.6rem;
+  opacity: 0.5;
+}
+</style>

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

@@ -0,0 +1,81 @@
+import type { TouchSwipeParams } from "quasar"
+
+export interface TouchPanEvent extends TouchSwipeParams {
+  isFirst: boolean
+  isFinal: boolean
+  offset: {
+    x: number
+    y: number
+  }
+  delta: {
+    x: number
+    y: number
+  }
+  position: {
+    top: number
+    left: number
+  }
+}
+
+function verticalChange(event: TouchPanEvent, dim: any, total = 100) {
+  const y = Math.floor(event.offset.y / window.devicePixelRatio)
+  // total 为范围
+  // ratio = total / dim.height
+  // 但由于一般滑动都是只滑动一半，所以乘4
+  return ((-1 * (y * total)) / (dim.height + 1)) * 4
+}
+
+// 亮度范围
+const brightnessMin = 0
+const brightnessMax = 1
+export const computeBrightness = (
+  currBrightness: number,
+  event: TouchPanEvent,
+  dim: any,
+) => {
+  const change = verticalChange(event, dim, 255)
+  let b = currBrightness + change / 255
+  if (b < brightnessMin) {
+    b = brightnessMin
+  } else if (b > brightnessMax) {
+    b = brightnessMax
+  }
+  const percent = (b - brightnessMin) / (brightnessMax - brightnessMin)
+  return { percent, brightness: b }
+}
+
+// 音量范围 0-100
+const volumeMin = 0
+const volumeMax = 1
+export const computeVolume = (
+  currentVolume: number,
+  event: TouchPanEvent,
+  dim: any,
+) => {
+  const change = verticalChange(event, dim)
+  let b = currentVolume + change / 100
+  if (b < volumeMin) {
+    b = volumeMin
+  } else if (b > volumeMax) {
+    b = volumeMax
+  }
+  return { percent: b / volumeMax, volume: b }
+}
+
+// 进度条范围
+export const computeProgress = (
+  total: number,
+  currentTime: number,
+  event: TouchPanEvent,
+  dim: any,
+) => {
+  const x = Math.floor(event.offset.x / window.devicePixelRatio)
+  const change = dim.width > total ? x : (x * total) / (dim.width + 1)
+  let b = currentTime + change
+  if (b < 0) {
+    b = 0
+  } else if (b > total) {
+    b = total
+  }
+  return Math.trunc(b)
+}

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

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+import Playing from "./playing.vue"
+import Casting from "./casting.vue"
+import Error from "./error.vue"
+import { useRefresh } from "./useCast"
+import { useHistoryInfo } from "@/stores/playlist"
+import type { LzcPlayer } from "@/components/Video/player"
+
+const props = defineProps<{
+  player: LzcPlayer
+  active?: boolean
+  directMode?: boolean
+}>()
+const store = useHistoryInfo()
+const casting = ref(false)
+props.player.on("startCasting", () => {
+  casting.value = true
+})
+props.player.on("closeCasting", () => {
+  casting.value = false
+})
+
+const error = ref(false)
+const errorTimeoutId = ref<ReturnType<typeof setTimeout>>()
+
+function reset() {
+  error.value = false
+  props.player.removeClass("vjs-error")
+  if (errorTimeoutId.value) {
+    window.clearTimeout(errorTimeoutId.value)
+  }
+}
+
+function errorHandler() {
+  // 因为 video/lzc-cast 为一个自定义的类型，所以使用 Html5 解析会报错
+  // 这里忽略 video/lzc-cast 模式下的错误.
+  if (props.player.isCastMode()) {
+    return
+  }
+
+  // 把加载好的播放完后才出现播放错误的界面
+  const currentTime = props.player.currentTime()
+  const buffered = props.player.bufferedEnd()
+  if (currentTime! < buffered - 2) {
+    reset()
+    errorTimeoutId.value = setTimeout(
+      () => props.player.trigger({ type: "error" }),
+      (buffered - currentTime!) * 1000,
+    )
+    return
+  }
+
+  const e = props.player.error() as MediaError
+  if (e.code == 4) {
+    const currentInfo = props.player.currentVideoInfo?.()
+    store.markAsInvalid(currentInfo?.sourceUrl || props.player.currentSrc())
+  }
+  error.value = true
+  props.player.addClass("vjs-error")
+}
+
+/* 监听错误事件 */
+props.player.on("error", errorHandler)
+
+/* 当用户点击进度条后，把错误页面关闭 */
+props.player.on("playing", () => {
+  if (error.value) {
+    reset()
+  }
+})
+
+/* 如果加载开始，将错误去掉，并尝试播放 */
+props.player.on("loadstart", reset)
+
+props.player.qualityLevels().on("change", (e: { selectedIndex: number }) => {
+  if (error.value) {
+    reset()
+    props.player.reloadSource(e.selectedIndex)
+  }
+})
+useRefresh()
+</script>
+
+<template>
+  <Error :player="player" v-if="error"></Error>
+  <Casting
+    v-else-if="casting && !props.directMode"
+    :player="player"
+  ></Casting>
+  <Playing
+    v-else
+    :player="player"
+    :active="props.active"
+    :direct-mode="props.directMode"
+  ></Playing>
+</template>
+
+<style lang="scss" scoped></style>