fix thumbnails option

This commit is contained in:
Harvey committed 2022-01-11 09:34:22 +08:00
1 parent 592ae58f05
commit 8ef45f2452
11 files changed
+21 -55

No files matched your search

-2
View File
@@ -77,8 +77,6 @@ var art = new Artplayer({
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
subtitle: {
-4
View File
@@ -10,8 +10,6 @@ $artplayer.innerHTML = 'Drop video file here or click to upload.';
var thumbnail = new ArtplayerToolThumbnail({
fileInput: $artplayer,
number: 60, // 数量
width: 160, // 宽度
height: 90, // 高度
column: 10, // 列数
begin: 0, // 开始
end: NaN, // 结束
@@ -62,8 +60,6 @@ thumbnail.on('done', function () {
thumbnails: {
url: thumbnail.thumbnailUrl,
number: thumbnail.option.number,
width: thumbnail.option.width,
height: thumbnail.option.height,
column: thumbnail.option.column,
},
});
-10
View File
@@ -386,16 +386,6 @@ type Option = {
*/
number?: number;
/**
* The thumbnail item width
*/
width?: number;
/**
* The thumbnail item height
*/
height?: number;
/**
* The thumbnail column size
*/
+13 -13
View File
@@ -763,8 +763,6 @@
thumbnails: {
url: s,
number: n,
width: n,
height: n,
column: n
},
subtitle: {
@@ -924,7 +922,7 @@
}], [{
key: "html",
get: function get() {
return "\n <div class=\"art-video-player art-subtitle-show art-layer-show\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">4.2.2</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=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ";
return "\n <div class=\"art-video-player art-subtitle-show art-layer-show\">\n <video class=\"art-video\"></video>\n <div class=\"art-poster\"></div>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">4.2.3</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=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ";
}
}]);
@@ -3114,10 +3112,13 @@
return _objectSpread$e(_objectSpread$e({}, options), {}, {
mounted: function mounted($control) {
var option = art.option,
$progress = art.template.$progress,
_art$template = art.template,
$progress = _art$template.$progress,
$video = _art$template.$video,
_art$events = art.events,
proxy = _art$events.proxy,
loadImg = _art$events.loadImg;
var image = null;
var loading = false;
var isLoad = false;
@@ -3127,10 +3128,10 @@
var _option$thumbnails = option.thumbnails,
url = _option$thumbnails.url,
height = _option$thumbnails.height,
width = _option$thumbnails.width,
number = _option$thumbnails.number,
column = _option$thumbnails.column;
var width = image.naturalWidth / column;
var height = width / ($video.videoWidth / $video.videoHeight);
var perWidth = $progress.clientWidth / number;
var perIndex = Math.floor(posWidth / perWidth);
var yIndex = Math.ceil(perIndex / column) - 1;
@@ -3152,7 +3153,8 @@
proxy($progress, 'mousemove', function (event) {
if (!loading) {
loading = true;
loadImg(option.thumbnails.url).then(function () {
loadImg(option.thumbnails.url).then(function (img) {
image = img;
isLoad = true;
});
}
@@ -3481,7 +3483,7 @@
function version(option) {
return _objectSpread$7(_objectSpread$7({}, option), {}, {
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 4.2.2</a>'
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 4.2.3</a>'
});
}
@@ -5032,7 +5034,7 @@
}, {
key: "version",
get: function get() {
return '4.2.2';
return '4.2.3';
}
}, {
key: "env",
@@ -5042,7 +5044,7 @@
}, {
key: "build",
get: function get() {
return '1641776525362';
return '1641864505141';
}
}, {
key: "config",
@@ -5125,8 +5127,6 @@
thumbnails: {
url: '',
number: 60,
width: 160,
height: 90,
column: 10
},
subtitle: {
@@ -5149,7 +5149,7 @@
return Artplayer;
}(Emitter); // eslint-disable-next-line no-console
console.log('%c ArtPlayer %c 4.2.2 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
console.log('%c ArtPlayer %c 4.2.3 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
return Artplayer;
+1 -1
View File
@@ -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/attrMix.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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.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.jsLine 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/attrMix.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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.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.jsLine truncated
@@ -922,8 +922,6 @@ Set a preview map on the progress bar
| -------- | -------- | -------------- |
| `url` | `String` | Preview url |
| `number` | `Number` | Preview number |
| `width` | `Number` | Preview width |
| `height` | `Number` | Preview height |
| `column` | `Number` | Preview column |
<div className="run-code">▶ Run Code</div>
@@ -935,8 +933,6 @@ var art = new Artplayer({
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
});
@@ -923,8 +923,6 @@ var art = new Artplayer({
| -------- | -------- | ---------- |
| `url` | `String` | 预览图地址 |
| `number` | `Number` | 预览图数量 |
| `width` | `Number` | 预览图宽度 |
| `height` | `Number` | 预览图高度 |
| `column` | `Number` | 预览图列数 |
<div className="run-code">▶ Run Code</div>
@@ -936,8 +934,6 @@ var art = new Artplayer({
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
});
+7 -3
View File
@@ -7,16 +7,19 @@ export default function thumbnails(options) {
mounted: ($control) => {
const {
option,
template: { $progress },
template: { $progress, $video },
events: { proxy, loadImg },
} = art;
let image = null;
let loading = false;
let isLoad = false;
function showThumbnails(event) {
const { width: posWidth } = getPosFromEvent(art, event);
const { url, height, width, number, column } = option.thumbnails;
const { url, number, column } = option.thumbnails;
const width = image.naturalWidth / column;
const height = width / ($video.videoWidth / $video.videoHeight);
const perWidth = $progress.clientWidth / number;
const perIndex = Math.floor(posWidth / perWidth);
const yIndex = Math.ceil(perIndex / column) - 1;
@@ -37,7 +40,8 @@ export default function thumbnails(options) {
proxy($progress, 'mousemove', (event) => {
if (!loading) {
loading = true;
loadImg(option.thumbnails.url).then(() => {
loadImg(option.thumbnails.url).then((img) => {
image = img;
isLoad = true;
});
}
-2
View File
@@ -156,8 +156,6 @@ export default class Artplayer extends Emitter {
thumbnails: {
url: '',
number: 60,
width: 160,
height: 90,
column: 10,
},
subtitle: {
-2
View File
@@ -95,8 +95,6 @@ export default {
thumbnails: {
url: s,
number: n,
width: n,
height: n,
column: n,
},
subtitle: {
-10
View File
@@ -386,16 +386,6 @@ type Option = {
*/
number?: number;
/**
* The thumbnail item width
*/
width?: number;
/**
* The thumbnail item height
*/
height?: number;
/**
* The thumbnail column size
*/