mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 08:01:20 -08:00
Fix mobile event
This commit is contained in:
1 parent
5c4d71cc7a
commit
53da53c35a
7 files changed
+175
-112
No files matched your search
@@ -1248,8 +1248,9 @@
|
|||||||
return $video.currentTime || 0;
|
return $video.currentTime || 0;
|
||||||
},
|
},
|
||||||
set: function set(time) {
|
set: function set(time) {
|
||||||
// Fixed: The provided double value is non-finite
|
time = parseFloat(time);
|
||||||
$video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, art.duration);
|
if (Number.isNaN(time)) return;
|
||||||
|
$video.currentTime = clamp(time, 0, art.duration);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -1458,7 +1459,7 @@
|
|||||||
|
|
||||||
/*!
|
/*!
|
||||||
* screenfull
|
* screenfull
|
||||||
* v5.0.2 - 2020-02-13
|
* v5.2.0 - 2021-11-03
|
||||||
* (c) Sindre Sorhus; MIT License
|
* (c) Sindre Sorhus; MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -1541,7 +1542,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
var screenfull = {
|
var screenfull = {
|
||||||
request: function (element) {
|
request: function (element, options) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
var onFullScreenEntered = function () {
|
var onFullScreenEntered = function () {
|
||||||
this.off('change', onFullScreenEntered);
|
this.off('change', onFullScreenEntered);
|
||||||
@@ -1552,7 +1553,7 @@
|
|||||||
|
|
||||||
element = element || document.documentElement;
|
element = element || document.documentElement;
|
||||||
|
|
||||||
var returnPromise = element[fn.requestFullscreen]();
|
var returnPromise = element[fn.requestFullscreen](options);
|
||||||
|
|
||||||
if (returnPromise instanceof Promise) {
|
if (returnPromise instanceof Promise) {
|
||||||
returnPromise.then(onFullScreenEntered).catch(reject);
|
returnPromise.then(onFullScreenEntered).catch(reject);
|
||||||
@@ -1580,8 +1581,8 @@
|
|||||||
}
|
}
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
},
|
},
|
||||||
toggle: function (element) {
|
toggle: function (element, options) {
|
||||||
return this.isFullscreen ? this.exit() : this.request(element);
|
return this.isFullscreen ? this.exit() : this.request(element, options);
|
||||||
},
|
},
|
||||||
onchange: function (callback) {
|
onchange: function (callback) {
|
||||||
this.on('change', callback);
|
this.on('change', callback);
|
||||||
@@ -2779,7 +2780,8 @@
|
|||||||
var _$progress$getBoundin = $progress.getBoundingClientRect(),
|
var _$progress$getBoundin = $progress.getBoundingClientRect(),
|
||||||
left = _$progress$getBoundin.left;
|
left = _$progress$getBoundin.left;
|
||||||
|
|
||||||
var width = clamp(event.pageX - left, 0, $progress.clientWidth);
|
var eventLeft = event.pageX || event.touches[0].clientX;
|
||||||
|
var width = clamp(eventLeft - left, 0, $progress.clientWidth);
|
||||||
var second = width / $progress.clientWidth * art.duration;
|
var second = width / $progress.clientWidth * art.duration;
|
||||||
var time = secondToTime(second);
|
var time = secondToTime(second);
|
||||||
var percentage = clamp(width / $progress.clientWidth, 0, 1);
|
var percentage = clamp(width / $progress.clientWidth, 0, 1);
|
||||||
@@ -2923,6 +2925,26 @@
|
|||||||
isDroging = false;
|
isDroging = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
proxy($indicator, 'touchstart', function (event) {
|
||||||
|
if (event.touches.length === 1) {
|
||||||
|
isDroging = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
proxy(document, 'touchmove', function (event) {
|
||||||
|
if (event.touches.length === 1 && isDroging) {
|
||||||
|
var _getPosFromEvent5 = getPosFromEvent(art, event),
|
||||||
|
second = _getPosFromEvent5.second,
|
||||||
|
percentage = _getPosFromEvent5.percentage;
|
||||||
|
|
||||||
|
setBar('played', percentage);
|
||||||
|
art.seek = second;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
proxy(document, 'touchend', function () {
|
||||||
|
if (isDroging) {
|
||||||
|
isDroging = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -3493,51 +3515,61 @@
|
|||||||
_classCallCheck(this, Contextmenu);
|
_classCallCheck(this, Contextmenu);
|
||||||
|
|
||||||
_this = _super.call(this, art);
|
_this = _super.call(this, art);
|
||||||
|
_this.art = art;
|
||||||
_this.name = 'contextmenu';
|
_this.name = 'contextmenu';
|
||||||
var option = art.option,
|
_this.$parent = art.template.$contextmenu;
|
||||||
_art$template = art.template,
|
|
||||||
$player = _art$template.$player,
|
|
||||||
$contextmenu = _art$template.$contextmenu,
|
|
||||||
proxy = art.events.proxy;
|
|
||||||
_this.$parent = $contextmenu;
|
|
||||||
art.once('ready', function () {
|
art.once('ready', function () {
|
||||||
_this.add(playbackRate$1({
|
if (!isMobile) {
|
||||||
|
_this.init();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createClass(Contextmenu, [{
|
||||||
|
key: "init",
|
||||||
|
value: function init() {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var _this$art = this.art,
|
||||||
|
option = _this$art.option,
|
||||||
|
_this$art$template = _this$art.template,
|
||||||
|
$player = _this$art$template.$player,
|
||||||
|
$contextmenu = _this$art$template.$contextmenu,
|
||||||
|
proxy = _this$art.events.proxy;
|
||||||
|
this.add(playbackRate$1({
|
||||||
disable: !option.playbackRate,
|
disable: !option.playbackRate,
|
||||||
name: 'playbackRate',
|
name: 'playbackRate',
|
||||||
index: 10
|
index: 10
|
||||||
}));
|
}));
|
||||||
|
this.add(aspectRatio$1({
|
||||||
_this.add(aspectRatio$1({
|
|
||||||
disable: !option.aspectRatio,
|
disable: !option.aspectRatio,
|
||||||
name: 'aspectRatio',
|
name: 'aspectRatio',
|
||||||
index: 20
|
index: 20
|
||||||
}));
|
}));
|
||||||
|
this.add(info({
|
||||||
_this.add(info({
|
|
||||||
disable: false,
|
disable: false,
|
||||||
name: 'info',
|
name: 'info',
|
||||||
index: 30
|
index: 30
|
||||||
}));
|
}));
|
||||||
|
this.add(version({
|
||||||
_this.add(version({
|
|
||||||
disable: false,
|
disable: false,
|
||||||
name: 'version',
|
name: 'version',
|
||||||
index: 40
|
index: 40
|
||||||
}));
|
}));
|
||||||
|
this.add(close({
|
||||||
_this.add(close({
|
|
||||||
disable: false,
|
disable: false,
|
||||||
name: 'close',
|
name: 'close',
|
||||||
index: 60
|
index: 60
|
||||||
}));
|
}));
|
||||||
|
|
||||||
for (var index = 0; index < option.contextmenu.length; index++) {
|
for (var index = 0; index < option.contextmenu.length; index++) {
|
||||||
_this.add(option.contextmenu[index]);
|
this.add(option.contextmenu[index]);
|
||||||
}
|
}
|
||||||
|
|
||||||
proxy($player, 'contextmenu', function (event) {
|
proxy($player, 'contextmenu', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
_this.show = true;
|
_this2.show = true;
|
||||||
var mouseX = event.clientX;
|
var mouseX = event.clientX;
|
||||||
var mouseY = event.clientY;
|
var mouseY = event.clientY;
|
||||||
|
|
||||||
@@ -3569,15 +3601,14 @@
|
|||||||
});
|
});
|
||||||
proxy($player, 'click', function (event) {
|
proxy($player, 'click', function (event) {
|
||||||
if (!includeFromEvent(event, $contextmenu)) {
|
if (!includeFromEvent(event, $contextmenu)) {
|
||||||
_this.show = false;
|
_this2.show = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
art.on('blur', function () {
|
this.art.on('blur', function () {
|
||||||
_this.show = false;
|
_this2.show = false;
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
return _this;
|
}]);
|
||||||
}
|
|
||||||
|
|
||||||
return Contextmenu;
|
return Contextmenu;
|
||||||
}(Component);
|
}(Component);
|
||||||
@@ -3599,7 +3630,9 @@
|
|||||||
_this = _super.call(this, art);
|
_this = _super.call(this, art);
|
||||||
_this.name = 'info';
|
_this.name = 'info';
|
||||||
art.once('ready', function () {
|
art.once('ready', function () {
|
||||||
_this.init();
|
if (!isMobile) {
|
||||||
|
_this.init();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
@@ -3883,7 +3916,7 @@
|
|||||||
startX = event.touches[0].clientX;
|
startX = event.touches[0].clientX;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
events.proxy(document, 'touchmove', function (event) {
|
events.proxy($video, 'touchmove', function (event) {
|
||||||
if (event.touches.length === 1 && isDroging) {
|
if (event.touches.length === 1 && isDroging) {
|
||||||
var widthDiff = event.touches[0].clientX - startX;
|
var widthDiff = event.touches[0].clientX - startX;
|
||||||
var proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
|
var proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
|
||||||
@@ -5009,7 +5042,7 @@
|
|||||||
}, {
|
}, {
|
||||||
key: "build",
|
key: "build",
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return '1641568645931';
|
return '1641776525362';
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
key: "config",
|
key: "config",
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/srcLine truncated
|
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.jsLine truncated
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { setStyles, includeFromEvent } from '../utils';
|
import { setStyles, includeFromEvent, isMobile } from '../utils';
|
||||||
import Component from '../utils/component';
|
import Component from '../utils/component';
|
||||||
import playbackRate from './playbackRate';
|
import playbackRate from './playbackRate';
|
||||||
import aspectRatio from './aspectRatio';
|
import aspectRatio from './aspectRatio';
|
||||||
@@ -10,95 +10,101 @@ export default class Contextmenu extends Component {
|
|||||||
constructor(art) {
|
constructor(art) {
|
||||||
super(art);
|
super(art);
|
||||||
|
|
||||||
|
this.art = art;
|
||||||
this.name = 'contextmenu';
|
this.name = 'contextmenu';
|
||||||
|
this.$parent = art.template.$contextmenu;
|
||||||
|
|
||||||
|
art.once('ready', () => {
|
||||||
|
if (!isMobile) {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
const {
|
const {
|
||||||
option,
|
option,
|
||||||
template: { $player, $contextmenu },
|
template: { $player, $contextmenu },
|
||||||
events: { proxy },
|
events: { proxy },
|
||||||
} = art;
|
} = this.art;
|
||||||
|
|
||||||
this.$parent = $contextmenu;
|
this.add(
|
||||||
|
playbackRate({
|
||||||
|
disable: !option.playbackRate,
|
||||||
|
name: 'playbackRate',
|
||||||
|
index: 10,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
art.once('ready', () => {
|
this.add(
|
||||||
this.add(
|
aspectRatio({
|
||||||
playbackRate({
|
disable: !option.aspectRatio,
|
||||||
disable: !option.playbackRate,
|
name: 'aspectRatio',
|
||||||
name: 'playbackRate',
|
index: 20,
|
||||||
index: 10,
|
}),
|
||||||
}),
|
);
|
||||||
);
|
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
aspectRatio({
|
info({
|
||||||
disable: !option.aspectRatio,
|
disable: false,
|
||||||
name: 'aspectRatio',
|
name: 'info',
|
||||||
index: 20,
|
index: 30,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
info({
|
version({
|
||||||
disable: false,
|
disable: false,
|
||||||
name: 'info',
|
name: 'version',
|
||||||
index: 30,
|
index: 40,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
version({
|
close({
|
||||||
disable: false,
|
disable: false,
|
||||||
name: 'version',
|
name: 'close',
|
||||||
index: 40,
|
index: 60,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
for (let index = 0; index < option.contextmenu.length; index++) {
|
||||||
close({
|
this.add(option.contextmenu[index]);
|
||||||
disable: false,
|
}
|
||||||
name: 'close',
|
|
||||||
index: 60,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
for (let index = 0; index < option.contextmenu.length; index++) {
|
proxy($player, 'contextmenu', (event) => {
|
||||||
this.add(option.contextmenu[index]);
|
event.preventDefault();
|
||||||
|
this.show = true;
|
||||||
|
|
||||||
|
const mouseX = event.clientX;
|
||||||
|
const mouseY = event.clientY;
|
||||||
|
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
|
||||||
|
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
|
||||||
|
let menuLeft = mouseX - cLeft;
|
||||||
|
let menuTop = mouseY - cTop;
|
||||||
|
|
||||||
|
if (mouseX + mWidth > cLeft + cWidth) {
|
||||||
|
menuLeft = cWidth - mWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
proxy($player, 'contextmenu', (event) => {
|
if (mouseY + mHeight > cTop + cHeight) {
|
||||||
event.preventDefault();
|
menuTop = cHeight - mHeight;
|
||||||
this.show = true;
|
}
|
||||||
|
|
||||||
const mouseX = event.clientX;
|
setStyles($contextmenu, {
|
||||||
const mouseY = event.clientY;
|
top: `${menuTop}px`,
|
||||||
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
|
left: `${menuLeft}px`,
|
||||||
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
|
|
||||||
let menuLeft = mouseX - cLeft;
|
|
||||||
let menuTop = mouseY - cTop;
|
|
||||||
|
|
||||||
if (mouseX + mWidth > cLeft + cWidth) {
|
|
||||||
menuLeft = cWidth - mWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mouseY + mHeight > cTop + cHeight) {
|
|
||||||
menuTop = cHeight - mHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
setStyles($contextmenu, {
|
|
||||||
top: `${menuTop}px`,
|
|
||||||
left: `${menuLeft}px`,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
proxy($player, 'click', (event) => {
|
proxy($player, 'click', (event) => {
|
||||||
if (!includeFromEvent(event, $contextmenu)) {
|
if (!includeFromEvent(event, $contextmenu)) {
|
||||||
this.show = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
art.on('blur', () => {
|
|
||||||
this.show = false;
|
this.show = false;
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.art.on('blur', () => {
|
||||||
|
this.show = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -3,7 +3,8 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
|
|||||||
export function getPosFromEvent(art, event) {
|
export function getPosFromEvent(art, event) {
|
||||||
const { $progress } = art.template;
|
const { $progress } = art.template;
|
||||||
const { left } = $progress.getBoundingClientRect();
|
const { left } = $progress.getBoundingClientRect();
|
||||||
const width = clamp(event.pageX - left, 0, $progress.clientWidth);
|
const eventLeft = event.pageX || event.touches[0].clientX;
|
||||||
|
const width = clamp(eventLeft - left, 0, $progress.clientWidth);
|
||||||
const second = (width / $progress.clientWidth) * art.duration;
|
const second = (width / $progress.clientWidth) * art.duration;
|
||||||
const time = secondToTime(second);
|
const time = secondToTime(second);
|
||||||
const percentage = clamp(width / $progress.clientWidth, 0, 1);
|
const percentage = clamp(width / $progress.clientWidth, 0, 1);
|
||||||
@@ -154,6 +155,26 @@ export default function progress(options) {
|
|||||||
isDroging = false;
|
isDroging = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
proxy($indicator, 'touchstart', (event) => {
|
||||||
|
if (event.touches.length === 1) {
|
||||||
|
isDroging = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
proxy(document, 'touchmove', (event) => {
|
||||||
|
if (event.touches.length === 1 && isDroging) {
|
||||||
|
const { second, percentage } = getPosFromEvent(art, event);
|
||||||
|
setBar('played', percentage);
|
||||||
|
art.seek = second;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
proxy(document, 'touchend', () => {
|
||||||
|
if (isDroging) {
|
||||||
|
isDroging = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export default function gestureInit(art, events) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
events.proxy(document, 'touchmove', (event) => {
|
events.proxy($video, 'touchmove', (event) => {
|
||||||
if (event.touches.length === 1 && isDroging) {
|
if (event.touches.length === 1 && isDroging) {
|
||||||
const widthDiff = event.touches[0].clientX - startX;
|
const widthDiff = event.touches[0].clientX - startX;
|
||||||
const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
|
const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { queryAll } from './utils';
|
import { queryAll, isMobile } from './utils';
|
||||||
import Component from './utils/component';
|
import Component from './utils/component';
|
||||||
|
|
||||||
export default class Info extends Component {
|
export default class Info extends Component {
|
||||||
@@ -6,7 +6,9 @@ export default class Info extends Component {
|
|||||||
super(art);
|
super(art);
|
||||||
this.name = 'info';
|
this.name = 'info';
|
||||||
art.once('ready', () => {
|
art.once('ready', () => {
|
||||||
this.init();
|
if (!isMobile) {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,8 +6,9 @@ export default function currentTimeMix(art) {
|
|||||||
def(art, 'currentTime', {
|
def(art, 'currentTime', {
|
||||||
get: () => $video.currentTime || 0,
|
get: () => $video.currentTime || 0,
|
||||||
set: (time) => {
|
set: (time) => {
|
||||||
// Fixed: The provided double value is non-finite
|
time = parseFloat(time);
|
||||||
$video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, art.duration);
|
if (Number.isNaN(time)) return;
|
||||||
|
$video.currentTime = clamp(time, 0, art.duration);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user