No commit message

shiyiya · Jul 28, 2024 · 6cd2420 · 6cd2420
1 parent c8a4508
commit 6cd2420
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 11 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -94,6 +94,30 @@ const player = Player.make<Ctx>('#player', {
           onChange(value) {
             player.context.ui.subtitle.changeOffset(value)
           }
+        },
+        {
+          icon: '<svg viewBox="0 0 1024 1024" version="1.1"><path d="M800 170.666667A138.666667 138.666667 0 0 1 938.666667 309.333333v405.546667a138.666667 138.666667 0 0 1-138.666667 138.666667H224A138.666667 138.666667 0 0 1 85.333333 714.88V309.333333a138.666667 138.666667 0 0 1 130.816-138.453333L224 170.666667h576z m0 64H224l-6.144 0.256A74.666667 74.666667 0 0 0 149.333333 309.333333v405.546667c0 41.216 33.450667 74.666667 74.666667 74.666667h576a74.666667 74.666667 0 0 0 74.666667-74.666667V309.333333a74.666667 74.666667 0 0 0-74.666667-74.666666zM234.666667 512c0-134.229333 115.754667-203.733333 218.538666-145.109333A32 32 0 0 1 421.461333 422.4C361.856 388.437333 298.666667 426.410667 298.666667 512c0 85.546667 63.317333 123.562667 122.88 89.728a32 32 0 0 1 31.573333 55.637333C350.549333 715.733333 234.666667 646.101333 234.666667 512z m320 0c0-134.229333 115.754667-203.733333 218.538666-145.109333a32 32 0 0 1-31.744 55.552C681.856 388.437333 618.666667 426.410667 618.666667 512c0 85.546667 63.317333 123.562667 122.88 89.728a32 32 0 0 1 31.573333 55.637333C670.549333 715.733333 554.666667 646.101333 554.666667 512z"></path></svg>',
+          name: `Power By OPlayer`,
+          onChange() {
+            alert('i love u')
+          }
+        },
+        {
+          icon: '<svg viewBox="0 0 1024 1024" version="1.1"><path d="M800 170.666667A138.666667 138.666667 0 0 1 938.666667 309.333333v405.546667a138.666667 138.666667 0 0 1-138.666667 138.666667H224A138.666667 138.666667 0 0 1 85.333333 714.88V309.333333a138.666667 138.666667 0 0 1 130.816-138.453333L224 170.666667h576z m0 64H224l-6.144 0.256A74.666667 74.666667 0 0 0 149.333333 309.333333v405.546667c0 41.216 33.450667 74.666667 74.666667 74.666667h576a74.666667 74.666667 0 0 0 74.666667-74.666667V309.333333a74.666667 74.666667 0 0 0-74.666667-74.666666zM234.666667 512c0-134.229333 115.754667-203.733333 218.538666-145.109333A32 32 0 0 1 421.461333 422.4C361.856 388.437333 298.666667 426.410667 298.666667 512c0 85.546667 63.317333 123.562667 122.88 89.728a32 32 0 0 1 31.573333 55.637333C350.549333 715.733333 234.666667 646.101333 234.666667 512z m320 0c0-134.229333 115.754667-203.733333 218.538666-145.109333a32 32 0 0 1-31.744 55.552C681.856 388.437333 618.666667 426.410667 618.666667 512c0 85.546667 63.317333 123.562667 122.88 89.728a32 32 0 0 1 31.573333 55.637333C670.549333 715.733333 554.666667 646.101333 554.666667 512z"></path></svg>',
+          name: `Power By OPlayer`,
+          onChange(value) {
+            alert('i love u' + value)
+          },
+          children: [
+            {
+              name: 'children 1',
+              value: '1'
+            },
+            {
+              name: 'children 2',
+              value: '2'
+            }
+          ]
         }
       ],
       pictureInPicture: true,

