wg-video-player 1.0.0-beta.0

package/examples/main.js

@@ -0,0 +1,32 @@
+// import Vue from 'vue';
+import { createApp } from 'vue';
+// import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
+import App from './App.vue';
+import multiPlayer from '../src/index';
+
+// Vue.use(VueI18n);
+
+const messages = {
+  tw: { message: '視頻', ...multiPlayer.langs.tw },
+  cn: { message: '视频', ...multiPlayer.langs.cn },
+  us: { message: 'video', ...multiPlayer.langs.us },
+};
+const i18n = createI18n({
+  locale: 'cn',
+  messages,
+});
+
+const app = createApp(App);
+
+app.use(multiPlayer);
+app.use(i18n);
+
+app.mount('#app');
+// eslint-disable-next-line no-new
+// new Vue({
+//   el: '#app',
+//   render: (h) => h(App),
+//   i18n,
+// });
+// import '../src/test';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "wg-video-player",
+  "description": "A video player for private",
+  "version": "1.0.0-beta.0",
+  "author": "wg <wg@wisdomgarden.com>",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "types": "wg-video-player.d.ts",
+  "main": "./dist/wg-video-player.umd.js",
+  "module": "./dist/wg-video-player.js",
+  "exports": {
+    ".": {
+      "import": "./dist/wg-video-player.js",
+      "require": "./dist/wg-video-player.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "vite build",
+    "dist": "vite build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.4.0",
+    "less": "^4.2.0",
+    "sass": "^1.69.4",
+    "unocss": "^0.56.5",
+    "vite": "^4.5.0"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@popperjs/core": "^2.11.8",
+    "@silvermine/videojs-quality-selector": "^1.3.0",
+    "ant-design-vue": "^4.0.6",
+    "axios": "^1.5.1",
+    "chance": "^1.1.11",
+    "element-resize-event": "^3.0.6",
+    "emoji-mart-vue": "^2.6.6",
+    "flv.js": "^1.6.2",
+    "jquery": "^3.7.1",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.1",
+    "v3-infinite-loading": "^1.3.1",
+    "video.js": "7.20.2",
+    "vite-svg-loader": "^4.0.0",
+    "vue": "^3.3.5",
+    "vue-i18n": "^9.5.0",
+    "vuewordcloud": "^19.0.0"
+  }
+}

package/uno.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, presetAttributify, presetUno, transformerVariantGroup } from 'unocss';
+
+export default defineConfig({
+  theme: {
+    colors: {
+      primary: '#00bbbd',
+    }
+  },
+  presets: [presetUno({ prefix: 'mvp-uno-' }), presetAttributify()],
+  transformers: [transformerVariantGroup()],
+  rules: [['m-1', { margin: '0.25rem' }]],
+});

package/vite.config.js

@@ -0,0 +1,65 @@
+import { defineConfig, loadEnv } from 'vite';
+import { resolve } from 'path';
+import vue from '@vitejs/plugin-vue';
+import UnoCSS from 'unocss/vite';
+import svgLoader from 'vite-svg-loader';
+
+export default ({ mode }) => {
+  const { VITE_PORT, VITE_BASE_URL } = loadEnv(mode, process.cwd());
+
+  return defineConfig({
+    base: VITE_BASE_URL,
+    plugins: [
+      vue(),
+      UnoCSS(),
+      svgLoader(),
+      // AutoImport({
+      //   resolvers: [],
+      // }),
+      // Components({
+      //   resolvers: [
+      //     TDesignResolver({
+      //       library: 'vue-next',
+      //     }),
+      //   ],
+      // }),
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+      },
+    },
+    css: {},
+    server: {
+      // 是否开启 https
+      https: false,
+      // 端口号
+      port: VITE_PORT,
+      // 监听所有地址
+      host: '0.0.0.0',
+      // 服务启动时是否自动打开浏览器
+      open: true,
+      // 允许跨域
+      cors: true,
+      // 自定义代理规则
+      proxy: {},
+    },
+    build: {
+      // 设置最终构建的浏览器兼容目标
+      target: 'es2015',
+      // 构建后是否生成 source map 文件
+      sourcemap: false,
+      //  chunk 大小警告的限制（以 kbs 为单位）
+      chunkSizeWarningLimit: 2000,
+      // 启用/禁用 gzip 压缩大小报告
+      reportCompressedSize: false,
+      lib: {
+        // Could also be a dictionary or array of multiple entry points
+        entry: resolve(__dirname, 'src/index.js'),
+        name: 'WgVideoPlayer',
+        // the proper extensions will be added
+        fileName: 'wg-video-player',
+      },
+    },
+  });
+};

package/wg-video-player.d.ts

@@ -0,0 +1,52 @@
+import { PluginFunction } from 'vue';
+
+declare module 'wg-video-player';
+
+export interface MultiPlayerProps {
+    videos: Record<string, any>[]
+    mode?: string
+    volume?: number
+    plugins?: Record<string, any>
+    autoPlay?: boolean
+    seekable?: boolean
+    seekWarning?: string
+    lastPlayed?: number
+    isSimpleControls?: boolean
+    enablePlayRate?: boolean
+    enableNew?: boolean
+    onPlayerReady: Function,
+    onError: Function
+}
+
+export type ListenerName = 'playerReady' | 'error'
+
+export type VideoLanguage = 'cn' | 'tw' | 'us'
+
+export class MultiPlayer {
+    playerComponent: Record<string, any>
+    constructor(id: string, props: MultiPlayerProps, options?: Record<string, any>) { }
+
+    // on(
+    //     fnName: ListenerName,
+    //     fn: Function,
+    // ): void
+
+    // off(
+    //     fnName: ListenerName,
+    //     fn: Function,
+    // ): void
+
+    locale(language: VideoLanguage): void
+
+    destroy(): void
+}
+
+const API: {
+    locale: Function,
+    i18n: Function,
+    langs: Record<string, any>,
+    install: PluginFunction<any>,
+    MultiPlayer: MultiPlayer,
+}
+
+export default API;