Component({
|
options: {
|
addGlobalClass: true,
|
pureDataPattern: /^_/
|
},
|
properties: {
|
duration: {
|
type: Number,
|
value: 500
|
},
|
easingFunction: {
|
type: String,
|
value: 'default'
|
},
|
videoList: {
|
type: Array,
|
value: [],
|
observer: function observer() {
|
var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
this._videoListChanged(newVal);
|
}
|
}
|
},
|
data: {
|
nextQueue: [],
|
prevQueue: [],
|
curQueue: [],
|
circular: false,
|
_last: 1,
|
_change: -1,
|
_invalidUp: 0,
|
_invalidDown: 0,
|
_videoContexts: []
|
},
|
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;
|
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) {
|
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');
|
},
|
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;
|
this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext));
|
}
|
}
|
});
|
