lzc-video-player 0.0.0

package/src/main.ts

@@ -0,0 +1,62 @@
+import { createApp } from "vue"
+import App from "./App.vue"
+import router, { formatInfo } from "./router"
+import pinia from "./stores/pinia"
+
+// Import Quasar css
+import "quasar/src/css/index.sass"
+import "@/assets/base.scss"
+import "virtual:svg-icons-register"
+import "@lazycatcloud/lzc-file-pickers"
+
+import { Quasar, AppFullscreen, Dialog } from "quasar"
+import { useRegisterSW } from "virtual:pwa-register/vue"
+
+import i18n, { i18next, I18NextVue } from "./i18n"
+
+useRegisterSW({
+  immediate: true,
+  onRegisteredSW(swUrl: string) {
+    console.log(`Service Worker at: ${swUrl}`)
+  },
+  onRegisterError(error: any) {
+    console.error("Service Worker error: ", error)
+  },
+})
+
+// action event
+window.addEventListener("lzc_action_event", function (
+  e: CustomEvent<{ type: string; msg: string }>,
+) {
+  console.log("action event: ", e)
+  switch (e.detail.type) {
+    case "OnActivateWindow":
+      if (e.detail.msg === window.origin) {
+        return
+      }
+      // eslint-disable-next-line no-case-declarations
+      const url = new URL(e.detail.msg)
+      router.replace({
+        name: "link",
+        query: formatInfo(
+          url.searchParams.get("url"),
+          url.searchParams.get("name"),
+        ),
+      })
+      break
+    default:
+      console.log("noimplement event")
+  }
+} as EventListener)
+
+const app = createApp(App)
+app.use(Quasar, { plugins: { AppFullscreen, Dialog } })
+app.use(pinia)
+app.use(router)
+
+router.isReady().then(() => {
+  i18n.init().finally(() => {
+    app.use(I18NextVue, { i18next })
+    app.mount("#app")
+  })
+})

package/src/model.ts

@@ -0,0 +1,77 @@
+export interface Doc {
+  _id: string
+}
+
+export interface VideoQualityLevel {
+  id: string
+  label: string
+  height: number
+  width: number
+  bitrate: number
+  enabled?: boolean
+  transport?: "hls" | "direct"
+}
+
+export interface VideoResolution {
+  id: string
+  res: number
+  width: number
+  height: number
+  auto: boolean
+  origin: boolean
+}
+
+export interface PreviewInfo {
+  page: number
+  image: HTMLImageElement
+  len: number
+  interval: number
+  width: number
+  height: number
+  tile: number
+}
+
+export interface Subtitle {
+  name: string
+  language: string
+  stream_index: number
+  codec_name: string
+  is_external: boolean
+  path: string
+  vtt_url?: string
+  track_id?: string
+  ass_url?: string
+  ass_fonts?: string[]
+  ass_renderable?: boolean
+  ass_unavailable_reason?: string
+  /** From subtitle-info API, whether this is the default subtitle track. */
+  default?: boolean
+}
+
+export interface VideoInfo extends Doc {
+  // Original source URL.
+  sourceUrl: string
+  name: string
+  duration: number
+  currentTime: number
+  invalid: boolean
+
+  // Last update time.
+  updateTime: number | undefined
+  // Whether this video comes from netdisk.
+  fromNetdisk: boolean
+  // File path in netdisk.
+  path: string | undefined
+  // subtitle from subtitle-info
+  subtitles: Subtitle[] | undefined
+  // Remembered subtitle before hidden toggle (Alt+H restore).
+  beforeHiddenSubtitle?: Subtitle
+
+  requestHistory?: boolean
+
+  playMode?: "direct" | "hls"
+  resolvedSourceUrl?: string
+  originHlsUrl?: string
+  originDirectUrl?: string
+  subtitleInfoUrl?: string
+}

package/src/quasar-variables.sass

@@ -0,0 +1,10 @@
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037

package/src/router/index.ts

