Refactor code structure for improved readability and maintainability

Remove debugging border from the websr plugin's styling

Enhance canvas sizing logic in artplayer-plugin-websr

- Updated canvas positioning to center it within the player.
- Introduced a new function to calculate canvas size based on the video aspect ratio.
- Adjusted canvas dimensions during initialization and on resize events to maintain aspect ratio.
- Ensured canvas styles are updated to reflect the calculated dimensions.

feat: add comparison mode to artplayer-plugin-websr

- Updated README.md to reflect new comparison feature and simplified content.
- Modified package.json to remove unnecessary keywords.
- Enhanced index.js to implement comparison functionality, allowing users to compare original and upscaled video.
- Added new methods for enabling, disabling, and toggling comparison mode, as well as setting and getting the comparison position.
- Updated TypeScript definitions to include new comparison options and methods.

docs/compiled/artplayer-proxy-canvas.js

@@ -5,4 +5,4 @@
  * (c) 2017-2026 Harvey Zack
  * Released under the MIT License.
  */
-!function(e,t,r,n,o,i,a,u){var f="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},l="function"==typeof f[n]&&f[n],c=l.i||{},d=l.cache||{},s="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!d[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof f[n]&&f[n];if(!r&&i)return i(t,!0);if(l)return l(t,!0);if(s&&"string"==typeof t)return s(t);var a=Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}c.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},c.cache={};var u=d[t]=new p.Module(t);e[t][0].call(u.exports,c,u,u.exports,f)}return d[t].exports;function c(e){var t=c.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=p(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=s,this.exports={}},p.modules=e,p.cache=d,p.parent=l,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=c,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return f[n]}}),f[n]=p;for(var y=0;y<t.length;y++)p(t[y]);if(r){var m=p(r);"object"==typeof exports&&"u">typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({fsIOq:[function(e,t,r,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");function i(e){return t=>{let{constructor:r}=t,{createElement:n}=r.utils,o=n("canvas"),i=n("video"),a=o.getContext("2d"),u=null,f={};for(let e in o)"function"==typeof o[e]&&(f[e]=o[e].bind(o));for(let e in i)e in o||Object.defineProperty(o,e,{get(){let t=i[e];return"function"==typeof t?t.bind(i):t},set(t){i[e]=t},configurable:!0,enumerable:!0});for(let e in f)o[e]=function(...t){return e in f?f[e](...t):i[e](...t)};return function(){let{events:e}=r.config;setTimeout(()=>{e.forEach(e=>{t.proxy(i,e,e=>{t.emit(`video:${e.type}`,e)})})})}(),t.on("video:loadedmetadata",()=>{o.width=i.videoWidth,o.height=i.videoHeight}),t.on("video:play",()=>{cancelAnimationFrame(u),c()}),t.on("video:pause",()=>{cancelAnimationFrame(u)}),t.on("resize",()=>{!function(){let e,r,n=t.template?.$player;if(!n||t.option.autoSize)return;let a=i.videoWidth/i.videoHeight,u=n.clientWidth,f=n.clientHeight;u/f>a?e=(r=f)*a:r=(e=u)/a,o.width=e,o.height=r;let l=(u-e)/2,c=(f-r)/2;Object.assign(o.style,{padding:`${c}px ${l}px`})}(),l()}),t.on("destroy",()=>{cancelAnimationFrame(u)}),o;async function l(){try{if("u">typeof createImageBitmap){let e=await createImageBitmap(i);a.drawImage(e,0,0,o.width,o.height),e.close()}else a.drawImage(i,0,0,o.width,o.height);e&&e(a,i),t.emit("artplayerProxyCanvas:draw",a,i)}catch(e){t.emit("artplayerProxyCanvas:error",e)}}async function c(){await l(),u=requestAnimationFrame(c)}}}o.defineInteropFlag(r),o.export(r,"default",()=>i),"u">typeof window&&(window.artplayerProxyCanvas=i)},{"@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],"6ykb1":[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["fsIOq"],"fsIOq","parcelRequire4dc0",{});
+!function(e,t,r,n,o){var i="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},a="function"==typeof i[n]&&i[n],u=a.i||{},f=a.cache||{},l="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!f[t]){if(!e[t]){if(o[t])return o[t];var u="function"==typeof i[n]&&i[n];if(!r&&u)return u(t,!0);if(a)return a(t,!0);if(l&&"string"==typeof t)return l(t);var d=Error("Cannot find module '"+t+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},p.cache={};var s=f[t]=new c.Module(t);e[t][0].call(s.exports,p,s,s.exports,i)}return f[t].exports;function p(e){var t=p.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=c(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.require=l,this.exports={}},c.modules=e,c.cache=f,c.parent=a,c.distDir=void 0,c.publicUrl=void 0,c.devServer=void 0,c.i=u,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return i[n]}}),i[n]=c;for(var d=0;d<t.length;d++)c(t[d]);if(r){var s=c(r);"object"==typeof exports&&"u">typeof module?module.exports=s:"function"==typeof define&&define.amd&&define(function(){return s})}}({fsIOq:[function(e,t,r,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");function i(e){return t=>{let{constructor:r}=t,{createElement:n}=r.utils,o=n("canvas"),i=n("video"),a=o.getContext("2d"),u=null,f={};for(let e in o)"function"==typeof o[e]&&(f[e]=o[e].bind(o));for(let e in i)e in o||Object.defineProperty(o,e,{get(){let t=i[e];return"function"==typeof t?t.bind(i):t},set(t){i[e]=t},configurable:!0,enumerable:!0});for(let e in f)o[e]=function(...t){return e in f?f[e](...t):i[e](...t)};return function(){let{events:e}=r.config;setTimeout(()=>{e.forEach(e=>{t.proxy(i,e,e=>{t.emit(`video:${e.type}`,e)})})})}(),t.on("video:loadedmetadata",()=>{o.width=i.videoWidth,o.height=i.videoHeight}),t.on("video:play",()=>{cancelAnimationFrame(u),c()}),t.on("video:pause",()=>{cancelAnimationFrame(u)}),t.on("resize",()=>{!function(){let e,r,n=t.template?.$player;if(!n||t.option.autoSize)return;let a=i.videoWidth/i.videoHeight,u=n.clientWidth,f=n.clientHeight;u/f>a?e=(r=f)*a:r=(e=u)/a,o.width=e,o.height=r;let l=(u-e)/2,c=(f-r)/2;Object.assign(o.style,{padding:`${c}px ${l}px`})}(),l()}),t.on("destroy",()=>{cancelAnimationFrame(u)}),o;async function l(){try{if("u">typeof createImageBitmap){let e=await createImageBitmap(i);a.drawImage(e,0,0,o.width,o.height),e.close()}else a.drawImage(i,0,0,o.width,o.height);e&&e(a,i),t.emit("artplayerProxyCanvas:draw",a,i)}catch(e){t.emit("artplayerProxyCanvas:error",e)}}async function c(){await l(),u=requestAnimationFrame(c)}}}o.defineInteropFlag(r),o.export(r,"default",()=>i),"u">typeof window&&(window.artplayerProxyCanvas=i)},{"@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],"6ykb1":[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["fsIOq"],"fsIOq","parcelRequire4dc0",{});