lzc-video-player 0.0.0

package/demo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "demo",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@lazycatcloud/lzc-video-player": "file:../lib",
+    "pinia": "^2.0.21",
+    "vue": "^3.2.38"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vue/tsconfig": "^0.1.3",
+    "npm-run-all": "^4.1.5",
+    "typescript": "~4.7.4",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
+  }
+}

package/demo/src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { LzcVideoPlayer } from "@lazycatcloud/lzc-video-player"
+function onBack() {
+  console.log("onback")
+}
+function onInit(player: any) {
+  console.log("player: ", player)
+}
+
+const options: any = {
+  showTopBar: false,
+}
+</script>
+
+<template>
+  <LzcVideoPlayer
+    :style="{
+      height: '100%',
+      width: '100%',
+    }"
+    @back="onBack"
+    :on-init="onInit"
+    :options="options"
+  />
+</template>

package/demo/src/assets/base.css

@@ -0,0 +1,70 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/demo/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/demo/src/assets/main.css

@@ -0,0 +1,33 @@
+@import "./base.css";
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

package/demo/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue"
+import { createPinia } from "pinia"
+import App from "./App.vue"
+import "./assets/main.css"
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount("#app")

package/demo/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/demo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

package/demo/vite.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from "node:url"
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})

package/docs/progress-bar-style-analysis.md

