mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-14 00:06:17 -08:00
update
This commit is contained in:
zhw2590582 committed
1 parent
68b712de0f
commit
28d9ad2eaa
5 files changed
+84
-36
No files matched your search
@@ -2517,8 +2517,8 @@
|
||||
append($value, option.html);
|
||||
$ref.innerText = '';
|
||||
append($ref, $value);
|
||||
var list = option.selector.map(function (item) {
|
||||
return "<div class=\"art-selector-item\">".concat(item.name, "</div>");
|
||||
var list = option.selector.map(function (item, index) {
|
||||
return "<div class=\"art-selector-item\" data-index=\"".concat(index, "\">").concat(item.html, "</div>");
|
||||
}).join('');
|
||||
var $list = document.createElement('div');
|
||||
addClass($list, 'art-selector-list');
|
||||
@@ -2526,27 +2526,34 @@
|
||||
append($ref, $list);
|
||||
|
||||
var setLeft = function setLeft() {
|
||||
$list.style.left = "-".concat(getStyle($list, 'width') / 2 - getStyle($ref, 'width') / 2, "px");
|
||||
var left = getStyle($ref, 'width') / 2 - getStyle($list, 'width') / 2;
|
||||
console.log(getStyle($list, 'width'), getStyle($ref, 'width'));
|
||||
$list.style.left = "".concat(left, "px");
|
||||
};
|
||||
|
||||
hover($ref, setLeft);
|
||||
proxy($ref, 'click', function (event) {
|
||||
if (hasClass(event.target, 'art-selector-item')) {
|
||||
var name = event.target.innerText;
|
||||
if ($value.innerText === name) return;
|
||||
var find = option.selector.find(function (item) {
|
||||
return item.name === name;
|
||||
});
|
||||
$value.innerText = name;
|
||||
proxy($list, 'click', function (event) {
|
||||
var path = event.composedPath() || [];
|
||||
var $item = path.find(function (item) {
|
||||
return hasClass(item, 'art-selector-item');
|
||||
});
|
||||
|
||||
if ($item) {
|
||||
var index = Number($item.dataset.index);
|
||||
var find = option.selector[index] || {};
|
||||
$value.innerText = $item.innerText;
|
||||
|
||||
if (option.onSelect) {
|
||||
var result = option.onSelect.call(_this2.art, find);
|
||||
|
||||
if (typeof result === 'string') {
|
||||
$value.innerHTML = result;
|
||||
}
|
||||
}
|
||||
|
||||
setLeft();
|
||||
|
||||
if (find) {
|
||||
if (option.onSelect) {
|
||||
option.onSelect.call(_this2.art, find);
|
||||
}
|
||||
|
||||
_this2.art.emit('selector', find);
|
||||
}
|
||||
_this2.art.emit('selector', find);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.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/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.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@5.0.2@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/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/srcLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.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/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.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@5.0.2@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/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/srcLine truncated
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
title: 用户创建
|
||||
sidebar_position: 1
|
||||
---
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: 在控制栏添加列表
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
有时你需要在控制栏自定义下拉列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Subtitle 01',
|
||||
selector: [
|
||||
{
|
||||
html: '<span>Subtitle 01</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=1',
|
||||
},
|
||||
{
|
||||
html: '<span>Subtitle 02</span>',
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
art.subtitle.switch(item.url, {
|
||||
name: item.html,
|
||||
});
|
||||
|
||||
// 你可以返回一个字符串，用于替换被选择的文案
|
||||
return '你点击了' + item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -96,31 +96,37 @@ export default class Component {
|
||||
$ref.innerText = '';
|
||||
append($ref, $value);
|
||||
|
||||
const list = option.selector.map((item) => `<div class="art-selector-item">${item.name}</div>`).join('');
|
||||
const list = option.selector
|
||||
.map((item, index) => `<div class="art-selector-item" data-index="${index}">${item.html}</div>`)
|
||||
.join('');
|
||||
const $list = document.createElement('div');
|
||||
addClass($list, 'art-selector-list');
|
||||
append($list, list);
|
||||
append($ref, $list);
|
||||
|
||||
const setLeft = () => {
|
||||
$list.style.left = `-${getStyle($list, 'width') / 2 - getStyle($ref, 'width') / 2}px`;
|
||||
const left = getStyle($ref, 'width') / 2 - getStyle($list, 'width') / 2;
|
||||
console.log(getStyle($list, 'width'), getStyle($ref, 'width'));
|
||||
$list.style.left = `${left}px`;
|
||||
};
|
||||
|
||||
hover($ref, setLeft);
|
||||
|
||||
proxy($ref, 'click', (event) => {
|
||||
if (hasClass(event.target, 'art-selector-item')) {
|
||||
const name = event.target.innerText;
|
||||
if ($value.innerText === name) return;
|
||||
const find = option.selector.find((item) => item.name === name);
|
||||
$value.innerText = name;
|
||||
setLeft();
|
||||
if (find) {
|
||||
if (option.onSelect) {
|
||||
option.onSelect.call(this.art, find);
|
||||
proxy($list, 'click', (event) => {
|
||||
const path = event.composedPath() || [];
|
||||
const $item = path.find((item) => hasClass(item, 'art-selector-item'));
|
||||
if ($item) {
|
||||
const index = Number($item.dataset.index);
|
||||
const find = option.selector[index] || {};
|
||||
$value.innerText = $item.innerText;
|
||||
if (option.onSelect) {
|
||||
const result = option.onSelect.call(this.art, find);
|
||||
if (typeof result === 'string') {
|
||||
$value.innerHTML = result;
|
||||
}
|
||||
this.art.emit('selector', find);
|
||||
}
|
||||
setLeft();
|
||||
this.art.emit('selector', find);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user