reader/mixins/video.js

let innerAudioContext
import {
  setDuration
} from '~/utils/util'
module.exports = Behavior({
  data: {
    currentId: '',
    sliderValue: 0,
    currentTime: '00:00'
  },
  properties: {},
  pageLifetimes: {
    hide() {
      this.resetAudio()
    },
  },
  lifetimes: {
    attached() {
      this.innerAudioContext = wx.createInnerAudioContext()
      this.innerAudioContext.onTimeUpdate(res => {
        this.setData({
          sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
          currentTime: setDuration(this.innerAudioContext.currentTime)
        })
      })
      this.innerAudioContext.onEnded(res => {
        this.resetAudio()
      })
    }
  },
  methods: {
    // 开始播放
    playVideo({
      currentTarget
    }) {
      this.setData({
        currentId: currentTarget.dataset.id
      })
    },
    // 播放音频
    playAudio({
      currentTarget
    }) {
      if (this.data.currentId == currentTarget.dataset.id) {
        return this.resetAudio()
      }
      if (this.innerAudioContext) {
        this.resetAudio()
      }
      this.setData({
        currentId: currentTarget.dataset.id,
        currentTime: '00:00',
        sliderValue: 0
      })
      this.innerAudioContext.src = currentTarget.dataset.audio
      setTimeout(() => {
        this.innerAudioContext.play();
      }, 200)
    },
    // 设置音频播放进度
    setSeek({
      detail
    }) {
      this.innerAudioContext.pause();
      this.innerAudioContext.seek(detail)
      setTimeout(() => {
        this.innerAudioContext.play()
      }, 300)
    },
    // 重置音频
    resetAudio() {
      if (this.innerAudioContext) {
        this.innerAudioContext.stop();
      }
      this.setData({
        currentId: '',
        sliderValue: 0
      })
    },
    // 打开评论
    openComment({
      target
    }) {
      this.selectComponent('#comment').open(target.dataset.id)
    },
    // 分享
    creatShare(video) {
      return new Promise((resolve, reject) => {
        let context = wx.createSelectorQuery();
        context
          .select('#share')
          .fields({
            node: true,
            size: true
          }).exec((res) => {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            const dpr = wx.getSystemInfoSync().pixelRatio;
            canvas.width = res[0].width * dpr;
            canvas.height = res[0].height * dpr;
            ctx.scale(dpr, dpr);
            ctx.font = '14px PingFang';
            let pic = canvas.createImage();
            pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
            pic.onload = () => {
              ctx.drawImage(pic, 0, 0, 375, 211);
            }
            let peiyin = canvas.createImage();
            peiyin.src = '/static/peiyin.jpg';
            peiyin.onload = () => {
              ctx.drawImage(peiyin, 0, 211, 375, 89);
              // 收藏，一个一个渲染
              let sc = canvas.createImage();
              sc.src = '/static/no_collect.png'
              sc.onload = () => {
                ctx.drawImage(sc, 12, 220, 20, 20)
                ctx.fillText('收藏', 36, 238)
                //分享
                let fx = canvas.createImage();
                fx.src = '/static/share.png'
                fx.onload = () => {
                  ctx.drawImage(fx, 78, 220, 22, 22)
                  ctx.fillText('分享', 104, 238)
                  //点赞
                  let dz = canvas.createImage();
                  dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
                  dz.onload = () => {
                    ctx.drawImage(dz, 258, 222, 22, 22)
                    ctx.fillText(video.likes, 284, 238)
                    //评论
                    let pl = canvas.createImage();
                    pl.src = '/static/comment.png'
                    pl.onload = () => {
                      ctx.drawImage(pl, 318, 222, 22, 22)
                      ctx.fillText(video.commentAmount, 340, 238)
                      setTimeout(() => {
                        wx.canvasToTempFilePath({
                          canvas: canvas,
                          success(res) {
                            resolve({
                              title: '我的新作品发布啦，快来捧场点赞！',
                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
                              imageUrl: res.tempFilePath
                            })
                          },
                          fail(res) {
                            reject()
                          }
                        }, this)
                      }, 500)
                    }
                  }
                }
              }
            }
          })
      })
    },
  }
})