Release v1.4.8

- 对 Rendering 部分逻辑进行优化 - EL 将对横竖屏切换作出轨道总宽度的响应变化 - MeasureTextSize 使用 MDN 测算建议
August-Z · Oct 12, 2020 · a2d1248 · a2d1248
1 parent 0052785
commit a2d1248
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 262 deletions.
diff --git a/demo/danmaku.demo.js b/demo/danmaku.demo.js
diff --git a/dev.html b/dev.html
@@ -10,33 +10,6 @@
   <link rel=icon href=https://image.zoushicheng.com/vivo-user/user01.jpeg type=image/x-icon>
 </head>
 <body>
-<div id="demo-a"></div>
-<!--<div id="demo-b"></div>-->
-<div class="slider-box">
-  <div class="slider-item density">
-    <div class="slider-label">弹幕密度</div>
-    <div class="slider-content">
-      <div class="slider-left-text">1</div>
-      <div class="slider-button "></div>
-      <div class="slider-right-text">∞</div>
-    </div>
-  </div>
-  <div class="slider-item speed">
-    <div class="slider-label">弹幕速度</div>
-    <div class="slider-content ">
-      <div class="slider-left-text">1</div>
-      <div class="slider-button"></div>
-      <div class="slider-right-text">10</div>
-    </div>
-  </div>
-  <div class="slider-item opacity">
-    <div class="slider-label">透明度</div>
-    <div class="slider-content ">
-      <div class="slider-left-text">0%</div>
-      <div class="slider-button"></div>
-      <div class="slider-right-text"></div>
-    </div>
-  </div>
-</div>
+<div id="danmaku"></div>
 </body>
 </html>
diff --git a/dist/danmaku.browser.js b/dist/danmaku.browser.js
diff --git a/dist/danmaku.common.js b/dist/danmaku.common.js
diff --git a/dist/danmaku.esm.js b/dist/danmaku.esm.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "awesome-danmaku",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Danmaku lib for HTML5",
   "main": "dist/danmaku.common.js",
   "module": "dist/danmaku.esm.js",
@@ -34,6 +34,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
+    "@tweenjs/tween.js": "^18.5.0",
+    "@types/tween.js": "^18.5.1",
     "autoprefixer": "^9.1.5",
     "babel-core": "^6.25.0",
     "babel-eslint": "^8.0.3",
@@ -56,16 +58,19 @@
     "jquery": "^3.3.1",
     "ora": "^3.0.0",
     "postcss-loader": "^3.0.0",
+    "stats.js": "^0.17.0",
     "style-loader": "^0.23.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "ts-loader": "^5.3.0",
+    "uglifyjs-webpack-plugin": "^2.1.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
-    "webpack-merge": "^4.1.4",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "stats.js": "^0.17.0"
+    "webpack-merge": "^4.1.4"
+  },
+  "dependencies": {
+    "pixi.js": "^5.3.2"
   }
 }
