x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 19:06:15 -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

docs/uncompiled/artplayer.js
+19 -50
View File
@@ -791,7 +791,7 @@
}, {
key: "initDesktop",
value: function initDesktop() {
this.$container.innerHTML = "\n <div class=\"artplayer-video-player\" style=\"--theme: ".concat(this.art.option.theme, "\">\n <video class=\"artplayer-video\">\n <track default kind=\"metadata\"></track>\n </video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-danmuku\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\">\n <div class=\"artplayer-state\"></div>\n </div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner artplayer-backdrop-filter\">\n <div class=\"artplayer-setting-body\"></div>\n </div>\n </div>\n <div class=\"artplayer-info artplayer-backdrop-filter\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div class=\"artplayer-contextmenu artplayer-backdrop-filter\"></div>\n </div>\n ");
this.$container.innerHTML = "\n <div class=\"artplayer-video-player\" style=\"--theme: ".concat(this.art.option.theme, "\">\n <video class=\"artplayer-video\">\n <track default kind=\"metadata\"></track>\n </video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-danmuku\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\">\n <div class=\"artplayer-state\"></div>\n </div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner artplayer-backdrop-filter\">\n <div class=\"artplayer-setting-body\"></div>\n </div>\n </div>\n <div class=\"artplayer-info artplayer-backdrop-filter\">\n <div class=\"artplayer-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.1.18</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div class=\"artplayer-contextmenu artplayer-backdrop-filter\"></div>\n </div>\n ");
this.$player = this.query('.artplayer-video-player');
this.$video = this.query('.artplayer-video');
this.$track = this.query('.artplayer-video track');
@@ -3134,56 +3134,32 @@
/*#__PURE__*/
function () {
function Info(art) {
var _this = this;
classCallCheck(this, Info);
this.art = art;
this.init();
this.timer = null;
var _art$template = art.template,
$infoPanel = _art$template.$infoPanel,
$infoClose = _art$template.$infoClose,
proxy = art.events.proxy;
this.types = queryAll('[data-video]', $infoPanel);
proxy($infoClose, 'click', function () {
_this.show = false;
});
this.art.on('destroy', function () {
clearTimeout(_this.timer);
});
}
createClass(Info, [{
key: "init",
value: function init() {
var _this = this;
var _this$art = this.art,
$infoClose = _this$art.template.$infoClose,
proxy = _this$art.events.proxy;
proxy($infoClose, 'click', function () {
_this.show = false;
});
this.art.on('destroy', function () {
if (_this.timer) {
clearTimeout(_this.timer);
}
});
}
}, {
key: "creatInfo",
value: function creatInfo() {
var infoHtml = [];
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.1.18</div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n </div>\n "));
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n ");
return infoHtml.join('');
}
}, {
key: "readInfo",
value: function readInfo() {
var _this$art$template = this.art.template,
$infoPanel = _this$art$template.$infoPanel,
$video = _this$art$template.$video;
var types = queryAll('[data-video]', $infoPanel);
types.forEach(function (item) {
var $video = this.art.template.$video;
this.types.forEach(function (item) {
var 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;
});
}
}, {
@@ -3206,18 +3182,11 @@
}, {
key: "show",
set: function set(value) {
var _this$art$template2 = this.art.template,
$player = _this$art$template2.$player,
$infoPanel = _this$art$template2.$infoPanel;
var $player = this.art.template.$player;
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');
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@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@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@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/video.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/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.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/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/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/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/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/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../pLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@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@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@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/video.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/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.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/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/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/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/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/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../pLine truncated
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">