x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-10 12:46:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

add autoMin

Browse Source
This commit is contained in:
Harvey committed 2020-05-19 11:47:45 +08:00
1 parent 33a7e1193d
commit b202c21a7f
11 files changed
+150 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/index.js
+1
View File
@@ -10,6 +10,7 @@ var art = new Artplayer({
autoplay: false,
pip: true,
autoSize: true,
autoMin: true,
screenshot: true,
setting: true,
loop: true,
docs/document/README.md
+18
View File
@@ -268,6 +268,24 @@ var art = new Artplayer({
});
```
## autoMin
- Type: `Boolean`
- Default: `false`
When the player scrolls out of the viewport, the mini player mode is automatically enabled
[Run Code](/Configuration.autoMin)
```js
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
autoMin: true,
});
```
## loop
- Type: `Boolean`
docs/uncompiled/artplayer.js
+63 -7
View File
@@ -350,6 +350,14 @@
target.setAttribute('aria-label', msg);
target.setAttribute('data-balloon-pos', pos);
}
function isInViewport(el) {
var rect = el.getBoundingClientRect();
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
return vertInView && horInView;
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
@@ -711,6 +719,7 @@
sublings: sublings,
inverseClass: inverseClass,
tooltip: tooltip,
isInViewport: isInViewport,
ArtPlayerError: ArtPlayerError,
errorHandle: errorHandle,
srtToVtt: srtToVtt,
@@ -750,6 +759,7 @@
muted: 'boolean',
autoplay: 'boolean',
autoSize: 'boolean',
autoMin: 'boolean',
loop: 'boolean',
flip: 'boolean',
playbackRate: 'boolean',
@@ -2144,6 +2154,7 @@
function minMix(art, player) {
var i18n = art.i18n,
option = art.option,
storage = art.storage,
proxy = art.events.proxy,
_art$template = art.template,
$player = _art$template.$player,
@@ -2166,8 +2177,12 @@
proxy(document, 'mousemove', function (event) {
if (isDroging) {
addClass($player, 'art-is-dragging');
setStyle($player, 'left', "".concat(lastPlayerLeft + event.pageX - lastPageX, "px"));
setStyle($player, 'top', "".concat(lastPlayerTop + event.pageY - lastPageY, "px"));
var top = lastPlayerTop + event.pageY - lastPageY;
var left = lastPlayerLeft + event.pageX - lastPageX;
setStyle($player, 'top', "".concat(top, "px"));
setStyle($player, 'left', "".concat(left, "px"));
storage.set('top', top);
storage.set('left', left);
}
});
proxy(document, 'mouseup', function () {
@@ -2189,13 +2204,35 @@
player.autoSize = false;
cacheStyle = $player.style.cssText;
addClass($player, 'art-min');
var $body = document.body;
setStyle($player, 'top', "".concat($body.clientHeight - player.height - 50, "px"));
setStyle($player, 'left', "".concat($body.clientWidth - player.width - 50, "px"));
var top = storage.get('top');
var left = storage.get('left');
if (top && left) {
setStyle($player, 'top', "".concat(top, "px"));
setStyle($player, 'left', "".concat(left, "px"));
if (!isInViewport($minHeader)) {
storage.del('top');
storage.del('left');
player.min = true;
}
} else {
var $body = document.body;
var _top = $body.clientHeight - player.height - 50;
var _left = $body.clientWidth - player.width - 50;
storage.set('top', _top);
storage.set('left', _left);
setStyle($player, 'top', "".concat(_top, "px"));
setStyle($player, 'left', "".concat(_left, "px"));
}
player.aspectRatio = false;
player.playbackRate = false;
art.emit('minChange', true);
} else if (player.min) {
} else {
$player.style.cssText = cacheStyle;
removeClass($player, 'art-min');
setStyle($player, 'top', null);
@@ -3677,6 +3714,23 @@
}
}
function viewInit(art, events) {
var player = art.player,
autoMin = art.option.autoMin,
$container = art.template.$container;
var scrollFn = debounce(function () {
art.emit('view', isInViewport($container));
}, 200);
events.proxy(window, 'scroll', function () {
scrollFn();
});
art.on('view', function (state) {
if (autoMin) {
player.min = !state;
}
});
}
var Events =
/*#__PURE__*/
function () {
@@ -3697,6 +3751,7 @@
mousemoveInitInit(art, _this);
resizeInit(art, _this);
gestureInit(art, _this);
viewInit(art, _this);
});
}
}
@@ -4161,7 +4216,7 @@
key: "get",
value: function get(key) {
var storage = JSON.parse(localStorage.getItem(this.name)) || {};
return key ? storage[key] : {};
return key ? storage[key] : storage;
}
}, {
key: "set",
@@ -4697,6 +4752,7 @@
muted: false,
autoplay: false,
autoSize: false,
autoMin: false,
loop: false,
flip: false,
playbackRate: false,
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/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/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.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/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.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/fullscreenRotateMix.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/lightMix.js","../../packages/artplayer/src/player/minMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.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.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureInLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/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/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.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/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.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/fullscreenRotateMix.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/lightMix.js","../../packages/artplayer/src/player/minMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.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.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureInLine truncated
packages/artplayer/src/events/index.js
+4 -2
View File
@@ -3,6 +3,7 @@ import hoverInit from './hoverInit';
import mousemoveInit from './mousemoveInit';
import resizeInit from './resizeInit';
import gestureInit from './gestureInit';
import viewInit from './viewInit';
export default class Events {
constructor(art) {
@@ -18,13 +19,14 @@ export default class Events {
mousemoveInit(art, this);
resizeInit(art, this);
gestureInit(art, this);
viewInit(art, this);
});
}
}
proxy(target, name, callback, option = {}) {
if (Array.isArray(name)) {
return name.map(item => this.proxy(target, item, callback, option));
return name.map((item) => this.proxy(target, item, callback, option));
}
target.addEventListener(name, callback, option);
@@ -67,6 +69,6 @@ export default class Events {
}
destroy() {
this.destroyEvents.forEach(event => event());
this.destroyEvents.forEach((event) => event());
}
}
packages/artplayer/src/events/viewInit.js
+23
View File
@@ -0,0 +1,23 @@
import { debounce, isInViewport } from '../utils';
export default function viewInit(art, events) {
const {
player,
option: { autoMin },
template: { $container },
} = art;
const scrollFn = debounce(() => {
art.emit('view', isInViewport($container));
}, 200);
events.proxy(window, 'scroll', () => {
scrollFn();
});
art.on('view', (state) => {
if (autoMin) {
player.min = !state;
}
});
}
packages/artplayer/src/index.js
+1
View File
@@ -111,6 +111,7 @@ class Artplayer extends Emitter {
muted: false,
autoplay: false,
autoSize: false,
autoMin: false,
loop: false,
flip: false,
playbackRate: false,
packages/artplayer/src/player/minMix.js
+28 -7
View File
@@ -1,9 +1,10 @@
import { append, setStyle, addClass, removeClass, hasClass, def } from '../utils';
import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
export default function minMix(art, player) {
const {
i18n,
option,
storage,
events: { proxy },
template: { $player, $minClose, $minTitle, $minHeader },
} = art;
@@ -26,8 +27,12 @@ export default function minMix(art, player) {
proxy(document, 'mousemove', (event) => {
if (isDroging) {
addClass($player, 'art-is-dragging');
setStyle($player, 'left', `${lastPlayerLeft + event.pageX - lastPageX}px`);
setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
const top = lastPlayerTop + event.pageY - lastPageY;
const left = lastPlayerLeft + event.pageX - lastPageX;
setStyle($player, 'top', `${top}px`);
setStyle($player, 'left', `${left}px`);
storage.set('top', top);
storage.set('left', left);
}
});
@@ -53,13 +58,29 @@ export default function minMix(art, player) {
player.autoSize = false;
cacheStyle = $player.style.cssText;
addClass($player, 'art-min');
const $body = document.body;
setStyle($player, 'top', `${$body.clientHeight - player.height - 50}px`);
setStyle($player, 'left', `${$body.clientWidth - player.width - 50}px`);
const top = storage.get('top');
const left = storage.get('left');
if (top && left) {
setStyle($player, 'top', `${top}px`);
setStyle($player, 'left', `${left}px`);
if (!isInViewport($minHeader)) {
storage.del('top');
storage.del('left');
player.min = true;
}
} else {
const $body = document.body;
const top = $body.clientHeight - player.height - 50;
const left = $body.clientWidth - player.width - 50;
storage.set('top', top);
storage.set('left', left);
setStyle($player, 'top', `${top}px`);
setStyle($player, 'left', `${left}px`);
}
player.aspectRatio = false;
player.playbackRate = false;
art.emit('minChange', true);
} else if (player.min) {
} else {
$player.style.cssText = cacheStyle;
removeClass($player, 'art-min');
setStyle($player, 'top', null);
packages/artplayer/src/scheme/index.js
+1
View File
@@ -19,6 +19,7 @@ export default {
muted: 'boolean',
autoplay: 'boolean',
autoSize: 'boolean',
autoMin: 'boolean',
loop: 'boolean',
flip: 'boolean',
playbackRate: 'boolean',
packages/artplayer/src/storage.js
+1 -1
View File
@@ -5,7 +5,7 @@ export default class Storage {
get(key) {
const storage = JSON.parse(localStorage.getItem(this.name)) || {};
return key ? storage[key] : {};
return key ? storage[key] : storage;
}
set(key, value) {
packages/artplayer/src/utils/dom.js
+9
View File
@@ -64,3 +64,12 @@ export function tooltip(target, msg, pos = 'up') {
target.setAttribute('aria-label', msg);
target.setAttribute('data-balloon-pos', pos);
}
export function isInViewport(el) {
const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
return vertInView && horInView;
}