diff --git a/src/core/control/index.js b/src/core/control/index.js
@@ -22,6 +22,7 @@ export class DanmakuPlayer {
   _elementMap: WeakMap<HTMLElement, Dnode>
 
   el: HTMLElement
+  playerWidth: number
   rollingTime: number
   nodeTag: string
   nodeClass: string
@@ -51,10 +52,6 @@ export class DanmakuPlayer {
     this._registerEvent()
   }
 
-  get playerWidth (): number {
-    return this.el.clientWidth || 0
-  }
-
   get hasTasks (): boolean {
     return (
       !!this.list.length &&
@@ -144,34 +141,22 @@ export class DanmakuPlayer {
 
   playTick (): void {
     if (this.hasTasks && this.playStatus === DanmakuControlPlayStatus.PLAY) {
-
-      const nodeOps: DnodeOptions = this.list.shift()
-      const node: Dnode = this.getUnObstructedNode()
-
-      node.patch(nodeOps).run()
+      const options = this.list.shift()
+      const node = this.getUnObstructedNode()
+      node && node.patch(options).run()
     }
   }
 
   pause (): DanmakuPlayer {
-    setTimeout(() => {
-      this.playStatus = DanmakuControlPlayStatus.PAUSED
-      this._controlHook(DanmakuControlEventName.PAUSE)
-    }, this._loopTime)
-
+    this.playStatus = DanmakuControlPlayStatus.PAUSED
+    this._controlHook(DanmakuControlEventName.PAUSE)
     return this
   }
 
   stop (): DanmakuPlayer {
-    setTimeout(() => {
-
-      clearInterval(this.playTimer)
-      this.clearList()
-
-      this.playStatus = DanmakuControlPlayStatus.STOP
-      this._controlHook(DanmakuControlEventName.STOP)
-
-    }, this._loopTime)
-
+    this.playStatus = DanmakuControlPlayStatus.STOP
+    this._controlHook(DanmakuControlEventName.STOP)
+    this.clearList()
     return this
   }
 
@@ -205,20 +190,24 @@ export class DanmakuPlayer {
     }
   }
 
-  getUnObstructedTrack (trackIndex?: number): Dtrack {
-    const unObstructedTrackList: Array<Dtrack> = this.trackList.filter((t: Dtrack) => t.unObstructed)
-    const index: number = typeof trackIndex === 'number'
-      ? trackIndex
-      : Math.floor(Math.random() * unObstructedTrackList.length)
-    return unObstructedTrackList[index]
+  getUnObstructedTrack (): Dtrack | null {
+    const trackList = this.trackList
+    for (let i = 0, len = this.trackCount; i < len; i++) {
+      if (trackList[i].unObstructed) {
+        return trackList[i]
+      }
+    }
+    return null
   }
 
-  getUnObstructedNode (nodeIndex?: number): Dnode {
-    const unObstructedNodeList: Array<Dnode> = this.nodeList.filter((n: Dnode) => n.unObstructed)
-    const index: number = typeof nodeIndex === 'number'
-      ? nodeIndex
-      : Math.floor(Math.random() * unObstructedNodeList.length)
-    return unObstructedNodeList[index]
+  getUnObstructedNode (): Dnode | null {
+    const nodeList = this.nodeList
+    for (let i = 0, len = this.nodeMaxCount; i < len; i++) {
+      if (nodeList[i].unObstructed) {
+        return nodeList[i]
+      }
+    }
+    return null
   }
 
   _handleOptions (ops: DanmakuPlayerOptions | HTMLElement | string): DanmakuPlayer {
@@ -257,6 +246,25 @@ export class DanmakuPlayer {
     if (!this.el) {
       return undefined
     }
+    window.addEventListener("orientationchange", (e) => {
+      const value = screen.orientation
+        ? screen.orientation.angle
+        : e.orientation
+      console.log(value)
+      switch (value) {
+        case 0:
+        case 180:
+          this.playerWidth = this.el.clientWidth
+          break
+        case 90:
+        case -90:
+          this.playerWidth = this.el.clientHeight
+          break
+      }
+    }, false)
+    this.el.addEventListener('resize', (e) => {
+      this.playerWidth = this.el.clientWidth
+    })
     this.el.addEventListener('transitionend', (e) => {
       if (e && e.target) {
         const element: EventTarget = e.target
@@ -293,6 +301,7 @@ export class DanmakuPlayer {
         throw new Error('Control dom(el) query for no result')
       } else {
         this.el = _el
+        this.playerWidth = _el.clientWidth
       }
     } else if (!(this.el instanceof HTMLElement)) {
       throw new Error('Control[el] not is HTMLElement, check code !')
@@ -316,12 +325,13 @@ export class DanmakuPlayer {
   }
 
   _initTrackList (): DanmakuPlayer {
-    const playerWidth: number = this.playerWidth
-    for (let i = 0; i < this.trackCount; i++) {
+    const playerWidth = this.playerWidth
+    const trackHeight = this.trackHeight
+    for (let i = 0, len = this.trackCount; i < len; i++) {
       this.trackList[i] = new Dtrack({
         index: i,
         width: playerWidth,
-        height: this.trackHeight
+        height: trackHeight
       })
     }
     return this