refactor chromecast (#121)

* refactor chromecast

.github/workflows/compressed-size.yml

@@ -22,6 +22,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
       - name: Install pnpm
         uses: pnpm/[email protected]
         with:
@@ -32,6 +37,7 @@ jobs:
         id: pnpm-cache
         run: |
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
@@ -44,4 +50,4 @@ jobs:
         with:
           build-script: 'build:packs'
           repo-token: '${{ secrets.GIT_HUB_TOKEN }}'
-          pattern: './packages/*/{dist,compiled}/**/*.{js,d.ts}'
+          pattern: './packages/*/{dist,compiled}/**/*.{js}'

examples/standalone/main.ts

@@ -8,7 +8,7 @@ import hls from '@oplayer/hls'
 import mpegts from '@oplayer/mpegts'
 import ui from '@oplayer/ui'
 import torrent from '@oplayer/torrent'
-import { PlaylistPlugin } from '@oplayer/plugins'
+import { PlaylistPlugin, Chromecast } from '@oplayer/plugins'
 
 import DANMAKU from '../../packages/docs/public/danmaku.xml'
 import POSTER from '../../packages/docs/public/poster.png'
@@ -194,7 +194,8 @@ const player = Player.make<Ctx>('#player', {
       //     }
       //   }
       // },
-    })
+    }),
+    new Chromecast()
   ])
   .create()
 

package.json

@@ -51,13 +51,13 @@
     "cross-env": "^7.0.3",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
-    "nx": "^18.1.2",
+    "nx": "^18.1.3",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "terser": "^5.29.2",
     "tslib": "^2.6.2",
     "typescript": "^5.4.3",
-    "vite": "^5.2.3",
+    "vite": "^5.2.6",
     "vite-plugin-banner": "^0.7.1",
     "vitest": "^1.4.0"
   },

packages/docs/package.json

@@ -26,7 +26,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.69",
+    "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.22",
     "sass": "^1.72.0"
   }

packages/docs/public/ohls.html

@@ -217,7 +217,8 @@
     <script>
       var hlsScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js'
       var danmakuScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/danmaku@latest/dist/index.min.js'
-      var playlistScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js'
+      var playlistScriptCdn =
+        'https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/playlist.min.js'
       var chromecastScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js'
 
       var query = document.location.search.substring(1)
@@ -264,7 +265,11 @@
       }
 
       var player = OPlayer.make('#oplayer', {
-        source: { src: !playlist.length ? src : undefined, poster, title: title || 'Free HTML5 Player' },
+        source: {
+          src: /m3u8(#|\?|$)/.test(src) || /.mpd(#|\?|$)/i.test(src) ? undefined : src,
+          poster,
+          title: title || 'Free HTML5 Player'
+        },
         playbackRate: localStorage.getItem('@oplayer/UserPreferences/speed') || 1,
         volume: localStorage.getItem('@oplayer/UserPreferences/volume') || 1
       })
@@ -326,7 +331,7 @@
         [
           chromecastScriptCdn,
           () => {
-            player.applyPlugin(OChromecast)
+            player.applyPlugin(new OChromecast())
           }
         ]
       ]
