feat(desktop): 添加视频播放页

.npmrc

@@ -1,4 +1,9 @@
 ignore-workspace-root-check=true
-shamefully-hoist=true
 strict-peer-dependencies=false
 auto-install-peers=true
+
+# https://github.com/electron-userland/electron-builder
+node-linker=hoisted
+public-hoist-pattern=*
+shamefully-hoist=true
+

packages/shared/src/api.ts

@@ -135,7 +135,8 @@ export async function content({ filePath, chapterPath, ruleId }: any) {
     let text = ''
     if (rule.contentType === ContentType.MANGA)
       text = content.map(src => `<img src="${src}"/>`).join('')
-
+    if (rule.contentType === ContentType.VIDEO)
+      text = content?.[0] || ''
     else
       text = content.join('')
 

packages/web/.gitignore

@@ -29,5 +29,3 @@ coverage
 
 /auto-imports.d.ts
 /.eslintrc-auto-import.json
-
-/dist-electron

packages/web/electron-builder.json5

@@ -0,0 +1,37 @@
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
+ {
+  "appId": "any-reader",
+  "productName": "AnyReader",
+  "artifactName": "AnyReader_${version}.${ext}",
+  "asar": false,
+  "directories": {
+    "output": "dist/electron/${version}"
+  },
+  "files": [
+    "dist"
+  ],
+  "mac": {
+    "target": [
+      "dmg"
+    ]
+  },
+  "win": {
+    // "icon": "public/icon.png",
+    "target": [
+      {
+        "target": "nsis",
+        "arch": [
+          "x64"
+        ]
+      }
+    ]
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": false,
+    "allowToChangeInstallationDirectory": true,
+    "deleteAppDataOnUninstall": false
+  }
+}

packages/web/electron/api.ts

@@ -24,7 +24,7 @@ export function createAPI() {
   pm.answer('get@getRuleById', ({ id = '' } = {}) => success(api.getRuleById(id)));
   pm.answer('post@createRule', async (data: any) => success(await api.createRule(data)));
   pm.answer('post@updateRule', async (data: any) => success(await api.updateRule(data)));
-  pm.answer('post@searchByRuleId', async (data: any) => success(await api.searchByRuleId(data)));
+  pm.answer('post@searchByRuleId', async (data: any) => success(await api.searchByRuleId(data).catch(() => [])));
   pm.answer('post@content', async (data: any) => success(await api.content(data)));
   pm.answer('post@getChapter', async (data: any) => success(await api.getChapter(data)));
 }

packages/web/electron/main.ts

@@ -20,7 +20,7 @@ app.whenReady().then(async () => {
     win.webContents.openDevTools();
   } else {
     // Load your file
-    win.loadFile('dist/index.html');
+    win.loadFile('dist/electron-template/index.html');
   }
   Menu.setApplicationMenu(null);
 });

packages/web/package.json

@@ -14,9 +14,13 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "electron:dev": "cross-env VITE_APP_PLATFORM=electron vite",
-    "vscode:dev": "cross-env VITE_APP_PLATFORM=vscode vite"
+    "electron:build-tpl": "cross-env VITE_APP_PLATFORM=electron run-p type-check \"build-only {@}\" --",
+    "electron:build-app": "electron-builder",
+    "electron:build": "npm-run-all electron:build-tpl electron:build-app",
+    "vscode:dev": "cross-env VITE_APP_PLATFORM=vscode vite",
+    "postinstall": "electron-builder install-app-deps"
   },
-  "main": "dist-electron/main.js",
+  "main": "dist/electron-js/main.js",
   "dependencies": {
     "@any-reader/core": "workspace:^",
     "@any-reader/shared": "workspace:^",
@@ -52,6 +56,7 @@
     "chalk": "^5.2.0",
     "cross-env": "^7.0.3",
     "electron": "^30.0.6",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "mockjs": "^1.1.0",

packages/web/src/pages/pc/chapter/index.vue

@@ -12,12 +12,15 @@
 </template>
 
 <script setup>
-import { getChapter } from '@/api';
+import { getChapter, getContent } from '@/api';
+import { useRulesStore } from '@/stores/rules';
 
 const route = useRoute();
 const router = useRouter();
+const rulesStore = useRulesStore();
 
 const list = ref([]);
+rulesStore.sync();
 
 async function init() {
   list.value = [];
@@ -31,8 +34,27 @@ async function init() {
 
 init();
 
-function showContent(item) {
+async function showContent(item) {
   const { filePath, ruleId } = route.query;
+  const rule = rulesStore.list.find((e) => e.id === ruleId);
+  if (rule?.contentType === 2) {
+    const res = await getContent({
+      filePath,
+      ruleId,
+      chapterPath: item.url || item.path
+    }).catch(() => {});
+    console.log('getContent', res);
+    if (res?.code === 0) {
+      router.push({
+        path: '/pc/player',
+        query: {
+          url: res?.data?.content || ''
+        }
+      });
+      return;
+    }
+  }
+
   router.push({
     path: '/pc/content',
     query: {

packages/web/src/pages/pc/player/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="contentRef" class="w-full h-full"></div>
+</template>
+
+<script setup>
+import Hls from 'hls.js';
+import DPlayer from 'dplayer';
+
+const route = useRoute();
+
+const contentRef = ref();
+
+onMounted(async () => {
+  new DPlayer({
+    container: contentRef.value,
+    video: {
+      url: route.query.url,
+      type: 'customHls',
+      customType: {
+        customHls: function (video) {
+          const hls = new Hls();
+          hls.loadSource(video.src);
+          hls.attachMedia(video);
+        }
+      }
+    }
+  });
+});
+
+watch(
+  () => route.query,
+  () => {
+    location.reload();
+  }
+);
+</script>

packages/web/src/router/router.ts

@@ -29,6 +29,10 @@ const router = createRouter({
           path: 'rules',
           component: () => import('@/pages/pc/rules/index.vue')
         },
+        {
+          path: 'player',
+          component: () => import('@/pages/pc/player/index.vue')
+        },
         {
           path: 'chapter',
           component: () => import('@/pages/pc/chapter/index.vue')

packages/web/vite.config.ts

@@ -5,6 +5,14 @@ import createPlugins from './vite/plugins';
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  let outDir = 'dist/web';
+  if (env.VITE_APP_PLATFORM === 'browser') {
+    outDir = '../server/public';
+  } else if (env.VITE_APP_PLATFORM === 'vscode') {
+    outDir = '../vscode/template-dist';
+  } else if (env.VITE_APP_PLATFORM === 'electron') {
+    outDir = 'dist/electron-template';
+  }
 
   return {
     plugins: createPlugins(env),
@@ -13,7 +21,7 @@ export default defineConfig(({ mode }) => {
       port: 8899
     },
     build: {
-      outDir: env.VITE_APP_PLATFORM === 'browser' ? '../server/public' : '../vscode/template-dist'
+      outDir
     },
     resolve: {
       alias: {

packages/web/vite/plugins/electron.ts

@@ -5,10 +5,10 @@ export default () =>
     entry: 'electron/main.ts',
     vite: {
       build: {
-        outDir: 'dist-electron'
-        // rollupOptions: {
-        //   external: ['sqlite3']
-        // }
+        outDir: 'dist/electron-js',
+        rollupOptions: {
+          external: []
+        }
       }
     }
   });