lzc-video-player 0.0.0

package/src/views/Home.ts

@@ -0,0 +1,99 @@
+import { nextTick, ref, type Ref } from "vue"
+import { useRouter } from "vue-router"
+import type { FileStat } from "@lazycatcloud/webdav/web"
+import type { VideoInfo } from "@/model"
+import { createClient } from "webdav/web"
+import { useHistoryInfo } from "@/stores/playlist"
+
+const webdavClient = createClient("/_lzc/files/home/")
+
+function dataTransfer<T>(raw: any) {
+  if (!raw) return
+  const output = raw.detail[0]
+  return JSON.parse(output) as T
+}
+
+export default function (ctx: Ref<any>) {
+  const router = useRouter()
+  const store = useHistoryInfo()
+  async function invoke(method: string, ...args: string[]) {
+    for (let i = 0; i < 5; i++) {
+      await nextTick()
+      const target = ctx.value
+      const exposed = target?._instance?.exposed ?? target
+      if (exposed && typeof exposed[method] === "function") {
+        exposed[method](...args)
+        return
+      }
+      await new Promise((r) => setTimeout(r, 50))
+    }
+  }
+
+  const openFilePicker = () => {
+    invoke("init")
+    invoke("open")
+  }
+
+  const closeFilePicker = () => {
+    invoke("close")
+  }
+  const getSourceUrl = (file: any, boxname: string) => {
+    const videopath = encodeURIComponent(file.filename)
+    const owner = file?.owner || ""
+    const _owner = owner ? `?X_LZCAPI_UID=${owner}` : ""
+    return `https://video.${boxname}.heiyu.space/_lzc/media/hls${videopath}/quality-720.m3u8${_owner}`
+  }
+  // 从 filepicker 中选择的文件一定为网盘资源
+  const submit = async (e: CustomEvent, boxname: string) => {
+    const files = dataTransfer<FileStat[]>(e) || []
+    const file = files[0]
+    if (!file) return
+    const sourceUrl = getSourceUrl(file, boxname)
+    const info: VideoInfo = {
+      _id: "",
+      sourceUrl,
+      name: file.basename,
+      duration: 0,
+      currentTime: 0,
+      invalid: false,
+      fromNetdisk: true,
+      path: file.filename,
+      updateTime: undefined,
+      subtitles: undefined,
+    }
+    store.setPendingPlayInfo(info)
+    await router.push({
+      name: "link",
+      query: {
+        url: sourceUrl,
+        name: file.basename,
+      },
+    })
+  }
+  const showList = ref(false)
+  const isPlaying = (_: VideoInfo) => {
+    return false
+  }
+  const onOpen = (info: VideoInfo) => {
+    store.setPendingPlayInfo(info)
+    router.push({
+      name: "link",
+      query: {
+        url: info.sourceUrl,
+        name: info.name,
+      },
+    })
+  }
+  const onBack = () => {
+    showList.value = false
+  }
+  return {
+    openFilePicker,
+    closeFilePicker,
+    submit,
+    showList,
+    isPlaying,
+    onOpen,
+    onBack,
+  }
+}