@@ -0,0 +1,87 @@
+# 进度条样式分析
+
+## 一、原生播放器进度条（当前使用）
+
+### 1. 结构位置
+
+- **文件**：`src/components/Video/native/NativeControls.vue`
+- **DOM**：`.native-progress-wrap` 内：左侧时间 → `<input type="range" class="native-range native-progress">` → 右侧时间
+- **布局**：在 `.native-controls-wrap` 内，进度条在控制栏上方（`bottom: 4rem`），与主题 `.vjs-theme-lzc` 一致
+
+### 2. 样式定义（native-theme.scss）
+
+| 元素 | 类名 | 说明 |
+|------|------|------|
+| 进度条容器 | `.native-progress-wrap` | `position: absolute`，`bottom: 4rem`，`padding: 0 2rem`（≥480px 为 4.4rem），横向 flex |
+| 时间文字 | `.native-time` | 1.2rem、PingFangSC-Semibold、白色；首项 `margin-right: 1.7rem`，末项 `margin-left: 1.7rem` |
+| 滑轨（range） | `.native-range.native-progress` | 轨道 + 拇指样式 |
+
+### 3. 滑轨与拇指
+
+- **轨道**
+  - `flex: 1`，`height: 0.2rem`，`min-height: 0.2rem`
+  - `padding: 1.2rem 0`（增大可点区域）
+  - `background: $native-progress-bg` → `rgba(255,255,255,0.3)`
+  - `border-radius: 0.15rem`
+  - `-webkit-appearance: none` / `appearance: none`
+
+- **拇指（Thumb）**
+  - **WebKit**：`::-webkit-slider-thumb`  
+    - 1.2rem × 1.2rem，圆角 0.65rem  
+    - 背景 `$native-progress-played`（#5f86ff）  
+    - `box-shadow: 0 0 0 0.7rem rgba(95,134,255,0.15)`（外圈光晕）
+  - **Firefox**：`::-moz-range-thumb`  
+    - 同尺寸、同背景、无边框
+
+### 4. 变量（与主题一致）
+
+```scss
+$native-progress-played: #5f86ff;   // 已播放/拇指
+$native-progress-bg: rgba(255, 255, 255, 0.3);  // 轨道背景
+```
+
+### 5. 行为与数据
+
+- **数值**：`displayProgressPercent`（拖拽时用 `seekValue`，否则用 `currentTime/duration`）
+- **事件**：`@input` 实时 seek，`@change` / `@mouseup` / `@touchend` 结束拖拽并同步时间
+
+---
+
+## 二、与原版 Video.js 主题对比（.vjs-theme-lzc）
+
+| 项目 | 原版 (theme/index.scss) | 原生 (native-theme.scss) |
+|------|-------------------------|---------------------------|
+| 进度条位置 | `bottom: 6.3rem`，padding 2rem / 4.4rem | 在 `.native-progress-wrap` 内，整体 `bottom: 4rem`，padding 一致 |
+| 轨道高度 | `.vjs-progress-holder` 高 0.2rem，上下 padding 1.2rem | range 高 0.2rem，padding 1.2rem 0 |
+| 轨道背景 | `&:after` 宽 100%、高 0.2rem、`$progress-color` | range 背景 `$native-progress-bg`（同色) |
+| 已播放色 | `.vjs-play-progress` 背景 #5f86ff | 拇指 #5f86ff，**轨道已播放段** 需用 range 渐变或伪元素实现 |
+| 拇指/圆点 | `.vjs-play-progress:after` 1.2rem×1.2rem，圆角 0.65rem，右侧 -0.6rem | 拇指 1.2rem×1.2rem，圆角 0.65rem |
+| 时间字体 | progress-text mixin：1.2rem、PingFangSC-Semibold | `.native-time` 一致 |
+
+原版还有 `.vjs-play-progress:before`（2.6rem 大圆、opacity 0.15）做光晕；原生用 `box-shadow` 做拇指外圈，效果类似。
+
+---
+
+## 三、当前差异与可选优化
+
+1. **轨道“已播放”颜色**  
+   原版整段已播放是蓝色条；原生用的是 `<input type="range">`，**轨道左侧已播放部分**在部分浏览器下不会自动变蓝，需要：
+   - 用 `linear-gradient` 根据 `value` 画左侧蓝色、右侧灰色，或
+   - 用 `::-webkit-slider-runnable-track` / `::-moz-range-track` 做分段背景。
+
+2. **内联 style**  
+   `NativeControls.vue` 里进度条有 `style="height: 10px"`，会覆盖 scss 的 `0.2rem`，若要保持和原版一致，建议去掉内联 height，统一用样式表。
+
+3. **模板里的静态块**  
+   同一 template 里有一段带 `.vjs-progress` 的静态结构（写死的 4:13、56:59、7.42% 等），没有绑定数据，也不会被原生逻辑使用，可删除避免干扰或误以为在用 Video.js 进度条。
+
+---
+
+## 四、相关文件一览
+
+| 文件 | 作用 |
+|------|------|
+| `native/NativeControls.vue` | 进度条 DOM、range 绑定与事件 |
+| `native/native-theme.scss` | 进度条容器、时间、轨道、拇指样式 |
+| `theme/index.scss` | 原版 .vjs-theme-lzc 进度条样式参考 |
+| `components/LzcProgress.ts` | Video.js 版进度组件（原生播放器未用） |

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/error_pages/502.html.tpl

@@ -0,0 +1,13 @@
+<html>
+  <body>
+    <h1>
+你的程序无法访问了~~~~~~~~
+    </h1>
+    <p>
+原因: {{ .ErrorDetail}}
+    </p>
+    <p>
+      请稍后再试吧
+    </p>
+  </body>
+</html>

package/i18next-parser.config.mjs