@@ -0,0 +1,74 @@
+import path from "path"
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router"
+
+function basename(url: string | null): string | null {
+  if (url == null) {
+    return url
+  }
+  let path = url
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    const u = new URL(url)
+    path = u.pathname
+  }
+  const arr = path.split("/")
+  const name = arr[arr.length - 1]
+  return name || url
+}
+
+export function formatInfo(url: string | null, name: string | null) {
+  if (url?.startsWith("/") == false) {
+    url =
+      url.startsWith("http://") || url.startsWith("https://") ? url : "/" + url
+  }
+  return {
+    url,
+    name: name ?? basename(url),
+    path: url,
+  }
+}
+
+const mobile: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    redirect: "/home",
+  },
+  {
+    path: "/home",
+    name: "home",
+    component: () => import("@/views/mobile/Home.vue"),
+  },
+  {
+    path: "/link",
+    name: "link",
+    component: () => import("@/views/mobile/Player.vue"),
+    props: (route) => {
+      return route.query
+    },
+  },
+  {
+    path: "/open",
+    name: "open",
+    component: () => import("@/views/mobile/Player.vue"),
+    props: (route) => {
+      let url = typeof route.query.url === "string" ? route.query.url : null
+      let name = typeof route.query.name === "string" ? route.query.name : null
+      let info = formatInfo(url, name)
+      return {
+        name: info.name ?? undefined,
+        url: info.url ?? undefined,
+        path: info.url ?? undefined,
+        isUrl:
+          typeof route.query.isurl === "string"
+            ? route.query.isurl == "true"
+            : false,
+      }
+    },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: mobile,
+})
+
+export default router

package/src/stores/pinia.ts

@@ -0,0 +1,3 @@
+import { createPinia, getActivePinia } from "pinia"
+const pinia = getActivePinia() ?? createPinia()
+export default pinia

package/src/stores/playlist.ts

@@ -0,0 +1,146 @@
+import { defineStore } from "pinia"
+import { MiniDB, RemoteDB } from "@lazycatcloud/minidb"
+import { addFrame, delFrame, isFileExist } from "@/use/useVideoFrame"
+import type { VideoInfo } from "@/model"
+import { t } from "@/i18n"
+
+const db: MiniDB = new MiniDB()
+
+export const useHistoryInfo = () => {
+  const innerStore = defineStore("historyInfo", {
+    state: () => {
+      return {
+        collection: {} as RemoteDB<VideoInfo>,
+        infos: [] as VideoInfo[],
+        ready: Promise.resolve() as Promise<void>,
+        /** 从历史记录点击播放时传入的完整 info，供 Player 优先使用 */
+        pendingPlayInfo: null as VideoInfo | null,
+      }
+    },
+    getters: {
+      getHistoryInfo(state) {
+        return (sourceUrl: string) => {
+          return state.infos.find((info) => info.sourceUrl === sourceUrl)
+        }
+      },
+      getHistoryInfoByPath(state) {
+        return (path: string) => {
+          return state.infos.find((info) => {
+            if (info.path && info.path === path) {
+              return info
+            }
+          })
+        }
+      },
+    },
+    actions: {
+      // 初始化数据库
+      async init() {
+        this.ready = (async () => {
+          this.collection = db.getCollection("historyInfo")
+          await this.refreshData()
+        })()
+      },
+      async refreshData() {
+        this.infos = await this.collection
+          .find({}, { sort: [["updateTime", "desc"]] })
+          .fetch()
+      },
+      async deleteHistory(info: VideoInfo) {
+        await this.collection.remove(info._id)
+        await this.refreshData()
+        delFrame(info._id)
+        return
+      },
+      async batchDeleteHistory(ids: string[]) {
+        if (!ids.length) return
+
+        await this.collection.remove(ids)
+        await this.refreshData()
+
+        ids.forEach((v) => delFrame(v))
+        return
+      },
+      async updateOrCreateHistory(
+        info: VideoInfo,
+        blobFn: (() => Promise<Blob | null>) | null,
+      ): Promise<void> {
+        if (!info.sourceUrl) {
+          throw t("src.stores.playlist.history_error_text", "无效的视频记录")
+        }
+        const oldInfo = await this.collection.findOne({
+          sourceUrl: info["sourceUrl"],
+        })
+        let newInfo = undefined
+        if (oldInfo) {
+          newInfo = await this.collection.upsert(
+            Object.assign({}, oldInfo, info),
+            oldInfo,
+          )
+        } else {
+          info.updateTime = new Date().getTime()
+          newInfo = await this.collection.upsert(info)
+        }
+        if (!newInfo) {
+          return
+        }
+        const index = this.infos.findIndex(
+          (i: VideoInfo) => i.sourceUrl === info.sourceUrl,
+        )
+        if (index > -1) {
+          this.infos.splice(index, 1, newInfo)
+        } else {
+          this.infos.splice(0, 0, newInfo)
+        }
+
+        if (blobFn && newInfo._id) {
+          const id = newInfo._id
+          isFileExist(id).then(async (exist) => {
+            if (!exist) {
+              console.debug("update video frame")
+              const blob = await blobFn()
+              if (blob) addFrame(id, blob)
+            }
+          })
+        }
+      },
+      async markAsInvalid(sourceUrl: string) {
+        const index = this.infos.findIndex(
+          (i: VideoInfo) => i.sourceUrl === sourceUrl,
+        )
+        if (index < 0) {
+          throw t(
+            "src.stores.playlist.not_exist_error_text",
+            "{{sourceUrl}} 不存在",
+            { sourceUrl },
+          )
+        }
+        const info = this.infos[index]
+        const newInfo = await this.collection.upsert(
+          Object.assign({}, info, { invalid: true }),
+          info,
+        )
+        this.infos.splice(index, 1, newInfo!)
+      },
+      setPendingPlayInfo(info: VideoInfo | null) {
+        this.pendingPlayInfo = info
+      },
+      async clear(): Promise<void> {
+        const ids: string[] = []
+        this.infos.forEach((info: VideoInfo) => {
+          if (info._id) {
+            ids.push(info._id)
+          }
+        })
+        await this.collection.remove(ids)
+        this.infos = []
+      },
+    },
+  })
+
+  const s = innerStore()
+  if (!s.collection.upsert) {
+    s.init()
+  }
+  return s
+}

