@tarojs/components
Version:
721 lines (714 loc) • 40.8 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-ab3c86da.js';
import Taro from '@tarojs/taro';
import { c as classnames } from './index-c3e4004b.js';
import { t as throttle } from './index-a00a7418.js';
const formatTime = (time) => {
if (!time)
return '';
const sec = Math.round(time % 60);
const min = Math.round((time - sec) / 60);
return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
};
const calcDist = (x, y) => {
return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
};
const normalizeNumber = (number) => {
return Math.max(-1, Math.min(number, 1));
};
let scene = 'default';
const screenFn = (function () {
let val;
const fnMap = [
[
'requestFullscreen',
'exitFullscreen',
'fullscreenElement',
'fullscreenEnabled',
'fullscreenchange',
'fullscreenerror'
],
// New WebKit
[
'webkitRequestFullscreen',
'webkitExitFullscreen',
'webkitFullscreenElement',
'webkitFullscreenEnabled',
'webkitfullscreenchange',
'webkitfullscreenerror'
],
// Old WebKit
[
'webkitRequestFullScreen',
'webkitCancelFullScreen',
'webkitCurrentFullScreenElement',
'webkitCancelFullScreen',
'webkitfullscreenchange',
'webkitfullscreenerror'
],
[
'mozRequestFullScreen',
'mozCancelFullScreen',
'mozFullScreenElement',
'mozFullScreenEnabled',
'mozfullscreenchange',
'mozfullscreenerror'
],
[
'msRequestFullscreen',
'msExitFullscreen',
'msFullscreenElement',
'msFullscreenEnabled',
'MSFullscreenChange',
'MSFullscreenError'
]
];
var defaultIOSMap = [
'webkitEnterFullscreen',
'webkitExitFullscreen',
'webkitCurrentFullScreenElement',
'webkitSupportsFullscreen',
'fullscreenchange',
'fullscreenerror'
];
let i = 0;
const l = fnMap.length;
const ret = {};
// This for loop essentially checks the current document object for the property/methods above.
for (; i < l; i++) {
val = fnMap[i];
if (val && val[1] in document) {
for (i = 0; i < val.length; i++) {
ret[fnMap[0][i]] = val[i];
}
return ret;
}
}
if (!ret[fnMap[0][0]]) {
scene = 'iOS';
// when there is no any APIs be set.
// In IOS, there is no 'webkitEnterFullscreen' property `in document` but video can use it for fullscreen.
// ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen
for (i = 0; i < defaultIOSMap.length; i++) {
ret[fnMap[0][i]] = defaultIOSMap[i];
}
}
// If it doesn't find any of them, this whole function returns {}
// and the fn variable is set to this returned value.
return ret;
})();
const isHls = url => /\.(m3u8)($|\?)/i.test(url);
const VideoControl = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.visible = false;
this.isDraggingProgressBall = false;
this.percentage = 0;
this.progressDimensions = {
left: 0,
width: 0
};
this.calcPercentage = (pageX) => {
let pos = pageX - this.progressDimensions.left;
pos = Math.max(pos, 0);
pos = Math.min(pos, this.progressDimensions.width);
return pos / this.progressDimensions.width;
};
this.onDragProgressBallStart = () => {
this.isDraggingProgressBall = true;
this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
};
this.onClickProgress = (e) => {
e.stopPropagation();
const percentage = this.calcPercentage(e.pageX);
this.seekFunc(percentage * this.duration);
this.toggleVisibility(true);
};
this.controls = undefined;
this.currentTime = undefined;
this.duration = undefined;
this.isPlaying = undefined;
this.pauseFunc = undefined;
this.playFunc = undefined;
this.seekFunc = undefined;
this.showPlayBtn = undefined;
this.showProgress = undefined;
}
onDocumentTouchMove(e) {
if (!this.isDraggingProgressBall)
return;
const touchX = e.touches[0].pageX;
this.percentage = this.calcPercentage(touchX);
this.setProgressBall(this.percentage);
this.setCurrentTime(this.percentage * this.duration);
}
onDocumentTouchEnd() {
if (!this.isDraggingProgressBall)
return;
this.isDraggingProgressBall = false;
this.seekFunc(this.percentage * this.duration);
this.toggleVisibility(true);
}
async setProgressBall(percentage) {
if (this.progressBallRef) {
this.progressBallRef.style.left = `${percentage * 100}%`;
}
}
async toggleVisibility(nextVisible) {
const visible = nextVisible === undefined ? !this.visible : nextVisible;
if (visible) {
this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
if (this.isPlaying) {
this.hideControlsTimer = setTimeout(() => {
this.toggleVisibility(false);
}, 2000);
}
this.el.style.visibility = 'visible';
}
else {
this.el.style.visibility = 'hidden';
}
this.visible = !!visible;
}
async getIsDraggingProgressBall() {
return this.isDraggingProgressBall;
}
async setCurrentTime(time) {
this.currentTimeRef.innerHTML = formatTime(time);
}
render() {
const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this;
const formattedDuration = formatTime(duration);
let playBtn;
if (!showPlayBtn) {
playBtn = null;
}
else if (isPlaying) {
playBtn = h("div", { class: 'taro-video-control-button taro-video-control-button-pause', onClick: pauseFunc });
}
else {
playBtn = h("div", { class: 'taro-video-control-button taro-video-control-button-play', onClick: playFunc });
}
return (h(Host, { class: 'taro-video-bar taro-video-bar-full' }, controls && (h("div", { class: 'taro-video-controls' }, playBtn, showProgress && (h("div", { class: 'taro-video-current-time', ref: dom => (this.currentTimeRef = dom) }, formatTime(currentTime))), showProgress && (h("div", { class: 'taro-video-progress-container', onClick: this.onClickProgress }, h("div", { class: 'taro-video-progress', ref: ref => {
if (!ref)
return;
const rect = ref.getBoundingClientRect();
this.progressDimensions.left = rect.left;
this.progressDimensions.width = rect.width;
} }, h("div", { class: 'taro-video-progress-buffered', style: { width: '100%' } }), h("div", { class: 'taro-video-ball', ref: dom => (this.progressBallRef = dom), onTouchStart: this.onDragProgressBallStart, style: {
left: `${formattedDuration ? (this.currentTime / duration) * 100 : 0}%`
} }, h("div", { class: 'taro-video-inner' }))))), showProgress && h("div", { class: 'taro-video-duration' }, formattedDuration))), h("slot", null)));
}
get el() { return getElement(this); }
};
const indexCss = ".taro-video{width:100%;height:225px;line-height:0;display:inline-block;position:relative;overflow:hidden}.taro-video[hidden]{display:none}.taro-video-container{-o-object-position:inherit;object-position:inherit;background-color:#000;width:100%;height:100%;display:inline-block;position:absolute;top:0;left:0}.taro-video-container.taro-video-type-fullscreen{z-index:999;position:fixed;inset:0}.taro-video-container.taro-video-type-fullscreen.taro-video-type-rotate-left{-webkit-transform:translate(-50%,-50%)rotate(-90deg);transform:translate(-50%,-50%)rotate(-90deg)}.taro-video-container.taro-video-type-fullscreen.taro-video-type-rotate-right{-webkit-transform:translate(-50%,-50%)rotate(90deg);transform:translate(-50%,-50%)rotate(90deg)}.taro-video-video{-o-object-position:inherit;object-position:inherit;width:100%;height:100%;display:block}.taro-video-cover{z-index:1;background-color:rgba(1,1,1,.5);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;display:-ms-flexbox;display:flex;position:absolute;top:0;bottom:0;left:0}.taro-video-cover-play-button{background-position:50%;background-repeat:no-repeat;background-size:50%;width:40px;height:40px}.taro-video-cover-duration{color:#fff;margin-top:10px;font-size:16px;line-height:1}.taro-video-bar{visibility:hidden;z-index:1;background-color:rgba(0,0,0,.5);-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:44px;padding:0 10px;display:-ms-flexbox;display:flex;position:absolute;bottom:0;right:0;overflow:hidden}.taro-video-bar.taro-video-bar-full{left:0}.taro-video-controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:0 8.5px;display:-ms-flexbox;display:flex}.taro-video-control-button{-webkit-box-sizing:content-box;box-sizing:content-box;width:13px;height:15px;margin-left:-8.5px;padding:14.5px 12.5px}.taro-video-control-button:after{content:\"\";background-position:50%;background-repeat:no-repeat;background-size:100%;width:100%;height:100%;display:block}.taro-video-control-button.taro-video-control-button-play:after,.taro-video-cover-play-button{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==)}.taro-video-control-button.taro-video-control-button-pause:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAFlJREFUSA3tksEKACAIQ7X//5zq98wOgQayum8QaGweHhMzG/6OujzKAymn+0LMqivu1XznWmX8/echTIyMyAgTwA72iIwwAexgj8gIE8CO3aMRbDPMaEy5BRGaKcZv8YxRAAAAAElFTkSuQmCC)}.taro-video-current-time,.taro-video-duration{color:#cbcbcb;height:14.5px;margin-top:15px;margin-bottom:14.5px;font-size:12px;line-height:14.5px}.taro-video-progress-container{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;position:relative}.taro-video-progress{background-color:rgba(255,255,255,.4);height:2px;margin:21px 12px;position:relative}.taro-video-progress-buffered{background-color:rgba(255,255,255,.8);width:0;height:100%;-webkit-transition:width .1s;transition:width .1s;position:absolute;top:0;left:0}.taro-video-ball{-webkit-box-sizing:content-box;box-sizing:content-box;width:16px;height:16px;margin-left:-22px;padding:14px;position:absolute;top:-21px;left:0}.taro-video-inner{background-color:#fff;border-radius:50%;width:100%;height:100%}.taro-video-danmu-button{color:#fff;white-space:nowrap;border:1px solid #fff;border-radius:5px;margin:0 8.5px;padding:2px 10px;font-size:13px;line-height:1}.taro-video-danmu-button.taro-video-danmu-button-active{color:#48c23d;border-color:#48c23d}.taro-video-fullscreen,.taro-video-mute{-webkit-box-sizing:content-box;box-sizing:content-box;background-position:50%;background-repeat:no-repeat;background-size:50%;width:17px;height:17px;padding:8.5px}.taro-video-fullscreen{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAhUlEQVRYR+2WSwrAMAhEnZO3PfmULLooGEFTiIXJ2s/kRY2wzQeb85sE9CRA8jSzY1YfAFzhJBnU1AVgxH2dSiArCnD9QgGzRNnOech48SRABHoSyFb5in3PSbhyo6yvCPQkEM3u7BsPe/0FIvBfAh/vhKmVbO9SWun1qk/PSVi9TcVPBG6R1YIhgWwNpQAAAABJRU5ErkJggg==)}.taro-video-fullscreen.taro-video-type-fullscreen{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYR+2Xu0pDURBF1/ZLxNcHKNiIlfhA7C0UBSEE8RNEBNFPUEQEEbGxFiSSSrCwEHsf5E/ccsSUuWfUhKQ40947+y42Z8+ZK/pcinzf9hhwD1xJ2q/qsb0JHAOzkl5y+lGAGnCWICQtZgAS6DxQk3TeLYA6cAo0JSXxjmW7CcwBdUkJurKiDhSA4kBvHbA9CqwBQx2O7BSw8ssU3ALPFRF4knT3nQLbr8B4LjLBOdAAFgJaLUkjbYC9n+zm+i4kXWbmwCqwnRMCHiXthuZAQOzPrxSA4kBxYDAcsH0EzATCfCLpJjOINoCtgFZabg7bk7AFDAeaGpKWgitZTu5N0kQbYBmYrujo9mX0CVxL+gidAdu9vY5zXhWA4sAgOND3X7NJ4AHYCaxkB8B62gslvecSFpoDOZH/PP8Cnt7hIaM5xCEAAAAASUVORK5CYII=)}.taro-video-mute{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTg6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3YmE4Yjg0LTFhNTYtNGM1MS04NDVkLTNiZmYyMGI0ZDc0ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1NGQ3MjlkLWUwNjctZjU0OC1hMTlhLTBlZjQ4OGRkYjJiOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjA1ODY3ZDFlLWQ3NGEtNDgyNC04MDU3LTYzYmRmMTdjODk5ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NjdkMWUtZDc0YS00ODI0LTgwNTctNjNiZGYxN2M4OTllIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE4OjIwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTdiYThiODQtMWE1Ni00YzUxLTg0NWQtM2JmZjIwYjRkNzRmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz459+FoAAABqElEQVRYhc2XPWsVQRSGnxPjF4oGRfxoRQKGWCU2Ft7CykrQWosEyf/If0hhIPgHDEmbNJZqCFxiQEgTUGxsBUVEHgvnyrjZZJO92V1fGIaZnTPvszPszNlQ6VIjnbr/DwCoDLMNak/dUVfUK0f2rQugnlcX/FevWgFQH6gf3autRgHUC+piiXHzAOmtPx9gXgug8itQx9SXwDpw47AGKXZWvXvQmNFCwE3gCXA2dY0Az4GrRzHONA9cU/vAbERsllEOyh31e8USV2mrMPdG9uyn+rDom2/BHHCm5puWKiKmgdtAnz+rvaxO5mNygEvHaZ5BfADuARvAaWBpP4DGFBHfgBngFzClTrUKkCDeA+9S837rAEnbqb7VFcCpVJ/oCmCw959aB1AfAROpudYqgDoOLKRmPyLelAF8bcD4pPoMeAtcB34AT4uDBqXXwFG8XXUU/72MIuK1OgE8Bs6l7mEvo8up7lN1Ge0n9aK6VHMFZvJTr9S3CiALaCQhqZOSvegMIAvu2UVSWpigLC1fbQ0gm6in7qpfLCQbhwGIYcyPQ53/G3YO8BtUtd35bvKcVwAAAABJRU5ErkJggg==)}.taro-video-mute.taro-video-type-mute{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTk6MDMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzYjJmNjE2LTZmZTUtNDJjNC1iNTgwLTczNzZjZjI2NzdmNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYzZjQ2NTYzLWE0ZjktOGQ0Mi1hM2FhLTY3ODJhNDBhYWNjMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIyYWNjMWFlLTg4ZmMtNDBlZi1iMWM1LTNmODgwY2QzYWI2MiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjJhY2MxYWUtODhmYy00MGVmLWIxYzUtM2Y4ODBjZDNhYjYyIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE5OjAzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDNiMmY2MTYtNmZlNS00MmM0LWI1ODAtNzM3NmNmMjY3N2Y1IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5PmxYVAAACLklEQVRYhc2XP2sVQRRHz40hKoqaQgVBCy1EozFlGiVFxMLGh4piYWEh+hkEP4YKAVFEEFTyughaCH6DqIVpAhYWEgIxoJE8cywyi5tNHu/tJmvyg2WZO3dmzt47/zZUtoJ6Nhsg09YDiYhKDzACTAFNYH9lEpUq80TdrT5wpV5n/ZV9KoGoo+pXV2uyKkipOaLuUceAt8DhUvQd1FsCYhR4ChzaSIBMHSOi7lOfsByFWiCgEBH1GHAF2JlMPcBt4GC3HUYEaj9wF3gVEVPtfNVTwAXgWX7CDKq/1piAZTSZBmim8qJ6sQ3EgDqb/L7kU3MH2NHtl3dQX3r3Ak21UYAYAj4A/cl0JB+RF+uMRj4iQ+p8zt7KYFLdXKHuRi0gacBhV6a6pd5bA6KRNagFJPU9qv5u47toLmW1HnoR8Q5oAK1CVQu4FBHj/wUkaXsb+4pzpVaQFPqXrN7Be4Fx9VztIOr1BLEtmX4A94E/qdwHTKjDWYM6lu81dSlnn3V570BtuLxaMs2rZ/IgYxsBovaoPwsQA4VoFWEm8ql5DiysNyURsQTMpOIMcDYiPhd8xoGr/FtNC2G6FKXD6ihwGdiVHMoeeh8jYlA9ANwE3kTEp3bO6vE03qOONzR1r/q4RGrquaFFxFxE3ALOA9+6jExpdb180y55AhirhaRTatq0GXEzL8+ZIuI9cBJ4WKiartJf9nWV/mty7UfUafW7erpqRGI9EBuprffvu9n6C1KOmsqwI5A1AAAAAElFTkSuQmCC)}.taro-video-danmu{width:100%;margin-top:14px;margin-bottom:44px;font-size:14px;line-height:14px;position:absolute;top:0;bottom:0;left:0;overflow:visible}.taro-video-danmu-item{color:#fff;white-space:nowrap;line-height:1;-webkit-transition-property:left,-webkit-transform;transition-property:left,-webkit-transform;transition-property:left,transform;transition-property:left,transform,-webkit-transform;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;position:absolute;left:100%;-webkit-transform:translate(0);transform:translate(0)}.taro-video-toast{visibility:hidden;pointer-events:none;color:#000;background-color:rgba(255,255,255,.8);border-radius:5px;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.taro-video-toast.taro-video-toast-volume{width:100px;height:100px;display:block}.taro-video-toast-volume .taro-video-toast-title{text-align:center;width:100%;margin-top:10px;font-size:12px;line-height:16px;display:block}.taro-video-toast-volume .taro-video-toast-icon{fill:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFhklEQVR4Xu2aeaxfQxTHP1VBES0NIQitWtpaaxeCUkQtaYVa0tiClAq1ExIiQTVppaWxt8RWSa2tWkJQRGgtQaSIpUKEpG0ssbbk28yV2+mZO/e9e3vvu/e98897mZnfzPl+75mZs0wvurn06ub46SGgxwLqZaA3sB/wO/A+8G/V6tS5BU4BJgJbO9DvAMOB36okoQ4CNgAeBEYbQK8Bbm4zAdsBc4EdAyA/APZoKwHHAA8DG2UA/AnYrG0ErAVcD1yXA9gfQJ8c40obsqbPgH7AY8CROTVuFQFD3X7fJid4DWsNAWOAGZ0w58YTsDZwKzChA189PbTRBGwKzAYO6iT4srbAMHfTfAksjulS1iG4JzAH2Dy2YKS/qAVcCdzi1vgZOBZ4PWvNGAG6wgYCW0IwctzNmf06BcEXtYABwOeA4otEfgEOdnGGqV6IAAUopwM6zDYuAVjeKYpYwCjgCWOhH513+b2lhE+Avrj89NPyalzyuCIE6EN9BfQ1dHoPOAD40+9LE6D/5aoqSqtLsgiQC60DTiHzfGCFoaSsQAexZdlTgEuyCDgLuK8u5G7dEAHyKN8CBrtxLwDHAX8Z+l4N3GS0L3db4aN0X5opmc+2XZQAfb2LPd2eciG1lUSRJZ9qYHkZONwiYAjwSc3gs24BXWWWfzEVuMjQez13HljX8v7A28lvEgsInaBVcxLaAvr6sgJLtBWeNTrOB+4w2p8DRvoEnAPcXTVaY70QAbrbXwIONX7zBSAL/tvrk1+iviTllnRry2irr/QSEws4D7izCxMg1XQLLAQGGXpeCkw22kOWI49RMUujCJC+uwAfGtfcImAng4AtAMsBeg04pIkESOfbgQsMsNoGnxrtSrfv7rXrSlwXWN6kLZBgEBiB8iWUUZZPIN/AF1nMoiYSICDfAlt5iB4CxhpAzwXuMtqPBuY1lYB5wFEeqFeAwwyguvIUqvuiQO/xphJwP3Cmhyh0EKrOoGDIF7n+M5pKwEwXrqdBCaQSM77Ig7SSIicDs5pKwIvACA+pzFwZIF9OlKm36QyQV7jEqDDJk5VD58uFgGIGX1Se+6yJFqAKsqI6X84GdDb4Mh0Y5zUqjFYFakUTCXja5QLSmBQHbAL8ahAgT1AeYVreSKLLphGwF/CuAfLJQLldGSTFD75c5d4mNCoWyAqG9gYWGED1AOMKo12ZbiWA/idA++deY2DVTZ0Jh5UJPsFQtD/wDaAHGWl5EzgwaUi2gK4UXS11S0cTIjrMFBtYQdAk4DID0BnAAz4B6wNLgTKKG0VIDBHwqitwpOcW+OOB540FdeipNKbUWFrUtn06o5xOij4KyDuqU0IE3Obl/rLA63pTzm9XA8jKACjdniZAaSKFmUpB1yUhAlTsUEpMh913wEkuTe7rKTzPAHqO44vpKPkFhH3cWWBVV6ogJVYZUgz/tXtIYelzI3Ct0fExIGx6j7iKWBUUveyYBehv1RIjIEsfqziq8Xp4pSBJOYTVJFQcVY3wCFeKUjVGyYfQWB00+5bEVBECrNS+qsOKBpVHNCVWHs+LS7H5PV5pOu9v0+OKEOAXR39w1e1C7wM6AkJ1eLmkRcrpRQiQrqobXO5S3vL3/4kBKMsCknV0k+iasVLUMV3UX5SAPGtED8EOT+L9YENnCasUIXNO2goChFWHqAIRyxXN4qI1BCQg9dJESYq8LnbrCBAR8t50Lig6i0krCRBoVWhVlt45wkBrCRBuRZyPuAguxIPe9lXqhpd9DcZMXOvdkPF0Xu/8dohNUmZ/1QQkuitXr+d4fryuFx3jywQYm6suAqSX8vLTXKJDt4QqO6rtLYspXWZ/nQQkOJTAUJZGIav19q9MvKvN1RUIWKMAY5P3EBBjqO393d4C/gMVHwRQlpx21QAAAABJRU5ErkJggg==);background-position:50%;background-repeat:no-repeat;background-size:50%;width:50%;height:50%;margin-left:25%;display:block}.taro-video-toast-volume .taro-video-toast-value{width:80px;height:5px;margin-top:5px;margin-left:10px}.taro-video-toast-volume .taro-video-toast-value>.taro-video-toast-value-content{overflow:hidden}.taro-video-toast-volume-grids{width:80px;height:5px}.taro-video-toast-volume-grids-item{float:left;background-color:#000;width:7.1px;height:5px}.taro-video-toast-volume-grids-item:not(:first-child){margin-left:1px}.taro-video-toast.taro-video-toast-progress{color:#fff;background-color:rgba(0,0,0,.8);padding:6px;font-size:14px;line-height:18px}";
const Video = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.onPlay = createEvent(this, "play", 7);
this.onPause = createEvent(this, "pause", 7);
this.onEnded = createEvent(this, "ended", 7);
this.onTimeUpdate = createEvent(this, "timeupdate", 7);
this.onError = createEvent(this, "error", 7);
this.onFullScreenChange = createEvent(this, "fullscreenchange", 7);
this.onProgress = createEvent(this, "progress", 7);
this.onLoadedMetaData = createEvent(this, "loadedmetadata", 7);
this.currentTime = 0;
this.isDraggingProgress = false;
this.gestureType = 'none';
this.analyzeGesture = (e) => {
var _a;
const obj = {
type: 'none'
};
const nowX = e.touches[0].screenX;
const nowY = e.touches[0].screenY;
const distX = nowX - this.lastTouchScreenX;
const distY = nowY - this.lastTouchScreenY;
const enableVslideGesture = this.isFullScreen ? this.vslideGestureInFullscreen : this.vslideGesture;
if (this.gestureType === 'none') {
// 两点间距离
const dist = calcDist(distX, distY);
// 没有移动
if (dist < 10)
return obj;
if (Math.abs(distY) >= Math.abs(distX)) {
// 垂直方向移动：调整音量
if (enableVslideGesture) {
this.gestureType = 'adjustVolume';
this.lastVolume = this.videoRef.volume;
}
else {
return obj;
}
}
else if (Math.abs(distY) < Math.abs(distX)) {
// 水平方向移动：调整进度
if (this.enableProgressGesture) {
this.gestureType = 'adjustProgress';
this.lastPercentage = this.currentTime / ((_a = this.duration) !== null && _a !== void 0 ? _a : this._duration);
}
else {
return obj;
}
}
}
obj.type = this.gestureType;
obj.dataX = normalizeNumber(distX / 200);
obj.dataY = normalizeNumber(distY / 200);
return obj;
};
this.loadNativePlayer = () => {
var _a, _b;
if (this.videoRef) {
this.videoRef.src = this.src;
(_b = (_a = this.videoRef).load) === null || _b === void 0 ? void 0 : _b.call(_a);
}
};
this.init = () => {
const { src, videoRef } = this;
if (isHls(src)) {
import(
/* webpackExports: ["default"] */
'hls.js').then(e => {
const Hls = e.default;
this.HLS = Hls;
if (Hls.isSupported()) {
if (this.hls) {
this.hls.destroy();
}
this.hls = new Hls();
this.hls.loadSource(src);
this.hls.attachMedia(videoRef);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.autoplay && this.play();
});
this.hls.on(Hls.Events.ERROR, (_, data) => {
this.handleError(data);
});
}
else if (videoRef.canPlayType('application/vnd.apple.mpegurl')) {
this.loadNativePlayer();
}
else {
console.error('该浏览器不支持 HLS 播放');
}
});
}
else {
this.loadNativePlayer();
}
};
this.handlePlay = () => {
this.isPlaying = true;
this.isFirst = false;
this.controlsRef.toggleVisibility(true);
this.onPlay.emit();
};
this.handlePause = () => {
this.isPlaying = false;
this.controlsRef.toggleVisibility(true);
this.onPause.emit();
};
this.handleEnded = () => {
this.isFirst = true;
this.pause();
this.controlsRef.toggleVisibility();
this.onEnded.emit();
};
this.handleTimeUpdate = throttle(async (e) => {
var _a, _b;
this.currentTime = this.videoRef.currentTime;
const duration = this.duration || this._duration;
const isControlDragging = await this.controlsRef.getIsDraggingProgressBall();
if (this.controls && this.showProgress) {
if (!isControlDragging && !this.isDraggingProgress) {
this.controlsRef.setProgressBall(this.currentTime / duration);
this.controlsRef.setCurrentTime(this.currentTime);
}
}
this.danmuRef.tick(this.currentTime);
this.onTimeUpdate.emit({
duration: (_a = e.target) === null || _a === void 0 ? void 0 : _a.duration,
currentTime: (_b = e.target) === null || _b === void 0 ? void 0 : _b.currentTime
});
if (this.duration) {
if (this.currentTime >= this.duration) {
this.seek(0);
this.handleEnded();
}
}
}, 250);
this.handleError = e => {
var _a, _b;
if (this.hls) {
switch (e.type) {
case this.HLS.ErrorTypes.NETWORK_ERROR:
// try to recover network error
this.onError.emit({ errMsg: e.response });
this.hls.startLoad();
break;
case this.HLS.ErrorTypes.MEDIA_ERROR:
this.onError.emit({ errMsg: e.reason || '媒体错误,请重试' });
this.hls.recoverMediaError();
break;
}
}
else {
this.onError.emit({
errMsg: (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message,
});
}
};
this.handleDurationChange = () => {
this._duration = this.videoRef.duration;
};
this.handleProgress = () => {
this.onProgress.emit();
};
this.handleLoadedMetaData = (e) => {
const target = e.target;
this.onLoadedMetaData.emit({
width: target.videoWidth,
height: target.videoHeight,
duration: target.duration
});
};
this._play = () => this.videoRef.play();
this._pause = () => this.videoRef.pause();
this._stop = () => {
this.videoRef.pause();
this._seek(0);
};
this._seek = (position) => {
this.videoRef.currentTime = position;
};
this.onTouchStartContainer = (e) => {
this.lastTouchScreenX = e.touches[0].screenX;
this.lastTouchScreenY = e.touches[0].screenY;
};
this.onClickContainer = () => {
if (this.enablePlayGesture) {
const now = Date.now();
if (now - this.lastClickedTime < 300) {
// 双击
this.isPlaying ? this.pause() : this.play();
}
this.lastClickedTime = now;
}
this.controlsRef.toggleVisibility();
};
this.onClickFullScreenBtn = (e) => {
e.stopPropagation();
this.toggleFullScreen();
};
this.handleFullScreenChange = e => {
// 全屏后，"退出"走的是浏览器事件，在此同步状态
const timestamp = new Date().getTime();
if (!e.detail && this.isFullScreen && !document[screenFn.fullscreenElement] && timestamp - this.fullScreenTimestamp > 100) {
this.toggleFullScreen(false, true);
}
};
this.toggleFullScreen = (isFullScreen = !this.isFullScreen, fromBrowser = false) => {
this.isFullScreen = isFullScreen; // this.videoRef?.['webkitDisplayingFullscreen']
this.controlsRef.toggleVisibility(true);
this.fullScreenTimestamp = new Date().getTime();
this.onFullScreenChange.emit({
fullScreen: this.isFullScreen,
direction: 'vertical'
});
if (this.isFullScreen && !document[screenFn.fullscreenElement]) {
setTimeout(() => {
this.videoRef[screenFn.requestFullscreen]({ navigationUI: 'auto' });
Taro.eventCenter.trigger('__taroEnterFullScreen', {});
}, 0);
}
else {
if (!fromBrowser) {
// Note: 全屏后，"退出全屏"是浏览器按钮是浏览器内部按钮，非html按钮，点击"退出全屏"按钮是浏览器内部实现功能。此时再次调用exitFullscreen反而会报错，因此不再调用
document[screenFn.exitFullscreen]();
}
Taro.eventCenter.trigger('__taroExitFullScreen', {});
}
};
this.toggleMute = (e) => {
e.stopPropagation();
this.videoRef.muted = !this.isMute;
this.controlsRef.toggleVisibility(true);
this.isMute = !this.isMute;
};
this.toggleDanmu = (e) => {
e.stopPropagation();
this.controlsRef.toggleVisibility(true);
this._enableDanmu = !this._enableDanmu;
};
this.src = undefined;
this.duration = undefined;
this.controls = true;
this.autoplay = false;
this.loop = false;
this.muted = false;
this.initialTime = 0;
this.poster = undefined;
this.objectFit = 'contain';
this.showProgress = true;
this.showFullscreenBtn = true;
this.showPlayBtn = true;
this.showCenterPlayBtn = true;
this.showMuteBtn = false;
this.danmuList = undefined;
this.danmuBtn = false;
this.enableDanmu = false;
this.enablePlayGesture = false;
this.enableProgressGesture = true;
this.vslideGesture = false;
this.vslideGestureInFullscreen = true;
this.nativeProps = {};
this._duration = undefined;
this._enableDanmu = false;
this.isPlaying = false;
this.isFirst = true;
this.isFullScreen = false;
this.fullScreenTimestamp = new Date().getTime();
this.isMute = false;
}
componentWillLoad() {
this._enableDanmu = this.enableDanmu;
this.isMute = this.muted;
}
componentDidLoad() {
var _a, _b;
this.init();
if (this.initialTime) {
this.videoRef.currentTime = this.initialTime;
}
// 目前只支持 danmuList 初始化弹幕列表，还未支持更新弹幕列表
(_b = (_a = this.danmuRef).sendDanmu) === null || _b === void 0 ? void 0 : _b.call(_a, this.danmuList);
if (document.addEventListener) {
document.addEventListener(screenFn.fullscreenchange, this.handleFullScreenChange);
}
if (this.videoRef && scene === 'iOS') {
// NOTE: iOS 场景下 fullscreenchange 并不会在退出全屏状态下触发，仅 webkitpresentationmodechanged 与 webkitendfullscreen 可替代
this.videoRef.addEventListener('webkitendfullscreen', this.handleFullScreenChange);
}
}
componentDidRender() {
}
disconnectedCallback() {
if (document.removeEventListener) {
document.removeEventListener(screenFn.fullscreenchange, this.handleFullScreenChange);
}
if (this.videoRef && scene === 'iOS') {
this.videoRef.removeEventListener('webkitendfullscreen', this.handleFullScreenChange);
}
}
watchEnableDanmu(newVal) {
this._enableDanmu = newVal;
}
watchSrc() {
this.init();
}
async onDocumentTouchMove(e) {
if (this.lastTouchScreenX === undefined || this.lastTouchScreenY === undefined)
return;
if (await this.controlsRef.getIsDraggingProgressBall())
return;
const gestureObj = this.analyzeGesture(e);
if (gestureObj.type === 'adjustVolume') {
this.toastVolumeRef.style.visibility = 'visible';
const nextVolume = Math.max(Math.min(this.lastVolume - gestureObj.dataY, 1), 0);
this.videoRef.volume = nextVolume;
this.toastVolumeBarRef.style.width = `${nextVolume * 100}%`;
}
else if (gestureObj.type === 'adjustProgress') {
this.isDraggingProgress = true;
this.nextPercentage = Math.max(Math.min(this.lastPercentage + (gestureObj.dataX || 0), 1), 0);
if (this.controls && this.showProgress) {
this.controlsRef.setProgressBall(this.nextPercentage);
this.controlsRef.toggleVisibility(true);
}
const duration = this.duration || this._duration;
this.toastProgressTitleRef.innerHTML = `${formatTime(this.nextPercentage * duration)} / ${formatTime(duration)}`;
this.toastProgressRef.style.visibility = 'visible';
}
}
onDocumentTouchEnd() {
var _a;
if (this.gestureType === 'adjustVolume') {
this.toastVolumeRef.style.visibility = 'hidden';
}
else if (this.gestureType === 'adjustProgress') {
this.toastProgressRef.style.visibility = 'hidden';
}
if (this.isDraggingProgress) {
this.isDraggingProgress = false;
this.seek(this.nextPercentage * ((_a = this.duration) !== null && _a !== void 0 ? _a : this._duration));
}
this.gestureType = 'none';
this.lastTouchScreenX = undefined;
this.lastTouchScreenY = undefined;
}
async getHlsObject() {
// Note: H5 端专属方法，获取 HLS 实例 fix #11894
return this.hls;
}
/** 播放视频 */
async play() {
this._play();
}
/** 暂停视频 */
async pause() {
this._pause();
}
/** 停止视频 */
async stop() {
this._stop();
}
/** 跳转到指定位置 */
async seek(position) {
this._seek(position);
}
/** 进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。 */
async requestFullScreen() {
this.toggleFullScreen(true);
}
/** 退出全屏 */
async exitFullScreen() {
this.toggleFullScreen(false);
}
render() {
const { controls, autoplay, loop, muted, poster, objectFit, isFirst, isMute, isFullScreen, showCenterPlayBtn, isPlaying, _enableDanmu, showMuteBtn, danmuBtn, showFullscreenBtn, nativeProps } = this;
const duration = this.duration || this._duration;
const durationTime = formatTime(duration);
return (h(Host, { class: classnames('taro-video-container', {
'taro-video-type-fullscreen': isFullScreen
}), onTouchStart: this.onTouchStartContainer, onClick: this.onClickContainer }, h("video", Object.assign({ class: 'taro-video-video', style: {
'object-fit': objectFit
}, ref: dom => {
if (dom) {
this.videoRef = dom;
}
}, autoplay: autoplay, loop: loop, muted: muted, poster: controls ? poster : undefined, playsinline: true, "webkit-playsinline": true, onPlay: this.handlePlay, onPause: this.handlePause, onEnded: this.handleEnded, onTimeUpdate: this.handleTimeUpdate, onError: this.handleError, onDurationChange: this.handleDurationChange, onProgress: this.handleProgress, onLoadedMetaData: this.handleLoadedMetaData }, nativeProps), "\u6682\u65F6\u4E0D\u652F\u6301\u64AD\u653E\u8BE5\u89C6\u9891"), h("taro-video-danmu", { ref: dom => {
if (dom) {
this.danmuRef = dom;
}
}, enable: _enableDanmu }), isFirst && showCenterPlayBtn && !isPlaying && (h("div", { class: 'taro-video-cover' }, h("div", { class: 'taro-video-cover-play-button', onClick: () => this.play() }), h("p", { class: 'taro-video-cover-duration' }, durationTime))), h("taro-video-control", { ref: dom => {
if (dom) {
this.controlsRef = dom;
}
}, controls: controls, currentTime: this.currentTime, duration: duration, isPlaying: this.isPlaying, pauseFunc: this._pause, playFunc: this._play, seekFunc: this._seek, showPlayBtn: this.showPlayBtn, showProgress: this.showProgress }, showMuteBtn && (h("div", { class: classnames('taro-video-mute', {
'taro-video-type-mute': isMute
}), onClick: this.toggleMute })), danmuBtn && (h("div", { class: classnames('taro-video-danmu-button', {
'taro-video-danmu-button-active': _enableDanmu
}), onClick: this.toggleDanmu }, "\u5F39\u5E55")), showFullscreenBtn && (h("div", { class: classnames('taro-video-fullscreen', {
'taro-video-type-fullscreen': isFullScreen
}), onClick: this.onClickFullScreenBtn }))), h("div", { class: 'taro-video-toast taro-video-toast-volume', ref: dom => {
if (dom) {
this.toastVolumeRef = dom;
}
} }, h("div", { class: 'taro-video-toast-title' }, "\u97F3\u91CF"), h("div", { class: 'taro-video-toast-icon' }), h("div", { class: 'taro-video-toast-value' }, h("div", { class: 'taro-video-toast-value-content', ref: dom => {
if (dom) {
this.toastVolumeBarRef = dom;
}
} }, h("div", { class: 'taro-video-toast-volume-grids' }, Array(10).fill(1).map(() => (h("div", { class: 'taro-video-toast-volume-grids-item' }))))))), h("div", { class: 'taro-video-toast taro-video-toast-progress', ref: dom => {
if (dom) {
this.toastProgressRef = dom;
}
} }, h("div", { class: 'taro-video-toast-title', ref: dom => {
if (dom) {
this.toastProgressTitleRef = dom;
}
} }))));
}
get el() { return getElement(this); }
static get watchers() { return {
"enableDanmu": ["watchEnableDanmu"],
"src": ["watchSrc"]
}; }
};
Video.style = indexCss;
const VideoDanmu = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.list = [];
this.danmuElList = [];
this.currentTime = 0;
this.enable = false;
this.danmuList = [];
}
ensureProperties(danmu) {
const clonedDanmu = Object.assign({}, danmu);
if (!('time' in danmu)) {
clonedDanmu.time = this.currentTime;
}
clonedDanmu.key = Math.random();
clonedDanmu.bottom = `${Math.random() * 90 + 5}%`;
return clonedDanmu;
}
async sendDanmu(danmuList = []) {
if (Array.isArray(danmuList)) {
this.list = [
...this.list,
...danmuList.map(danmu => this.ensureProperties(danmu))
];
}
else {
const danmu = danmuList;
this.list = [
...this.list,
Object.assign({}, this.ensureProperties(danmu))
];
}
}
async tick(currentTime) {
this.currentTime = currentTime;
if (!this.enable)
return;
const danmuList = this.list;
/**
* @todo 这个判断对拖拽进度的处理不严谨
*/
const newDanmuList = danmuList.filter(({ time }) => {
return currentTime - time < 4 && currentTime > time;
});
let shouldUpdate = false;
const oldDanmuList = this.danmuList;
if (newDanmuList.length !== oldDanmuList.length) {
shouldUpdate = true;
}
else {
shouldUpdate = newDanmuList.some(({ key }) => {
return oldDanmuList.every((danmu) => {
return key !== danmu.key;
});
});
}
if (shouldUpdate) {
this.danmuList = newDanmuList;
}
}
componentDidUpdate() {
requestAnimationFrame(() => {
setTimeout(() => {
const danmuElList = this.danmuElList.splice(0);
danmuElList.forEach(danmu => {
danmu.style.left = '0';
danmu.style.webkitTransform = 'translateX(-100%)';
danmu.style.transform = 'translateX(-100%)';
});
});
});
}
render() {
if (!this.enable)
return '';
return (h(Host, { class: 'taro-video-danmu' }, this.danmuList.map(({ text, color, bottom, key }) => (h("p", { class: 'taro-video-danmu-item', key: key, style: {
color,
bottom
}, ref: ref => {
if (ref) {
this.danmuElList.push(ref);
}
} }, text)))));
}
};
export { VideoControl as taro_video_control, Video as taro_video_core, VideoDanmu as taro_video_danmu };