fix(ui): slider pointer events

fix(hls): sort quality
shiyiya · Sep 12, 2024 · 1759725 · 1759725
1 parent 15ee5f5
commit 1759725
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/packages/danmaku/src/index.ts b/packages/danmaku/src/index.ts
@@ -21,7 +21,7 @@ export default (options = {} as Options): PlayerPlugin => ({
     //@ts-ignore
     if (player.isNativeUI) return
 
-    const { speed = 144, opacity, engine = 'dom', displaySender, area = 0.8, fontSize } = options
+    const { speed = 144, opacity, engine = 'dom', displaySender, area = 1, fontSize } = options
 
     const $danmaku = $.render($.create('div'), player.$root)
     $danmaku.style.cssText = `font-weight: normal;position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;pointer-events: none;text-shadow: rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) -1px 0px 1px;color:#fff;`
@@ -37,7 +37,7 @@ export default (options = {} as Options): PlayerPlugin => ({
       media: player.$video,
       engine: engine,
       comments: [],
-      speed: isMobile ? speed / 1.5 : speed,
+      speed: isMobile ? speed / 1.5 : speed
     }) as any
 
     danmaku.setFontSize = function setFontSize(value: number) {
@@ -139,7 +139,7 @@ export default (options = {} as Options): PlayerPlugin => ({
               } else {
                 danmaku.hide()
               }
-            },
+            }
           },
           {
             name: player.locales.get('Heatmap'),
@@ -149,7 +149,7 @@ export default (options = {} as Options): PlayerPlugin => ({
             onChange: (value: Boolean) => {
               if (value) danmaku.heatmap?.enable()
               else danmaku.heatmap?.disable()
-            },
+            }
           },
           {
             type: 'selector',
@@ -158,12 +158,12 @@ export default (options = {} as Options): PlayerPlugin => ({
             children: [0.5, 0.75, 1, 1.25].map((it) => ({
               name: `${it * 100}%`,
               value: it,
-              default: it == 1,
+              default: it == 1
             })),
             onChange: ({ value }: any) => {
               options.fontSize = value
               danmaku.setFontSize(value)
-            },
+            }
           },
           {
             type: 'selector',
@@ -172,11 +172,11 @@ export default (options = {} as Options): PlayerPlugin => ({
             children: [0.3, 0.5, 0.8, 1].map((it) => ({
               name: `${it * 100}%`,
               value: it,
-              default: it == (options?.opacity || 1),
+              default: it == (options?.opacity || 1)
             })),
             onChange: ({ value }: any) => {
               $danmaku.style.opacity = value
-            },
+            }
           },
           {
             type: 'selector',
@@ -185,15 +185,15 @@ export default (options = {} as Options): PlayerPlugin => ({
             children: [25, 50, 80, 100].map((it) => ({
               name: `${it}%`,
               value: it,
-              default: it == area * 100,
+              default: it == area * 100
             })),
             onChange: ({ value }: any) => {
               options.opacity = value
               $danmaku.style.height = `${value}%`
               danmaku.resize()
-            },
-          },
-        ],
+            }
+          }
+        ]
       })
     }
 
@@ -202,5 +202,5 @@ export default (options = {} as Options): PlayerPlugin => ({
     if (displaySender && !isMobile) registerInput(player, danmaku, options)
 
     return danmaku
-  },
+  }
 })
diff --git a/packages/hls/package.json b/packages/hls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/hls",
-  "version": "1.2.27-beta.3",
+  "version": "1.2.27-beta.4",
   "description": "Hls plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/hls/src/index.ts b/packages/hls/src/index.ts
@@ -212,7 +212,7 @@ const generateSetting = (player: Player, instance: Hls, options: HlsPlugin['opti
         name: 'Quality',
         settings() {
           return instance.levels
-            .toSorted((a, b) => b.bitrate - a.bitrate)
+            .sort((a, b) => b.bitrate - a.bitrate)
             .reduce(
               (pre, level, id) => {
                 let name = (level.name || level.height).toString()

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.3.3-beta.9",
+  "version": "1.3.3-beta.10",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/ui/src/components/Setting.style.ts b/packages/ui/src/components/Setting.style.ts
@@ -102,7 +102,7 @@ export const settingItemCls = $.css({
   display: 'flex',
   overflow: 'hidden',
 
-  '& > *': { 'pointer-events': 'none' },
+  '&:not([aria-label=slider]) > *': { 'pointer-events': 'none' },
 
   '&:hover': {
     'background-color': 'rgba(255, 255, 255, 0.1)'

diff --git a/packages/ui/src/components/Setting.ts b/packages/ui/src/components/Setting.ts
@@ -115,7 +115,8 @@ function createRow({
   let $item: HTMLElement = $.create(`div.${settingItemCls}`, {
     'data-key': key,
     role: type == 'option' ? 'menuitemradio' : 'menuitem',
-    'aria-haspopup': type == 'selector'
+    'aria-haspopup': hasChildren ? 'menu' : false,
+    'aria-label': type || 'menuitem'
   })
   const res = {
     $row: $item,