style(ui): 🎉 Happy new Luna Year

package.json

@@ -37,20 +37,20 @@
     "@changesets/cli": "^2.26.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@types/node": "^18.11.18",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react": "^3.0.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
-    "jsdom": "^20.0.3",
+    "jsdom": "^21.0.0",
     "lint-staged": "^13.1.0",
-    "nx": "^15.5.1",
+    "nx": "^15.5.3",
     "prettier": "^2.8.3",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.1.1",
     "terser": "^5.16.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^3.2.5",
-    "vite-plugin-banner": "^0.6.1",
-    "vitest": "^0.25.8"
+    "vite": "^4.0.4",
+    "vite-plugin-banner": "^0.7.0",
+    "vitest": "^0.27.3"
   }
 }

packages/danmaku/src/index.ts

@@ -16,7 +16,7 @@ export default (options = {} as Options): PlayerPlugin => ({
 
     const { speed, opacity, engine, displaySender } = 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;font-family: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif';color:#fff;`
+    $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;`
     if (opacity) $danmaku.style.opacity = `${opacity}`
     if (options.enable == undefined) options.enable = true
 

packages/react/package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@oplayer/core": "workspace:*",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.0.27",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/ui/package.json

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

packages/ui/src/components/thumbnail.ts

@@ -13,46 +13,42 @@ export const thumbnailCls = $.css(`
   border-radius: 3px;
   display: none;`)
 
+const defaultThumbnails = { width: 160, height: 90 }
+
 export default function (player: Player, container: HTMLElement, options?: Thumbnails) {
   if (!options) return { update: noop, hide: noop, init: noop }
 
+  let isInitialized = false
+  let thumbnails = Object.assign(defaultThumbnails, options)
   const $dom = $.render($.create(`div.${thumbnailCls}`), container)
-  let minRate = 0,
-    maxRate = 0,
-    thumbnails = options.src,
-    isActive = false,
-    chunk = 100 / options.number
-
-  setTimeout(() => {
-    const width = options?.width || 160
-    const height = options?.height || 90
-    $dom.style.width = width + 'px'
-    $dom.style.height = height + 'px'
-    minRate = width / 2 / container.clientWidth
-    maxRate = (container.clientWidth - width / 2) / container.clientWidth
-  })
 
-  const init = () => {
-    if (!isActive) {
-      isActive = true
-      $dom.style.backgroundImage = `url(${thumbnails})`
+  function init() {
+    if (!isInitialized) {
+      isInitialized = true
+      $dom.style.width = `${thumbnails.width}px`
+      $dom.style.height = `${thumbnails.height}px`
+      $dom.style.backgroundImage = `url(${thumbnails.src})`
     }
   }
 
+  function change(source: Thumbnails) {
+    isInitialized = false
+    thumbnails = Object.assign(defaultThumbnails, source)
+  }
+
   player.on('videosourcechange', () => {
-    isActive = false
+    isInitialized = false
+    $dom.style.backgroundImage = 'none'
   })
 
-  function change(src: string) {
-    isActive = false
-    thumbnails = src
-  }
-
   return {
     init,
     update: (rate: number) => {
+      if (!isInitialized) return
+      const [halfWidth, cw] = [thumbnails.width / 2, container.clientWidth]
+      const [minRate, maxRate] = [halfWidth / cw, (cw - halfWidth) / cw]
       $dom.style.left = (rate < minRate ? minRate : rate > maxRate ? maxRate : rate) * 100 + '%'
-      const index = ~~((rate * 100) / chunk) * options.number * chunk
+      const index = ~~(rate * 100) * thumbnails.number
       $dom.style.backgroundPositionX = `${-index}%`
     },
     change