@@ -0,0 +1,147 @@
+/*
+ * @Author: Bin
+ * @Date: 2025-01-06
+ * @FilePath: /lzc-video-player/i18next-parser.config.mjs
+ */
+export default {
+  contextSeparator: "_",
+  // Key separator used in your translation keys
+
+  createOldCatalogs: true,
+  // Save the \_old files
+
+  defaultNamespace: "translation",
+  // Default namespace used in your i18next config
+
+  defaultValue: "",
+  // Default value to give to keys with no value
+  // You may also specify a function accepting the locale, namespace, key, and value as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+  // You may either specify a boolean to keep or discard all removed keys.
+  // You may also specify an array of patterns: the keys from the catalog that are no long in the code but match one of the patterns will be kept.
+  // The patterns are applied to the full key including the namespace, the parent keys and the separators.
+
+  keySeparator: ".",
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
+
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
+
+    vue: [
+      {
+        lexer: "JavascriptLexer",
+        functions: ["t", "$t"], // Array of functions to match
+        namespaceFunctions: ["useTranslation", "withTranslation"],
+      },
+      {
+        lexer: "HTMLLexer",
+        functions: ["t", "$t"],
+        vueBindAttr: true,
+      },
+    ],
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JavascriptLexer"],
+  },
+
+  lineEnding: "auto",
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ["en", "zh"],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ":",
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: "public/languages/$LOCALE/$NAMESPACE.json",
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: "_",
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+  // If you don't want to generate keys for plurals (for example, in case you are using ICU format), set `pluralSeparator: false`.
+
+  input: "src/**/*.{js,ts,jsx,tsx,vue}",
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+
+  verbose: true,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  failOnUpdate: false,
+  // Exit with an exit code of 1 when translations are updated (for CI purpose)
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  //
+  // - ${defaultValue} is the default value you set in your translation function.
+  // - ${filePaths} will be expanded to an array that contains the absolute
+  //   file paths where the translations originated in, in case e.g., you need
+  //   to provide translators with context
+  //
+  // Any other custom property will be automatically extracted from the 2nd
+  // argument of your `t()` function or tOptions in <Trans tOptions={...} />
+  //
+  // Example:
+  // For `t('my-key', {maxLength: 150, defaultValue: 'Hello'})` in
+  // /path/to/your/file.js,
+  //
+  // Using the following customValueTemplate:
+  //
+  // customValueTemplate: {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}",
+  //   paths: "${filePaths}",
+  // }
+  //
+  // Will result in the following item being extracted:
+  //
+  // "my-key": {
+  //   "message": "Hello",
+  //   "description": 150,
+  //   "paths": ["/path/to/your/file.js"]
+  // }
+
+  resetDefaultValueLocale: null,
+  // The locale to compare with default values to determine whether a default value has been changed.
+  // If this is set and a default value differs from a translation in the specified locale, all entries
+  // for that key across locales are reset to the default value, and existing translations are moved to
+  // the `_old` file.
+
+  i18nextOptions: null,
+  // If you wish to customize options in internally used i18next instance, you can define an object with any
+  // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+  // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+
+  yamlOptions: null,
+  // If you wish to customize options for yaml output, you can define an object here.
+  // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-).
+  // Example:
+  // {
+  //   lineWidth: -1,
+  // }
+}

package/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="512x512" href="square-512x512.png" />
+    <link rel="apple-touch-icon" sizes="256x256" href="square-256x256.png" />
+    <link rel="apple-touch-icon" sizes="128x128" href="square-128x128.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="lzcapp-navigation-bar-scheme" content="hidden" />
+    <title>视频播放器</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script
+      type="module"
+      src="/src/main.ts"
+      crossorigin="use-credentials"
+    ></script>
+    <script>
+      const translations = {
+        zh: {
+          title: "视频播放器",
+        },
+        en: {
+          title: "Video Player",
+        },
+      }
+
+      function getTranslation(language) {
+        switch (true) {
+          case language.startsWith("zh"):
+            return translations.zh
+          case language.startsWith("en"):
+            return translations.en
+          default:
+            return {}
+        }
+      }
+
+      function setTranslation(translation) {
+        if (Object.keys(translation).length === 0) {
+          return
+        }
+        document.title = translation.title
+      }
+
+      setTranslation(getTranslation(navigator.language))
+    </script>
+  </body>
+</html>

package/lib/README.md