diff --git a/packages/ui/src/components/Setting.ts b/packages/ui/src/components/Setting.ts
@@ -66,6 +66,13 @@ const switcher = (name: string, icon: string = '') =>
   </div>
 `
 
+const normal = (name: string, icon: string = '') =>
+  `<div class="${settingItemLeft}">
+    ${icon}
+    <span>${name}</span>
+  </div>
+`
+
 export const slider = ({
   name,
   icon = '',
@@ -98,8 +105,13 @@ function createRow({
   index,
   max,
   min,
-  step
-}: Omit<Setting, 'onChange' | 'children' | 'value'> & { index?: number; switcherLabe?: string }) {
+  step,
+  hasChildren
+}: Omit<Setting, 'onChange' | 'children' | 'value'> & {
+  hasChildren?: boolean
+  index?: number
+  switcherLabe?: string
+}) {
   let $item: HTMLElement = $.create(`div.${settingItemCls}`, {
     'data-key': key,
     role: Boolean(type) ? 'menuitem' : 'menuitemradio',
@@ -125,13 +137,20 @@ function createRow({
     case 'slider':
       $item.innerHTML = slider({ name, max, min, icon, value: selected, step } as any)
       break
-    default: // select option 不用 type
+    case 'option':
       $item.innerHTML = selectorOption(name, icon)
       $item.setAttribute('aria-checked', selected || false)
       if (typeof index == 'number') {
         $item.setAttribute('data-index', index.toString())
       }
       break
+    default:
+      if (hasChildren) {
+        $item.innerHTML = nexter(name, icon)
+      } else {
+        $item.innerHTML = normal(name, icon)
+      }
+      break
   }
 
   return res
@@ -157,6 +176,7 @@ function createPanel(
     target: HTMLElement
     parent?: Panel
     isSelectorOptionsPanel?: boolean
+    parenOnChange?: Function
   } = {} as any
 ): Panel | void {
   if (!setting || setting.length == 0) return
@@ -166,7 +186,7 @@ function createPanel(
   let key: string = parentKey! || 'root'
 
   if (panels[0] && key == 'root') {
-    panel = panels[0]! // 将 options 挂在第一个面板
+    panel = panels[0]!
     key = panels[0]!.key
   } else {
     //创建新的选项面板
@@ -195,19 +215,32 @@ function createPanel(
   }
 
   for (let i = 0; i < setting.length; i++) {
-    const { name, type, key, children, icon, default: selected, onChange, max, min, step } = setting[i]!
+    const {
+      name,
+      type,
+      key,
+      children,
+      icon,
+      default: selected,
+      onChange,
+      max,
+      min,
+      step,
+      value
+    } = setting[i]!
 
     const { $row, $label } = createRow(
       Object.assign(
         {
           name,
-          type,
+          type: isSelectorOptionsPanel ? 'option' : type,
           key: key,
           icon,
           default: selected,
           max,
           min,
-          step
+          step,
+          hasChildren: Boolean(children)
         },
         !isRoot && isSelectorOptionsPanel && { index: i }
       )
@@ -217,14 +250,16 @@ function createPanel(
 
     //处理 selector，因为依赖label，所以需先创建子 panel
     if (children) {
-      const nextIsSelectorOptionsPanel = type == 'selector' && children.every((it) => !Boolean(it.type))
+      const nextIsSelectorOptionsPanel =
+        type == 'selector' && children.every((it) => !Boolean(it.type) || it.type == 'option')
 
       const optionPanel = createPanel(player, panels, children, {
-        key,
+        key: key || 'name',
         target,
         parent: panel,
         isSelectorOptionsPanel: nextIsSelectorOptionsPanel,
-        name: type == ('selector' as any) ? name : undefined
+        name,
+        parenOnChange: onChange
       })!
 
       $row.addEventListener('click', () => {
@@ -281,6 +316,9 @@ function createPanel(
         $input.onchange = function (event: any) {
           onChange?.(event.target.value)
         }
+        // TODO: update methond
+      } else {
+        $row.addEventListener('click', (e) => (onChange || options.parenOnChange)?.(value, e))
       }
     }
   }

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -47,7 +47,7 @@ export type Setting<T = any> = {
    * selector 切换下个面板单选 1 ｜ 2 ｜ 3
    * switcher  当前面板切换 true or false
    */
-  type: 'selector' | 'switcher' | 'slider'
+  type?: 'selector' | 'switcher' | 'slider' | 'option'
   icon?: string
   children?: Setting[]
   onChange?: (a: T /* Setting | boolean */, b?: { index: number; player: Player }) => void | Promise<void>