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

build all

Browse Source 
Refactor utility functions for improved readability and consistency

- Updated compatibility.js to use consistent line endings and formatting.
- Refactored component.js for better readability and structure, including consistent use of arrow functions and binding.
- Simplified dom.js functions with consistent formatting and improved readability.
- Enhanced emitter.js with consistent formatting and arrow function usage.
- Streamlined error.js for improved readability and consistency.
- Refactored file.js to use consistent formatting and improved readability.
- Improved format.js functions for better readability and consistency.
- Updated index.js to maintain consistent export formatting.
- Refactored property.js for improved readability and consistency.
- Enhanced subtitle.js with consistent formatting and improved readability.
- Refactored time.js for better readability and consistent formatting.

fix: update lint script to target only source files for consistency

Revert "fix: restore export statements for various plugins and update type definitions for better clarity"

This reverts commit b5e969d81ec765cd8a34b06e6ef4f232ef25087f.

fix: restore export statements for various plugins and update type definitions for better clarity

Refactor type definitions to use interfaces instead of type aliases for better extensibility and clarity across i18n, icons, option, player, quality, setting, subtitle, template, and utils modules.
This commit is contained in:
Harvey Zack committed 2025-08-03 13:17:33 +08:00
1 parent 532dd67cfd
commit 35ad9883af
447 files changed
+18248 -17946
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-proxy-canvas/src/index.js
+119 -115
View File
@@ -1,139 +1,143 @@
export default function artplayerProxyCanvas(callback) {
return (art) => {
const { constructor } = art;
const { createElement } = constructor.utils;
return (art) => {
const { constructor } = art
const { createElement } = constructor.utils
const canvas = createElement('canvas');
const video = createElement('video');
const ctx = canvas.getContext('2d');
const canvas = createElement('canvas')
const video = createElement('video')
const ctx = canvas.getContext('2d')
let animationId = null;
let animationId = null
const originalCanvasMethods = {};
for (const prop in canvas) {
if (typeof canvas[prop] === 'function') {
originalCanvasMethods[prop] = canvas[prop].bind(canvas);
}
const originalCanvasMethods = {}
for (const prop in canvas) {
if (typeof canvas[prop] === 'function') {
originalCanvasMethods[prop] = canvas[prop].bind(canvas)
}
}
for (const prop in video) {
if (!(prop in canvas)) {
Object.defineProperty(canvas, prop, {
get() {
const value = video[prop]
return typeof value === 'function' ? value.bind(video) : value
},
set(value) {
video[prop] = value
},
configurable: true,
enumerable: true,
})
}
}
for (const prop in originalCanvasMethods) {
canvas[prop] = function (...args) {
if (prop in originalCanvasMethods) {
return originalCanvasMethods[prop](...args)
}
return video[prop](...args)
}
}
for (const prop in video) {
if (!(prop in canvas)) {
Object.defineProperty(canvas, prop, {
get() {
const value = video[prop];
return typeof value === 'function' ? value.bind(video) : value;
},
set(value) {
video[prop] = value;
},
configurable: true,
enumerable: true,
});
}
setupEventListeners()
setupArtPlayerEvents()
return canvas
function setupEventListeners() {
const { events } = constructor.config
setTimeout(() => {
events.forEach((event) => {
art.proxy(video, event, (event) => {
art.emit(`video:${event.type}`, event)
})
})
})
}
async function draw() {
try {
if (typeof createImageBitmap !== 'undefined') {
const bitmap = await createImageBitmap(video)
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height)
bitmap.close()
}
for (const prop in originalCanvasMethods) {
canvas[prop] = function (...args) {
if (prop in originalCanvasMethods) {
return originalCanvasMethods[prop](...args);
}
return video[prop].apply(video, args);
};
else {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
}
callback && callback(ctx, video)
art.emit('artplayerProxyCanvas:draw', ctx, video)
}
catch (error) {
art.emit('artplayerProxyCanvas:error', error)
}
}
setupEventListeners();
setupArtPlayerEvents();
async function animation() {
await draw()
animationId = requestAnimationFrame(animation)
}
return canvas;
function resize() {
const player = art.template?.$player
if (!player || art.option.autoSize)
return
function setupEventListeners() {
const { events } = constructor.config;
setTimeout(() => {
events.forEach((event) => {
art.proxy(video, event, (event) => {
art.emit(`video:${event.type}`, event);
});
});
});
}
const aspectRatio = video.videoWidth / video.videoHeight
const containerWidth = player.clientWidth
const containerHeight = player.clientHeight
const containerRatio = containerWidth / containerHeight
async function draw() {
try {
if (typeof createImageBitmap !== 'undefined') {
const bitmap = await createImageBitmap(video);
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
bitmap.close();
} else {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
callback && callback(ctx, video);
art.emit('artplayerProxyCanvas:draw', ctx, video);
} catch (error) {
art.emit('artplayerProxyCanvas:error', error);
}
}
let canvasWidth, canvasHeight
if (containerRatio > aspectRatio) {
canvasHeight = containerHeight
canvasWidth = canvasHeight * aspectRatio
}
else {
canvasWidth = containerWidth
canvasHeight = canvasWidth / aspectRatio
}
async function animation() {
await draw();
animationId = requestAnimationFrame(animation);
}
canvas.width = canvasWidth
canvas.height = canvasHeight
function resize() {
const player = art.template?.$player;
if (!player || art.option.autoSize) return;
const paddingLeft = (containerWidth - canvasWidth) / 2
const paddingTop = (containerHeight - canvasHeight) / 2
const aspectRatio = video.videoWidth / video.videoHeight;
const containerWidth = player.clientWidth;
const containerHeight = player.clientHeight;
const containerRatio = containerWidth / containerHeight;
Object.assign(canvas.style, {
padding: `${paddingTop}px ${paddingLeft}px`,
})
}
let canvasWidth, canvasHeight;
if (containerRatio > aspectRatio) {
canvasHeight = containerHeight;
canvasWidth = canvasHeight * aspectRatio;
} else {
canvasWidth = containerWidth;
canvasHeight = canvasWidth / aspectRatio;
}
function setupArtPlayerEvents() {
art.on('video:loadedmetadata', () => {
canvas.width = video.videoWidth
canvas.height = video.videoHeight
})
canvas.width = canvasWidth;
canvas.height = canvasHeight;
art.on('video:play', () => {
cancelAnimationFrame(animationId)
animation()
})
const paddingLeft = (containerWidth - canvasWidth) / 2;
const paddingTop = (containerHeight - canvasHeight) / 2;
art.on('video:pause', () => {
cancelAnimationFrame(animationId)
})
Object.assign(canvas.style, {
padding: `${paddingTop}px ${paddingLeft}px`,
});
}
art.on('resize', () => {
resize()
draw()
})
function setupArtPlayerEvents() {
art.on('video:loadedmetadata', () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
});
art.on('video:play', () => {
cancelAnimationFrame(animationId);
animation();
});
art.on('video:pause', () => {
cancelAnimationFrame(animationId);
});
art.on('resize', () => {
resize();
draw();
});
art.on('destroy', () => {
cancelAnimationFrame(animationId);
});
}
};
art.on('destroy', () => {
cancelAnimationFrame(animationId)
})
}
}
}
if (typeof window !== 'undefined') {
window['artplayerProxyCanvas'] = artplayerProxyCanvas;
window.artplayerProxyCanvas = artplayerProxyCanvas
}