x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-23 22:01:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify artplayerProxyCanvas implementation and improve event handling

Browse Source
This commit is contained in:
Harvey Zack committed 2024-09-17 09:38:57 +08:00
1 parent 51e558dc50
commit 157d28a647
3 files changed
+70 -95
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-proxy-canvas/index.js
+28 -49
View File
@@ -142,61 +142,40 @@
this[globalName] = mainExports;
}
}
})({"iXeaa":[function(require,module,exports) {
})({"bBRui":[function(require,module,exports) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "default", ()=>artplayerProxyCanvas);
function artplayerProxyCanvas() {
return (art)=>{
const { option, constructor } = art;
const { createElement, def } = constructor.utils;
let animationId = null;
const { constructor } = art;
const { createElement } = constructor.utils;
const canvas = createElement("canvas");
const ctx = canvas.getContext("2d");
const video = createElement("video");
const canvasProperties = {};
const canvasKeys = [
"width",
"height"
];
const { propertys, methods, prototypes, events } = constructor.config;
const videoKeys = [
...propertys,
...methods,
...prototypes
];
initCanvasProperties();
proxyVideoToCanvas();
const ctx = canvas.getContext("2d");
let animationId = null;
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].apply(video, args);
};
setupEventListeners();
setupArtPlayerEvents();
return canvas;
function initCanvasProperties() {
canvasKeys.forEach((prop)=>{
canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
});
}
function proxyVideoToCanvas() {
videoKeys.forEach((key)=>{
if (canvasKeys.includes(key)) def(canvas, key, {
get () {
return canvasProperties[key].get.call(this);
},
set (value) {
canvasProperties[key].set.call(this, value);
}
});
else def(canvas, key, {
get () {
const value = video[key];
return typeof value === "function" ? value.bind(video) : value;
},
set (value) {
video[key] = value;
}
});
});
}
function setupEventListeners() {
const { events } = constructor.config;
setTimeout(()=>{
events.forEach((event)=>{
art.proxy(video, event, (event)=>{
@@ -223,7 +202,7 @@ function artplayerProxyCanvas() {
}
function resize() {
const player = art.template?.$player;
if (!player || option.autoSize) return;
if (!player || art.option.autoSize) return;
const aspectRatio = video.videoWidth / video.videoHeight;
const containerWidth = player.clientWidth;
const containerHeight = player.clientHeight;
@@ -245,13 +224,13 @@ function artplayerProxyCanvas() {
});
}
function setupArtPlayerEvents() {
art.on("video:loadedmetadata", async ()=>{
art.on("video:loadedmetadata", ()=>{
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
});
art.on("video:play", ()=>{
cancelAnimationFrame(animationId);
animationId = requestAnimationFrame(animation);
animation();
});
art.on("video:pause", ()=>{
cancelAnimationFrame(animationId);
@@ -268,7 +247,7 @@ function artplayerProxyCanvas() {
}
if (typeof window !== "undefined") window["artplayerProxyCanvas"] = artplayerProxyCanvas;
},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
},{"@parcel/transformer-js/src/esmodule-helpers.js":"kBreb"}],"kBreb":[function(require,module,exports) {
exports.interopDefault = function(a) {
return a && a.__esModule ? a : {
default: a
@@ -298,6 +277,6 @@ exports.export = function(dest, destName, get) {
});
};
},{}]},["iXeaa"], "iXeaa", "parcelRequire4dc0")
},{}]},["bBRui"], "bBRui", "parcelRequire94c2")
//# sourceMappingURL=index.js.map
docs/uncompiled/artplayer-proxy-canvas/index.js.map
+1 -1
View File
@@ -1 +1 @@
{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas() {\n return (art) => {\n const { option, constructor } = art;\n const { createElement, def } = constructor.utils;\n\n let animationId = null;\n const canvas = createElement('canvas');\n const ctx = canvas.getContext('2d');\n const video = createElement('video');\n\n const canvasProperties = {};\n const canvasKeys = ['width', 'height'];\n const { propertys, methods, prototypes, events } = constructor.config;\n const videoKeys = [...propertys, ...methods, ...prototypes];\n\n initCanvasProperties();\n proxyVideoToCanvas();\n setupEventListeners();\n setupArtPlayerEvents();\n\n return canvas;\n\n function initCanvasProperties() {\n canvasKeys.forEach((prop) => {\n canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);\n });\n }\n\n function proxyVideoToCanvas() {\n videoKeys.forEach((key) => {\n if (canvasKeys.includes(key)) {\n def(canvas, key, {\n get() {\n return canvasProperties[key].get.call(this);\n },\n set(value) {\n canvasProperties[key].set.call(this, value);\n },\n });\n } else {\n def(canvas, key, {\n get() {\n const value = video[key];\n return typeof value === 'function' ? value.bind(video) : value;\n },\n set(value) {\n Line truncated
{"mappings":"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","sources":["Desktop/github/ArtPlayer/packages/artplayer-proxy-canvas/src/index.js","Desktop/github/ArtPlayer/node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas() {\n return (art) => {\n const { constructor } = art;\n const { createElement } = constructor.utils;\n\n const canvas = createElement('canvas');\n const video = createElement('video');\n const ctx = canvas.getContext('2d');\n\n let animationId = null;\n\n const originalCanvasMethods = {};\n for (const prop in canvas) {\n if (typeof canvas[prop] === 'function') {\n originalCanvasMethods[prop] = canvas[prop].bind(canvas);\n }\n }\n\n for (const prop in video) {\n if (!(prop in canvas)) {\n Object.defineProperty(canvas, prop, {\n get() {\n const value = video[prop];\n return typeof value === 'function' ? value.bind(video) : value;\n },\n set(value) {\n video[prop] = value;\n },\n configurable: true,\n enumerable: true,\n });\n }\n }\n\n for (const prop in originalCanvasMethods) {\n canvas[prop] = function (...args) {\n if (prop in originalCanvasMethods) {\n return originalCanvasMethods[prop](...args);\n }\n return video[prop].apply(video, args);\n };\n }\n\n setupEventListeners();\n setupArtPlayerEvents();\n\n return canvas;\n\n function setupEventListeners() {\n const { events } = constructor.config;\n setTimeout(() => {\n events.forEach((event) => {\n art.proxy(video, event, (event) => {\n art.emit(`video:${event.type}`, event);\n Line truncated
packages/artplayer-proxy-canvas/src/index.js
+41 -45
View File
@@ -1,57 +1,53 @@
export default function artplayerProxyCanvas() {
return (art) => {
const { option, constructor } = art;
const { createElement, def } = constructor.utils;
const { constructor } = art;
const { createElement } = constructor.utils;
const canvas = createElement('canvas');
const video = createElement('video');
const ctx = canvas.getContext('2d');
let animationId = null;
const canvas = createElement('canvas');
const ctx = canvas.getContext('2d');
const video = createElement('video');
const canvasProperties = {};
const canvasKeys = ['width', 'height'];
const { propertys, methods, prototypes, events } = constructor.config;
const videoKeys = [...propertys, ...methods, ...prototypes];
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].apply(video, args);
};
}
initCanvasProperties();
proxyVideoToCanvas();
setupEventListeners();
setupArtPlayerEvents();
return canvas;
function initCanvasProperties() {
canvasKeys.forEach((prop) => {
canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
});
}
function proxyVideoToCanvas() {
videoKeys.forEach((key) => {
if (canvasKeys.includes(key)) {
def(canvas, key, {
get() {
return canvasProperties[key].get.call(this);
},
set(value) {
canvasProperties[key].set.call(this, value);
},
});
} else {
def(canvas, key, {
get() {
const value = video[key];
return typeof value === 'function' ? value.bind(video) : value;
},
set(value) {
video[key] = value;
},
});
}
});
}
function setupEventListeners() {
const { events } = constructor.config;
setTimeout(() => {
events.forEach((event) => {
art.proxy(video, event, (event) => {
@@ -83,7 +79,7 @@ export default function artplayerProxyCanvas() {
function resize() {
const player = art.template?.$player;
if (!player || option.autoSize) return;
if (!player || art.option.autoSize) return;
const aspectRatio = video.videoWidth / video.videoHeight;
const containerWidth = player.clientWidth;
@@ -111,14 +107,14 @@ export default function artplayerProxyCanvas() {
}
function setupArtPlayerEvents() {
art.on('video:loadedmetadata', async () => {
art.on('video:loadedmetadata', () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
});
art.on('video:play', () => {
cancelAnimationFrame(animationId);
animationId = requestAnimationFrame(animation);
animation();
});
art.on('video:pause', () => {