danmu.js - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5-beta.1

package.json

 {
   "name": "danmu.js",
-  "version": "0.2.4",
+  "version": "0.2.5-beta.1",
   "description": "HTML5 danmu (danmaku) plugin for any DOM element",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/bullet.js

@@ -10,2 +10,3 @@ import util from './utils/util'
     this.danmu = danmu
+    this.options = options
     this.duration = options.duration
@@ -41,3 +42,2 @@ this.moveV = options.moveV
     }
-
     if(options.mode === 'top' || options.mode === 'bottom') {
@@ -49,2 +49,5 @@ this.mode = options.mode
     this.el = el
+    if (options.like && options.like.el) {
+      this.setLikeDom(options.like.el, options.like.style)
+    }
     this.status = 'waiting'// waiting,start,end
@@ -55,26 +58,38 @@ let containerPos = this.container.getBoundingClientRect()
   attach () {
-    this.container.appendChild(this.el)
-    this.elPos = this.el.getBoundingClientRect()
-    if(this.direction === 'b2t') {
-      this.width = this.elPos.height
-      this.height = this.elPos.width
+    let self = this
+    self.container.appendChild(self.el)
+    self.elPos = self.el.getBoundingClientRect()
+    if(self.direction === 'b2t') {
+      self.width = self.elPos.height
+      self.height = self.elPos.width
     } else {
-      this.width = this.elPos.width
-      this.height = this.elPos.height
+      self.width = self.elPos.width
+      self.height = self.elPos.height
     }
-    if(this.moveV) {
-      let containerPos = this.container.getBoundingClientRect()
-      this.duration = (containerPos.width + this.width) / this.moveV * 1000
+    if(self.moveV) {
+      let containerPos = self.container.getBoundingClientRect()
+      self.duration = (containerPos.width + self.width) / self.moveV * 1000
     }
+    // self.el.addEventListener('mouseover', self.mouseoverFun.bind(self))
   }
+  mouseoverFun () {
+    let self = this
+    let containerPos_ = self.danmu.container.getBoundingClientRect()
+    self.pauseMove(containerPos_)
+    self.status = 'farcePaused'
+    self.danmu.emit('bullet_pause', {
+      bullet: self
+    })
+  }
   detach () {
-    if(this.container && this.el) {
-      this.domObj.unuse(this.el)
-      this.container.removeChild(this.el)
+    let self = this
+    // self.el && self.el.removeEventListener('mouseover', self.mouseoverFun.bind(self))
+    if(self.container && self.el) {
+      self.domObj.unuse(self.el)
+      self.container.removeChild(self.el)
     }
-    let self = this
-    this.danmu.off('changeDirection', direction => {
+    self.danmu.off('changeDirection', direction => {
       self.direction = direction
     })
-    this.el = null
+    self.el = null
   }
@@ -153,8 +168,4 @@ topInit () {
     let self = this
-    if (!this.el) {
-      return
-    }
-    if(this.status === 'start') {
-      return
-    }
+    if (!this.el) return
+    if(this.status === 'start') return
     this.status = 'start'
@@ -251,4 +262,31 @@ this.el.style.willChange = 'transform'
   }
+  setOpacity (opacity) {
+    if (this.el) {
+      this.el.style[ 'opacity' ] = opacity
+    }
+  }
+  setFontSize (size) {
+    if (this.el) {
+      this.el.style[ 'fontSize' ] = `${size}px`
+    }
+  }
+  setLikeDom (el, style) {
+    if (el) {
+      Object.keys(style).forEach(function (key) {
+        el.style[key] = style[key]
+      })
+      let likeClass = 'danmu-like'
+      el.className = likeClass
+      if (this.el) {
+        let children = this.el.querySelector('.' + likeClass)
+        if (children) {
+          this.el.removeChild(children)
+        }
+        this.el.innerHTML = `${this.el.innerHTML}${el.outerHTML}`
+      }
+    }
+    return el
+  }
 }
 
 export default Bullet

src/channel.js

@@ -524,2 +524,5 @@ /**
     }
+    if(bullet.options.loop) {
+      this.danmu.bulletBtn.main.playedData.push(bullet.options)
+    }
   }
@@ -526,0 +529,0 @@ resetArea () {

src/danmu.js

@@ -7,3 +7,4 @@ import EventEmitter from 'event-emitter'
   constructor (options) {
-    this.config = util.deepCopy({
+    let self = this
+    self.config = util.deepCopy({
       overlap: false,
@@ -18,6 +19,5 @@ area: {
     }, options)
-    this.hideArr = []
-    EventEmitter(this)
-    let self = this
-    this.config.comments.forEach(comment => {
+    self.hideArr = []
+    EventEmitter(self)
+    self.config.comments.forEach(comment => {
       comment.duration = comment.duration < 5000 ? 5000 : comment.duration
@@ -28,10 +28,10 @@ if(!comment.mode) {
     })
-    if(this.config.container && this.config.container.nodeType === 1) {
-      this.container = this.config.container
+    if(self.config.container && self.config.container.nodeType === 1) {
+      self.container = self.config.container
     } else {
-      this.emit('error', 'container id can\'t be empty')
+      self.emit('error', 'container id can\'t be empty')
       return false
     }
-    if(this.config.containerStyle) {
-      let style = this.config.containerStyle
+    if(self.config.containerStyle) {
+      let style = self.config.containerStyle
       Object.keys(style).forEach(function (key) {
@@ -41,8 +41,8 @@ self.container.style[key] = style[key]
     }
-    this.live = this.config.live
-    this.player = this.config.player
-    this.direction = this.config.direction
-    util.addClass(this.container, 'danmu')
-    this.bulletBtn = new Control(this)
-    this.emit('ready')
+    self.live = self.config.live
+    self.player = self.config.player
+    self.direction = self.config.direction
+    util.addClass(self.container, 'danmu')
+    self.bulletBtn = new Control(self)
+    self.emit('ready')
   }
@@ -72,2 +72,13 @@
       comment.duration = comment.duration < 5000 ? 5000 : comment.duration
+      if (comment.style) {
+        if (this.opacity !== comment.style.opacity) {
+          comment.style.opacity = this.opacity
+        }
+        if (this.fontSize !== comment.style.fontSize) {
+          comment.style.fontSize = this.fontSize
+        }
+        if (this.like) {
+          comment.like = comment.like ? comment.like : this.like
+        }
+      }
       if(comment.prior) {
@@ -130,2 +141,41 @@ this.bulletBtn.main.data.unshift(comment)
 
+  setCommentLike (id, like) {
+    let containerPos_ = this.container.getBoundingClientRect()
+    this.like = like
+    if (id && like) {
+      this.bulletBtn.main.data.some(data => {
+        if(data.id === id) {
+          data.like = like
+          return true
+        } else {
+          return false
+        }
+      })
+      this.bulletBtn.main.queue.some(item => {
+        if(item.id === id) {
+          item.pauseMove(containerPos_)
+          item.setLikeDom(like.el, like.style)
+          item.startMove(containerPos_)
+          return true
+        } else {
+          return false
+        }
+      })
+    }
+  }
+
+  startCommentMove (id) {
+    let containerPos_ = this.container.getBoundingClientRect()
+    if (id) {
+      this.bulletBtn.main.queue.some(item => {
+        if(item.id === id) {
+          item.startMove(containerPos_)
+          return true
+        } else {
+          return false
+        }
+      })
+    }
+  }
+
   setAllDuration (mode = 'scroll', duration) {
@@ -150,2 +200,30 @@ let containerPos_ = this.container.getBoundingClientRect()
 
+  setOpacity (opacity) {
+    let pos = this.container.getBoundingClientRect()
+    this.opacity = opacity
+    if (opacity) {
+      this.bulletBtn.main.data.forEach(data => {
+        if (data.style) {
+          data.style.opacity = opacity
+        }
+      })
+      this.bulletBtn.main.queue.forEach(item => {
+        item.pauseMove(pos)
+        item.setOpacity(opacity)
+        item.startMove(pos)
+      })
+    }
+  }
+  
+  setFontSize (size) {
+    this.fontSize = `${size}px`
+    if (size) {
+      this.bulletBtn.main.data.forEach(data => {
+        if (data.style) {
+          data.style.fontSize = this.fontSize
+        }
+      })
+    }
+  }
+
   hide (mode = 'scroll') {
@@ -152,0 +230,0 @@ if(this.hideArr.indexOf(mode) < 0) {

src/main.js

@@ -15,2 +15,3 @@ import Channel from './channel'
     this.data = [].concat(danmu.config.comments)
+    this.playedData = []
     this.queue = []// 等待播放的弹幕队列
@@ -26,2 +27,6 @@ this.timer = null// 弹幕动画定时器句柄
     })
+    this.danmu.on('bullet_pause', bullet => {
+      // console.log(bullet)
+    })
+    this.nums = 0
   }
@@ -114,2 +119,3 @@ // 在渲染队列中移除已经展示完的弹幕对象
           // item.status = 'start'
+          self.danmu.emit('bullet_start', item)
           item.startMove(self.channel.containerPos)
@@ -148,2 +154,3 @@ }
       // self.data = []
+      if(list.length === 0) list = self.playedData.splice(0, 1)
     }
@@ -155,6 +162,6 @@
         bullet.attach()
-        // console.log(list.length)
         result = channel.addBullet(bullet)
         if (result.result) {
           self.queue.push(bullet)
+          self.nums++;
           bullet.topInit()
@@ -161,0 +168,0 @@ } else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

570190

increased by38.95%

Lines of code

7484

increased by283.01%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes