reader/components/videoPreview/index.js

import {
    storeBindingsBehavior
} from 'mobx-miniprogram-bindings'
import {
    store
} from '~/store/index'
import {
    setVideoStatus,
    likeVideo,
    collectVideo,
    submitPlayLog
} from '~/api/video'
import {
    setFans
} from '~/api/user'
import {
    setDuration
} from '~/utils/util'
Component({
    behaviors: [storeBindingsBehavior],
    storeBindings: {
        store,
        fields: {
            pkData: 'pkData',
        },
        actions: {
            setPkData: 'setPkData'
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {
        videoInfo: {
            type: Object,
            value: {},
            observer(newVal) {
                if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
                    newVal.userRead.title = newVal.userRead.title.split('\n')
                }
                this.setData({
                    videoInfoCopy: newVal,
                    videoPath: newVal.userRead.videoPath,
                    selfWork: this.data.selfUid == newVal.user.uid,
                    isOfficial: newVal.userRead.type != 'APP_EXAMPLE'
                })
            }
        },
        videoType: {
            type: String,
            // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,
            value: 'public',
        },
        currentId: {
            type: Number
        },
        sliderValue: {
            type: Number,
            value: 0,
        },
        currentTime: {
            type: String,
            value: '00:00',
        }
    },
    data: {
        selfUid: wx.getStorageSync('uid'),
        videoInfoCopy: {},
        videoPath: '',
        //userRead.videoPath 和 example.videoPath，
        workType: 'videoPath',
        // 是否官方作品
        isOfficial: false,
        // 是否作者本人
        selfWork: false,
    },
    lifetimes: {
        attached() {
            let {
                userReadExtend,
                userRead
            } = this.data.videoInfoCopy
            if (userReadExtend && userReadExtend.resourcesType == 1) {
                this.setData({
                    endTime: setDuration(userRead.duration)
                })
            }
        }
    },
    methods: {
        // 播放视频
        playVideo() {
            this.triggerEvent('playVideo', this.data.videoInfoCopy.userRead.id)
            this.submitPlayLog(this.data.videoInfoCopy.userRead.id)
        },
        // 设置进度条
        slider({
            detail
        }) {
            this.triggerEvent('setSeek', detail.value / 100 * this.data.videoInfoCopy.userRead.duration)
        },
        // 设置视频公开还是隐私
        async setVideoPublic() {
            let info = this.data.videoInfoCopy.userRead
            let data = {
                id: info.id,
                status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
            }
            let res = await setVideoStatus(data)
            if (res.status == 'DISABLE') {
                wx.showToast({
                    title: '该作品仅自己可见',
                    icon: 'none',
                    duration: 2000
                })
            }
            this.setData({
                ['videoInfoCopy.userRead.status']: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
            })
        },
        // 点赞
        async likeVideo() {
            let {
                id
            } = this.data.videoInfoCopy.userRead
            if (this.data.videoInfoCopy.isLike) {
                return
            }
            await likeVideo(id)
            this.setData({
                ['videoInfoCopy.isLike']: true,
                ['videoInfoCopy.userRead.likeAmount']: this.data.videoInfoCopy.userRead.likeAmount + 1
            })
        },
        // 下载视频
        download() {
            wx.showLoading({
                title: '保存到本地',
                mask: true
            })
            const url = this.data.videoInfoCopy.userRead.markPath || ''
            wx.downloadFile({
                url,
                success(res) {
                    if (res.statusCode === 200) {
                        wx.saveVideoToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                                wx.hideLoading()
                                wx.showToast({
                                    title: '成功保存到相册!',
                                    duration: 3000,
                                    icon: 'success',
                                    mask: true
                                })
                            },
                            fail() {
                                wx.hideLoading()
                                wx.showToast({
                                    title: '网络不给力',
                                    icon: 'error',
                                    duration: 3000,
                                    mask: true
                                })
                            }
                        })
                    }
                },
                fail() {
                    wx.hideLoading()
                    wx.showToast({
                        title: '网络不给力',
                        icon: 'error',
                        duration: 3000,
                        mask: true
                    })
                }
            })
        },
        //评论
        openComment() {
            this.triggerEvent('openComment')
            this.setData({
                ['videoInfoCopy.unReadPostsCount']: 0,
            })
        },
        // 删除
        delete() {
            let {
                id
            } = this.data.videoInfoCopy.userRead
            wx.showModal({
                title: '确认删除吗？',
                content: '作品将被永久删除，无法找回。',
                confirmText: '确认',
                cancelText: '取消',
                success: async (res) => {
                    if (res.confirm) {
                        let data = {
                            id,
                            status: 'DEL'
                        }
                        await setVideoStatus(data)
                        wx.showToast({
                            title: '删除成功！',
                            icon: "none"
                        })
                        this.triggerEvent('deleteVideo', this.data.videoInfoCopy.userRead.id)
                    }
                }
            })
        },
        // 收藏课程
        async collect() {
            let {
                id,
                type,
                uid
            } = this.data.videoInfoCopy.userRead
            if (wx.getStorageSync('uid') == uid) {
                return wx.showToast({
                    title: '不能收藏自己作品哦！',
                    icon: "none"
                })
            }
            await collectVideo({
                targetCode: id,
                favoritesType: type
            })
            this.setData({
                ['videoInfoCopy.isFavorites']: !this.data.videoInfoCopy.isFavorites
            })
        },
        // 关注
        async setFans() {
            if (this.data.videoInfoCopy.isFans) {
                return
            }
            await setFans({
                uid: this.data.videoInfoCopy.user.uid
            })
            this.triggerEvent('setListFans', this.data.videoInfoCopy.user.uid)
        },
        jumpUserInfo() {
            wx.navigateTo({
                url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
            })
        },
        // 控制音频播放
        audioPlay() {
            this.triggerEvent('playAudio')
            this.submitPlayLog(this.data.videoInfoCopy.userRead.id)
        },
        toPkPage() {
            let videoInfo = this.data.videoInfoCopy
            if (this.properties.videoType == 'pk') {
                if (videoInfo.user.uid == wx.getStorageSync('uid')) {
                    return wx.showToast({
                        title: '不能与自己PK哦~',
                        icon: 'none'
                    })
                }
                this.setPkData({
                    nickName: videoInfo.user.nickName || videoInfo.user.eid,
                    uid: videoInfo.user.uid,
                    avatar: videoInfo.user.avatar,
                    score: videoInfo.userRead.score,
                    audioPath: videoInfo.userRead.audioPath,
                    exampleId: videoInfo.userRead.exampleId,
                    id: videoInfo.userRead.id
                })
            }
            let readId = videoInfo.userRead.id
            let videoType = this.properties.videoType
            let url = ''
            if (!this.data.isOfficial || this.data.selfWork) {
                // autoPlay自动播放
                url = `/pages/reading/index?videoId=${videoInfo.userRead.exampleId}&autoPlay=true`
            } else if (videoType == 'public' || videoType == 'follow') {
                url = `/pages/pkPage/index?videoId=${readId}`
            } else if (videoType == 'pk') {
                // voluntarily自动录制
                url = `/pages/reading/index?videoId=${videoInfo.userRead.exampleId}&readingType=${videoType}&voluntarily=true`
            } else {
                url = `/pages/reading/index?videoId=${videoInfo.userRead.exampleId}`
            }
            wx.navigateTo({
                url
            })
        },
        // pkPage页面示范朗读
        changeRead() {
            this.setData({
                workType: this.data.workType == 'videoPath' ? 'example' : 'videoPath',
            })
            if (this.data.videoInfo.userReadExtend.resourcesType == 1) {
                this.triggerEvent('pkPageAudio', {
                    currentTarget: {
                        dataset: {
                            id: this.data.videoInfoCopy.userRead.id,
                            audio: this.data.workType == 'videoPath' ? this.data.videoInfoCopy.userRead.audioPath : this.data.videoInfoCopy.example.audioPath,
                            isPkPage: true
                        }
                    }
                })
            }
        },
        // 统计作品播放次数
        async submitPlayLog(userReadId) {
            await submitPlayLog({
                userReadId,
                playStopTime: 1000
            })
        },
    }
})