mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 00:31:20 -08:00
优化互斥关系
This commit is contained in:
Harvey committed
1 parent
abf60cfef6
commit
5cbb8bd1f3
16 files changed
+242
-29
No files matched your search
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"Video info": "视频统计信息",
|
||||
"Video info": "统计信息",
|
||||
"Close": "关闭",
|
||||
"Light Off": "关灯",
|
||||
"Light On": "开灯",
|
||||
"Video load failed": "视频加载失败",
|
||||
"Video load failed": "加载失败",
|
||||
"Volume": "音量",
|
||||
"Play": "播放",
|
||||
"Pause": "暂停",
|
||||
"Rate": "速度",
|
||||
"Mute": "静音",
|
||||
"Flip": "视频翻转",
|
||||
"Flip": "翻转",
|
||||
"Rotate": "旋转",
|
||||
"Horizontal": "水平",
|
||||
"Vertical": "垂直",
|
||||
"Reconnect": "重新连接",
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"Video info": "影片統計訊息",
|
||||
"Video info": "統計訊息",
|
||||
"Close": "關閉",
|
||||
"Light Off": "關燈",
|
||||
"Light On": "開燈",
|
||||
"Video load failed": "影片載入失敗",
|
||||
"Video load failed": "載入失敗",
|
||||
"Volume": "音量",
|
||||
"Play": "播放",
|
||||
"Pause": "暫停",
|
||||
"Rate": "速度",
|
||||
"Mute": "靜音",
|
||||
"Flip": "影片翻轉",
|
||||
"Flip": "翻轉",
|
||||
"Rotate": "旋轉",
|
||||
"Horizontal": "水平",
|
||||
"Vertical": "垂直",
|
||||
"Reconnect": "重新連接",
|
||||
|
||||
@@ -114,6 +114,7 @@ export default class Artplayer extends Emitter {
|
||||
autoMini: false,
|
||||
loop: false,
|
||||
flip: false,
|
||||
rotate: false,
|
||||
playbackRate: false,
|
||||
aspectRatio: false,
|
||||
screenshot: false,
|
||||
|
||||
@@ -19,6 +19,7 @@ export default function aspectRatioMix(art, player) {
|
||||
`'aspectRatio' only accept ${ratioList.toString()} as parameters`,
|
||||
);
|
||||
|
||||
player.rotate = 0;
|
||||
if (ratio === 'default') {
|
||||
player.aspectRatio = false;
|
||||
} else {
|
||||
@@ -48,7 +49,7 @@ export default function aspectRatioMix(art, player) {
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatio');
|
||||
art.emit('aspectRatio', 'default');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,11 +10,16 @@ export default function flipMix(art, player) {
|
||||
if (flip) {
|
||||
const flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
player.rotate = 0;
|
||||
if (flip === 'normal') {
|
||||
player.flip = false;
|
||||
} else {
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flip', flip);
|
||||
}
|
||||
} else {
|
||||
delete $player.dataset.flip;
|
||||
art.emit('flip');
|
||||
art.emit('flip', 'normal');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,44 @@
|
||||
import { def } from '../utils';
|
||||
import { setStyle, errorHandle, def } from '../utils';
|
||||
|
||||
export default function rotateMix(art, player) {
|
||||
const {
|
||||
template: { $video, $player },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
def(player, 'rotate', {
|
||||
get: () => 'rotate',
|
||||
get: () => Number($player.dataset.rotate) || 0,
|
||||
set: (deg) => {
|
||||
const degList = [-270, -180, -90, 0, 90, 180, 270];
|
||||
errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
|
||||
player.flip = false;
|
||||
player.aspectRatio = false;
|
||||
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
|
||||
|
||||
if (deg) {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { clientWidth, clientHeight } = $player;
|
||||
const degFormat = deg < 0 ? deg + 360 : deg;
|
||||
|
||||
$player.dataset.rotate = deg;
|
||||
art.emit('rotate', deg);
|
||||
} else {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.rotate;
|
||||
art.emit('rotate', 0);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
def(player, 'rotateReset', {
|
||||
set(value) {
|
||||
if (value && player.rotate) {
|
||||
const { rotate } = player;
|
||||
player.rotate = rotate;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -35,6 +35,7 @@ export default {
|
||||
autoMini: 'boolean',
|
||||
loop: 'boolean',
|
||||
flip: 'boolean',
|
||||
rotate: 'boolean',
|
||||
playbackRate: 'boolean',
|
||||
aspectRatio: 'boolean',
|
||||
screenshot: 'boolean',
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Component from '../utils/component';
|
||||
import flip from './flip';
|
||||
import rotate from './rotate';
|
||||
import aspectRatio from './aspectRatio';
|
||||
import playbackRate from './playbackRate';
|
||||
|
||||
@@ -32,6 +33,13 @@ export default class Setting extends Component {
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
rotate({
|
||||
disable: !option.rotate,
|
||||
name: 'rotate',
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
aspectRatio({
|
||||
disable: !option.aspectRatio,
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { query } from '../utils';
|
||||
|
||||
export default function rotate(option) {
|
||||
return (art) => {
|
||||
const { i18n, player } = art;
|
||||
return {
|
||||
...option,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Rotate')}: <span class="art-rotate-value">0°</span>
|
||||
</div>
|
||||
<div class="art-setting-radio">
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="90">+90°</button>
|
||||
</div>
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="-90">-90°</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
click: (setting, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
const deg = player.rotate + Number(value);
|
||||
if (deg === 360 || deg === -360) {
|
||||
player.rotate = 0;
|
||||
} else {
|
||||
player.rotate = deg;
|
||||
}
|
||||
} else {
|
||||
player.rotate = 0;
|
||||
}
|
||||
},
|
||||
mounted: ($setting) => {
|
||||
const $value = query('.art-rotate-value', $setting);
|
||||
art.on('rotate', (rotate) => {
|
||||
$value.innerText = `${rotate}°`;
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -17,5 +17,6 @@
|
||||
@import './mini.scss';
|
||||
@import './autoSize.scss';
|
||||
@import './flip.scss';
|
||||
@import './rotate.scss';
|
||||
@import './selector.scss';
|
||||
@import './balloon.scss';
|
||||
@@ -0,0 +1,22 @@
|
||||
.art-video-player {
|
||||
&[data-rotate='90'],
|
||||
&[data-rotate='-270'] {
|
||||
.art-video {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='180'],
|
||||
&[data-rotate='-180'] {
|
||||
.art-video {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='270'],
|
||||
&[data-rotate='-90'] {
|
||||
.art-video {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -53,6 +53,10 @@
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
|
||||
&:active {
|
||||
background-color: #00a1d6;
|
||||
}
|
||||
}
|
||||
&.current button {
|
||||
background-color: #00a1d6;
|
||||
|
||||
+1
@@ -30,6 +30,7 @@ export default class Artplayer {
|
||||
autoMini?: boolean;
|
||||
loop?: boolean;
|
||||
flip?: boolean;
|
||||
rotate?: boolean;
|
||||
playbackRate?: boolean;
|
||||
aspectRatio?: boolean;
|
||||
screenshot?: boolean;
|
||||
|
||||
Reference in new issue
Block a user