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.onError(res => {
                console.log(res, 'rrrrrrrrrrrr');
            })
            this.innerAudioContext.onEnded(res => {
                this.resetAudio()
            })
        }
    },
    methods: {
        // 开始播放
        playVideo({
            currentTarget
        }) {
            this.setData({
                currentId: currentTarget.dataset.id
            })
        },
        // 播放音频
        playAudio({
            currentTarget
        }) {
            if (this.data.currentId == currentTarget.dataset.id) {
                this.resetAudio()
                if (!currentTarget.dataset.isPkPage) {
                    return
                }
            }
            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.uid, target.dataset.id)
        },
        // 打开设置类型的评论组件
        openTypeComment({
            target
        }) {
            this.selectComponent('#comment').open(wx.getStorageSync('uid'), target.dataset.id, target.dataset.type, target.dataset.onceId)
        },
        // 分享
        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 = 0.84
                        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)
                                        }
                                    }
                                }
                            }
                        }
                    })
            })
        },
    }
})