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.js

@@ -5,4 +5,4 @@
  * (c) 2017-2026 Harvey Zack
  * Released under the MIT License.
  */
-!function(e,t,r,a,o,i,n,s){var l="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},c="function"==typeof l[a]&&l[a],p=c.i||{},u=c.cache||{},d="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,r){if(!u[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof l[a]&&l[a];if(!r&&i)return i(t,!0);if(c)return c(t,!0);if(d&&"string"==typeof t)return d(t);var n=Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}p.resolve=function(r){var a=e[t][1][r];return null!=a?a:r},p.cache={};var s=u[t]=new f.Module(t);e[t][0].call(s.exports,p,s,s.exports,l)}return u[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],a=e[1],o=e[2]||e[0],i=f(a);"*"===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 f(t)}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.require=d,this.exports={}},f.modules=e,f.cache=u,f.parent=c,f.distDir=void 0,f.publicUrl=void 0,f.devServer=void 0,f.i=p,f.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(f,"root",{get:function(){return l[a]}}),l[a]=f;for(var h=0;h<t.length;h++)f(t[h]);if(r){var m=f(r);"object"==typeof exports&&"u">typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({"9IAQF":[function(e,t,r,a){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var i=e("bundle-text:./style/index.less"),n=o.interopDefault(i),s=e("option-validator"),l=o.interopDefault(s),c=e("../package.json"),p=e("./config"),u=o.interopDefault(p),d=e("./contextmenu"),f=o.interopDefault(d),h=e("./control"),m=o.interopDefault(h),g=e("./events"),v=o.interopDefault(g),y=e("./hotkey"),b=o.interopDefault(y),x=e("./i18n"),w=o.interopDefault(x),k=e("./icons"),j=o.interopDefault(k),$=e("./info"),S=o.interopDefault($),E=e("./layer"),I=o.interopDefault(E),M=e("./loading"),T=o.interopDefault(M),C=e("./mask"),F=o.interopDefault(C),D=e("./notice"),A=o.interopDefault(D),R=e("./player"),O=o.interopDefault(R),L=e("./plugins"),P=o.interopDefault(L),Y=e("./scheme"),z=o.interopDefault(Y),_=e("./setting"),H=o.interopDefault(_),V=e("./storage"),N=o.interopDefault(V),q=e("./subtitle"),B=o.interopDefault(q),U=e("./template"),W=o.interopDefault(U),Z=e("./utils"),K=e("./utils/emitter"),G=o.interopDefault(K);let X=0,J=[];class Q extends G.default{constructor(e,t){if(super(),!Z.isBrowser)throw Error("Artplayer can only be used in the browser environment");this.id=++X;const r=Z.mergeDeep(Q.option,e);if(r.container=e.container,this.option=(0,l.default)(r,z.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.template=new(0,W.default)(this),this.events=new(0,v.default)(this),this.storage=new(0,N.default)(this),this.icons=new(0,j.default)(this),this.i18n=new(0,w.default)(this),this.notice=new(0,A.default)(this),this.player=new(0,O.default)(this),this.layers=new(0,I.default)(this),this.controls=new(0,m.default)(this),this.contextmenu=new(0,f.default)(this),this.subtitle=new(0,B.default)(this),this.info=new(0,S.default)(this),this.loading=new(0,T.default)(this),this.hotkey=new(0,b.default)(this),this.mask=new(0,F.default)(this),this.setting=new(0,H.default)(this),this.plugins=new(0,P.default)(this),"function"==typeof t&&this.on("ready",()=>t.call(this,this)),Q.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e(`Version@${Q.version}`);for(let t=0;t<u.default.events.length;t++)this.on(`video:${u.default.events[t]}`,t=>e(`Event@${t.type}`))}J.push(this)}static get instances(){return J}static get version(){return c.version}static get config(){return u.default}static get utils(){return Z}static get scheme(){return z.default}static get Emitter(){return G.default}static get validator(){return l.default}static get kindOf(){return l.default.kindOf}static get html(){return W.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,gesture:!0,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,proxy:void 0,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],thumbnails:{url:"",number:60,column:10,width:0,height:0,scale:1},subtitle:{url:"",type:"",style:{},name:"",escape:!0,encoding:"utf-8",onVtLine truncated
+!function(e,t,r,a,o){var i="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},n="function"==typeof i[a]&&i[a],s=n.i||{},l=n.cache||{},c="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!l[t]){if(!e[t]){if(o[t])return o[t];var s="function"==typeof i[a]&&i[a];if(!r&&s)return s(t,!0);if(n)return n(t,!0);if(c&&"string"==typeof t)return c(t);var d=Error("Cannot find module '"+t+"'");throw d.code="MODULE_NOT_FOUND",d}f.resolve=function(r){var a=e[t][1][r];return null!=a?a:r},f.cache={};var u=l[t]=new p.Module(t);e[t][0].call(u.exports,f,u,u.exports,i)}return l[t].exports;function f(e){var t=f.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],a=e[1],o=e[2]||e[0],i=p(a);"*"===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=c,this.exports={}},p.modules=e,p.cache=l,p.parent=n,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=s,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return i[a]}}),i[a]=p;for(var d=0;d<t.length;d++)p(t[d]);if(r){var u=p(r);"object"==typeof exports&&"u">typeof module?module.exports=u:"function"==typeof define&&define.amd&&define(function(){return u})}}({"9IAQF":[function(e,t,r,a){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var i=e("bundle-text:./style/index.less"),n=o.interopDefault(i),s=e("option-validator"),l=o.interopDefault(s),c=e("../package.json"),p=e("./config"),d=o.interopDefault(p),u=e("./contextmenu"),f=o.interopDefault(u),h=e("./control"),m=o.interopDefault(h),g=e("./events"),v=o.interopDefault(g),y=e("./hotkey"),b=o.interopDefault(y),x=e("./i18n"),w=o.interopDefault(x),k=e("./icons"),j=o.interopDefault(k),$=e("./info"),S=o.interopDefault($),E=e("./layer"),I=o.interopDefault(E),M=e("./loading"),T=o.interopDefault(M),C=e("./mask"),F=o.interopDefault(C),D=e("./notice"),A=o.interopDefault(D),R=e("./player"),O=o.interopDefault(R),L=e("./plugins"),P=o.interopDefault(L),Y=e("./scheme"),z=o.interopDefault(Y),_=e("./setting"),H=o.interopDefault(_),V=e("./storage"),N=o.interopDefault(V),q=e("./subtitle"),B=o.interopDefault(q),U=e("./template"),W=o.interopDefault(U),Z=e("./utils"),K=e("./utils/emitter"),G=o.interopDefault(K);let X=0,J=[];class Q extends G.default{constructor(e,t){if(super(),!Z.isBrowser)throw Error("Artplayer can only be used in the browser environment");this.id=++X;const r=Z.mergeDeep(Q.option,e);if(r.container=e.container,this.option=(0,l.default)(r,z.default),this.isLock=!1,this.isReady=!1,this.isFocus=!1,this.isInput=!1,this.isRotate=!1,this.isDestroy=!1,this.template=new(0,W.default)(this),this.events=new(0,v.default)(this),this.storage=new(0,N.default)(this),this.icons=new(0,j.default)(this),this.i18n=new(0,w.default)(this),this.notice=new(0,A.default)(this),this.player=new(0,O.default)(this),this.layers=new(0,I.default)(this),this.controls=new(0,m.default)(this),this.contextmenu=new(0,f.default)(this),this.subtitle=new(0,B.default)(this),this.info=new(0,S.default)(this),this.loading=new(0,T.default)(this),this.hotkey=new(0,b.default)(this),this.mask=new(0,F.default)(this),this.setting=new(0,H.default)(this),this.plugins=new(0,P.default)(this),"function"==typeof t&&this.on("ready",()=>t.call(this,this)),Q.DEBUG){const e=e=>console.log(`[ART.${this.id}] -> ${e}`);e(`Version@${Q.version}`);for(let t=0;t<d.default.events.length;t++)this.on(`video:${d.default.events[t]}`,t=>e(`Event@${t.type}`))}J.push(this)}static get instances(){return J}static get version(){return c.version}static get config(){return d.default}static get utils(){return Z}static get scheme(){return z.default}static get Emitter(){return G.default}static get validator(){return l.default}static get kindOf(){return l.default.kindOf}static get html(){return W.default.html}static get option(){return{id:"",container:"#artplayer",url:"",poster:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,gesture:!0,fastForward:!1,autoPlayback:!1,autoOrientation:!1,airplay:!1,proxy:void 0,layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],thumbnails:{url:"",number:60,column:10,width:0,height:0,scale:1},subtitle:{url:"",type:"",style:{},name:"",escape:!0,encoding:"utf-8",onVttLoad:Line truncated