feat: airplay

shiyiya · Mar 28, 2024 · 8825e10 · 8825e10
1 parent 270e87b
commit 8825e10
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -23,16 +23,19 @@
 - **Preview thumbnails** - support for displaying preview thumbnails (spirit or [vtt](https://oplayer.vercel.app/plugins/vtt-thumbnails))
 - **No frameworks** - written in "vanilla" JavaScript, no dependencies required
 - **[Chromecast](https://oplayer.vercel.app/plugins/chromecast)** - cast video to your device
+- **[AirPlay](./packages/plugins/)** - cast video to apple device
 - **[Playlist](https://oplayer.vercel.app/plugins/playlist)** - supports playlist list ui
 - **[Danmaku](./packages/danmaku/)** - biu biu biu ~
 - **... and much more!**
 
 ## Who use OPlayer?
 
 - **Feel free to submit yours in [Let me know!](https://github.com/shiyiya/oplayer/discussions/116)**
-- [UPV](https://onime.netlify.app) : free anime no ad.
-- [Animex](https://www.animex.live/) : Watch Anime for free in HD quality with English subbed or dubbed.
-- ~~[NGEWIBU.TV](https://ngewibu.tv/) : Nonton Anime Sub Indo | Nonton Anime Subtitle Indonesia Gratis~~
+- [UPV](https://onime.netlify.app) - free anime no ad.
+- [Binged](https://binge.lol) - Binged - Watch Movies & TV Shows Free Without Ads
+- [Animex](https://www.animex.live/) - Watch Anime for free in HD quality with English subbed or dubbed.
+- [NUSANIME](https://play.google.com/store/apps/details?id=com.nusanime.app) - Nonton Anime Sub Indo | Nonton Anime Subtitle Indonesia Gratis
+- ~~[NGEWIBU.TV](https://ngewibu.tv/) - Nonton Anime Sub Indo | Nonton Anime Subtitle Indonesia Gratis~~
 
 ## Support
 

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "nx": "^18.1.3",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "terser": "^5.29.2",
+    "terser": "^5.30.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.3",
     "vite": "^5.2.6",

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -26,7 +26,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.70",
+    "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "sass": "^1.72.0"
   }

diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## UnRelease
 
+## 1.0.12-beta.2
+
+- airplay support
+
 ## 1.0.12-beta.0
 
 - chromecast: refactor

diff --git a/packages/plugins/README.md b/packages/plugins/README.md
@@ -5,7 +5,7 @@ npm i @oplayer/plugins
 ```
 
 ```js
-import { PlaylistPlugin, Chromecast, ad, vttThumbnails } from '@oplayer/plugins'
+import { PlaylistPlugin, Chromecast, AirPlay, ad, vttThumbnails } from '@oplayer/plugins'
 ```
 
 ```html
@@ -21,6 +21,9 @@ import { PlaylistPlugin, Chromecast, ad, vttThumbnails } from '@oplayer/plugins'
 <!-- Chromecast -->
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js"></script>
 
+<!-- AirPlay -->
+<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/airplay.min.js"></script>
+
 <!-- AD -->
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/ad.min.js"></script>
 ```
@@ -98,4 +101,10 @@ Player.make('#oplayer')
 Player.make('#oplayer').use([new Chromecast()]).create()
 ```
 
+### AirPlay
+
+```js
+Player.make('#oplayer').use([new AirPlay()]).create()
+```
+
 ### AD
diff --git a/packages/plugins/index.ts b/packages/plugins/index.ts
@@ -1,6 +1,7 @@
 import Chromecast from './src/chromecast'
+import AirPlay from './src/airplay'
 import vttThumbnails from './src/vttThumbnails'
 import PlaylistPlugin from './src/playlist'
 import ad from './src/ad'
 
-export { Chromecast, vttThumbnails, ad, PlaylistPlugin }
+export { Chromecast, AirPlay, vttThumbnails, ad, PlaylistPlugin }
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.12-beta.1",
+  "version": "1.0.12-beta.2",
   "author": "shiyiya",
   "description": "oplayer's plugin",
   "homepage": "https://github.com/shiyiya/oplayer",

diff --git a/packages/plugins/src/airplay.ts b/packages/plugins/src/airplay.ts
@@ -0,0 +1,58 @@
+import Player, { PlayerPlugin } from '@oplayer/core'
+
+const ICON = `<svg style="transform: scale(0.9)" viewBox="0 0 1024 1024"><path d="M662.186667 981.333333H361.813333c-17.194667 0-32.853333-9.386667-40.661333-23.552a50.176 50.176 0 0 1 0-47.104l150.186667-260.565333c7.808-14.08 23.466667-23.509333 40.661333-23.509333 17.194667 0 32.853333 9.386667 40.661333 23.552l150.186667 260.565333c7.850667 14.08 7.850667 32.938667 0 47.061333-7.808 14.122667-23.466667 23.552-40.661333 23.552z m-219.008-94.165333h137.642666L512 767.872l-68.821333 119.296z"></path><path d="M821.76 841.642667h-100.138667c-26.581333 0-46.933333-20.437333-46.933333-47.104 0-26.666667 20.352-47.104 46.933333-47.104h100.138667c37.546667 0 67.285333-29.824 67.285333-67.498667V204.373333c-1.578667-37.674667-31.317333-67.498667-67.285333-67.498666H203.818667c-37.546667 0-67.285333 29.866667-67.285334 67.498666v477.184c0 37.674667 29.738667 67.498667 67.285334 67.498667h100.096c26.624 0 46.933333 20.394667 46.933333 47.104 0 26.666667-20.309333 47.104-46.933333 47.104H203.818667A163.541333 163.541333 0 0 1 42.666667 679.893333V204.373333A161.194667 161.194667 0 0 1 203.818667 42.666667H821.76C909.354667 42.666667 981.333333 114.858667 981.333333 204.373333v477.141334c0 87.893333-71.978667 160.128-159.573333 160.128z"></path></svg>`
+
+class AirPlay implements PlayerPlugin {
+  public name = 'oplayer-plugin-airplay'
+  public version = __VERSION__
+
+  public player: Player
+
+  constructor() {}
+
+  apply(player: Player) {
+    if (!this.canPlay()) return
+
+    this.player = player
+
+    player.$video.addEventListener('webkitplaybacktargetavailabilitychanged', (e: any) => {
+      if (e.availability === 'available') {
+        this.registerUI()
+      } else {
+        this.unregisterUI()
+      }
+    })
+
+    return this
+  }
+
+  canPlay() {
+    return !!(globalThis as any).WebKitPlaybackTargetAvailabilityEvent
+  }
+
+  async start() {
+    const $media: any = this.player.$video
+    if ($media.webkitShowPlaybackTargetPicker) {
+      $media.webkitShowPlaybackTargetPicker()
+    }
+  }
+
+  registerUI() {
+    if (!this.player.context.ui) return
+
+    const { menu, icons } = this.player.context.ui
+
+    menu?.register({
+      name: 'AirPlay',
+      position: 'top',
+      icon: icons.airplay || ICON,
+      onClick: () => this.start()
+    })
+  }
+
+  unregisterUI() {
+    this.player.context.ui?.menu?.unregister('AirPlay')
+  }
+}
+
+export default AirPlay
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@oplayer/core": "workspace:*",
-    "@types/react": "^18.2.70",
+    "@types/react": "^18.2.73",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

diff --git a/packages/ui/src/functions/icons.ts b/packages/ui/src/functions/icons.ts
@@ -33,6 +33,7 @@ export const ICONS_MAP = {
   lang: langSvg,
   // plugins
   chromecast: null,
+  airplay: null,
   danmaku: null,
   playlist: null,
   previous: null,

diff --git a/packages/ui/src/index.core.ts b/packages/ui/src/index.core.ts
@@ -9,7 +9,8 @@ import {
   EVENTS,
   OH_EVENTS,
   PLAYER_EVENTS,
-  VIDEO_EVENTS
+  VIDEO_EVENTS,
+  loadSDK
 } from '@oplayer/core'
 
 import ui from './index'
@@ -31,7 +32,8 @@ export default Object.assign(
     isiPad,
     isiPhone,
     isIOS,
-    isQQBrowser
+    isQQBrowser,
+    loadSDK
   },
   {
     ui: ui