package/src/use/useKeyBind.ts

@@ -0,0 +1,61 @@
+import { ref } from "vue"
+import { useEventListener } from "@vueuse/core"
+
+type KeyCallbackMap = Record<string, (event: KeyboardEvent) => void>
+
+export function useKeyBind(map: KeyCallbackMap, shortcutToggle = ref(true)) {
+  let isHolded = false
+  let holdTimeout: ReturnType<typeof setTimeout> | null = null
+  const modifierBlockedCodes = new Set<string>()
+
+  useEventListener("keydown", (e) => {
+    if (!shortcutToggle.value) return
+    if (!isBind(e.code)) return
+    if (hasModifierKey(e)) {
+      modifierBlockedCodes.add(e.code)
+      return
+    }
+    if (isHolded) return
+    isHolded = true
+    holdTimeout = setTimeout(() => {
+      const cb = () => {
+        exec(e)
+        if (isHolded) {
+          holdTimeout = setTimeout(cb, 100)
+        }
+      }
+      cb()
+    }, 500)
+  })
+  useEventListener("keyup", (e) => {
+    const blockedByModifier = modifierBlockedCodes.has(e.code)
+    modifierBlockedCodes.delete(e.code)
+    reset()
+    if (!shortcutToggle.value) return
+    if (!isBind(e.code)) return
+    if (blockedByModifier || hasModifierKey(e)) return
+    exec(e)
+  })
+
+  function reset() {
+    if (holdTimeout) {
+      clearTimeout(holdTimeout)
+      holdTimeout = null
+    }
+    isHolded = false
+  }
+
+  function hasModifierKey(e: KeyboardEvent) {
+    return e.shiftKey || e.ctrlKey || e.altKey || e.metaKey
+  }
+
+  function isBind(code: string) {
+    return code in map
+  }
+
+  function exec(e: KeyboardEvent) {
+    const keyCode = e.code
+    const fn = map[keyCode]
+    fn && fn?.(e)
+  }
+}

package/src/use/useMultipleEdit.ts

@@ -0,0 +1,60 @@
+import { computed, ref } from "vue"
+
+export default function () {
+  // 是否编辑中
+  const isEditing = ref(false)
+  // 已选择的item 主键列表
+  const selectedKeys = ref<string[]>([])
+  // 数据
+  const data = ref<any[]>([])
+  // 是否全选了
+  const isSelectAll = computed(
+    () =>
+      selectedKeys.value.length > 0 &&
+      data.value.length === selectedKeys.value.length,
+  )
+
+  // 全选 / 取消全选
+  function hdlSelectAll() {
+    if (isSelectAll.value) {
+      selectedKeys.value = []
+      return
+    }
+    selectedKeys.value = data.value
+  }
+
+  // 取消编辑，初始化参数
+  function hdlCancel() {
+    isEditing.value = false
+    selectedKeys.value = []
+  }
+
+  // 切换item是否选中
+  function hdlToggleItem(item: any) {
+    // 如果已经选中则取消选中
+    if (selectedKeys.value.includes(item)) {
+      selectedKeys.value = selectedKeys.value.filter((v) => v !== item)
+      return
+    }
+
+    selectedKeys.value.push(item)
+  }
+
+  // 刷新数据
+  function updateData(values: any[]) {
+    console.log("updateData")
+    data.value = values
+  }
+
+  return {
+    selectedKeys,
+
+    isEditing,
+    isSelectAll,
+
+    hdlSelectAll,
+    hdlCancel,
+    hdlToggleItem,
+    updateData,
+  }
+}

