feat(ui): add keyboard.

shiyiya · Mar 11, 2024 · 4bc77ba · 4bc77ba
1 parent 1ee86e4
commit 4bc77ba
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/packages/docs/public/ios_debug.html b/packages/docs/public/ios_debug.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Start streaming now using OPlayer - Free HTML5 Player</title>
+  </head>
+  <body style="margin: 0">
+    <div id="oplayer" style="width: 100vw; height: 100vh"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js"></script>
+    <script src=" https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
+
+    <script>
+      const search = new URLSearchParams(document.location.search)
+      const src = decodeURIComponent(search.get('src'))
+
+      var vConsole = new window.VConsole()
+
+      var player = OPlayer.make('#oplayer', {
+        source: {
+          src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
+          // poster: 'http://5b0988e595225.cdn.sohucs.com/images/20190420/da316f8038b242c4b34f6db18b0418d4.gif'
+        }
+      })
+        .use([OUI(), OHls({ forceHLS: search.get('fh') })])
+        .create()
+        .on(console.log)
+    </script>
+  </body>
+</html>
diff --git a/packages/docs/src/pages/ui.mdx b/packages/docs/src/pages/ui.mdx
@@ -266,5 +266,5 @@ const ui = OUI({
 ## Events
 
 ```ts
-type UIEventName = 'controllervisibilitychange' | 'backward' | 'previous' | 'next'
+type UIEventName = 'controlsshown' | 'controlshidden' | 'backward' | 'previous' | 'next'
 ```
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -2,8 +2,11 @@
 
 ## UnRelease
 
-- any px -> rem
-- ErrorBuilder custom params
+- any px -> rem.
+- ErrorBuilder custom params.
+- add keyboard.
+  - k: play | pause
+  - m: mute | unmute
 
 ## [1.2.35]
 

diff --git a/packages/ui/src/components/Controller.ts b/packages/ui/src/components/Controller.ts
@@ -35,7 +35,7 @@ const render = (it: UIInterface) => {
     }
     addClass(player.$root, controllerHidden)
     player.$root.setAttribute(DATA_CONTROLLER_HIDDEN, 'true')
-    player.emit('controllervisibilitychange', false)
+    player.emit('controlshidden', false)
   }
 
   const { callee: debounceHideCtrl, clear: cancelHideCtrl } = debounce(hideCtrl, CTRL_HIDE_DELAY)
@@ -45,7 +45,7 @@ const render = (it: UIInterface) => {
     if (hasClass(player.$root, controllerHidden)) {
       removeClass(player.$root, controllerHidden)
       player.$root.setAttribute(DATA_CONTROLLER_HIDDEN, 'false')
-      player.emit('controllervisibilitychange', true)
+      player.emit('controlsshown', true)
     }
   }
 

diff --git a/packages/ui/src/functions/keyboard.ts b/packages/ui/src/functions/keyboard.ts
@@ -42,6 +42,7 @@ const KEY_FN: Record<string, (player: Player) => void> = {
   },
 
   ' ': (player: Player) => player.togglePlay(),
+  k: (player: Player) => player.togglePlay(),
 
   Escape: (player: Player) => {
     if (player.isFullScreen) {
@@ -55,7 +56,9 @@ const KEY_FN: Record<string, (player: Player) => void> = {
 
   w: (player: Player) => player.emit('fullscreenchange', { isWeb: true }),
 
-  s: screenShot
+  s: screenShot,
+
+  m: (player: Player) => (player.isMuted ? player.unmute() : player.mute())
 }
 
 export default function (it: UIInterface) {