mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
bugfix
This commit is contained in:
Harvey Zack committed
1 parent
1b91760be2
commit
3dc1e30bb3
15 files changed
+68
-197
No files matched your search
@@ -17,7 +17,7 @@ export default class Controls {
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.art = art;
|
||||
this.art.on('video:loadedmetadata', () => {
|
||||
this.art.on('firstCanplay', () => {
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -9,8 +9,7 @@ let i18nMap = {
|
||||
'Pause': '暂停',
|
||||
'Rate': '速度',
|
||||
'Mute': '静音',
|
||||
'Rotate': '旋转',
|
||||
'Flip': '翻转',
|
||||
'Flip': '视频翻转',
|
||||
'Horizontal': '水平',
|
||||
'Vertical': '垂直',
|
||||
'Reconnect': '重新连接',
|
||||
@@ -41,8 +40,7 @@ let i18nMap = {
|
||||
'Pause': '暫停',
|
||||
'Rate': '速度',
|
||||
'Mute': '靜音',
|
||||
'Rotate': '旋轉',
|
||||
'Flip': '翻轉',
|
||||
'Flip': '影片翻轉',
|
||||
'Horizontal': '水平',
|
||||
'Vertical': '垂直',
|
||||
'Reconnect': '重新連接',
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function flipMix(art, player) {
|
||||
|
||||
Object.defineProperty(player, 'flip', {
|
||||
value: dir => {
|
||||
const dirList = ['horizontal', 'vertical'];
|
||||
const dirList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(dirList.includes(dir), `The 'angle' need to be one of '[horizontal, vertical]', but got ${dir}`);
|
||||
art.refs.$player.dataset.flip = dir;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@ import pipMix from './pipMix';
|
||||
import loadedMix from './loadedMix';
|
||||
import playedMix from './playedMix';
|
||||
import autoSizeMix from './autoSizeMix';
|
||||
import rotateMix from './rotateMix';
|
||||
import flipMix from './flipMix';
|
||||
|
||||
export default class Player {
|
||||
@@ -43,7 +42,6 @@ export default class Player {
|
||||
loadedMix(art, this);
|
||||
playedMix(art, this);
|
||||
autoSizeMix(art, this);
|
||||
rotateMix(art, this);
|
||||
flipMix(art, this);
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { errorHandle } from '../utils';
|
||||
|
||||
export default function rotateMix(art, player) {
|
||||
Object.defineProperty(player, 'rotateState', {
|
||||
get: () => art.refs.$player.dataset.rotate
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'rotate', {
|
||||
value: angle => {
|
||||
const angleList = [0, 90, 180, 270];
|
||||
errorHandle(angleList.includes(angle), `The 'angle' need to be one of '[0, 90, 180, 270]', but got ${angle}`);
|
||||
art.refs.$player.dataset.rotate = angle;
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'rotateRemove', {
|
||||
value: () => {
|
||||
delete art.refs.$player.dataset.rotate;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -8,14 +8,22 @@ export default class Flip {
|
||||
apply(art, $setting) {
|
||||
const { i18n, events: { proxy }, player } = art;
|
||||
this.$header = $setting.querySelector('.art-setting-header');
|
||||
this.$body = append($setting, `
|
||||
<div class="art-setting-body">
|
||||
<span class="art-setting-btn" data-flip="horizontal">${i18n.get('Horizontal')}</span>
|
||||
<span class="art-setting-btn" data-flip="vertical">${i18n.get('Vertical')}</span>
|
||||
this.$body = $setting.querySelector('.art-setting-body');
|
||||
this.$btns = append(this.$body, `
|
||||
<div class="art-setting-btns">
|
||||
<div class="art-setting-btn current">
|
||||
<span data-flip="normal">${i18n.get('Normal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="vertical">${i18n.get('Vertical')}</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
proxy(this.$body, 'click', event => {
|
||||
proxy(this.$btns, 'click', event => {
|
||||
const { target } = event;
|
||||
const { flip } = target.dataset;
|
||||
if (flip) {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { setStyle, append, insertByIndex } from '../utils';
|
||||
import Rotate from './rotate';
|
||||
import Flip from './flip';
|
||||
|
||||
let id = 0;
|
||||
@@ -20,18 +19,11 @@ export default class Setting {
|
||||
this.hide();
|
||||
});
|
||||
|
||||
this.add(new Rotate({
|
||||
name: 'rotate',
|
||||
title: 'Rotate',
|
||||
disable: false,
|
||||
index: 10
|
||||
}));
|
||||
|
||||
this.add(new Flip({
|
||||
name: 'flip',
|
||||
title: 'Flip',
|
||||
disable: false,
|
||||
index: 20
|
||||
index: 10
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { append, inverseClass } from '../utils';
|
||||
|
||||
export default class Rotate {
|
||||
constructor(option) {
|
||||
this.option = option;
|
||||
}
|
||||
|
||||
apply(art, $setting) {
|
||||
const { events: { proxy }, player } = art;
|
||||
this.$header = $setting.querySelector('.art-setting-header');
|
||||
this.$body = append($setting, `
|
||||
<div class="art-setting-body">
|
||||
<span class="art-setting-btn" data-rotate="0">0°</span>
|
||||
<span class="art-setting-btn" data-rotate="90">90°</span>
|
||||
<span class="art-setting-btn" data-rotate="180">180°</span>
|
||||
<span class="art-setting-btn" data-rotate="270">270°</span>
|
||||
</div>
|
||||
`);
|
||||
|
||||
proxy(this.$body, 'click', event => {
|
||||
const { target } = event;
|
||||
const { rotate } = target.dataset;
|
||||
if (rotate) {
|
||||
player.rotate(Number(rotate));
|
||||
inverseClass(target, 'current');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
.artplayer-video-player {
|
||||
&[data-flip] {
|
||||
//
|
||||
&[data-flip="horizontal"] .artplayer-video{
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&[data-flip="horizontal"] {
|
||||
//
|
||||
}
|
||||
|
||||
&[data-flip="vertical"] {
|
||||
//
|
||||
&[data-flip="vertical"] .artplayer-video{
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
@@ -15,4 +15,3 @@ import './fullscreenWeb.scss';
|
||||
import './pip.scss';
|
||||
import './autoSize.scss';
|
||||
import './flip.scss';
|
||||
import './rotate.scss';
|
||||
@@ -1,21 +0,0 @@
|
||||
.artplayer-video-player {
|
||||
&[data-rotate] {
|
||||
//
|
||||
}
|
||||
|
||||
&[data-rotate="0"] {
|
||||
//
|
||||
}
|
||||
|
||||
&[data-rotate="90"] {
|
||||
//
|
||||
}
|
||||
|
||||
&[data-rotate="180"] {
|
||||
//
|
||||
}
|
||||
|
||||
&[data-rotate="270"] {
|
||||
//
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
pointer-events: none;
|
||||
.artplayer-setting-inner {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
@@ -22,7 +22,7 @@
|
||||
.artplayer-setting-body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: 365px;
|
||||
width: 315px;
|
||||
height: 100%;
|
||||
.art-setting {
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
@@ -51,19 +51,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.art-setting-btn {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: 1px solid #fff;
|
||||
margin-right: 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &.current {
|
||||
background: #fff;
|
||||
.art-setting-btns {
|
||||
display: flex;
|
||||
.art-setting-btn {
|
||||
flex: 1;
|
||||
padding: 0 4px;
|
||||
margin-left: -4px;
|
||||
span {
|
||||
display: block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover, &.current {
|
||||
span {
|
||||
color: #fff;
|
||||
background: #00a1d6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user