@@ -372,6 +377,8 @@
       })
 
       function bootstrap() {
+        if (!player.options.source.src && src) player.changeSource({ src, poster })
+
         if (danmaku) {
           loadScripts([danmakuScriptCdn]).then((p) => {
             player.applyPlugin(ODanmaku({ source: danmaku }))

packages/docs/src/pages/components/player.tsx

@@ -5,6 +5,7 @@ import hls from '@oplayer/hls'
 import dash from '@oplayer/dash'
 import mpegts from '@oplayer/mpegts'
 import style from './player.module.scss'
+import { Chromecast } from '@oplayer/plugins'
 
 const userPreferencesPlugin: PlayerPlugin = {
   name: 'userPreferencesPlugin',
@@ -48,7 +49,8 @@ export default () => {
         hls({ forceHLS: true }),
         dash(),
         mpegts(),
-        userPreferencesPlugin
+        userPreferencesPlugin,
+        new Chromecast()
       ])
       .create()
       .on(console.log)
@@ -87,8 +89,8 @@ export default () => {
         </button>
       </div>
       <p className="tips">
-        Your streaming URL must be HTTPS-compatible, otherwise your stream may not play. Make sure
-        CORS is enabled on streaming server when using HLS and MPEG-DASH streams.
+        Your streaming URL must be HTTPS-compatible, otherwise your stream may not play. Make sure CORS is
+        enabled on streaming server when using HLS and MPEG-DASH streams.
       </p>
       <div
         id="oplayer"

packages/docs/src/pages/plugins/chromecast.mdx

@@ -5,16 +5,15 @@ npm i @oplayer/plugins
 ```
 
 ```js
-import { chromecast } from '@oplayer/plugins'
+import { Chromecast } from '@oplayer/plugins'
+
+Player.make('#oplayer').use([new Chromecast()]).create()
 ```
 
 ```html
-<!-- Chromecast -->
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js"></script>
-```
 
-### Chromecast
-
-```js
-Player.make('#oplayer').use([chromecast]).create()
+<script>
+  Player.make('#oplayer').use([new OChromecast()]).create()
+</script>
 ```

packages/docs/src/pages/preview.mdx

@@ -6,7 +6,7 @@ import dash from '@oplayer/dash'
 import mpegts from '@oplayer/mpegts'
 import ui from '@oplayer/ui'
 import danmaku from '@oplayer/danmaku'
-import { PlaylistPlugin, chromecast } from '@oplayer/plugins'
+import { PlaylistPlugin, Chromecast } from '@oplayer/plugins'
 
 <div className="nx-rounded-sm nx-overflow-hidden" style={{ maxWidth: '1024px', margin: '1.25rem auto' }}>
   <Player
@@ -25,7 +25,7 @@ import { PlaylistPlugin, chromecast } from '@oplayer/plugins'
             name: '❤',
             position: 'top',
             onClick() {
-              alert('你也喜欢我么？')
+              alert('miss u')
             }
           },
           {
@@ -49,7 +49,7 @@ import { PlaylistPlugin, chromecast } from '@oplayer/plugins'
               alert(`${value}`)
             }
           },
-        ].filter(Boolean)
+        ]
       }),
       hls({ forceHLS: true }),
       dash(),
@@ -68,6 +68,7 @@ import { PlaylistPlugin, chromecast } from '@oplayer/plugins'
               src: '/thumbnails.jpg',
               number: 100
             },
+            danmaku: '/danmaku.xml',
             subtitles: [
               {
                 name: 'Japanese',
@@ -117,7 +118,7 @@ import { PlaylistPlugin, chromecast } from '@oplayer/plugins'
           }
         ]
       }),
-      chromecast
+      new Chromecast()
     ].filter((it) => it?.apply)}
 
 />

packages/plugins/CHANGELOG.md

@@ -2,13 +2,17 @@
 
 ## UnRelease
 
+## 1.0.12-beta.0
+
+- chromecast: refactor
+
 ## 1.0.11
 
-- support danmaku
+- playlist: support danmaku
 
 ## 1.0.11-alpha.1
 
-- add error fallback for poster
+- playlist: add error fallback for poster
 
 ## 1.0.10-beta.3
 

packages/plugins/README.md

@@ -5,7 +5,7 @@ npm i @oplayer/plugins
 ```
 
 ```js
-import { PlaylistPlugin, vttThumbnails, chromecast, ad } from '@oplayer/plugins'
+import { PlaylistPlugin, Chromecast, ad, vttThumbnails } from '@oplayer/plugins'
 ```
 
 ```html
@@ -94,6 +94,8 @@ Player.make('#oplayer')
 
 ### Chromecast
 
-Player.make('#oplayer').use([chromecast]).create()
+```js
+Player.make('#oplayer').use([new Chromecast()]).create()
+```
 
 ### AD

packages/plugins/index.ts

@@ -1,7 +1,6 @@
-import chromecast from './src/chromecast'
+import Chromecast from './src/chromecast'
 import vttThumbnails from './src/vttThumbnails'
 import PlaylistPlugin from './src/playlist'
-import Hello from './src/hello'
 import ad from './src/ad'
 
-export { chromecast, vttThumbnails, ad, Hello, PlaylistPlugin }
+export { Chromecast, vttThumbnails, ad, PlaylistPlugin }

packages/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.11",
+  "version": "1.0.12-beta.0",
   "author": "shiyiya",
   "description": "oplayer's plugin",
   "homepage": "https://github.com/shiyiya/oplayer",