mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 08:51:20 -08:00
添加迷你播放模式
This commit is contained in:
Harvey committed
1 parent
ed80218e44
commit
05227caf18
13 files changed
+201
-36
No files matched your search
@@ -1,10 +1,10 @@
|
||||
import { append, tooltip } from '../utils';
|
||||
|
||||
export default function pip(option) {
|
||||
return art => ({
|
||||
return (art) => ({
|
||||
...option,
|
||||
tooltip: art.i18n.get('Mini player'),
|
||||
mounted: $control => {
|
||||
tooltip: art.i18n.get('PIP mode'),
|
||||
mounted: ($control) => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
@@ -18,8 +18,8 @@ export default function pip(option) {
|
||||
player.pipToggle = true;
|
||||
});
|
||||
|
||||
art.on('pipChange', value => {
|
||||
tooltip($control, i18n.get(value ? 'Exit mini player' : 'Mini player'));
|
||||
art.on('pipChange', (value) => {
|
||||
tooltip($control, i18n.get(value ? 'Exit PIP mode' : 'PIP mode'));
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function resizeInit(art, events) {
|
||||
|
||||
const resizeFn = throttle(() => {
|
||||
if (option.autoSize) {
|
||||
if (!player.fullscreen && !player.fullscreenWeb && !player.fullscreenRotate && !player.pip) {
|
||||
if (!player.fullscreen && !player.fullscreenWeb && !player.fullscreenRotate && !player.pip && !player.min) {
|
||||
player.autoSize = true;
|
||||
} else {
|
||||
player.autoSize = false;
|
||||
|
||||
@@ -32,7 +32,9 @@
|
||||
"Web fullscreen": "网页全屏",
|
||||
"Exit web fullscreen": "退出网页全屏",
|
||||
"Mini player": "迷你播放器",
|
||||
"Exit mini player": "退出迷你播放器",
|
||||
"PIP mode": "画中画模式",
|
||||
"Exit PIP mode": "退出画中画模式",
|
||||
"PIP not supported": "不支持画中画模式",
|
||||
"Local Subtitle": "本地字幕",
|
||||
"Local Video": "本地视频",
|
||||
"Subtitle offset time": "字幕偏移时间",
|
||||
|
||||
@@ -32,7 +32,9 @@
|
||||
"Web fullscreen": "網頁全屏",
|
||||
"Exit web fullscreen": "退出網頁全屏",
|
||||
"Mini player": "迷你播放器",
|
||||
"Exit mini player": "退出迷你播放器",
|
||||
"PIP mode": "畫中畫模式",
|
||||
"Exit PIP mode": "退出畫中畫模式",
|
||||
"PIP not supported": "不支持畫中畫模式",
|
||||
"Local Subtitle": "本地字幕",
|
||||
"Local Video": "本地視頻",
|
||||
"Subtitle offset time": "字幕偏移時間",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default function exclusiveInit(art, player) {
|
||||
const props = ['pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
|
||||
const props = ['min', 'pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
|
||||
props.forEach((name) => {
|
||||
const event = `${name}Change`;
|
||||
art.on(event, (state) => {
|
||||
|
||||
@@ -24,6 +24,7 @@ import autoSizeMix from './autoSizeMix';
|
||||
import rectMix from './rectMix';
|
||||
import flipMix from './flipMix';
|
||||
import lightMix from './lightMix';
|
||||
import minMix from './minMix';
|
||||
import { proxyPropertys } from '../utils';
|
||||
|
||||
export default class Player {
|
||||
@@ -54,6 +55,7 @@ export default class Player {
|
||||
rectMix(art, this);
|
||||
flipMix(art, this);
|
||||
lightMix(art, this);
|
||||
minMix(art, this);
|
||||
proxyPropertys(art, this);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { append, setStyle, addClass, removeClass, hasClass, def } from '../utils';
|
||||
|
||||
export default function minMix(art, player) {
|
||||
const {
|
||||
i18n,
|
||||
option,
|
||||
events: { proxy },
|
||||
template: { $player, $minClose, $minTitle, $minHeader },
|
||||
} = art;
|
||||
|
||||
let cacheStyle = '';
|
||||
let isDroging = false;
|
||||
let lastPageX = 0;
|
||||
let lastPageY = 0;
|
||||
let lastPlayerLeft = 0;
|
||||
let lastPlayerTop = 0;
|
||||
|
||||
proxy($minHeader, 'mousedown', (event) => {
|
||||
isDroging = true;
|
||||
lastPageX = event.pageX;
|
||||
lastPageY = event.pageY;
|
||||
lastPlayerLeft = player.left;
|
||||
lastPlayerTop = player.top;
|
||||
});
|
||||
|
||||
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`);
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
isDroging = false;
|
||||
removeClass($player, 'art-is-dragging');
|
||||
});
|
||||
|
||||
proxy($minClose, 'click', () => {
|
||||
player.min = false;
|
||||
isDroging = false;
|
||||
removeClass($player, 'art-is-dragging');
|
||||
});
|
||||
|
||||
append($minTitle, option.title || i18n.get('Mini player'));
|
||||
|
||||
def(player, 'min', {
|
||||
get() {
|
||||
return hasClass($player, 'art-min');
|
||||
},
|
||||
set(value) {
|
||||
if (value) {
|
||||
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`);
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
art.emit('minChange', true);
|
||||
} else if (player.min) {
|
||||
$player.style.cssText = cacheStyle;
|
||||
removeClass($player, 'art-min');
|
||||
setStyle($player, 'top', null);
|
||||
setStyle($player, 'left', null);
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
player.autoSize = option.autoSize;
|
||||
art.emit('minChange', false);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -59,7 +59,11 @@ function webkitPip(art, player) {
|
||||
}
|
||||
|
||||
export default function pipMix(art, player) {
|
||||
const { $video } = art.template;
|
||||
const {
|
||||
i18n,
|
||||
notice,
|
||||
template: { $video },
|
||||
} = art;
|
||||
if (document.pictureInPictureEnabled) {
|
||||
nativePip(art, player);
|
||||
} else if ($video.webkitSupportsPresentationMode) {
|
||||
@@ -69,6 +73,9 @@ export default function pipMix(art, player) {
|
||||
get() {
|
||||
return false;
|
||||
},
|
||||
set() {
|
||||
notice.show = i18n.get('PIP not supported');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import './hideCursor.scss';
|
||||
import './aspectRatio.scss';
|
||||
import './fullscreenWeb.scss';
|
||||
import './fullscreenRotate.scss';
|
||||
import './pip.scss';
|
||||
import './min.scss';
|
||||
import './autoSize.scss';
|
||||
import './flip.scss';
|
||||
import './balloon.scss';
|
||||
@@ -1,5 +1,5 @@
|
||||
.art-video-player {
|
||||
.art-pip-header {
|
||||
.art-min-header {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
@@ -15,7 +15,7 @@
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.art-pip-title {
|
||||
.art-min-title {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
@@ -23,7 +23,7 @@
|
||||
white-space: nowrap;
|
||||
cursor: move;
|
||||
}
|
||||
.art-pip-close {
|
||||
.art-min-close {
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
@@ -35,20 +35,20 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.art-pip {
|
||||
&.art-min {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 400px;
|
||||
height: 225px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
.art-pip-header {
|
||||
.art-min-header {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.art-hover {
|
||||
.art-pip-header {
|
||||
.art-min-header {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -91,9 +91,9 @@ export default class Template {
|
||||
</div>
|
||||
<div class="art-info-close">[x]</div>
|
||||
</div>
|
||||
<div class="art-pip-header">
|
||||
<div class="art-pip-title"></div>
|
||||
<div class="art-pip-close">×</div>
|
||||
<div class="art-min-header">
|
||||
<div class="art-min-title"></div>
|
||||
<div class="art-min-close">×</div>
|
||||
</div>
|
||||
<div class="art-contextmenus"></div>
|
||||
</div>
|
||||
@@ -121,9 +121,9 @@ export default class Template {
|
||||
this.$info = this.query('.art-info');
|
||||
this.$infoPanel = this.query('.art-info-panel');
|
||||
this.$infoClose = this.query('.art-info-close');
|
||||
this.$pipHeader = this.query('.art-pip-header');
|
||||
this.$pipTitle = this.query('.art-pip-title');
|
||||
this.$pipClose = this.query('.art-pip-close');
|
||||
this.$minHeader = this.query('.art-min-header');
|
||||
this.$minTitle = this.query('.art-min-title');
|
||||
this.$minClose = this.query('.art-min-close');
|
||||
this.$contextmenu = this.query('.art-contextmenus');
|
||||
|
||||
if (backdrop) {
|
||||
|
||||
Reference in new issue
Block a user