@oplayer/shaka (#158)

Closed #157

Author: shiyiya

examples/standalone/main.ts

@@ -6,6 +6,7 @@ import dash from '@oplayer/dash'
 import hls from '@oplayer/hls'
 import mpegts from '@oplayer/mpegts'
 import ui from '@oplayer/ui'
+import shaka from '@oplayer/shaka'
 import torrent from '@oplayer/torrent'
 import { Playlist, Chromecast } from '@oplayer/plugins'
 
@@ -165,6 +166,9 @@ const init = () => {
       hls({ forceHLS: true }),
       dash(),
       mpegts(),
+      shaka({
+        library: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/shaka-player.compiled.debug.js'
+      }),
       new Danmaku({
         enable: true
         // displaySender: true,
@@ -174,12 +178,9 @@ const init = () => {
         initialIndex: 0,
         sources: [
           {
-            title: 'DASH DRM',
-            id: 'dash-drm'
-          },
-          {
-            title: 'Hls DRM',
-            id: 'hls-drm'
+            title: 'shaka mdp',
+            format: 'shaka',
+            src: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'
           },
           {
             title: 'hls - muti quality & subtitle & audio',
@@ -261,6 +262,14 @@ const init = () => {
             src: 'https://webtorrent.io/torrents/sintel.torrent',
             // 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
             poster: 'https://api.imlazy.ink/img?webtorrent'
+          },
+          {
+            title: 'DASH DRM',
+            id: 'dash-drm'
+          },
+          {
+            title: 'Hls DRM',
+            id: 'hls-drm'
           }
         ],
         customFetcher(player, source) {

examples/standalone/package-lock.json

@@ -20,8 +20,10 @@
     "@oplayer/plugins": "file:../../packages/plugins",
     "@oplayer/torrent": "file:../../packages/torrent",
     "@oplayer/ui": "file:../../packages/ui",
+    "@oplayer/shaka": "file:../../packages/shaka",
     "dashjs": "^4.6.0",
     "hls.js": "^1.5.15",
-    "lit": "^2.8.0"
+    "lit": "^2.8.0",
+    "shaka-player": "^4.14.1"
   }
 }

examples/standalone/package.json

@@ -32,7 +32,7 @@
     "lint": "prettier -w ./packages/*/**/*.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
+    "@babel/core": "^7.26.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-destructuring": "^7.25.9",
     "@babel/plugin-transform-logical-assignment-operators": "^7.25.9",
@@ -41,21 +41,21 @@
     "@babel/plugin-transform-parameters": "^7.25.9",
     "@babel/plugin-transform-spread": "^7.25.9",
     "@babel/plugin-transform-template-literals": "^7.26.8",
-    "@changesets/cli": "^2.28.0",
+    "@changesets/cli": "^2.28.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@types/node": "^20.17.19",
+    "@types/node": "^20.17.24",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "jsdom": "^24.1.3",
-    "lint-staged": "^15.4.3",
+    "lint-staged": "^15.5.0",
     "nx": "^19.8.14",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
     "rimraf": "^5.0.10",
     "terser": "^5.39.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "vite": "^5.4.14",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-merge-exports": "^0.0.0",

package.json

@@ -16,18 +16,20 @@
     "@oplayer/mpegts": "workspace:*",
     "@oplayer/plugins": "workspace:*",
     "@oplayer/react": "workspace:*",
+    "@oplayer/shaka": "workspace:*",
     "@oplayer/torrent": "workspace:*",
     "@oplayer/ui": "workspace:*",
     "mdx-embed": "^1.1.2",
     "next": "^14.2.24",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "shaka-player": "^4.14.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "sass": "^1.85.0"
+    "sass": "^1.85.1"
   }
 }

packages/docs/package.json

@@ -3,6 +3,7 @@ import Player, { PlayerPlugin } from '@oplayer/core'
 import ui from '@oplayer/ui'
 import hls from '@oplayer/hls'
 import dash from '@oplayer/dash'
+import shaka from '@oplayer/shaka'
 import mpegts from '@oplayer/mpegts'
 import style from './player.module.scss'
 import { Chromecast } from '@oplayer/plugins'
@@ -46,6 +47,7 @@ export default () => {
             }
           ]
         }),
+        shaka(),
         hls({ forceHLS: true }),
         dash(),
         mpegts(),

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

@@ -0,0 +1,36 @@
+# oplayer-plugin-shaka
+
+[![npm](https://img.shields.io/npm/v/@oplayer/shaka?style=flat-square&label=@oplayer/shaka)](https://www.npmjs.com/package/@oplayer/shaka)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/shaka?style=flat-square)
+[![npm dm](https://img.shields.io/npm/dm/@oplayer/shaka?style=flat-square)](https://www.npmjs.com/package/@oplayer/shaka)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/shaka/badge)](https://www.jsdelivr.com/package/npm/@oplayer/shaka)
+
+[shaka-player](https://github.com/shaka-project/shaka-player) plugin for oplayer
+
+## Install
+
+```bash
+npm i @oplayer/hls shaka-player
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@oplayer/shaka@latest/dist/index.min.js"></script>
+
+<div id="oplayer" />
+
+<script>
+  OPlayer.make('#oplayer', {
+    source: {
+      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
+    }
+  })
+    .use([
+      OShaka({
+        library: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/shaka-player.compiled.min.js'
+      })
+    ])
+    .create()
+</script>
+```

packages/shaka/README.md

@@ -0,0 +1,40 @@
+{
+  "name": "@oplayer/shaka",
+  "version": "1.2.26-beta.0",
+  "description": "shaka-player plugin for oplayer",
+  "type": "module",
+  "main": "./dist/index.es.js",
+  "types": "./dist/src/index.d.ts",
+  "sideEffects": false,
+  "author": "shiyiya",
+  "homepage": "https://github.com/shiyiya/oplayer",
+  "keywords": [
+    "oplayer-plugin",
+    "shaka-player"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
+    "tsc": "tsc --noEmit && echo",
+    "build": "vite build && tsc --emitDeclarationOnly"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not op_mini all",
+    "IE 11"
+  ],
+  "peerDependencies": {
+    "@oplayer/core": ">=1.0.0",
+    "shaka-player": "^3"
+  },
+  "devDependencies": {
+    "@oplayer/core": "workspace:*",
+    "shaka-player": "^4.14.1"
+  }
+}