mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 11:11:20 -08:00
update thumbnails
This commit is contained in:
Harvey Zack committed
1 parent
c4fd5b1a5d
commit
f4c9f1f639
5 files changed
+60
-55
No files matched your search
@@ -23,6 +23,11 @@ var art = new Artplayer({
|
|||||||
'x5-video-orientation': 'portraint',
|
'x5-video-orientation': 'portraint',
|
||||||
preload: "metadata"
|
preload: "metadata"
|
||||||
},
|
},
|
||||||
|
thumbnails: {
|
||||||
|
url: '/assets/sample/thumbnails.png',
|
||||||
|
number: 60,
|
||||||
|
column: 10,
|
||||||
|
},
|
||||||
subtitle: {
|
subtitle: {
|
||||||
name: '中日双语',
|
name: '中日双语',
|
||||||
url: '/assets/sample/subtitle.srt',
|
url: '/assets/sample/subtitle.srt',
|
||||||
|
|||||||
@@ -236,13 +236,13 @@ class Artplayer extends (0, _emitterDefault.default) {
|
|||||||
return instances;
|
return instances;
|
||||||
}
|
}
|
||||||
static get version() {
|
static get version() {
|
||||||
return "5.1.5";
|
return "5.1.6";
|
||||||
}
|
}
|
||||||
static get env() {
|
static get env() {
|
||||||
return "development";
|
return "development";
|
||||||
}
|
}
|
||||||
static get build() {
|
static get build() {
|
||||||
return "2024-06-03 00:13:07";
|
return "2024-06-08 11:29:54";
|
||||||
}
|
}
|
||||||
static get config() {
|
static get config() {
|
||||||
return 0, _configDefault.default;
|
return 0, _configDefault.default;
|
||||||
@@ -1253,7 +1253,7 @@ class Template {
|
|||||||
<div class="art-info-panel">
|
<div class="art-info-panel">
|
||||||
<div class="art-info-item">
|
<div class="art-info-item">
|
||||||
<div class="art-info-title">Player version:</div>
|
<div class="art-info-title">Player version:</div>
|
||||||
<div class="art-info-content">${"5.1.5"}</div>
|
<div class="art-info-content">${"5.1.6"}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="art-info-item">
|
<div class="art-info-item">
|
||||||
<div class="art-info-title">Video url:</div>
|
<div class="art-info-title">Video url:</div>
|
||||||
@@ -2784,7 +2784,7 @@ class Control extends (0, _componentDefault.default) {
|
|||||||
position: "top",
|
position: "top",
|
||||||
index: 10
|
index: 10
|
||||||
}));
|
}));
|
||||||
if (option.thumbnails.url && !option.isLive && !(0, _utils.isMobile)) this.add((0, _thumbnailsDefault.default)({
|
if (option.thumbnails.url && !option.isLive) this.add((0, _thumbnailsDefault.default)({
|
||||||
name: "thumbnails",
|
name: "thumbnails",
|
||||||
position: "top",
|
position: "top",
|
||||||
index: 20
|
index: 20
|
||||||
@@ -3398,18 +3398,16 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|||||||
parcelHelpers.defineInteropFlag(exports);
|
parcelHelpers.defineInteropFlag(exports);
|
||||||
parcelHelpers.export(exports, "default", ()=>thumbnails);
|
parcelHelpers.export(exports, "default", ()=>thumbnails);
|
||||||
var _utils = require("../utils");
|
var _utils = require("../utils");
|
||||||
var _progress = require("./progress");
|
|
||||||
function thumbnails(options) {
|
function thumbnails(options) {
|
||||||
return (art)=>({
|
return (art)=>({
|
||||||
...options,
|
...options,
|
||||||
mounted: ($control)=>{
|
mounted: ($control)=>{
|
||||||
const { option, template: { $progress, $video }, events: { proxy, loadImg } } = art;
|
const { option, events: { loadImg }, template: { $progress, $video } } = art;
|
||||||
|
let timer = null;
|
||||||
let image = null;
|
let image = null;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
let isLoad = false;
|
let isLoad = false;
|
||||||
let isHover = false;
|
function showThumbnails(posWidth) {
|
||||||
function showThumbnails(event) {
|
|
||||||
const { width: posWidth } = (0, _progress.getPosFromEvent)(art, event);
|
|
||||||
const { url, number, column, width, height } = option.thumbnails;
|
const { url, number, column, width, height } = option.thumbnails;
|
||||||
const width2 = width || image.naturalWidth / column;
|
const width2 = width || image.naturalWidth / column;
|
||||||
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
||||||
@@ -3425,31 +3423,31 @@ function thumbnails(options) {
|
|||||||
else if (posWidth > $progress.clientWidth - width2 / 2) (0, _utils.setStyle)($control, "left", `${$progress.clientWidth - width2}px`);
|
else if (posWidth > $progress.clientWidth - width2 / 2) (0, _utils.setStyle)($control, "left", `${$progress.clientWidth - width2}px`);
|
||||||
else (0, _utils.setStyle)($control, "left", `${posWidth - width2 / 2}px`);
|
else (0, _utils.setStyle)($control, "left", `${posWidth - width2 / 2}px`);
|
||||||
}
|
}
|
||||||
proxy($progress, "mousemove", async (event)=>{
|
art.on("setBar", async (type, percentage)=>{
|
||||||
isHover = true;
|
if (type === "hover" || type === "played" && (0, _utils.isMobile)) {
|
||||||
if (!loading) {
|
if (!loading) {
|
||||||
loading = true;
|
loading = true;
|
||||||
const img = await loadImg(option.thumbnails.url);
|
image = await loadImg(option.thumbnails.url);
|
||||||
image = img;
|
isLoad = true;
|
||||||
isLoad = true;
|
}
|
||||||
}
|
if (!isLoad) return;
|
||||||
if (isLoad && isHover) {
|
const width = $progress.clientWidth * percentage;
|
||||||
(0, _utils.setStyle)($control, "display", "flex");
|
(0, _utils.setStyle)($control, "display", "flex");
|
||||||
showThumbnails(event);
|
if (width > 0 && width < $progress.clientWidth) showThumbnails(width);
|
||||||
|
else if (!(0, _utils.isMobile)) (0, _utils.setStyle)($control, "display", "none");
|
||||||
|
if (0, _utils.isMobile) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(()=>{
|
||||||
|
(0, _utils.setStyle)($control, "display", "none");
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
proxy($progress, "mouseleave", ()=>{
|
|
||||||
isHover = false;
|
|
||||||
(0, _utils.setStyle)($control, "display", "none");
|
|
||||||
});
|
|
||||||
art.on("hover", (state)=>{
|
|
||||||
if (!state) (0, _utils.setStyle)($control, "display", "none");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
},{"../utils":"euhMG","./progress":"afGEi","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"lcqMk":[function(require,module,exports) {
|
},{"../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"lcqMk":[function(require,module,exports) {
|
||||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||||
parcelHelpers.defineInteropFlag(exports);
|
parcelHelpers.defineInteropFlag(exports);
|
||||||
parcelHelpers.export(exports, "default", ()=>screenshot);
|
parcelHelpers.export(exports, "default", ()=>screenshot);
|
||||||
@@ -3679,7 +3677,7 @@ parcelHelpers.export(exports, "default", ()=>version);
|
|||||||
function version(option) {
|
function version(option) {
|
||||||
return {
|
return {
|
||||||
...option,
|
...option,
|
||||||
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"5.1.5"}</a>`
|
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"5.1.6"}</a>`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"mappings":"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 truncated
|
{"mappings":"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 truncated
|
||||||
@@ -81,7 +81,7 @@ export default class Control extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (option.thumbnails.url && !option.isLive && !isMobile) {
|
if (option.thumbnails.url && !option.isLive) {
|
||||||
this.add(
|
this.add(
|
||||||
thumbnails({
|
thumbnails({
|
||||||
name: 'thumbnails',
|
name: 'thumbnails',
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { setStyle } from '../utils';
|
import { setStyle, isMobile } from '../utils';
|
||||||
import { getPosFromEvent } from './progress';
|
|
||||||
|
|
||||||
export default function thumbnails(options) {
|
export default function thumbnails(options) {
|
||||||
return (art) => ({
|
return (art) => ({
|
||||||
@@ -7,17 +6,16 @@ export default function thumbnails(options) {
|
|||||||
mounted: ($control) => {
|
mounted: ($control) => {
|
||||||
const {
|
const {
|
||||||
option,
|
option,
|
||||||
|
events: { loadImg },
|
||||||
template: { $progress, $video },
|
template: { $progress, $video },
|
||||||
events: { proxy, loadImg },
|
|
||||||
} = art;
|
} = art;
|
||||||
|
|
||||||
|
let timer = null;
|
||||||
let image = null;
|
let image = null;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
let isLoad = false;
|
let isLoad = false;
|
||||||
let isHover = false;
|
|
||||||
|
|
||||||
function showThumbnails(event) {
|
function showThumbnails(posWidth) {
|
||||||
const { width: posWidth } = getPosFromEvent(art, event);
|
|
||||||
const { url, number, column, width, height } = option.thumbnails;
|
const { url, number, column, width, height } = option.thumbnails;
|
||||||
const width2 = width || image.naturalWidth / column;
|
const width2 = width || image.naturalWidth / column;
|
||||||
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
||||||
@@ -38,29 +36,33 @@ export default function thumbnails(options) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
proxy($progress, 'mousemove', async (event) => {
|
art.on('setBar', async (type, percentage) => {
|
||||||
isHover = true;
|
if (type === 'hover' || (type === 'played' && isMobile)) {
|
||||||
if (!loading) {
|
if (!loading) {
|
||||||
loading = true;
|
loading = true;
|
||||||
const img = await loadImg(option.thumbnails.url);
|
image = await loadImg(option.thumbnails.url);
|
||||||
image = img;
|
isLoad = true;
|
||||||
isLoad = true;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoad && isHover) {
|
if (!isLoad) return;
|
||||||
|
|
||||||
|
const width = $progress.clientWidth * percentage;
|
||||||
setStyle($control, 'display', 'flex');
|
setStyle($control, 'display', 'flex');
|
||||||
showThumbnails(event);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy($progress, 'mouseleave', () => {
|
if (width > 0 && width < $progress.clientWidth) {
|
||||||
isHover = false;
|
showThumbnails(width);
|
||||||
setStyle($control, 'display', 'none');
|
} else {
|
||||||
});
|
if (!isMobile) {
|
||||||
|
setStyle($control, 'display', 'none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
art.on('hover', (state) => {
|
if (isMobile) {
|
||||||
if (!state) {
|
clearTimeout(timer);
|
||||||
setStyle($control, 'display', 'none');
|
timer = setTimeout(() => {
|
||||||
|
setStyle($control, 'display', 'none');
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in new issue
Block a user