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

优化信息面板

Browse Source
This commit is contained in:
Harvey committed 2019-11-15 10:33:52 +08:00
1 parent 9f2038539e
commit 8c604e6e4d
4 files changed
+61 -123
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/info.js
+13 -71
View File
@@ -1,86 +1,31 @@
import { append, addClass, removeClass, queryAll } from './utils';
import { addClass, removeClass, queryAll } from './utils';
export default class Info {
constructor(art) {
this.art = art;
this.init();
}
this.timer = null;
init() {
const {
template: { $infoClose },
template: { $infoPanel, $infoClose },
events: { proxy },
} = this.art;
} = art;
this.types = queryAll('[data-video]', $infoPanel);
proxy($infoClose, 'click', () => {
this.show = false;
});
this.art.on('destroy', () => {
if (this.timer) {
clearTimeout(this.timer);
}
clearTimeout(this.timer);
});
}
creatInfo() {
const infoHtml = [];
infoHtml.push(`
<div class="art-info-item ">
<div class="art-info-title">Player version:</div>
<div class="art-info-content">__VERSION__</div>
</div>
`);
infoHtml.push(`
<div class="art-info-item">
<div class="art-info-title">Video url:</div>
<div class="art-info-content">${this.art.option.url}</div>
</div>
`);
infoHtml.push(`
<div class="art-info-item">
<div class="art-info-title">Video volume:</div>
<div class="art-info-content" data-video="volume"></div>
</div>
`);
infoHtml.push(`
<div class="art-info-item">
<div class="art-info-title">Video time:</div>
<div class="art-info-content" data-video="currentTime"></div>
</div>
`);
infoHtml.push(`
<div class="art-info-item">
<div class="art-info-title">Video duration:</div>
<div class="art-info-content" data-video="duration"></div>
</div>
`);
infoHtml.push(`
<div class="art-info-item">
<div class="art-info-title">Video resolution:</div>
<div class="art-info-content">
<span data-video="videoWidth"></span> x <span data-video="videoHeight"></span>
</div>
</div>
`);
return infoHtml.join('');
}
readInfo() {
const { $infoPanel, $video } = this.art.template;
const types = queryAll('[data-video]', $infoPanel);
types.forEach(item => {
const { $video } = this.art.template;
this.types.forEach(item => {
const value = $video[item.dataset.video];
if (value !== undefined) {
item.innerHTML = typeof value === 'number' ? value.toFixed(2) : value;
} else {
item.innerHTML = 'unknown';
}
item.innerHTML = typeof value === 'number' ? value.toFixed(2) : value;
});
}
@@ -93,13 +38,10 @@ export default class Info {
}
set show(value) {
const { $player, $infoPanel } = this.art.template;
const { $player } = this.art.template;
if (value) {
this.state = true;
addClass($player, 'artplayer-info-show');
if (!$infoPanel.innerHTML) {
append($infoPanel, this.creatInfo());
}
clearTimeout(this.timer);
this.loop();
this.art.emit('info:show');
packages/artplayer/src/template.js
+28 -1
View File
@@ -60,7 +60,34 @@ export default class Template {
</div>
</div>
<div class="artplayer-info artplayer-backdrop-filter">
<div class="artplayer-info-panel"></div>
<div class="artplayer-info-panel">
<div class="art-info-item">
<div class="art-info-title">Player version:</div>
<div class="art-info-content">__VERSION__</div>
</div>
<div class="art-info-item">
<div class="art-info-title">Video url:</div>
<div class="art-info-content" data-video="src"></div>
</div>
<div class="art-info-item">
<div class="art-info-title">Video volume:</div>
<div class="art-info-content" data-video="volume"></div>
</div>
<div class="art-info-item">
<div class="art-info-title">Video time:</div>
<div class="art-info-content" data-video="currentTime"></div>
</div>
<div class="art-info-item">
<div class="art-info-title">Video duration:</div>
<div class="art-info-content" data-video="duration"></div>
</div>
<div class="art-info-item">
<div class="art-info-title">Video resolution:</div>
<div class="art-info-content">
<span data-video="videoWidth"></span> x <span data-video="videoHeight"></span>
</div>
</div>
</div>
<div class="artplayer-info-close">[x]</div>
</div>
<div class="artplayer-pip-header">