package/src/use/useSdk.ts

@@ -0,0 +1,5 @@
+import { lzcAPIGateway } from "@lazycatcloud/sdk"
+import LzcApp from "@lazycatcloud/sdk/dist/extentions/base"
+const lzcApi = new lzcAPIGateway("/_lzc/runtime/grpc/")
+export default lzcApi
+export { LzcApp }

package/src/use/useSubtitle.ts

@@ -0,0 +1,39 @@
+import { MiniDB, RemoteDB } from "@lazycatcloud/minidb"
+
+const db = new MiniDB()
+const GLOBAL_LAST_SUBTITLE_KEY = "__global_last_subtitle__"
+
+type SubtitleStateRecord = {
+  path: string
+  name?: string
+  index?: number
+  is_external?: boolean
+}
+
+const state: RemoteDB<SubtitleStateRecord> = db.getCollection("subtitle")
+
+function update(path: string, value: { name?: string; index?: number }) {
+  state.upsertOrUpdate({ path }, { path, ...value })
+}
+
+function findOne(path: string) {
+  return state.findOne({ path })
+}
+
+function updateLastSelected(value: { name?: string; is_external?: boolean }) {
+  state.upsertOrUpdate(
+    { path: GLOBAL_LAST_SUBTITLE_KEY },
+    { path: GLOBAL_LAST_SUBTITLE_KEY, ...value },
+  )
+}
+
+function findLastSelected() {
+  return state.findOne({ path: GLOBAL_LAST_SUBTITLE_KEY })
+}
+
+export const subtitleDB = {
+  update,
+  findOne,
+  updateLastSelected,
+  findLastSelected,
+}

package/src/use/useUtils.ts

@@ -0,0 +1,22 @@
+import type { VideoInfo } from "@/model";
+
+export function isMobile() {
+  return (
+    navigator.userAgent.search(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+    ) > -1
+  )
+}
+
+// 带字幕会在url上加sub_type、custom_sub、subtitle
+export function isSourceEqual(src: string, info: VideoInfo) {
+  const normalize = (value: string) => {
+    const u = new URL(value)
+    u.searchParams.delete("sub_type")
+    u.searchParams.delete("custom_sub")
+    u.searchParams.delete("subtitle")
+    u.pathname = u.pathname.replace(/\/quality-[^/]*\.m3u8$/i, "/master.m3u8")
+    return u.toString()
+  }
+  return normalize(src) === normalize(info.sourceUrl)
+}

package/src/use/useVideoFrame.ts

@@ -0,0 +1,60 @@
+// 实现播放列表中的封面和拖动进度条时展示的小窗口预览
+// 图片使用 lzcinit 中提供的 webdav 服务进行储存到 /app/var 目录下
+// 图片使用播放列表中 minidb id 进行命名（即 webdav 中使用文件名和播放列表中进行关联）
+
+import { createClient } from "webdav/web"
+import EmptySvg from "@/icons/暂无.svg?inline"
+import BackgroundSvg from "@/icons/移动端_背景.webp?inline"
+
+const client = createClient("/_lzc/files/app/user/")
+let putLock: boolean = false
+
+export async function isFileExist(name: string) {
+  return client.exists(name)
+}
+
+export async function getFileLinkWithDefault(name: string) {
+  if (name == "") {
+    return BackgroundSvg
+  }
+
+  const bool = await client.exists(name)
+  if (bool) {
+    return client.getFileDownloadLink(name)
+  } else {
+    return BackgroundSvg
+  }
+}
+
+// 获取图片的下载连接
+export const getFrame = (id: string) => {
+  if (id) {
+    return client.getFileDownloadLink(id)
+  } else {
+    return EmptySvg
+  }
+}
+
+// 上传图片
+export const addFrame = async (id: string, blob: Blob): Promise<boolean> => {
+  if (putLock) {
+    return false
+  }
+
+  try {
+    putLock = true
+    const buffer = await blob.arrayBuffer()
+    const ok = await client.putFileContents(id, buffer, {
+      contentLength: false,
+      overwrite: true,
+    })
+    return ok
+  } finally {
+    putLock = false
+  }
+}
+
+// 删除图片
+export const delFrame = async (id: string) => {
+  return client.deleteFile(id)
+}