see changelog

.gitignore

@@ -8,4 +8,5 @@ node_modules
 
 dist
 .next
-out
+out
+.nx

package.json

@@ -42,22 +42,22 @@
     "@babel/plugin-transform-template-literals": "^7.23.3",
     "@changesets/cli": "^2.27.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@types/node": "^18.19.24",
+    "@types/node": "^20.11.29",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "jsdom": "^22.1.0",
-    "lint-staged": "^13.3.0",
-    "nx": "^16.10.0",
-    "prettier": "^2.8.8",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
+    "nx": "^18.1.2",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "terser": "^5.29.2",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
-    "vite": "^4.5.2",
+    "vite": "^5.1.6",
     "vite-plugin-banner": "^0.7.1",
-    "vitest": "^0.31.4"
+    "vitest": "^1.4.0"
   },
   "pnpm": {
     "patchedDependencies": {

packages/docs/package.json

@@ -19,14 +19,14 @@
     "@oplayer/torrent": "workspace:*",
     "@oplayer/ui": "workspace:*",
     "mdx-embed": "^1.1.2",
-    "next": "^13.5.6",
+    "next": "^14.1.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
+    "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "sass": "^1.72.0"
   }

packages/react/package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@oplayer/core": "workspace:*",
-    "@types/react": "^18.2.66",
+    "@types/react": "^18.2.67",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## UnRelease
 
+## [1.2.36-beta.4]
+
+- no repeat menu/setting.
+
 ## [1.2.36-beta.2]
 
 - fix keyboard config conflicts.

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.2.36-beta.3",
+  "version": "1.2.36-beta.4",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

packages/ui/src/components/Menubar.ts

@@ -10,7 +10,7 @@ import { icon as iconCls, tooltip } from '../style'
 import type { MenuBar, UIInterface } from '../types'
 import { siblings } from '../utils'
 
-const _select = (elm: HTMLElement) => {
+const setChecked = (elm: HTMLElement) => {
   const selected = elm.getAttribute('aria-checked') == 'true'
   elm.setAttribute('aria-checked', `${!selected}`)
   siblings(elm, (it) => it.setAttribute('aria-checked', `${selected}`))
@@ -31,7 +31,7 @@ export default (it: UIInterface) => {
     if (!target || elm.getAttribute('aria-checked') == 'true') return
 
     if (elm.tagName.toUpperCase() == 'SPAN') {
-      _select(elm)
+      setChecked(elm)
       target.onChange?.(
         target.children![+elm.getAttribute('data-index')!]!,
         elm.parentElement!.previousElementSibling as HTMLButtonElement,
@@ -46,10 +46,14 @@ export default (it: UIInterface) => {
     it.addEventListener('click', clickHandler)
   })
 
-  it.menu.register = function register(menu: MenuBar) {
+  function _register(menu: MenuBar) {
+    const repeated = menus.find((m) => m.name == menu.name)
+    if (repeated) unregister(repeated.name)
+
     const { name, icon, children, position } = menu
     const isTop = position == 'top' && $targets.length == 2
     let $menu: string = ''
+
     const $button = `
     <button
       aria-label="${name}"
@@ -64,18 +68,18 @@ export default (it: UIInterface) => {
         ${$button}
         <div class='${expand} ${isTop ? expandBottom : ''}' role='menu'>
           ${children!
-          .map(
-            (it, i) =>
-              `<span
+            .map(
+              (it, i) =>
+                `<span
                   role="menuitemradio"
                   aria-haspopup="false"
                   aria-label="${name}"
                   class="${dropItem}"
                   aria-checked="${Boolean(it.default)}"
                   data-index="${i}"
                 >${it.name}</span>`
-          )
-          .join('')}
+            )
+            .join('')}
           </div>
       </div>`
     } else {
@@ -91,18 +95,32 @@ export default (it: UIInterface) => {
     menus.push(menu)
   }
 
-  it.menu.unregister = function unregister(name: string) {
+  function unregister(name: string) {
     $targets.forEach((it) => {
       it.querySelector(`button[aria-label=${name}]`)?.remove()
       it.querySelector(`div[aria-label=${name}]`)?.remove()
     })
   }
 
-  it.menu.select = function select(name: string, index: number) {
+  function select(name: string, index: number, shouldBeCallFn: Boolean = true) {
     $targets.forEach((it) => {
-      _select(it.querySelector(`.${expand} > span[aria-label=${name}]:nth-child(${index + 1})`)!)
+      const $target = it.querySelector<HTMLElement>(
+        `.${expand} > span[aria-label=${name}]:nth-child(${index + 1})`
+      )
+      if ($target) {
+        setChecked($target)
+        if (shouldBeCallFn) $target.click()
+      }
     })
   }
 
-  if (initialState) initialState.forEach((menu) => it.menu.register(menu))
+  if (initialState) initialState.forEach(_register)
+
+  it.menu = {
+    register: function (menu: MenuBar | MenuBar[]) {
+      ;(Array.isArray(menu) ? menu : [menu]).forEach(_register)
+    },
+    unregister,
+    select
+  }
 }

packages/ui/src/components/Setting.ts

@@ -20,7 +20,8 @@ import {
 } from './Setting.style'
 
 export const arrowSvg = (className = nextIcon) =>
-  `<svg ${className ? `class="${className}"` : ''
+  `<svg ${
+    className ? `class="${className}"` : ''
   } 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
@@ -273,23 +274,37 @@ export default function (it: UIInterface) {
 
   bootstrap(options.map((it) => (typeof it == 'string' ? defaultSettingMap[it] : it)) as Setting[])
 
-  it.setting!.register = function register(payload: Setting | Setting[]) {
-    bootstrap(Array.isArray(payload) ? payload : [payload])
+  function register(payload: Setting | Setting[]) {
+    const _payload = Array.isArray(payload) ? payload : [payload]
+
+    bootstrap(
+      _payload
+        .map((p) => {
+          const repeated = panels.find((panel) => panel.key == p.key)
+          if (repeated) {
+            unregister(repeated.key)
+            return
+          }
+
+          return p
+        })
+        .filter(Boolean) as Setting[]
+    )
   }
 
-  it.setting!.unregister = function unregister(key: string) {
+  function unregister(key: string) {
     if (!hasRendered) return
     panels[0]?.$ref.querySelector(`[data-key=${key}]`)?.remove()
     panels = panels.filter((p) => (p.key === key ? (p.$ref.remove(), (p = null as any), false) : true))
   }
 
-  it.setting!.updateLabel = function updateLabel(key: string, text: string) {
+  function updateLabel(key: string, text: string) {
     if (!hasRendered) return
     const $item = $dom.querySelector<HTMLSpanElement>(`[data-key="${key}"] span[role="label"]`)
     if ($item) $item.innerText = text
   }
 
-  it.setting!.select = function select(key: string, value: boolean | number, shouldBeCallFn: Boolean = true) {
+  function select(key: string, value: boolean | number, shouldBeCallFn: Boolean = true) {
     if (!hasRendered) return
     if (typeof value == 'number') {
       for (let i = 0; i < panels.length; i++) {
@@ -354,8 +369,9 @@ export default function (it: UIInterface) {
       parent.insertBefore(settingButton, parent.children[parent.children.length]!)
     } else {
       const parent = it.$controllerBottom!.children[1]!
-
       parent.insertBefore(settingButton, parent.children[parent.children.length - index]!)
     }
   }
+
+  it.setting = { register, unregister, updateLabel, select }
 }