@work6189/poplayers 1.0.31 → 1.0.32

package/README.md

@@ -160,6 +160,8 @@ poplayers.on('error', (error) => {
 - `↓`: 볼륨 감소
 - `F`: 전체화면 토글
 - `M`: 음소거 토글
+- `[`: 배속 0.25 감소 (최소 0.25배속)
+- `]`: 배속 0.25 증가 (최대 3배속)
 
 ## 개발
 

package/dist/poplayers.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.PoPlayers=t():e.PoPlayers=t()}(this,()=>(()=>{"use strict";var e={d:(t,s)=>{for(var i in s)e.o(s,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:s[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>d});class s{constructor(){this.listeners=new Map}on(e,t){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t)}off(e,t){const s=this.listeners.get(e);s&&(s.delete(t),0===s.size&&this.listeners.delete(e))}emit(e,...t){const s=this.listeners.get(e);s&&s.forEach(s=>{try{s(...t)}catch(t){console.error(`Error in event listener for ${String(e)}:`,t)}})}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}listenerCount(e){const t=this.listeners.get(e);return t?t.size:0}}class i extends s{}function n(e,t,s){const i=document.createElement(e);return t&&(i.className=t),s&&Object.entries(s).forEach(([e,t])=>{i.setAttribute(e,t)}),i}function l(e){if(isNaN(e)||!isFinite(e))return"0:00";const t=Math.floor(e/3600),s=Math.floor(e%3600/60),i=Math.floor(e%60);return t>0?`${t}:${s.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`:`${s}:${i.toString().padStart(2,"0")}`}function o(e,t){let s=null,i=0;return(...n)=>{const l=Date.now();l-i>t?(e(...n),i=l):(s&&clearTimeout(s),s=setTimeout(()=>{e(...n),i=Date.now()},t-(l-i)))}}class r{constructor(e,t){this.isVisible=!0,this.hideTimeout=null,this.player=e,this.config=t,this.createControls(),this.setupEventListeners()}createControls(){this.controlsElement=n("div","player-controls");const e=n("div","controls-bar");this.playButton=n("button","control-button play-button"),this.playButton.innerHTML=this.getPlayIcon(),this.playButton.title="재생";const t=n("div","progress-container");this.progressBar=n("div","progress-bar"),this.progressFilled=n("div","progress-filled"),this.progressHandle=n("div","progress-handle"),this.progressBar.appendChild(this.progressFilled),this.progressBar.appendChild(this.progressHandle),t.appendChild(this.progressBar),this.timeDisplay=n("div","time-display"),this.timeDisplay.textContent="0:00 / 0:00";const s=n("div","volume-container");this.volumeButton=n("button","control-button volume-button"),this.volumeButton.innerHTML=this.getVolumeIcon(this.config.volume),this.volumeButton.title="음소거",this.volumeSlider=n("input","volume-slider"),this.volumeSlider.type="range",this.volumeSlider.min="0",this.volumeSlider.max="1",this.volumeSlider.step="0.1",this.volumeSlider.value=this.config.volume.toString(),s.appendChild(this.volumeButton),s.appendChild(this.volumeSlider),this.playbackRateButton=n("button","control-button rate-button"),this.playbackRateButton.textContent="1x",this.playbackRateButton.title="재생 속도",this.fullscreenButton=n("button","control-button fullscreen-button"),this.fullscreenButton.innerHTML=this.getFullscreenIcon(),this.fullscreenButton.title="전체화면",e.appendChild(this.playButton),e.appendChild(t),e.appendChild(this.timeDisplay),e.appendChild(s),e.appendChild(this.playbackRateButton),e.appendChild(this.fullscreenButton),this.controlsElement.appendChild(e)}setupEventListeners(){this.playButton.addEventListener("click",()=>{this.player.getState().isPlaying?this.player.pause():this.player.play()}),this.progressBar.addEventListener("click",e=>{const t=this.progressBar.getBoundingClientRect(),s=(e.clientX-t.left)/t.width*this.player.getState().duration;this.player.seek(s)}),this.progressBar.addEventListener("mousemove",e=>{const t=this.progressBar.getBoundingClientRect(),s=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width));this.progressHandle.style.left=100*s+"%",this.progressHandle.style.opacity="1",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(1)"}),this.progressBar.addEventListener("mouseleave",()=>{const e=this.player.getState();if(e.duration>0){const t=e.currentTime/e.duration*100;this.progressHandle.style.left=`${t}%`}this.progressHandle.style.opacity="0",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)"});let e=!1;this.progressHandle.addEventListener("mousedown",()=>{e=!0}),document.addEventListener("mousemove",t=>{if(!e)return;const s=this.progressBar.getBoundingClientRect(),i=Math.max(0,Math.min(1,(t.clientX-s.left)/s.width)),n=i*this.player.getState().duration;this.progressHandle.style.left=100*i+"%",this.progressHandle.style.opacity="1",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(1.2)",this.player.seek(n)}),document.addEventListener("mouseup",()=>{e&&(e=!1,this.progressHandle.style.opacity="0",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)")}),this.volumeButton.addEventListener("click",()=>{const e=this.player.getState();e.isMuted||0===e.volume?this.player.setVolume(this.config.volume):this.player.setVolume(0)}),this.volumeSlider.addEventListener("input",e=>{const t=parseFloat(e.target.value);this.player.setVolume(t)});let t=this.config.playbackRates.indexOf(1);this.playbackRateButton.addEventListener("click",()=>{t=(t+1)%this.config.playbackRates.length;const e=this.config.playbackRates[t];this.player.setPlaybackRate(e),this.playbackRateButton.textContent=`${e}x`}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().isFullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.player.on("play",()=>{this.playButton.innerHTML=this.getPauseIcon(),this.playButton.title="일시정지"}),this.player.on("pause",()=>{this.playButton.innerHTML=this.getPlayIcon(),this.playButton.title="재생"}),this.player.on("timeupdate",e=>{this.updateProgress(e)}),this.player.on("durationchange",e=>{this.updateTimeDisplay(this.player.getState().currentTime,e)}),this.player.on("volumechange",e=>{this.volumeSlider.value=e.toString(),this.volumeButton.innerHTML=this.getVolumeIcon(e)}),this.player.on("fullscreenchange",e=>{this.fullscreenButton.innerHTML=e?this.getExitFullscreenIcon():this.getFullscreenIcon(),this.fullscreenButton.title=e?"전체화면 해제":"전체화면"});const s=this.player.getContainer(),i=o(()=>{this.showControls()},100);s.addEventListener("mousemove",i),s.addEventListener("mouseleave",()=>{this.hideControls()}),document.addEventListener("keydown",e=>{if(this.isPlayerFocused())switch(e.code){case"Space":e.preventDefault(),this.playButton.click();break;case"ArrowLeft":e.preventDefault(),this.player.seek(this.player.getState().currentTime-10);break;case"ArrowRight":e.preventDefault(),this.player.seek(this.player.getState().currentTime+10);break;case"ArrowUp":e.preventDefault(),this.player.setVolume(Math.min(1,this.player.getState().volume+.1));break;case"ArrowDown":e.preventDefault(),this.player.setVolume(Math.max(0,this.player.getState().volume-.1));break;case"KeyF":e.preventDefault(),this.fullscreenButton.click();break;case"KeyM":e.preventDefault(),this.volumeButton.click()}})}updateProgress(e){const t=this.player.getState();if(t.duration>0){const s=e/t.duration*100;this.progressFilled.style.width=`${s}%`,this.progressBar.matches(":hover")||(this.progressHandle.style.left=`${s}%`,this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)")}this.updateTimeDisplay(e,t.duration)}updateTimeDisplay(e,t){const s=l(e),i=l(t);this.timeDisplay.textContent=`${s} / ${i}`}showControls(){this.isVisible=!0,this.controlsElement.classList.add("visible"),this.hideTimeout&&clearTimeout(this.hideTimeout),this.hideTimeout=setTimeout(()=>{this.hideControls()},3e3)}hideControls(){this.hideTimeout&&clearTimeout(this.hideTimeout),this.isVisible=!1,this.controlsElement.classList.remove("visible")}isPlayerFocused(){const e=this.player.getContainer();return e.contains(document.activeElement)||document.activeElement===e}getPlayIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M8 5v14l11-7z"/>\n    </svg>'}getPauseIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>\n    </svg>'}getVolumeIcon(e){return 0===e?'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>\n      </svg>':e<.5?'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>\n      </svg>':'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>\n      </svg>'}getFullscreenIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>\n    </svg>'}getExitFullscreenIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>\n    </svg>'}getElement(){return this.controlsElement}destroy(){this.hideTimeout&&clearTimeout(this.hideTimeout),this.controlsElement.parentNode&&this.controlsElement.parentNode.removeChild(this.controlsElement)}}class a extends i{constructor(e,t={}){if(super(),this.isDestroyed=!1,this.config={width:"100%",height:"100%",controls:!0,autoplay:!1,muted:!1,loop:!1,preload:"metadata",poster:"",playbackRates:[.5,.75,1,1.25,1.5,2],volume:1,startTime:0,theme:"default",responsive:!0,...t},this.container="string"==typeof e?document.getElementById(e):e,!this.container)throw new Error(`Container with id "${e}" not found`);this.init()}init(){this.setupContainer(),this.createVideoElement(),this.setupEventListeners(),this.config.controls&&(this.controls=new r(this,this.config),this.container.appendChild(this.controls.getElement())),this.emit("ready")}setupContainer(){this.container.classList.add("poplayers"),this.container.style.position="relative",this.container.style.width="number"==typeof this.config.width?`${this.config.width}px`:this.config.width,this.container.style.height="number"==typeof this.config.height?`${this.config.height}px`:this.config.height}createVideoElement(){this.videoElement=n("video","video-element"),this.videoElement.preload=this.config.preload,this.videoElement.muted=this.config.muted,this.videoElement.loop=this.config.loop,this.videoElement.volume=this.config.volume,this.config.poster&&(this.videoElement.poster=this.config.poster),this.videoElement.style.width="100%",this.videoElement.style.height="100%",this.videoElement.style.display="block",this.container.appendChild(this.videoElement)}setupEventListeners(){const e=o(e=>{const t=e.target;this.emit("timeupdate",t.currentTime)},250);this.videoElement.addEventListener("loadstart",()=>this.emit("loadstart")),this.videoElement.addEventListener("loadeddata",()=>this.emit("loadeddata")),this.videoElement.addEventListener("canplay",()=>this.emit("canplay")),this.videoElement.addEventListener("play",()=>this.emit("play")),this.videoElement.addEventListener("pause",()=>this.emit("pause")),this.videoElement.addEventListener("ended",()=>this.emit("ended")),this.videoElement.addEventListener("timeupdate",e),this.videoElement.addEventListener("durationchange",e=>{const t=e.target;this.emit("durationchange",t.duration)}),this.videoElement.addEventListener("volumechange",e=>{const t=e.target;this.emit("volumechange",t.volume)}),this.videoElement.addEventListener("ratechange",e=>{const t=e.target;this.emit("ratechange",t.playbackRate)}),this.videoElement.addEventListener("seeking",()=>this.emit("seeking")),this.videoElement.addEventListener("seeked",()=>this.emit("seeked")),this.videoElement.addEventListener("error",e=>{const t=e.target.error;t&&this.emit("error",new Error(`Video error: ${t.message}`))}),document.addEventListener("fullscreenchange",()=>{this.emit("fullscreenchange",!!document.fullscreenElement)}),document.addEventListener("webkitfullscreenchange",()=>{this.emit("fullscreenchange",!!document.webkitFullscreenElement)}),document.addEventListener("mozfullscreenchange",()=>{this.emit("fullscreenchange",!!document.mozFullScreenElement)}),document.addEventListener("MSFullscreenChange",()=>{this.emit("fullscreenchange",!!document.msFullscreenElement)})}async play(){if(!this.isDestroyed)try{await this.videoElement.play()}catch(e){throw this.emit("error",e),e}}pause(){this.isDestroyed||this.videoElement.pause()}stop(){this.isDestroyed||(this.pause(),this.seek(0))}load(e){if(!this.isDestroyed){for(;this.videoElement.firstChild;)this.videoElement.removeChild(this.videoElement.firstChild);"string"==typeof e?this.videoElement.src=e:e.forEach(e=>{const t=n("source");t.src=e.src,e.type&&(t.type=e.type),this.videoElement.appendChild(t)}),this.videoElement.load(),this.config.startTime>0&&this.videoElement.addEventListener("loadeddata",()=>{this.seek(this.config.startTime)},{once:!0}),this.config.autoplay&&this.videoElement.addEventListener("canplay",()=>{this.play().catch(e=>{console.warn("Autoplay failed:",e)})},{once:!0})}}seek(e){this.isDestroyed||(this.videoElement.currentTime=Math.max(0,Math.min(e,this.videoElement.duration||0)))}setVolume(e){if(this.isDestroyed)return;const t=Math.max(0,Math.min(1,e));this.videoElement.volume=t,this.videoElement.muted=0===t}setPlaybackRate(e){this.isDestroyed||(this.videoElement.playbackRate=e)}enterFullscreen(){var e;!this.isDestroyed&&(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled)&&((e=this.container).requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.msRequestFullscreen&&e.msRequestFullscreen())}exitFullscreen(){this.isDestroyed||(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.msExitFullscreen())}getState(){return this.isDestroyed?{isPlaying:!1,isPaused:!0,isEnded:!1,isMuted:!1,isFullscreen:!1,currentTime:0,duration:0,volume:0,playbackRate:1,buffered:null,seekable:null}:{isPlaying:!this.videoElement.paused&&!this.videoElement.ended,isPaused:this.videoElement.paused,isEnded:this.videoElement.ended,isMuted:this.videoElement.muted,isFullscreen:!!document.fullscreenElement,currentTime:this.videoElement.currentTime,duration:this.videoElement.duration||0,volume:this.videoElement.volume,playbackRate:this.videoElement.playbackRate,buffered:this.videoElement.buffered,seekable:this.videoElement.seekable}}destroy(){this.isDestroyed||(this.pause(),this.removeAllListeners(),this.controls&&this.controls.destroy(),this.container&&this.videoElement&&this.container.removeChild(this.videoElement),this.isDestroyed=!0)}getVideoElement(){return this.videoElement}getContainer(){return this.container}getConfig(){return{...this.config}}}function h(e,t){return new a(e,t)}h.createPoPlayers=function(e,t){return new a(e,t)},h.VideoPlayer=a,h.version="1.0.0","undefined"!=typeof window&&(window.PoPlayers=h,globalThis.PoPlayers=h);const d=h;return t.default})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.PoPlayers=t():e.PoPlayers=t()}(this,()=>(()=>{"use strict";var e={d:(t,s)=>{for(var i in s)e.o(s,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:s[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>d});class s{constructor(){this.listeners=new Map}on(e,t){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t)}off(e,t){const s=this.listeners.get(e);s&&(s.delete(t),0===s.size&&this.listeners.delete(e))}emit(e,...t){const s=this.listeners.get(e);s&&s.forEach(s=>{try{s(...t)}catch(t){console.error(`Error in event listener for ${String(e)}:`,t)}})}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}listenerCount(e){const t=this.listeners.get(e);return t?t.size:0}}class i extends s{}function n(e,t,s){const i=document.createElement(e);return t&&(i.className=t),s&&Object.entries(s).forEach(([e,t])=>{i.setAttribute(e,t)}),i}function l(e){if(isNaN(e)||!isFinite(e))return"0:00";const t=Math.floor(e/3600),s=Math.floor(e%3600/60),i=Math.floor(e%60);return t>0?`${t}:${s.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`:`${s}:${i.toString().padStart(2,"0")}`}function o(e,t){let s=null,i=0;return(...n)=>{const l=Date.now();l-i>t?(e(...n),i=l):(s&&clearTimeout(s),s=setTimeout(()=>{e(...n),i=Date.now()},t-(l-i)))}}class r{constructor(e,t){this.isVisible=!0,this.hideTimeout=null,this.player=e,this.config=t,this.createControls(),this.setupEventListeners()}createControls(){this.controlsElement=n("div","player-controls");const e=n("div","controls-bar");this.playButton=n("button","control-button play-button"),this.playButton.innerHTML=this.getPlayIcon(),this.playButton.title="재생";const t=n("div","progress-container");this.progressBar=n("div","progress-bar"),this.progressFilled=n("div","progress-filled"),this.progressHandle=n("div","progress-handle"),this.progressBar.appendChild(this.progressFilled),this.progressBar.appendChild(this.progressHandle),t.appendChild(this.progressBar),this.timeDisplay=n("div","time-display"),this.timeDisplay.textContent="0:00 / 0:00";const s=n("div","volume-container");this.volumeButton=n("button","control-button volume-button"),this.volumeButton.innerHTML=this.getVolumeIcon(this.config.volume),this.volumeButton.title="음소거",this.volumeSlider=n("input","volume-slider"),this.volumeSlider.type="range",this.volumeSlider.min="0",this.volumeSlider.max="1",this.volumeSlider.step="0.1",this.volumeSlider.value=this.config.volume.toString(),s.appendChild(this.volumeButton),s.appendChild(this.volumeSlider),this.playbackRateButton=n("button","control-button rate-button"),this.playbackRateButton.textContent="1x",this.playbackRateButton.title="재생 속도",this.fullscreenButton=n("button","control-button fullscreen-button"),this.fullscreenButton.innerHTML=this.getFullscreenIcon(),this.fullscreenButton.title="전체화면",e.appendChild(this.playButton),e.appendChild(t),e.appendChild(this.timeDisplay),e.appendChild(s),e.appendChild(this.playbackRateButton),e.appendChild(this.fullscreenButton),this.controlsElement.appendChild(e)}setupEventListeners(){this.playButton.addEventListener("click",()=>{this.player.getState().isPlaying?this.player.pause():this.player.play()}),this.progressBar.addEventListener("click",e=>{const t=this.progressBar.getBoundingClientRect(),s=(e.clientX-t.left)/t.width*this.player.getState().duration;this.player.seek(s)}),this.progressBar.addEventListener("mousemove",e=>{const t=this.progressBar.getBoundingClientRect(),s=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width));this.progressHandle.style.left=100*s+"%",this.progressHandle.style.opacity="1",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(1)"}),this.progressBar.addEventListener("mouseleave",()=>{const e=this.player.getState();if(e.duration>0){const t=e.currentTime/e.duration*100;this.progressHandle.style.left=`${t}%`}this.progressHandle.style.opacity="0",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)"});let e=!1;this.progressHandle.addEventListener("mousedown",()=>{e=!0}),document.addEventListener("mousemove",t=>{if(!e)return;const s=this.progressBar.getBoundingClientRect(),i=Math.max(0,Math.min(1,(t.clientX-s.left)/s.width)),n=i*this.player.getState().duration;this.progressHandle.style.left=100*i+"%",this.progressHandle.style.opacity="1",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(1.2)",this.player.seek(n)}),document.addEventListener("mouseup",()=>{e&&(e=!1,this.progressHandle.style.opacity="0",this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)")}),this.volumeButton.addEventListener("click",()=>{const e=this.player.getState();e.isMuted||0===e.volume?this.player.setVolume(this.config.volume):this.player.setVolume(0)}),this.volumeSlider.addEventListener("input",e=>{const t=parseFloat(e.target.value);this.player.setVolume(t)});let t=this.config.playbackRates.indexOf(1);this.playbackRateButton.addEventListener("click",()=>{t=(t+1)%this.config.playbackRates.length;const e=this.config.playbackRates[t];this.player.setPlaybackRate(e),this.playbackRateButton.textContent=`${e}x`}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().isFullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.player.on("play",()=>{this.playButton.innerHTML=this.getPauseIcon(),this.playButton.title="일시정지"}),this.player.on("pause",()=>{this.playButton.innerHTML=this.getPlayIcon(),this.playButton.title="재생"}),this.player.on("timeupdate",e=>{this.updateProgress(e)}),this.player.on("durationchange",e=>{this.updateTimeDisplay(this.player.getState().currentTime,e)}),this.player.on("volumechange",e=>{this.volumeSlider.value=e.toString(),this.volumeButton.innerHTML=this.getVolumeIcon(e)}),this.player.on("fullscreenchange",e=>{this.fullscreenButton.innerHTML=e?this.getExitFullscreenIcon():this.getFullscreenIcon(),this.fullscreenButton.title=e?"전체화면 해제":"전체화면"});const s=this.player.getContainer(),i=o(()=>{this.showControls()},100);s.addEventListener("mousemove",i),s.addEventListener("mouseleave",()=>{this.hideControls()}),document.addEventListener("keydown",e=>{if(this.isPlayerFocused())switch(e.code){case"Space":e.preventDefault(),this.playButton.click();break;case"ArrowLeft":e.preventDefault(),this.player.seek(this.player.getState().currentTime-10);break;case"ArrowRight":e.preventDefault(),this.player.seek(this.player.getState().currentTime+10);break;case"ArrowUp":e.preventDefault(),this.player.setVolume(Math.min(1,this.player.getState().volume+.1));break;case"ArrowDown":e.preventDefault(),this.player.setVolume(Math.max(0,this.player.getState().volume-.1));break;case"KeyF":e.preventDefault(),this.fullscreenButton.click();break;case"KeyM":e.preventDefault(),this.volumeButton.click();break;case"BracketLeft":e.preventDefault(),this.decreasePlaybackRate();break;case"BracketRight":e.preventDefault(),this.increasePlaybackRate()}})}updateProgress(e){const t=this.player.getState();if(t.duration>0){const s=e/t.duration*100;this.progressFilled.style.width=`${s}%`,this.progressBar.matches(":hover")||(this.progressHandle.style.left=`${s}%`,this.progressHandle.style.transform="translateY(-50%) translateX(-50%) scale(0)")}this.updateTimeDisplay(e,t.duration)}updateTimeDisplay(e,t){const s=l(e),i=l(t);this.timeDisplay.textContent=`${s} / ${i}`}showControls(){this.isVisible=!0,this.controlsElement.classList.add("visible"),this.hideTimeout&&clearTimeout(this.hideTimeout),this.hideTimeout=setTimeout(()=>{this.hideControls()},3e3)}hideControls(){this.hideTimeout&&clearTimeout(this.hideTimeout),this.isVisible=!1,this.controlsElement.classList.remove("visible")}isPlayerFocused(){const e=this.player.getContainer();return e.contains(document.activeElement)||document.activeElement===e}decreasePlaybackRate(){const e=this.player.getState().playbackRate,t=Math.max(.25,e-.25);this.player.setPlaybackRate(t),this.playbackRateButton.textContent=`${t}x`}increasePlaybackRate(){const e=this.player.getState().playbackRate,t=Math.min(3,e+.25);this.player.setPlaybackRate(t),this.playbackRateButton.textContent=`${t}x`}getPlayIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M8 5v14l11-7z"/>\n    </svg>'}getPauseIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>\n    </svg>'}getVolumeIcon(e){return 0===e?'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>\n      </svg>':e<.5?'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>\n      </svg>':'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>\n      </svg>'}getFullscreenIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>\n    </svg>'}getExitFullscreenIcon(){return'<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">\n      <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>\n    </svg>'}getElement(){return this.controlsElement}destroy(){this.hideTimeout&&clearTimeout(this.hideTimeout),this.controlsElement.parentNode&&this.controlsElement.parentNode.removeChild(this.controlsElement)}}class a extends i{constructor(e,t={}){if(super(),this.isDestroyed=!1,this.config={width:"100%",height:"100%",controls:!0,autoplay:!1,muted:!1,loop:!1,preload:"metadata",poster:"",playbackRates:[.5,.75,1,1.25,1.5,2],volume:1,startTime:0,theme:"default",responsive:!0,...t},this.container="string"==typeof e?document.getElementById(e):e,!this.container)throw new Error(`Container with id "${e}" not found`);this.init()}init(){this.setupContainer(),this.createVideoElement(),this.setupEventListeners(),this.config.controls&&(this.controls=new r(this,this.config),this.container.appendChild(this.controls.getElement())),this.emit("ready")}setupContainer(){this.container.classList.add("poplayers"),this.container.style.position="relative",this.container.style.width="number"==typeof this.config.width?`${this.config.width}px`:this.config.width,this.container.style.height="number"==typeof this.config.height?`${this.config.height}px`:this.config.height,this.container.tabIndex=0,this.container.style.outline="none"}createVideoElement(){this.videoElement=n("video","video-element"),this.videoElement.preload=this.config.preload,this.videoElement.muted=this.config.muted,this.videoElement.loop=this.config.loop,this.videoElement.volume=this.config.volume,this.config.poster&&(this.videoElement.poster=this.config.poster),this.videoElement.style.width="100%",this.videoElement.style.height="100%",this.videoElement.style.display="block",this.container.appendChild(this.videoElement)}setupEventListeners(){const e=o(e=>{const t=e.target;this.emit("timeupdate",t.currentTime)},250);this.videoElement.addEventListener("loadstart",()=>this.emit("loadstart")),this.videoElement.addEventListener("loadeddata",()=>this.emit("loadeddata")),this.videoElement.addEventListener("canplay",()=>this.emit("canplay")),this.videoElement.addEventListener("play",()=>this.emit("play")),this.videoElement.addEventListener("pause",()=>this.emit("pause")),this.videoElement.addEventListener("ended",()=>this.emit("ended")),this.videoElement.addEventListener("timeupdate",e),this.videoElement.addEventListener("durationchange",e=>{const t=e.target;this.emit("durationchange",t.duration)}),this.videoElement.addEventListener("volumechange",e=>{const t=e.target;this.emit("volumechange",t.volume)}),this.videoElement.addEventListener("ratechange",e=>{const t=e.target;this.emit("ratechange",t.playbackRate)}),this.videoElement.addEventListener("seeking",()=>this.emit("seeking")),this.videoElement.addEventListener("seeked",()=>this.emit("seeked")),this.videoElement.addEventListener("error",e=>{const t=e.target.error;t&&this.emit("error",new Error(`Video error: ${t.message}`))}),document.addEventListener("fullscreenchange",()=>{this.emit("fullscreenchange",!!document.fullscreenElement)}),document.addEventListener("webkitfullscreenchange",()=>{this.emit("fullscreenchange",!!document.webkitFullscreenElement)}),document.addEventListener("mozfullscreenchange",()=>{this.emit("fullscreenchange",!!document.mozFullScreenElement)}),document.addEventListener("MSFullscreenChange",()=>{this.emit("fullscreenchange",!!document.msFullscreenElement)}),this.container.addEventListener("click",()=>{this.container.focus()})}async play(){if(!this.isDestroyed)try{await this.videoElement.play()}catch(e){throw this.emit("error",e),e}}pause(){this.isDestroyed||this.videoElement.pause()}stop(){this.isDestroyed||(this.pause(),this.seek(0))}load(e){if(!this.isDestroyed){for(;this.videoElement.firstChild;)this.videoElement.removeChild(this.videoElement.firstChild);"string"==typeof e?this.videoElement.src=e:e.forEach(e=>{const t=n("source");t.src=e.src,e.type&&(t.type=e.type),this.videoElement.appendChild(t)}),this.videoElement.load(),this.config.startTime>0&&this.videoElement.addEventListener("loadeddata",()=>{this.seek(this.config.startTime)},{once:!0}),this.config.autoplay&&this.videoElement.addEventListener("canplay",()=>{this.play().catch(e=>{console.warn("Autoplay failed:",e)})},{once:!0})}}seek(e){this.isDestroyed||(this.videoElement.currentTime=Math.max(0,Math.min(e,this.videoElement.duration||0)))}setVolume(e){if(this.isDestroyed)return;const t=Math.max(0,Math.min(1,e));this.videoElement.volume=t,this.videoElement.muted=0===t}setPlaybackRate(e){this.isDestroyed||(this.videoElement.playbackRate=e)}enterFullscreen(){var e;!this.isDestroyed&&(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled)&&((e=this.container).requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.msRequestFullscreen&&e.msRequestFullscreen())}exitFullscreen(){this.isDestroyed||(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.msExitFullscreen())}getState(){return this.isDestroyed?{isPlaying:!1,isPaused:!0,isEnded:!1,isMuted:!1,isFullscreen:!1,currentTime:0,duration:0,volume:0,playbackRate:1,buffered:null,seekable:null}:{isPlaying:!this.videoElement.paused&&!this.videoElement.ended,isPaused:this.videoElement.paused,isEnded:this.videoElement.ended,isMuted:this.videoElement.muted,isFullscreen:!!document.fullscreenElement,currentTime:this.videoElement.currentTime,duration:this.videoElement.duration||0,volume:this.videoElement.volume,playbackRate:this.videoElement.playbackRate,buffered:this.videoElement.buffered,seekable:this.videoElement.seekable}}destroy(){this.isDestroyed||(this.pause(),this.removeAllListeners(),this.controls&&this.controls.destroy(),this.container&&this.videoElement&&this.container.removeChild(this.videoElement),this.isDestroyed=!0)}getVideoElement(){return this.videoElement}getContainer(){return this.container}getConfig(){return{...this.config}}}function h(e,t){return new a(e,t)}h.createPoPlayers=function(e,t){return new a(e,t)},h.VideoPlayer=a,h.version="1.0.0","undefined"!=typeof window&&(window.PoPlayers=h,globalThis.PoPlayers=h);const d=h;return t.default})());

package/dist/types/components/Controls.d.ts

@@ -23,6 +23,8 @@ export declare class Controls {
     private showControls;
     private hideControls;
     private isPlayerFocused;
+    private decreasePlaybackRate;
+    private increasePlaybackRate;
     private getPlayIcon;
     private getPauseIcon;
     private getVolumeIcon;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@work6189/poplayers",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "A modern, customizable video PoPlayers similar to JWPlayer",
   "main": "dist/poplayers.js",
   "module": "dist/poplayers.esm.js",
   "types": "dist/types/index.d.ts",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "files": [
     "dist/"
   ],
@@ -17,7 +20,7 @@
     "test": "jest",
     "lint": "eslint src/**/*.ts",
     "type-check": "tsc --noEmit",
-    "prepare": "npm run build",
+    "prepare": "echo 'Skipping prepare script in Docker'",
     "prepublishOnly": "npm run test && npm run lint && npm run type-check && npm run build",
     "publish:npm": "./scripts/publish.sh",
     "release:patch": "npm version patch && git push --follow-tags",
@@ -25,7 +28,11 @@
     "release:major": "npm version major && git push --follow-tags",
     "release:prerelease": "npm version prerelease && git push --follow-tags",
     "version": "npm run build",
-    "postversion": "echo 'Version updated. Push tags to trigger release: git push --follow-tags'"
+    "postversion": "echo 'Version updated. Push tags to trigger release: git push --follow-tags'",
+    "docker:dev": "./scripts/test-docker.sh dev",
+    "docker:test": "./scripts/test-docker.sh test",
+    "docker:build-all": "./scripts/test-docker.sh build-all",
+    "docker:clean": "./scripts/test-docker.sh clean"
   },
   "keywords": [
     "video",
@@ -59,7 +66,6 @@
     "jest-environment-jsdom": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.0",
     "sass": "^1.77.0",
-    "sass-embedded": "^1.89.2",
     "sass-loader": "^14.0.0",
     "style-loader": "^3.3.0",
     "ts-jest": "^29.1.0",