add slider (#130)

* add slider
shiyiya · Jul 28, 2024 · 65ec349 · 65ec349
1 parent 2344ffc
commit 65ec349
Show file tree

Hide file tree

Showing 11 changed files with 358 additions and 196 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -82,7 +82,44 @@ const player = Player.make<Ctx>('#player', {
       // autoFocus: true,
       keyboard: { global: true },
       screenshot: true,
-      settings: ['loop'],
+      settings: [
+        'loop',
+        {
+          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: `Offset`,
+          type: 'slider',
+          default: 2,
+          min: -5,
+          max: 5,
+          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,
       // showControls: 'played',
       highlight: { color: 'pink' },

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "start": "pnpm run watch",
     "dev": "pnpm --filter=!@oplayer/docs --parallel run start",
     "dev:exam": "cd examples/standalone && pnpm run start",
+    "dev:ui": "pnpm --filter=@oplayer/ui run start",
     "build": "pnpm --filter=!@oplayer/docs run build",
     "build:packs": "pnpm --filter=@oplayer/* run build",
     "build:core": "pnpm --filter=@oplayer/core run build",
@@ -44,19 +45,19 @@
     "@babel/plugin-transform-template-literals": "^7.24.7",
     "@changesets/cli": "^2.27.5",
     "@rollup/plugin-babel": "^6.0.4",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.8",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.7",
-    "nx": "^19.3.0",
+    "nx": "^19.3.1",
     "prettier": "^3.3.2",
     "rimraf": "^5.0.7",
     "terser": "^5.31.1",
     "tslib": "^2.6.3",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "vite": "^5.3.1",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-merge-exports": "^0.0.0",

diff --git a/packages/danmaku/tsconfig.json b/packages/danmaku/tsconfig.json
@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "target": "ESNext"
   },
   "include": ["src", "../../global.d.ts"]
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -28,6 +28,6 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "sass": "^1.77.5"
+    "sass": "^1.77.6"
   }
 }
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -26,7 +26,7 @@
     "@oplayer/ui": "workspace:*",
     "@types/chromecast-caf-sender": "^1.0.10",
     "chokidar": "^3.6.0",
-    "glob": "^10.4.1",
+    "glob": "^10.4.2",
     "m3u8-parser": "^7.1.0",
     "vite-plugin-css-injected-by-js": "^3.5.1"
   }

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.3.3-beta.0",
+  "version": "1.3.3-beta.1",
   "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' },
+  // '& > *': { 'pointer-events': 'none' },
 
   '&:hover': {
     'background-color': 'rgba(255, 255, 255, 0.1)'
@@ -137,6 +137,7 @@ export const settingItemLeft = $.css({
 export const settingItemRight = $.css(`
   display: flex;
   align-items: center;
+  justify-content: flex-end;
 `)
 
 export const backRow = $.css({
@@ -145,3 +146,39 @@ export const backRow = $.css({
   'align-items': 'center',
   'border-bottom': '1px solid rgb(255 255 255 / 10%)'
 })
+
+export const sliderCls = $.css({
+  '-webkit-appearance': 'none',
+  width: '90%',
+  height: '0.6em',
+  outline: 'none',
+  'border-radius': '34px',
+  background: 'rgb(204, 204, 204)',
+  margin: '0',
+  cursor: 'pointer',
+  position: 'relative',
+
+  '&::-webkit-slider-thumb': {
+    '-webkit-appearance': 'none',
+    appearance: 'none',
+    background: '#fff',
+    height: '1.3em',
+    width: '1.3em',
+    'border-radius': '50%',
+    border: 'none'
+  },
+
+  '&:hover::before': {
+    visibility: 'visible'
+  },
+
+  '::before': {
+    position: 'absolute',
+    left: '-0.3em',
+    top: 0,
+    transform: 'translate(-100%, -0.3em)',
+    content: 'attr(value)',
+    color: 'rgba(255, 255, 255, 0.7)',
+    visibility: 'hidden'
+  }
+})
diff --git a/packages/ui/src/components/Setting.ts b/packages/ui/src/components/Setting.ts
@@ -16,7 +16,8 @@ import {
   switcherCls,
   switcherContainer,
   backIcon,
-  backRow
+  backRow,
+  sliderCls
 } from './Setting.style'
 
 export const arrowSvg = (className = nextIcon) =>
@@ -25,7 +26,7 @@ export const arrowSvg = (className = nextIcon) =>
   } viewBox="0 0 32 32"><path d="m 12.59,20.34 4.58,-4.59 -4.58,-4.59 1.41,-1.41 6,6 -6,6 z" fill="#fff"></path></svg>`
 
 // Selector Options
-export const selectorOption = (name: string, icon: string = '') =>
+const selectorOption = (name: string, icon: string = '') =>
   `<div class="${settingItemLeft}">
       ${icon}
       <span>${name}</span>
@@ -35,7 +36,7 @@ export const selectorOption = (name: string, icon: string = '') =>
     </svg>
 `
 
-export const nexter = (name: string, icon: string = '') =>
+const nexter = (name: string, icon: string = '') =>
   `<div class="${settingItemLeft}">
       ${icon}
       <span>${name}</span>
@@ -46,14 +47,14 @@ export const nexter = (name: string, icon: string = '') =>
     </div>
 `
 
-export const back = (name: string) =>
+const back = (name: string) =>
   `<div class="${backRow}">
       ${arrowSvg(backIcon)}
       <span>${name}</span>
     </div>
 `
 
-export const switcher = (name: string, icon: string = '') =>
+const switcher = (name: string, icon: string = '') =>
   `<div class="${settingItemLeft}">
     ${icon}
     <span>${name}</span>
@@ -65,14 +66,52 @@ export 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 = '',
+  max = 1,
+  min = 0,
+  value = 0,
+  step = 1
+}: {
+  name: string
+  icon?: string
+  min: number
+  max: number
+  value: number
+  step: number
+}) =>
+  `<div class="${settingItemLeft}">
+    ${icon}
+    <span>${name}</span>
+  </div>
+  <div class=${settingItemRight}>
+   <input type="range" min="${min}" max="${max}" step="${step}" value="${value}" class="${sliderCls}" />
+  </div>`
+
 function createRow({
   type,
   key,
   name,
   icon,
   default: selected,
-  index
-}: Omit<Setting, 'onChange' | 'children' | 'value'> & { index?: number; switcherLabe?: string }) {
+  index,
+  max,
+  min,
+  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',
@@ -95,13 +134,23 @@ function createRow({
     case 'back' as any:
       $item.innerHTML = back(name)
       break
-    default: // select option 不用 type
+    case 'slider':
+      $item.innerHTML = slider({ name, max, min, icon, value: selected, step } as any)
+      break
+    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
@@ -127,6 +176,7 @@ function createPanel(
     target: HTMLElement
     parent?: Panel
     isSelectorOptionsPanel?: boolean
+    parenOnChange?: Function
   } = {} as any
 ): Panel | void {
   if (!setting || setting.length == 0) return
@@ -136,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 {
     //创建新的选项面板
@@ -165,16 +215,32 @@ function createPanel(
   }
 
   for (let i = 0; i < setting.length; i++) {
-    const { name, type, key, children, icon, default: selected, onChange } = 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
+          default: selected,
+          max,
+          min,
+          step,
+          hasChildren: Boolean(children)
         },
         !isRoot && isSelectorOptionsPanel && { index: i }
       )
@@ -184,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', () => {
@@ -234,14 +302,23 @@ function createPanel(
       }
     } else {
       if (type == 'switcher') {
-        //@ts-ignore
-        $row.select = function (shouldBeCallFn: boolean) {
+        ;($row as any).select = function (shouldBeCallFn: boolean) {
           const selected = this.getAttribute('aria-checked') == 'true'
           this.setAttribute('aria-checked', `${!selected}`)
           if (shouldBeCallFn) onChange?.(!selected)
         }
-        //@ts-ignore
-        $row.addEventListener('click', () => $row.select(true))
+        $row.addEventListener('click', () => ($row as any).select(true))
+      } else if (type == 'slider') {
+        const $input = $row.querySelector('input')!
+        $input.oninput = function (event: any) {
+          event.target.setAttribute('value', event.target.value)
+        }
+        $input.onchange = function (event: any) {
+          onChange?.(event.target.value)
+        }
+        // TODO: update methond
+      } else {
+        $row.addEventListener('click', (e) => (onChange || options.parenOnChange)?.(value, e))
       }
     }
   }