diff --git a/README.md b/README.md index 23acf52..6a94f4b 100644 --- a/README.md +++ b/README.md @@ -151,9 +151,11 @@ Features that have been ticked are the latest in the development process but may | Link | [Download](https://github.com/027xiguapi/pear-rec/releases) | [Download](https://github.com/027xiguapi/pear-rec/releases) | [Download](https://github.com/027xiguapi/pear-rec/releases) | -## 🖖 Vue - -Screenshot implemented by community personnel based on `vue` 👉 [electron-screenshort](https://github.com/yejimeiming/electron-screenshort). +## 💐 Acknowledgements +- A screenshot plugin for electron and react. [react-screenshots](https://github.com/nashaofu/screenshots) +- Process audio/video data in the browser using WebCodecs. [WebAV](https://github.com/hughfenghen/WebAV) +- JavaScript GIF encoding library. [gif.js](https://github.com/jnordberg/gif.js) +- Screenshot implemented by community personnel based on `vue`. [electron-screenshort](https://github.com/yejimeiming/electron-screenshort). ## 👨‍👨‍👦‍👦 Feedback diff --git a/packages/web/package.json b/packages/web/package.json index 2b106b0..741c56a 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -22,9 +22,9 @@ "@pear-rec/recorder": "workspace:^", "@pear-rec/screenshot": "workspace:^", "@pear-rec/timer": "workspace:^", - "@webav/av-canvas": "^0.8.0", - "@webav/av-cliper": "^0.8.0", - "@webav/av-recorder": "^0.8.0", + "@webav/av-canvas": "^0.10.0", + "@webav/av-cliper": "^0.10.0", + "@webav/av-recorder": "^0.10.0", "@xzdarcy/react-timeline-editor": "^0.1.9", "antd": "^5.16.1", "aplayer": "^1.10.1", diff --git a/packages/web/src/pages/editVideo/index.tsx b/packages/web/src/pages/editVideo/index.tsx index 1e39c1e..dd9a9b5 100644 --- a/packages/web/src/pages/editVideo/index.tsx +++ b/packages/web/src/pages/editVideo/index.tsx @@ -8,6 +8,8 @@ import { } from '@xzdarcy/react-timeline-editor'; import React, { useEffect, useRef, useState } from 'react'; import { assetsPrefix, createFileWriter } from './utils'; +import ininitApp from '@/pages/main.tsx'; +import Home from '@/pages/home'; type TLActionWithName = TimelineAction & { name: string }; @@ -91,6 +93,7 @@ const TimelineEditor = ({ onOffsetChange(action); }} onClickAction={(_, { action }) => { + // @ts-expect-error setActiveAction(action); }} getActionRender={(action: TLActionWithName) => { @@ -114,7 +117,7 @@ const actionSpriteMap = new WeakMap(); const clipsSrc = assetsPrefix(['video/bunny_0.mp4', 'audio/16kHz-1chan.mp3', 'img/bunny.png']); -export default function App() { +function EditVideo() { const [avCvs, setAVCvs] = useState(null); const tlState = useRef(); @@ -320,3 +323,7 @@ export default function App() { ); } + +ininitApp(EditVideo); + +export default EditVideo; diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts index 7409997..cd7c3df 100644 --- a/packages/web/vite.config.ts +++ b/packages/web/vite.config.ts @@ -1,8 +1,35 @@ import react from '@vitejs/plugin-react-swc'; -import { join, resolve } from 'path'; +import { readFile, writeFile } from 'fs/promises'; +import { join, resolve, dirname } from 'path'; import { visualizer } from 'rollup-plugin-visualizer'; import { defineConfig } from 'vite'; +import { fileURLToPath } from 'url'; import { VitePWA } from 'vite-plugin-pwa'; +import type { PluginOption } from 'vite'; + +function reactVirtualized(): PluginOption { + const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`; + + return { + name: 'my:react-virtualized', + async configResolved() { + const reactVirtualizedPath = dirname(fileURLToPath(import.meta.resolve('react-virtualized'))); + + const brokenFilePath = join( + reactVirtualizedPath, + '..', // back to dist + 'es', + 'WindowScroller', + 'utils', + 'onScroll.js', + ); + const brokenCode = await readFile(brokenFilePath, 'utf-8'); + + const fixedCode = brokenCode.replace(WRONG_CODE, ''); + await writeFile(brokenFilePath, fixedCode); + }, + }; +} // https://vitejs.dev/config/ const buildOptionsProject = { @@ -125,6 +152,7 @@ export default ({ mode }) => { ignoreURLParametersMatching: [/.*/], }, }), + reactVirtualized(), ], optimizeDeps: { exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],