move animation to player components

the1812 · May 18, 2023 · 8d69d3a · 8d69d3a
1 parent 4537ba9
commit 8d69d3a
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -116,7 +116,7 @@
   },
   "eslint.format.enable": true,
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"

diff --git a/registry/lib/components/video/player/auto-light/index.ts b/registry/lib/components/video/player/auto-light/index.ts
@@ -3,7 +3,7 @@ import { lightOn, lightOff } from '@/components/video/player-light'
 import { videoChange } from '@/core/observer'
 import { allVideoUrls } from '@/core/utils/urls'
 import type { PlayerAgent } from '@/components/video/player-agent/base'
-import { StarAnim } from './animation'
+import { StarAnim } from '@/components/video/player-animation'
 import { defineComponentMetadata } from '@/components/define'
 
 let playerAgentInstance: PlayerAgent

diff --git a/registry/lib/components/video/player/intersection-actions/index.ts b/registry/lib/components/video/player/intersection-actions/index.ts
@@ -4,7 +4,6 @@ import { lightOff, lightOn } from '@/components/video/player-light'
 import { videoChange } from '@/core/observer'
 import { addComponentListener, getComponentSettings } from '@/core/settings'
 import { allVideoUrls } from '@/core/utils/urls'
-import { StarAnim } from './animation'
 
 enum IntersectionMode {
   Top = '视频顶部',
@@ -25,6 +24,7 @@ export const component = defineComponentMetadata({
       triggerLocation: IntersectionMode
       pause: boolean
       light: boolean
+      starAnim: boolean
     }
     Promise.resolve().then(async () => {
       const {
@@ -80,9 +80,6 @@ export const component = defineComponentMetadata({
           !videoEl.paused
         ) {
           lightOff()
-          if (settings.options.starAnimation) {
-            StarAnim(true)
-          }
         }
       }
 
@@ -96,7 +93,6 @@ export const component = defineComponentMetadata({
         }
         if (settings.light && getComponentSettings('playerAutoLight').enabled && !settings.pause) {
           lightOn()
-          StarAnim(false)
         }
       }
 
@@ -149,5 +145,9 @@ export const component = defineComponentMetadata({
       defaultValue: true,
       displayName: '自动开灯',
     },
+    starAnim: {
+      defaultValue: true,
+      displayName: '启用星光动画',
+    },
   },
 })
diff --git a/registry/tsconfig.json b/registry/tsconfig.json
@@ -11,4 +11,4 @@
     "../src/**/*.d.ts",
     "lib/**/*.ts"
   ],
-}
+}
diff --git a/src/components/video/player-agent/base.ts b/src/components/video/player-agent/base.ts
@@ -71,11 +71,11 @@ export abstract class PlayerAgent {
 
   /** true 开灯，false 关灯 */
   async toggleLight(on: boolean) {
-    const checkbox = (await this.query.control.settings.lightOff()) as HTMLInputElement
+    const checkboxLight = (await this.query.control.settings.lightOff()) as HTMLInputElement
     // 关灯状态 && 要开灯 -> 开灯
-    checkbox.checked && on && checkbox.click()
+    checkboxLight.checked && on && checkboxLight.click()
     // 开灯状态 && 要关灯 -> 关灯
-    !checkbox.checked && !on && checkbox.click()
+    !checkboxLight.checked && !on && checkboxLight.click()
   }
 
   // eslint-disable-next-line class-methods-use-this

diff --git a/src/components/video/player-agent/types.ts b/src/components/video/player-agent/types.ts
@@ -59,6 +59,7 @@ export interface PlayerQuery<QueryResult> extends CustomNestedQuery<QueryResult>
     settings: {
       wrap: QueryResult
       lightOff: QueryResult
+      starAnimEnable: QueryResult
     }
   }
   toastWrap: QueryResult

diff --git a/...ents/video/player/auto-light/animation.ts → src/components/video/player-animation.ts b/...ents/video/player/auto-light/animation.ts → src/components/video/player-animation.ts
@@ -15,7 +15,7 @@ const CreateAnim = (): void => {
   // 添加一段css 样式到document最后
   const style = document.createElement('style')
   // generate random stars
-  function generate(numCtrl) {
+  function generate(numCtrl: number) {
     let star = ''
     const max = window.innerWidth * window.innerHeight
     for (let i = 0; i < max / numCtrl; i++) {

diff --git a/src/components/video/player-light.ts b/src/components/video/player-light.ts
@@ -2,6 +2,7 @@ import { matchUrlPattern, none } from '@/core/utils'
 import { loadLazyPlayerSettingsPanel } from '@/core/utils/lazy-panel'
 import { playerUrls } from '@/core/utils/urls'
 import { playerAgent } from './player-agent'
+import { StarAnim } from '@/components/video/player-animation'
 
 // let initialized = false