diff --git a/packages/artplayer-template/react.js/.gitignore b/packages/artplayer-template/react.js/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/packages/artplayer-template/react.js/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/artplayer-template/react.js/README.md b/packages/artplayer-template/react.js/README.md new file mode 100644 index 000000000..7059a962a --- /dev/null +++ b/packages/artplayer-template/react.js/README.md @@ -0,0 +1,12 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. diff --git a/packages/artplayer-template/react.js/eslint.config.js b/packages/artplayer-template/react.js/eslint.config.js new file mode 100644 index 000000000..cee1e2c78 --- /dev/null +++ b/packages/artplayer-template/react.js/eslint.config.js @@ -0,0 +1,29 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + rules: { + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + }, + }, +]) diff --git a/packages/artplayer-template/react.js/index.html b/packages/artplayer-template/react.js/index.html new file mode 100644 index 000000000..3903a6b24 --- /dev/null +++ b/packages/artplayer-template/react.js/index.html @@ -0,0 +1,13 @@ + + + + + + + artplayer-react + + +
+ + + diff --git a/packages/artplayer-template/react.js/package.json b/packages/artplayer-template/react.js/package.json new file mode 100644 index 000000000..370aa26d9 --- /dev/null +++ b/packages/artplayer-template/react.js/package.json @@ -0,0 +1,27 @@ +{ + "name": "artplayer-react", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "react": "^19.1.1", + "react-dom": "^19.1.1" + }, + "devDependencies": { + "@eslint/js": "^9.33.0", + "@types/react": "^19.1.10", + "@types/react-dom": "^19.1.7", + "@vitejs/plugin-react": "^5.0.0", + "eslint": "^9.33.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.20", + "globals": "^16.3.0", + "vite": "^7.1.2" + } +} diff --git a/packages/artplayer-template/react.js/public/vite.svg b/packages/artplayer-template/react.js/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/packages/artplayer-template/react.js/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/artplayer-template/react.js/src/App.jsx b/packages/artplayer-template/react.js/src/App.jsx new file mode 100644 index 000000000..cc4e1843b --- /dev/null +++ b/packages/artplayer-template/react.js/src/App.jsx @@ -0,0 +1,22 @@ +import Artplayer from './ArtPlayer.jsx' + +function App() { + return ( +
+ console.info(art)} + /> +
+ ) +} + +export default App \ No newline at end of file diff --git a/packages/artplayer-template/react.js/src/Artplayer.jsx b/packages/artplayer-template/react.js/src/Artplayer.jsx new file mode 100644 index 000000000..49d0567b3 --- /dev/null +++ b/packages/artplayer-template/react.js/src/Artplayer.jsx @@ -0,0 +1,37 @@ +import Artplayer from 'artplayer' +import { useEffect, useRef } from 'react' + +// test i18n +import fr from 'artplayer/i18n/fr' +import id from 'artplayer/i18n/id' + +// test plugins +import artplayerPluginDanmuku from '../../../artplayer-plugin-danmuku' +import artplayerPluginDocumentPip from '../../../artplayer-plugin-document-pip' + +export default function Player({ option, getInstance, ...rest }) { + const $container = useRef() + + useEffect(() => { + const art = new Artplayer({ + ...option, + container: $container.current, + i18n: { id, fr }, + lang: 'fr', + plugins: [ + artplayerPluginDocumentPip(), + artplayerPluginDanmuku({ + danmuku: 'https://artplayer.org/assets/sample/danmuku.xml', + }), + ], + }) + + if (typeof getInstance === 'function') { + getInstance(art) + } + + return () => art.destroy(false) + }, [option, getInstance]) + + return
+} \ No newline at end of file diff --git a/packages/artplayer-template/react.js/src/main.jsx b/packages/artplayer-template/react.js/src/main.jsx new file mode 100644 index 000000000..3d9da8acd --- /dev/null +++ b/packages/artplayer-template/react.js/src/main.jsx @@ -0,0 +1,9 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/packages/artplayer-template/react.js/vite.config.js b/packages/artplayer-template/react.js/vite.config.js new file mode 100644 index 000000000..8b0f57b91 --- /dev/null +++ b/packages/artplayer-template/react.js/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/packages/artplayer-template/vue.js/index.html b/packages/artplayer-template/vue.js/index.html index 0948ecfd0..fa489296e 100644 --- a/packages/artplayer-template/vue.js/index.html +++ b/packages/artplayer-template/vue.js/index.html @@ -4,7 +4,7 @@ - Artplayer Vite App + artplayer-vue
diff --git a/packages/artplayer-template/vue.js/package.json b/packages/artplayer-template/vue.js/package.json index 3de866254..dcd163adc 100644 --- a/packages/artplayer-template/vue.js/package.json +++ b/packages/artplayer-template/vue.js/package.json @@ -1,5 +1,5 @@ { - "name": "vue-project", + "name": "artplayer-vue", "type": "module", "version": "0.0.0", "private": true,