reader/component/video-swiper/index.js

"use strict";

import httpRequestApi from '../../utils/APIClient';

Component({
    options: {
        addGlobalClass: true,
        pureDataPattern: /^_/
    },
    properties: {
        ifHeadTap:{
            type: Boolean,
            value: true
        },
        isSwiper: {
            type: Boolean,
            value: true
        },
        duration: {
            type: Number,
            value: 500
        },
        easingFunction: {
            type: String,
            value: 'default'
        },
        loop: {
            type: Boolean,
            value: true
        },
        videoList: {
            type: Array,
            value: [],
            observer: function observer() {
                console.log('this.isSwiper', this.data.isSwiper)
                if (!this.data.isSwiper) return;
                var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

                this._videoListChanged(newVal);
            }
        },
        nextMargin: {
            type: String,
            value: '400rpx'

        }
    },
    data: {
        nextQueue: [],
        prevQueue: [],
        curQueue: [],
        circular: false,
        // nextMargin: '400rpx',
        _last: 1,
        _change: -1,
        _invalidUp: 0,
        _invalidDown: 0,
        _videoContexts: [],
        inputValue: '',
        showControl: 0
    },
    lifetimes: {
        attached: function attached() {
            this.data._videoContexts = [wx.createVideoContext('video_0', this), wx.createVideoContext('video_1', this), wx.createVideoContext('video_2', this)];
        }
    },
    methods: {
        _videoListChanged: function _videoListChanged(newVal) {
            var _this = this;

            var data = this.data;
            console.log('newVal', newVal)
            newVal.forEach(function (item) {
                data.nextQueue.push(item);
            });
            if (data.curQueue.length === 0) {
                this.setData({
                    curQueue: data.nextQueue.splice(0, 3)
                }, function () {
                    _this.playCurrent(1);
                });
            }
        },
        animationfinish: function animationfinish(e) {
            var _data = this.data,
                _last = _data._last,
                _change = _data._change,
                curQueue = _data.curQueue,
                prevQueue = _data.prevQueue,
                nextQueue = _data.nextQueue;

            var current = e.detail.current;
            var diff = current - _last;
            if (diff === 0) return;
            this.data._last = current;
            this.playCurrent(current);
            this.triggerEvent('change', {
                activeId: curQueue[current].id
            });
            var direction = diff === 1 || diff === -2 ? 'up' : 'down';
            if (direction === 'up') {
                if (this.data._invalidDown === 0) {
                    var change = (_change + 1) % 3;
                    var add = nextQueue.shift();
                    var remove = curQueue[change];
                    if (add) {
                        prevQueue.push(remove);
                        curQueue[change] = add;
                        this.data._change = change;
                    } else {
                        this.data._invalidUp += 1;
                    }
                } else {
                    this.data._invalidDown -= 1;
                }
            }
            if (direction === 'down') {
                if (this.data._invalidUp === 0) {
                    var _change2 = _change;
                    var _remove = curQueue[_change2];
                    var _add = prevQueue.pop();
                    if (_add) {
                        curQueue[_change2] = _add;
                        nextQueue.unshift(_remove);
                        this.data._change = (_change2 - 1 + 3) % 3;
                    } else {
                        this.data._invalidDown += 1;
                    }
                } else {
                    this.data._invalidUp -= 1;
                }
            }
            var circular = true;
            if (nextQueue.length === 0 && current !== 0) {
                circular = false;
            }
            if (prevQueue.length === 0 && current !== 2) {
                circular = false;
            }
            this.setData({
                curQueue: curQueue,
                circular: circular
            });
        },
        playCurrent: function playCurrent(current) {
            return; // 注掉自动播放
            this.data._videoContexts.forEach(function (ctx, index) {
                index !== current ? ctx.pause() : ctx.play();
            });
        },
        onPlay: function onPlay(e) {
            this.trigger(e, 'play');
        },
        onPause: function onPause(e) {
            this.trigger(e, 'pause');
        },
        onEnded: function onEnded(e) {
            this.trigger(e, 'ended');
        },
        onError: function onError(e) {
            this.trigger(e, 'error');
        },
        onTimeUpdate: function onTimeUpdate(e) {
            this.trigger(e, 'timeupdate');
        },
        onWaiting: function onWaiting(e) {
            this.trigger(e, 'wait');
        },
        onProgress: function onProgress(e) {
            this.trigger(e, 'progress');
        },
        onLoadedMetaData: function onLoadedMetaData(e) {
            this.trigger(e, 'loadedmetadata');
        },
        onTimeUpdate: function onTimeUpdate(e) {

        },
        openComment: function openComment(e) {
            console.log(e)
            this.trigger(e, 'openComment')
        },
        // 点击头部
        headTap: function headTap(e) {
            let uid = e.target.dataset.uid ? e.target.dataset.uid : e.currentTarget.dataset.uid;
            // this.trigger(e, 'headTap')
            console.log('点击头像',e)
            wx.navigateTo({
                url: `../../pages/user/myworks/myworks?uid=${uid}`
              });
        },
        // 去朗读
        goToReading: function goToReading(e) {
            this.trigger(e, 'goToReading')
        },
        // 收藏课程
        collectTap: function collectClass(e) {
            console.log('收藏按钮', e);
            const data = {
                targetCode: e.target.dataset.id ? e.target.dataset.id : e.currentTarget.dataset.id,
                favoritesType: e.target.dataset.type ? e.target.dataset.type : e.currentTarget.dataset.type
            }
            const index = e.target.dataset.index ? e.target.dataset.index : e.currentTarget.dataset.index;
            console.log('视频index', index);
            let str = `curQueue[${index}].isFavorite`
            httpRequestApi.collectClass(data).success((res) => {
                this.setData({
                    [str]: true
                })
            });

        },
        // 点赞
        likeTap: function likeTap(e) {
            const isLike = e.target.dataset.islike ? e.target.dataset.islike : e.currentTarget.dataset.islike;
            console.log('isLike',isLike)
            if (isLike) {
                return;
            }
            const id = e.target.dataset.id ? e.target.dataset.id : e.currentTarget.dataset.id;
            const index = e.target.dataset.index ? e.target.dataset.index : e.currentTarget.dataset.index;
            console.log('视频index', index);
            let likeStr = `curQueue[${index}].isLike`;
            let likeNumStr = `curQueue[${index}].likes`;
            httpRequestApi.likeWorks(id).success((res) => {
                this.setData({
                    [likeStr]: true,
                    [likeNumStr]: this.data.curQueue[index].likes + 1
                })
            });

        },

        trigger: function trigger(e, type) {
            var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

            // var detail = e.detail;
            var activeId = e.target.dataset.id ? e.target.dataset.id : e.currentTarget.dataset.id;
            this.triggerEvent(type, {
                activeId: activeId
            }, {
                bubbles: false
            });
            /*   this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), {
                  activeId: activeId
              }), ext)); */
        }
    }
});