j1-template 2024.3.24 → 2024.3.25

data/assets/theme/j1/modules/videojs/plugins/controls/zoom/js/zoom.min.js

@@ -18,4 +18,4 @@
  # -----------------------------------------------------------------------------
 */
 
-!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],s):(t="undefined"!=typeof globalThis?globalThis:t||self)["@theonlyducks/videojs-zoom"]=s(t.videojs)}(this,(function(t){"use strict";const s=t.getComponent("Button"),e=t.getPlugin("plugin"),o=t.getComponent("Component"),n=.2,i={zoom:1,moveX:0,moveY:0,flip:"+",rotate:0};class a{static _instance=null;constructor(){this._listeners=[]}static getInstance(){return a._instance||(a._instance=new a),a._instance}subscribe(t,s){this._listeners.push({event:t,callback:s})}notify(t,s){this._listeners.forEach((e=>{if(e.event===t)return e.callback(s)}))}}class l{constructor(t,s){this.player=t.el(),this.plugin=s.plugin,this.observer=a.getInstance(),t.on("playing",(()=>{this._updateSalt()})),this.observer.subscribe("change",(t=>{this.state={...t,saltMoveX:70,saltMoveY:70},this._updateSalt()}))}_updateSalt(){this.state.saltMoveX=this.player.offsetWidth*n/2,this.state.saltMoveY=this.player.offsetHeight*n/2}_zoom(){this.plugin.zoom(this.state.zoom),this.plugin.listeners.change(this.state)}zoomIn(){this.state.zoom>=9.8||(this.state.moveCount++,this.state.zoom+=n,this.plugin.zoom(this.state.zoom),this.plugin.listeners.change(this.state))}zoomOut(){this.state.zoom<=1||(this.state.moveCount--,this.state.zoom-=n,this.plugin.zoom(this.state.zoom),this.plugin.move(0,0),this.plugin.listeners.change(this.state))}_move(){this.plugin.move(this.state.moveX,this.state.moveY),this.plugin.listeners.change(this.state)}moveUp(){const t=this.state.moveY+this.state.saltMoveY;this.state.moveCount*this.state.saltMoveY<t||(this._updateSalt(),this.state.moveY+=this.state.saltMoveY,this._move())}moveDown(){const t=this.state.moveY-this.state.saltMoveY;-(this.state.moveCount*this.state.saltMoveY)>t||(this._updateSalt(),this.state.moveY-=this.state.saltMoveY,this._move())}reset(){this.state.zoom=1,this.state.moveX=0,this.state.moveY=0,this.state.rotate=0,this.state.moveCount=0,this.plugin.zoom(1),this.plugin.flip("+"),this.plugin.rotate(0),this.plugin.move(0,0),this.plugin.listeners.change(this.state)}moveLeft(){const t=this.state.moveX+this.state.saltMoveX;this.state.moveCount*this.state.saltMoveX<t||(this._updateSalt(),this.state.moveX+=this.state.saltMoveX,this._move())}moveRight(){const t=this.state.moveX-this.state.saltMoveX;-(this.state.moveCount*this.state.saltMoveX)>t||(this._updateSalt(),this.state.moveX-=this.state.saltMoveX,this._move())}_rotate(){this.plugin.rotate(this.state.rotate),this.plugin.listeners.change(this.state)}rotate(){this.state.rotate-=90,-360===this.state.rotate&&(this.state.rotate=0),this._rotate()}_flip(){this.plugin.flip(this.state.flip),this.plugin.listeners.change(this.state)}flip(){this.state.flip="+"===this.state.flip?"-":"+",this._flip()}}class h{constructor(){this.content=null,this._createContent()}getContent(){return this.content}_createContent(){this.content='\n\t\t\t<div class="vjs-zoom-duck__container--row">\n\t\t\t\t<button id="vjs-zoom-duck__zoomIn" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">add</span>\n\t\t\t\t</button>\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t\t<button id="vjs-zoom-duck__zoomOut" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">remove</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class="vjs-zoom-duck__container--row">\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t\t<button id="vjs-zoom-duck__moveUp" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">arrow_drop_up</span>\n\t\t\t\t</button>\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t</div>\n\t\t\t<div class="vjs-zoom-duck__container--row">\n\t\t\t\t<button id="vjs-zoom-duck__moveLeft" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">arrow_left</span>\n\t\t\t\t</button>\n\t\t\t\t<button id="vjs-zoom-duck__reset" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">fiber_manual_record</span>\n\t\t\t\t</button>\n\t\t\t\t<button id="vjs-zoom-duck__moveRight" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">arrow_right</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class="vjs-zoom-duck__container--row">\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t\t<button id="vjs-zoom-duck__moveDown" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">arrow_drop_down</span>\n\t\t\t\t</button>\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t</div>\n\t\t\t<div class="vjs-zoom-duck__container--row">\n\t\t\t\t<button id="vjs-zoom-duck__rotate" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">rotate_left</span>\n\t\t\t\t</button>\n\t\t\t\t<span class="vjs-zoom-duck__space"></span>\n\t\t\t\t<button id="vjs-zoom-duck__flip" class="vjs-zoom-duck__button">\n\t\t\t\t\t<span class="vjs-zoom-icons">swap_horiz</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t'}}class c extends e{constructor(s){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(s,e),t.log("[~Zoom Plugin] start ",e),this.player=s.el(),this.listeners={click:()=>{},change:()=>{}};var o=t.VERSION<="7.10.0"?t.mergeOptions:t.obj.merge;this.state=o(i,e),this.player.style.overflow="hidden",this.state.flip="+",this.state.moveCount=Math.round((this.state.zoom-1)/n),s.getChild("ControlBar").addChild("ZoomButton"),s.addChild("ZoomModal",{plugin:this,state:this.state}),this._observer=a.getInstance(),this._setTransform()}zoom(t){if(t<=0)throw new Error("Zoom value invalid");this.state.zoom=t,this.state.moveCount=Math.round((this.state.zoom-1)/n),this._setTransform()}rotate(t){this.state.rotate=t,this._setTransform()}move(t,s){this.state.moveX=t,this.state.moveY=s,this._setTransform()}flip(t){this.state.flip=t,this._setTransform()}toggle(){const[t]=this.player.getElementsByClassName("vjs-zoom-duck__container");t.classList.toggle("open")}listen(t,s){this.listeners[t]=s}_notify(){this._observer.notify("change",this.state)}_setTransform(){const[t]=this.player.getElementsByTagName("video");t.style.transform=`\n\t\t\ttranslate(${this.state.moveX}px, ${this.state.moveY}px)\n\t\t\tscale(${this.state.flip}${this.state.zoom}, ${this.state.zoom})\n\t\t\trotate(${this.state.rotate}deg)\n\t\t`,this._notify()}}return t.registerComponent("ZoomModal",class extends o{constructor(t,s){super(t,s),this.player=t.el(),this.plugin=s.plugin,this.function=new l(t,s),t.on("playing",(()=>{this.listeners()}))}createEl(){const s=t.dom.createEl("div",{className:"vjs-zoom-duck__container"}),e=new h;return s.innerHTML=e.getContent(),s}listeners(){let t=this.player.getElementsByClassName("vjs-zoom-duck__button");t=Array.from(t),t.map((t=>{const[,s]=t.id.split("__");t.onclick=()=>this.function[s]()}))}toggle(){const[t]=this.player.getElementsByClassName("vjs-zoom-duck__container");t.classList.toggle("open"),this.plugin.listeners.click()}open(){const[t]=this.player.getElementsByClassName("vjs-zoom-duck__container");t.classList.add("open"),this.plugin.listeners.click()}close(){const[t]=this.player.getElementsByClassName("vjs-zoom-duck__container");t.classList.remove("open"),this.plugin.listeners.click()}}),t.registerComponent("ZoomButton",class extends s{constructor(t,s){super(t,s),this.isOpen=!1,t.on("useractive",(()=>{if(!this.isOpen)return;this.player().getChild("ZoomModal").open()})),t.on("userinactive",(()=>{if(!this.isOpen)return;this.player().getChild("ZoomModal").close()}))}buildCSSClass(){return`vjs-zoom-duck ${super.buildCSSClass()}`}handleClick(){const s=this.player().getChild("ZoomModal");t.log("[~Zoom Plugin] button handleClick"),this.isOpen=!this.isOpen,s.toggle()}}),t.registerPlugin("zoomPlugin",c),c}));
+!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],s):(t="undefined"!=typeof globalThis?globalThis:t||self)["@theonlyducks/videojs-zoom"]=s(t.videojs)}(this,(function(t){"use strict";const s=t.getComponent("Button"),o=t.getPlugin("plugin"),n=t.getComponent("Component"),e=.2,i={zoom:1,moveX:0,moveY:0,flip:"+",rotate:0,showZoom:!0,showMove:!0,showRotate:!0,gestureHandler:!1};class a{static _instance=null;constructor(){this._listeners=[]}static getInstance(){return a._instance||(a._instance=new a),a._instance}subscribe(t,s){this._listeners.push({event:t,callback:s})}notify(t,s){this._listeners.forEach((o=>{if(o.event===t)return o.callback(s)}))}}class l{constructor(t,s){this.player=t.el(),this.plugin=s.plugin,this.observer=a.getInstance(),t.on("playing",(()=>{this._updateSalt()})),this.observer.subscribe("change",(t=>{this.state={...t,saltMoveX:70,saltMoveY:70},this._updateSalt()}))}_updateSalt(){this.state.saltMoveX=this.player.offsetWidth*e/2,this.state.saltMoveY=this.player.offsetHeight*e/2}_zoom(){this.plugin.zoom(this.state.zoom),this.plugin.listeners.change(this.state)}zoomIn(){this.state.zoom>=9.8||(this.state.moveCount++,this.state.zoom+=e,this.plugin.zoom(this.state.zoom),this.plugin.listeners.change(this.state))}zoomOut(){this.state.zoom<=1||(this.state.moveCount--,this.state.zoom-=e,this.plugin.zoom(this.state.zoom),this.plugin.move(0,0),this.plugin.listeners.change(this.state))}_move(){this.plugin.move(this.state.moveX,this.state.moveY),this.plugin.listeners.change(this.state)}moveUp(){const t=this.state.moveY+this.state.saltMoveY;this.state.moveCount*this.state.saltMoveY<t||(this._updateSalt(),this.state.moveY+=this.state.saltMoveY,this._move())}moveDown(){const t=this.state.moveY-this.state.saltMoveY;-(this.state.moveCount*this.state.saltMoveY)>t||(this._updateSalt(),this.state.moveY-=this.state.saltMoveY,this._move())}moveX(t){const s=this._getMoveYAvailable();this.state.moveY=Math.max(-s,Math.min(s,this.state.moveY+t)),this._move()}reset(){this.state.zoom=1,this.state.moveX=0,this.state.moveY=0,this.state.rotate=0,this.state.moveCount=0,this.plugin.zoom(1),this.plugin.flip("+"),this.plugin.rotate(0),this.plugin.move(0,0),this.plugin.listeners.change(this.state)}moveLeft(){const t=this.state.moveX+this.state.saltMoveX;this.state.moveCount*this.state.saltMoveX<t||(this._updateSalt(),this.state.moveX+=this.state.saltMoveX,this._move())}moveRight(){const t=this.state.moveX-this.state.saltMoveX;-(this.state.moveCount*this.state.saltMoveX)>t||(this._updateSalt(),this.state.moveX-=this.state.saltMoveX,this._move())}moveY(t){const s=this._getMoveXAvailable();this.state.moveX=Math.max(-s,Math.min(s,this.state.moveX+t)),this._move()}_rotate(){this.plugin.rotate(this.state.rotate),this.plugin.listeners.change(this.state)}rotate(){this.state.rotate-=90,-360===this.state.rotate&&(this.state.rotate=0),this._rotate()}_flip(){this.plugin.flip(this.state.flip),this.plugin.listeners.change(this.state)}flip(){this.state.flip="+"===this.state.flip?"-":"+",this._flip()}}class r{constructor(){this.content=null,this._createContent()}getContent(){return this.content}_createContent(){var s=(t.VERSION<="7.10.0"?t.mergeOptions:t.obj.merge)(i,s);this.content="",s.showZoom&&(this.content+='\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__zoomIn" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">add</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__zoomOut" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">remove</span>\n                    </button>\n                </div>\n            '),s.showMove&&(this.content+='\n                <div class="vjs-zoom-buttons__container--row">\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__moveUp" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_drop_up</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__moveLeft" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_left</span>\n                    </button>\n                    <button id="vjs-zoom-buttons__reset" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">fiber_manual_record</span>\n                    </button>\n                    <button id="vjs-zoom-buttons__moveRight" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_right</span>\n                    </button>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__moveDown" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_drop_down</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                </div>\n            '),s.showRotate&&(this.content+='\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__rotate" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">rotate_left</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__flip" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">swap_horiz</span>\n                    </button>\n                </div>\n            ')}_createContent_old(){this.content='\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__zoomIn" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">add</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__zoomOut" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">remove</span>\n                    </button>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__moveUp" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_drop_up</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__moveLeft" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_left</span>\n                    </button>\n                    <button id="vjs-zoom-buttons__reset" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">fiber_manual_record</span>\n                    </button>\n                    <button id="vjs-zoom-buttons__moveRight" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_right</span>\n                    </button>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__moveDown" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">arrow_drop_down</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                </div>\n                <div class="vjs-zoom-buttons__container--row">\n                    <button id="vjs-zoom-buttons__rotate" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">rotate_left</span>\n                    </button>\n                    <span class="vjs-zoom-buttons__space"></span>\n                    <button id="vjs-zoom-buttons__flip" class="vjs-zoom-buttons__button">\n                        <span class="vjs-zoom-icons">swap_horiz</span>\n                    </button>\n                </div>\n            '}}class h extends o{constructor(s){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(s,o),t.log("[~Zoom Plugin] start ",o),this.player=s.el(),this.listeners={click:()=>{},change:()=>{}};var n=t.VERSION<="7.10.0"?t.mergeOptions:t.obj.merge;this.state=n(i,o),this.player.style.overflow="hidden",this.state.flip="+",this.state.moveCount=Math.round((this.state.zoom-1)/e),s.getChild("ControlBar").addChild("ZoomButton"),s.addChild("ZoomModal",{plugin:this,state:this.state}),s.addChild("ZoomGesture",{plugin:this,state:this.state}),this._observer=a.getInstance(),this._observer.notify("plugin",{enabled:this._enabled}),this._setTransform()}zoom(t){if(t<=0)throw new Error("Zoom value invalid");this.state.zoom=t,this.state.moveCount=Math.round((this.state.zoom-1)/e),this._setTransform()}rotate(t){this.state.rotate=t,this._setTransform()}move(t,s){this.state.moveX=t,this.state.moveY=s,this._setTransform()}flip(t){this.state.flip=t,this._setTransform()}toggle(){const[t]=this.player.getElementsByClassName("vjs-zoom-buttons__container");t.classList.toggle("open")}listen(t,s){this.listeners[t]=s}_notify(){this._observer.notify("change",this.state)}_setTransform(){const[t]=this.player.getElementsByTagName("video");t.style.transform=`\n                translate(${this.state.moveX}px, ${this.state.moveY}px)\n                scale(${this.state.flip}${this.state.zoom}, ${this.state.zoom})\n                rotate(${this.state.rotate}deg)\n            `,this._notify()}}return t.registerComponent("ZoomModal",class extends n{constructor(t,s){super(t,s),this.player=t.el(),this.plugin=s.plugin,this.function=new l(t,s),t.on("playing",(()=>{this.listeners()}))}createEl(){const s=t.dom.createEl("div",{className:"vjs-zoom-buttons__container"}),o=new r;return s.innerHTML=o.getContent(),s}listeners(){var t=this.player.getElementsByClassName("vjs-zoom-buttons__button");(t=Array.from(t)).map((t=>{const[,s]=t.id.split("__");t.onclick=()=>this.function[s]()}))}toggle(){const[t]=this.player.getElementsByClassName("vjs-zoom-buttons__container");t.classList.toggle("open"),this.plugin.listeners.click()}open(){const[t]=this.player.getElementsByClassName("vjs-zoom-buttons__container");t.classList.add("open"),this.plugin.listeners.click()}close(){const[t]=this.player.getElementsByClassName("vjs-zoom-buttons__container");t.classList.remove("open"),this.plugin.listeners.click()}}),t.registerComponent("ZoomGesture",class extends n{constructor(t,s){super(t,s),this._enabled=!1,this._observer=a.getInstance(),this.pointers={},this.player=t.el(),this.state=s.state,this.function=new l(t,s),t.on("loadstart",(()=>{this.gesture()})),this._observer.subscribe("plugin",(t=>{this._enabled=t.enabled}))}gesture(){this.player.addEventListener("pointerdown",(t=>{this.pointers[t.pointerId]=t})),this.player.addEventListener("pointerup",(t=>{delete this.pointers[t.pointerId],this.player.firstChild.style.pointerEvents=""})),this.player.addEventListener("pointerleave",(t=>{delete this.pointers[t.pointerId]})),this.player.addEventListener("pointermove",(t=>{if(!this._enabled)return;if(!Object.keys(this.pointers).length)return;this.player.firstChild.style.pointerEvents="none";const s=this.pointers[t.pointerId],o=t.clientX-s.clientX,n=t.clientY-s.clientY;this.pointers[t.pointerId]=t,this.function.moveY(o),this.function.moveX(n)})),this.player.addEventListener("wheel",(t=>{t.preventDefault(),t.stopPropagation(),this._enabled&&(this.function.zoomHandler(-.01*t.deltaY),this.function.moveY(0),this.function.moveX(0))}))}}),t.registerComponent("ZoomButton",class extends s{constructor(t,s){super(t,s),this.isOpen=!1,t.on("useractive",(()=>{if(!this.isOpen)return;this.player().getChild("ZoomModal").open()})),t.on("userinactive",(()=>{if(!this.isOpen)return;this.player().getChild("ZoomModal").close()}))}buildCSSClass(){return`vjs-zoom-buttons ${super.buildCSSClass()}`}handleClick(){const s=this.player().getChild("ZoomModal");t.log("[~Zoom Plugin] button handleClick"),this.isOpen=!this.isOpen,s.toggle()}}),t.registerPlugin("zoomButtons",h),h}));