import AwesomeDanmaku from 'awesome-danmaku'
const player = AwesomeDanmaku.getPlayer('#app')

// play 和 insert 这两个主要操作没有先后次序的要求，你亦可以先插入后再启动控制器
player.play()
player.insert([
  'Hello Awesome Danmaku!',
  '我是第1条弹幕...',
  '我是第2条弹幕...',
  '我是第3条弹幕...',
])  

const AwesomeDanmaku = require('awesome-danmaku')

// 获取弹幕机 Player
AwesomeDanmaku.getPlayer('#app')

// 传入更详细的配置，这里增加了「弹幕最大数」与「弹幕轨道数」的参数
AwesomeDanmaku.getPlayer({
  el: '#app',
  nodeMaxCount: 50,
  trackCount: 5
})

// 启动弹幕机
Player.play()

// 暂停弹幕机，重启可直接使用 play()
Player.pause()

// 关闭弹幕机，清空弹幕发送队列与数据
Player.stop()

// 将弹幕内容置入弹幕机
// sync 默认为 false，该条弹幕会进入弹幕发送队列，加载列表数据时通常建议使用异步模式
Player.insert('Hello Awesome-Danmaku!')

// sync 为 true 时，该条弹幕将立即显示，适合用于用户发送弹幕(插队)
Player.insert({
  value: 'Hello Awesome-Danmaku!',
  opacity: 0.8,
  color: '#ff0000',
}, true)

// 参数可以以数组方式传递
Player.insert([
  '这是一条普通的弹幕',
  {
    value: '这是一条有点黄的弹幕',
    color: '#ffff00'
  }
])
//

// 下方值除 el 外均为该属性的默认值
const PlayerConfig = {
 
  // 弹幕机创建所需要的 DOM 节点，可以传递字符串选择器或者是具体的 DOM 对象
  el: '#app',
  
  // 每条弹幕运动的总时长，单位为毫秒
  rollingTime: 6000,
  
  // 弹幕节点的 DOM 标签，大小写不敏感
  nodeTag: 'p',
  
  // 弹幕节点的类名，可通过这里修改弹幕的样式
  nodeClass: 'awesome-danmaku-item',
  
  // 弹幕节点的最大值，该值设置过大可能会影响运行性能
  nodeMaxCount: 25,
  
  // 传入弹幕机的节点文本key，通常不设为空，为空时默认为'text'
  nodeValueKey: 'value',
  
  // 弹幕机轨道数
  trackCount: 5,
  
  // 弹幕机轨道高度，单位为 px
  trackHeight: 40,
  
  // 弹幕机的节点列表，可传入弹幕节点
  list: [] 
}

const nodeConfig = {
  // 弹幕文本，该枚举 key 可根据弹幕机 nodeValueKey 调整
  text: '',
  
  // 弹幕字体大小，为数字时单位为px，其他单位可通过字符串传递
  fontSize: 22,
  
  // 弹幕字体
  fontFamily: 'SimHei',
  
  // 弹幕字重
  fontWeight: 'normal',
  
  // 不透明度
  opacity: 1,
  
  // 弹幕字体颜色
  color: '#FFFFFF',
  
  // 弹幕速度系数，取值范围(>0)，标准为1
  speed: 1,
  
  // 弹幕节点的 DOM 类名，可以是数组形式
  nodeClass: ''
}