package/src/views/mobile/Home.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { ref, onMounted } from "vue"
+import sdk from "@/use/useSdk"
+import Playlist from "@/components/PlayList/index.vue"
+import useHome from "../Home"
+import PCBackgroundSvg from "@/icons/背景.png?inline"
+import BackgroundSvg from "@/icons/移动端_背景.webp?inline"
+import VideoNameSvg from "@/icons/懒猫播放器.png?inline"
+import VideoNameEnSvg from "@/icons/Video_Player.svg?inline"
+import { t } from "@/i18n"
+import i18next from "i18next"
+import { useBackPress } from "@lazycatcloud/lzc-toolkit"
+import type { VideoInfo } from "@/model"
+
+const filePickerInstance = ref()
+const showPicker = ref(false)
+
+const open = () => {
+  showPicker.value = true
+  openFilePicker()
+  toggleIosButton(false)
+}
+
+function close() {
+  showPicker.value = false
+  toggleIosButton(true)
+}
+
+const { openFilePicker, submit, showList, isPlaying, onOpen, onBack } =
+  useHome(filePickerInstance)
+const submitFn = async (e: CustomEvent) => {
+  await submit(e, boxName.value)
+  showPicker.value = false
+}
+const VideoNameIcon = ref(VideoNameSvg)
+const boxName = ref("")
+
+const allowIosGestures = async (allows: boolean) => {
+  // @ts-expect-error
+  return await window?.webkit?.messageHandlers?.[
+    "_AllowsNavigationGestures"
+  ]?.postMessage({ allows })
+}
+
+function toggleIosButton(visible: boolean) {
+  // @ts-expect-error
+  const bridge = window?.webkit?.messageHandlers?.["SetCloseBtnShowStatus"]
+  if (bridge?.postMessage) {
+    bridge.postMessage({
+      params: [visible],
+    })
+  }
+}
+
+// disable back gestures
+allowIosGestures(false)
+toggleIosButton(true)
+
+function openVideo(info: VideoInfo) {
+  toggleIosButton(false)
+  onOpen(info)
+}
+
+useBackPress(() => {
+  return true
+})
+
+onMounted(async () => {
+  if (i18next.language.startsWith("en")) {
+    VideoNameIcon.value = VideoNameEnSvg
+  } else {
+    VideoNameIcon.value = VideoNameSvg
+  }
+  const QueryInfo = await sdk.box.QueryInfo({})
+  boxName.value = QueryInfo.boxName
+})
+</script>
+
+<template>
+  <div class="content">
+    <div style="flex: 4"></div>
+    <lzc-file-picker
+      v-if="boxName && showPicker"
+      class="file-picker-safe-area"
+      type="file"
+      ref="filePickerInstance"
+      base-url="/_lzc/files/home"
+      accept="video/*, audio/x-mpegurl, application/vnd.apple.mpegurl, application/vnd.rn-realmedia, application/dvd"
+      :boxId="boxName"
+      :multiple="false"
+      :isModal="true"
+      :choiceFileOnly="true"
+      :title="t('src.views.mobile.home.title_select_file', '选择网盘文件')"
+      :confirm-button-title="
+        t('src.views.mobile.home.button_start_play', '开始播放')
+      "
+      @close="close"
+      @submit="submitFn"
+    ></lzc-file-picker>
+    <div
+      class="playlist-modal"
+      v-if="showList"
+      @click.self.prevent="showList = false"
+    >
+      <Playlist
+        class="playlist"
+        :isPlaying="isPlaying"
+        @openVideo="openVideo"
+        @back="onBack"
+      ></Playlist>
+    </div>
+    <div class="buttons">
+      <div class="video-home-logo">
+        <q-icon name="svguse:#icon-logo.svg" size="80px"></q-icon>
+        <img class="video-text-icon" :src="VideoNameIcon" />
+      </div>
+      <div class="video-operation-btns">
+        <q-btn class="btn video-open-file" @click="open">
+          {{ t("src.views.mobile.home.button_open_file", "打开文件") }}
+        </q-btn>
+        <q-btn class="btn video-play-list" @click="showList = true">
+          {{ t("src.views.mobile.home.button_playlist", "播放列表") }}
+        </q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  background-image: v-bind('"url(" + BackgroundSvg + ")"');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+@media screen and (min-width: 720px) {
+  .content {
+    background-image: v-bind('"url(" + PCBackgroundSvg + ")"');
+  }
+}
+
+.buttons {
+  flex: 6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .video-text-icon {
+    width: 14.9rem;
+    height: 2.9rem;
+    margin-top: 3.8rem;
+  }
+}
+
+.video-home-logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media screen and (max-height: 500px) {
+  .video-operation-btns {
+    margin-top: 30px;
+    margin-block: 50px;
+    position: relative !important;
+    bottom: var(--lzc-safe-area-inset-bottom) !important;
+  }
+}
+
+.video-operation-btns {
+  position: fixed;
+  bottom: calc(10rem + var(--lzc-safe-area-inset-bottom));
+
+  .btn {
+    width: 15.6rem;
+    height: 4.8rem;
+    border-radius: 1rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 2.2rem;
+    max-width: calc((100vw - 1.5rem - 2.4rem * 2) / 2);
+  }
+
+  .btn + .btn {
+    margin-left: 1.5rem;
+  }
+
+  .video-open-file {
+    color: #ffffff;
+    background: #5f86ff;
+  }
+
+  .video-play-list {
+    color: #5f86ff;
+    background: transparent;
+    border: 1px solid #5f86ff;
+  }
+}
+
+.file-picker-safe-area {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding-top: var(--lzc-safe-area-inset-top);
+  padding-bottom: var(--lzc-safe-area-inset-bottom);
+  background: #ffffff;
+}
+
+.playlist-modal {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.82);
+}
+
+@media screen and (min-width: 667px) {
+  .playlist-modal {
+    flex-direction: row-reverse;
+  }
+
+  .playlist {
+    width: 65%;
+  }
+}
+
+@media screen and (max-width: 666px) {
+  .playlist-modal {
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .playlist {
+    height: 65%;
+    width: 100%;
+  }
+}
+</style>

package/src/views/mobile/Player.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { onUnmounted, watch, withDefaults } from "vue"
+import NativeVideoPlayer from "@/components/Video/NativeVideoPlayer.vue"
+import type { NativePlayerAPI } from "@/components/Video/native/NativePlayer"
+import { useRouter } from "vue-router"
+import { useHistoryInfo } from "@/stores/playlist"
+import type { VideoInfo } from "@/model"
+
+const store = useHistoryInfo()
+const props = withDefaults(
+  defineProps<{
+    url: string
+    name?: string
+    path?: string
+    fromNetdisk?: string
+    isUrl?: boolean
+  }>(),
+  {
+    isUrl: false,
+  },
+)
+const router = useRouter()
+const back = () => router.replace({ name: "home" })
+let boundPlayer: NativePlayerAPI | null = null
+let unwatchUrl: (() => void) | null = null
+let openVideoHandler: ((e?: any) => void) | null = null
+
+const trigger = async (player: NativePlayerAPI) => {
+  let info: VideoInfo | undefined
+  const pendingInfo = store.pendingPlayInfo
+  const pendingMatchesRoute = !!pendingInfo?.sourceUrl
+    ? props.path && pendingInfo.path
+      ? pendingInfo.path === props.path
+      : pendingInfo.sourceUrl === props.url
+    : false
+
+  if (pendingInfo?.sourceUrl && pendingMatchesRoute) {
+    info = pendingInfo
+    store.setPendingPlayInfo(null)
+    await store.ready
+    const historyByPath = info.path
+      ? store.getHistoryInfoByPath(info.path)
+      : undefined
+    const historyByUrl = store.getHistoryInfo(info.sourceUrl)
+    const shouldUseHistory =
+      (info.currentTime ?? 0) <= 0 && (info.duration ?? 0) <= 0
+    if (shouldUseHistory) {
+      const historyInfo = historyByPath || historyByUrl
+      if (historyInfo) {
+        info = historyInfo
+      }
+    }
+  } else {
+    if (pendingInfo?.sourceUrl && !pendingMatchesRoute) {
+      store.setPendingPlayInfo(null)
+    }
+    await store.ready
+    if (props.path) {
+      info = store.getHistoryInfoByPath(props.path)
+    } else {
+      info = store.getHistoryInfo(props.url)
+    }
+  }
+  if (!info) {
+    info = {
+      _id: "",
+      sourceUrl: props.url,
+      name: props.name || "",
+      duration: 0,
+      currentTime: 0,
+      invalid: false,
+      fromNetdisk: props.fromNetdisk == "true",
+      path: props.path || "",
+      updateTime: undefined,
+      subtitles: undefined,
+    }
+  }
+  player.trigger({ type: "openVideo", info })
+}
+
+const onInit = (player: NativePlayerAPI) => {
+  if (boundPlayer === player) {
+    return
+  }
+  if (boundPlayer && openVideoHandler) {
+    boundPlayer.off("openVideo", openVideoHandler)
+  }
+  if (unwatchUrl) {
+    unwatchUrl()
+    unwatchUrl = null
+  }
+  boundPlayer = player
+  openVideoHandler = (e?: any) => {
+    const info = e?.info as VideoInfo | undefined
+    if (!info?.sourceUrl) return
+    const current = router.currentRoute.value
+    if (
+      current.name === "link" &&
+      current.query.url === info.sourceUrl &&
+      current.query.name === info.name
+    ) {
+      return
+    }
+    router.replace({
+      name: "link",
+      query: {
+        url: info.sourceUrl,
+        name: info.name || "",
+        path: info.path || undefined,
+        fromNetdisk: info.fromNetdisk ? "true" : undefined,
+      },
+    })
+  }
+  player.on("openVideo", openVideoHandler)
+  trigger(player)
+  unwatchUrl = watch(
+    () => props.url,
+    () => {
+      trigger(player)
+    },
+  )
+}
+
+onUnmounted(() => {
+  if (boundPlayer && openVideoHandler) {
+    boundPlayer.off("openVideo", openVideoHandler)
+  }
+  if (unwatchUrl) {
+    unwatchUrl()
+    unwatchUrl = null
+  }
+  boundPlayer = null
+  openVideoHandler = null
+})
+</script>
+
+<template>
+  <div class="w-full h-full min-h-0 flex flex-col bg-black">
+    <NativeVideoPlayer @back="back" :onInit="onInit" :poster="''" />
+  </div>
+</template>

package/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Scope utility classes to player root to avoid affecting host app styles.
+  important: ".lzc-video-player",
+  // Disable Tailwind preflight to prevent global reset leakage in library mode.
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  content: ["./src/**/*.vue"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "declaration": true,
+    "module": "ESNext",
+    "target": "es2017",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite-plugin-svg-icons/client", "vite-plugin-pwa/client"]
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

package/vite.config.lib.ts

@@ -0,0 +1,88 @@
+import { fileURLToPath, URL } from "node:url"
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import { quasar, transformAssetUrls } from "@quasar/vite-plugin"
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
+import dts from "vite-plugin-dts"
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
+import path from "node:path"
+import remToPx from "@thedutchcoder/postcss-rem-to-px"
+import tailwindcss from "tailwindcss"
+
+const version = process.env["VERSION"] || "0.0.0-dev"
+
+export default defineConfig({
+  define: {
+    "process.env.NODE_ENV": '"production"',
+    __APP_VERSION__: JSON.stringify(version),
+  },
+  publicDir: false,
+  css: {
+    postcss: {
+      plugins: [tailwindcss(), remToPx({ baseValue: 10 })],
+    },
+  },
+  build: {
+    outDir: "lib/dist",
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: "src/lzc-video-player.ts",
+      name: "lzc-video-player",
+      fileName: "lzc-video-player",
+      // the proper extensions will be added
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["vue", "pinia"],
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: "Vue",
+          pinia: "pinia",
+        },
+      },
+    },
+  },
+  plugins: [
+    vue({
+      template: {
+        transformAssetUrls,
+      },
+    }),
+    quasar({
+      sassVariables: "./src/quasar-variables.sass",
+    }),
+    createSvgIconsPlugin({
+      // 指定需要缓存的图标文件夹
+      iconDirs: [path.resolve(process.cwd(), "./src/icons")],
+      // 指定symbolId格式
+      symbolId: "icon-[name].svg",
+
+      /**
+       * 自定义插入位置
+       * @default: body-last
+       */
+      inject: "body-last",
+
+      /**
+       * custom dom id
+       * @default: __svg__icons__dom__
+       */
+      customDomId: "__lzc_video_player_svg_dom__",
+    }),
+    cssInjectedByJsPlugin(),
+    dts({
+      exclude: ["src/views", "src/router", "src/main.ts", "src/App.vue"],
+      outDir: "lib/dist",
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})