@@ -0,0 +1,48 @@
+# lzc-video-player
+
+## 播放器（NativeVideoPlayer）
+
+基于原生 `<video>` + hls.js 的播放器，不依赖 Video.js，提供 HLS 播放与基础控制：
+
+增加对ass特效字幕的渲染能力，需要配合服务端提供的字体集
+
+```typescript
+import { LzcVideoPlayer } from "@lazycatcloud/lzc-video-player";
+
+// 需配合 openVideo 事件传入片源；onInit 中可拿到 player 并调用 trigger({ type: "openVideo", info })
+<LzcVideoPlayer @back="onBack" :on-init="onInit" :options="options" />
+```
+
+## 支持选择字幕功能
+
+## 调整选择字幕样式
+
+```typescript
+<script setup lang="ts">
+import { LzcVideoPlayer } from "@lazycatcloud/lzc-video-player";
+import type { NativePlayerAPI } from "@lazycatcloud/lzc-video-player";
+
+function onBack() {
+  console.log("onback");
+}
+function onInit(player: NativePlayerAPI) {
+  console.log("player: ", player);
+}
+
+const options = {
+  showTopBar: false,
+};
+</script>
+
+<template>
+  <LzcVideoPlayer
+    :style="{
+      height: '100%',
+      width: '100%',
+    }"
+    @back="onBack"
+    :on-init="onInit"
+    :options="options"
+  />
+</template>
+```

package/lib/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@lazycatcloud/lzc-video-player",
+  "version": "1.2.7",
+  "description": "",
+  "type": "module",
+  "main": "dist/lzc-video-player.js",
+  "types": "dist/lzc-video-player.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "access": "public",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

package/lzc-build.local.yml

@@ -0,0 +1,65 @@
+# 整个文件中，可以通过 ${var} 的方式，使用 manifest.yml 文件中定义的值
+
+# buildscript
+# - 可以为构建脚本的路径地址
+# - 如果构建命令简单，也可以直接写 sh 的命令
+buildscript: ./build.sh
+
+# manifest: 指定 lpk 包的 manifest.yml 文件路径
+manifest: ./lzc-manifest.yml
+
+# contentdir: 指定打包的内容，将会打包到 lpk 中
+contentdir: ./build
+
+# pkgout: lpk 包的输出路径
+pkgout: ./lpk
+
+# icon 指定 lpk 包 icon 的路径路径，如果不指定将会警告
+# icon 仅仅允许 png 后缀的文件
+icon: ./lazycat.png
+
+# devshell 自定义应用的开发容器环境
+# - routers 指定应用容器的访问路由
+
+# devshell 没有指定 image 的情况，将会默认使用 registry.lazycat.cloud/lzc-cli/devshell:latest
+# devshell:
+#   routers:
+#     - /=http://127.0.0.1:8080
+
+# devshell 指定 image 的情况
+# devshell:
+#   routes:
+#     - /=http://127.0.0.1:3000
+#   image: registry.lazycat.cloud/lzc-cli/devshell:0.0.4
+
+# devshell 指定构建Dockerfile
+# image 字段如果没有定义，将默认使用 ${package}-devshell:${version}
+# devshell:
+#   routes:
+#     - /=http://127.0.0.1:3000
+#   image: ${package}-devshell:${version}
+#   pull_policy: build
+#   build: .
+
+# dvshell 指定开发依赖的情况
+# 这种情况下，选用 apline:3.16 作为基础镜像，在 dependencies 中添加所需要的开发依赖即可
+# 如果 dependencies 和 build 同时存在，将会优先使用 dependencies
+devshell:
+  routes:
+    # - /=http://[fc03:1136:386f:abb0:ee12:ec32:c25a:401]:3000/
+    - /=http://${LocalIP}:5173
+  image: registry.lazycat.cloud/lzc-cli/devshell:v0.0.5
+  dependencies:
+    - nodejs
+    - vim
+    - npm
+  # setupscript 每次进入到app container后都会执行的配置脚本
+  # - 可以为脚本的路径地址
+  # - 如果构建命令简单，也可以直接写 sh 的命令
+  # setupscript: export GOPROXY=https://goproxy.cn
+  # setupscript: ./setupscript.sh
+  setupscript: |
+    export GOPROXY=https://goproxy.cn
+    export npm_config_registry=https://registry.npmmirror.com
+    export PATH=/root/go/bin:$PATH
+    # go install github.com/go-delve/delve/cmd/dlv@latest