@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-audio-player.js

@@ -1 +1,752 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(s,i,l){const a=document.createElement("button");return a.type="button",a.className=`${e}__control-button`,a.append(t(s,this.getIconSize())),l?.disabled&&(a.disabled=!0),l?.data&&Object.entries(l.data).forEach(([t,e])=>a.setAttribute(`data-${t}`,e)),a.addEventListener("click",i),a}build(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"auto";this.className=[e,`${e}--size-${t}`,`${e}--variant-${s}`,`${e}--theme-${i}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const l=document.createElement("div");l.className=`${e}__loading`;const a=document.createElement("div");a.className=`${e}__spinner`,l.append(a);const n=document.createElement("div");n.className=`${e}__error`;const o=document.createElement("p");o.textContent="오디오를 재생할 수 없습니다.";const r=document.createElement("button");r.type="button",r.textContent="다시 시도",r.addEventListener("click",()=>window.location.reload()),n.append(o,r);const h=document.createElement("div");h.className=`${e}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",h.append(this.albumImgEl,this.albumPlaceholderEl);const u=document.createElement("div");u.className=`${e}__main`;const d=document.createElement("div");d.className=`${e}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${e}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${e}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${e}__album`,d.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${e}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const c=document.createElement("div");c.className=`${e}__controls`;const m=document.createElement("div");m.className=`${e}__left-controls`;const p=document.createElement("div");p.className=`${e}__center-controls`;const E=document.createElement("div");E.className=`${e}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${e}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),p.append(this.playButtonEl),c.append(m,p,E);const g=document.createElement("div");g.className=`${e}__bottom-controls`;const b=document.createElement("div");b.className=`${e}__left-bottom`;const y=document.createElement("div");y.className=`${e}__right-bottom`;const v=document.createElement("div");v.className=`${e}__time`,this.timeCurrentEl=document.createElement("span");const f=document.createElement("span");f.textContent="/",this.timeDurationEl=document.createElement("span"),v.append(this.timeCurrentEl,f,this.timeDurationEl),b.append(v);const _=document.createElement("div");_.className=`${e}__volume`;const k=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",()=>this.toggleMute());k.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const C=document.createElement("div");C.className=`${e}__volume-slider`;const I=document.createElement("div");I.className="volume-label";const $=document.createElement("span");$.textContent="🔊";const P=document.createElement("span");I.append($,P),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),C.append(I,this.volumeInputEl),_.append(k,C);const A=document.createElement("div");A.className=`${e}__settings`;const x=this.iconButton("settings",()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${e}__settings-menu`,this.settingsMenuEl.hidden=!0;const M=document.createElement("div");M.className=`${e}__setting-group`;const w=document.createElement("label");w.textContent="재생 속도";const B=document.createElement("select");B.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(B.value))),M.append(w,B),this.settingsMenuEl.append(M),A.append(x,this.settingsMenuEl),y.append(_,A),g.append(b,y),u.append(d,this.progressEl,c,g);const N=document.createElement("div");N.className=`${e}__playlist`,N.hidden=!0;const T=document.createElement("h4");T.textContent="플레이리스트",this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${e}__playlist-tracks`,N.append(T,this.playlistTracksEl),this.append(this.audioEl,l,n,h,u,N),this._leftControls=m,this._rightControls=E,this._controls=c,this._time=v,this._volumeWrap=_,this._settings=A,this._playlist=N,this._rateSelect=B,this._volumePercent=P,this._muteButton=k}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(t(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const e=this.getPlaylist(),s=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),e.length>0&&this.leftControls.append(this.iconButton("refresh",()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",()=>{if(e.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:e.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(t(this.isPlaying?"pause":"play",s)),this.rightControls.append(this.iconButton("chevron-right",()=>{if(e.length>0){const t=this.playlistIndex+1;t<e.length&&this.setPlaylistIndex(t)}},{disabled:e.length>0&&this.playlistIndex===e.length-1})),e.length>0&&this.rightControls.append(this.iconButton("repeat",()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),s=this.getAttribute("variant")||"default";this.playlistEl.hidden=!("full"===s&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,s)=>{const i=document.createElement("div");if(i.className=`${e}__playlist-track${s===this.playlistIndex?` ${e}__playlist-track--active`:""}`,i.addEventListener("click",()=>this.setPlaylistIndex(s)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",i.append(e)}const l=document.createElement("div");l.className=`${e}__playlist-track-info`;const a=document.createElement("div");a.className=`${e}__playlist-track-title`,a.textContent=t.title||"Unknown Track";const n=document.createElement("div");n.className=`${e}__playlist-track-artist`,n.textContent=t.artist||"Unknown Artist",l.append(a,n),i.append(l),this.playlistTracksEl?.append(i)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,s)=>{t.classList.toggle(`${e}__playlist-track--active`,s===this.playlistIndex)})}updateUI(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"auto",l=this.getBool("show-controls",!0),a=this.getBool("show-progress",!0),n=this.getBool("show-time",!0),o=this.getBool("show-volume",!0),r=this.getBool("show-settings",!1);this.className=[e,`${e}--size-${t}`,`${e}--variant-${s}`,`${e}--theme-${i}`,this.isPlaying&&`${e}--playing`,!this.isPlaying&&`${e}--paused`,this.isMuted&&`${e}--muted`,this.isLoading&&`${e}--loading`,this.error&&`${e}--error`,this.isShuffle&&`${e}--shuffle`,`${e}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!a),this.controlsEl&&(this.controlsEl.hidden=!l),this.timeEl&&(this.timeEl.hidden=!n),this.volumeWrap&&(this.volumeWrap.hidden=!o),this.settingsEl&&(this.settingsEl.hidden=!r),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-audio-player';
+class DbAudioPlayer extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.isPlaying = false;
+        this.isMuted = false;
+        this.volume = 1;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.showSettingsMenu = false;
+        this.playbackRate = 1;
+        this.currentRepeatMode = 'none';
+        this.isShuffle = false;
+        this.isLoading = false;
+        this.error = null;
+        this.playlistIndex = 0;
+        this.shuffledPlaylist = [];
+        this.boundKeyDown = (event) => this.handleKeyDown(event);
+    }
+    static get observedAttributes() {
+        return [
+            'src',
+            'title',
+            'artist',
+            'album',
+            'album-art',
+            'size',
+            'variant',
+            'theme',
+            'auto-play',
+            'loop',
+            'muted',
+            'show-controls',
+            'enable-keyboard',
+            'show-progress',
+            'show-time',
+            'show-volume',
+            'show-settings',
+            'playlist',
+            'current-index',
+            'playback-rates',
+            'default-playback-rate',
+            'repeat-mode',
+            'shuffle',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+            this.bindAudioEvents();
+        }
+        this.syncFromAttributes();
+        this.updateUI();
+        if (this.getBool('enable-keyboard', true)) {
+            document.addEventListener('keydown', this.boundKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.boundKeyDown);
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'current-index') {
+            this.playlistIndex = Number(this.getAttribute('current-index') || 0);
+            this.loadCurrentTrack();
+            return;
+        }
+        if (name === 'repeat-mode') {
+            this.currentRepeatMode = this.getAttribute('repeat-mode') || 'none';
+        }
+        if (name === 'shuffle') {
+            this.isShuffle = this.getBool('shuffle');
+            this.refreshShuffledPlaylist();
+        }
+        if (name === 'default-playback-rate') {
+            this.playbackRate = Number(this.getAttribute('default-playback-rate') || 1);
+            if (this.audioEl)
+                this.audioEl.playbackRate = this.playbackRate;
+        }
+        this.updateUI();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getPlaylist() {
+        try {
+            const raw = this.getAttribute('playlist');
+            const parsed = raw ? JSON.parse(raw) : [];
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getPlaybackRates() {
+        try {
+            const raw = this.getAttribute('playback-rates');
+            const parsed = raw ? JSON.parse(raw) : [0.5, 0.75, 1, 1.25, 1.5, 2];
+            return Array.isArray(parsed) && parsed.length > 0 ? parsed : [0.5, 0.75, 1, 1.25, 1.5, 2];
+        }
+        catch {
+            return [0.5, 0.75, 1, 1.25, 1.5, 2];
+        }
+    }
+    getIconSize() {
+        const size = this.getAttribute('size') || 'm';
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 24;
+        if (size === 'xl')
+            return 32;
+        return 20;
+    }
+    getCurrentTrack() {
+        const playlist = this.getPlaylist();
+        if (playlist.length > 0) {
+            const index = this.isShuffle && this.shuffledPlaylist.length > 0
+                ? this.shuffledPlaylist[this.playlistIndex] ?? this.playlistIndex
+                : this.playlistIndex;
+            return playlist[index] || playlist[0];
+        }
+        return {
+            src: this.getAttribute('src') || '',
+            title: this.getAttribute('title') || undefined,
+            artist: this.getAttribute('artist') || undefined,
+            album: this.getAttribute('album') || undefined,
+            albumArt: this.getAttribute('album-art') || undefined,
+        };
+    }
+    refreshShuffledPlaylist() {
+        const playlist = this.getPlaylist();
+        if (playlist.length > 0 && this.isShuffle) {
+            const indices = Array.from({ length: playlist.length }, (_, i) => i);
+            this.shuffledPlaylist = [...indices].sort(() => Math.random() - 0.5);
+        }
+        else {
+            this.shuffledPlaylist = [];
+        }
+    }
+    formatTime(time) {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+    syncFromAttributes() {
+        this.playlistIndex = Number(this.getAttribute('current-index') || 0);
+        this.currentRepeatMode = this.getAttribute('repeat-mode') || 'none';
+        this.isShuffle = this.getBool('shuffle');
+        this.playbackRate = Number(this.getAttribute('default-playback-rate') || 1);
+        this.isMuted = this.getBool('muted');
+        this.volume = this.isMuted ? 0 : 1;
+        this.refreshShuffledPlaylist();
+        this.loadCurrentTrack();
+    }
+    loadCurrentTrack() {
+        if (!this.audioEl)
+            return;
+        const track = this.getCurrentTrack();
+        const nextSrc = track?.src || this.getAttribute('src') || '';
+        if (this.audioEl.src !== nextSrc && nextSrc) {
+            this.audioEl.src = nextSrc;
+            this.audioEl.load();
+        }
+        this.updateTrackInfo();
+        this.updatePlaylistActive();
+    }
+    bindAudioEvents() {
+        const audio = this.audioEl;
+        if (!audio)
+            return;
+        audio.addEventListener('play', () => {
+            this.isPlaying = true;
+            this.dispatchEvent(new CustomEvent('db-play', { bubbles: true, composed: true }));
+            this.updateUI();
+        });
+        audio.addEventListener('pause', () => {
+            this.isPlaying = false;
+            this.dispatchEvent(new CustomEvent('db-pause', { bubbles: true, composed: true }));
+            this.updateUI();
+        });
+        audio.addEventListener('timeupdate', () => {
+            this.currentTime = audio.currentTime;
+            this.duration = audio.duration || 0;
+            this.dispatchEvent(new CustomEvent('db-time-update', {
+                detail: { currentTime: this.currentTime, duration: this.duration },
+                bubbles: true,
+                composed: true,
+            }));
+            this.updateProgress();
+            this.updateTime();
+        });
+        audio.addEventListener('volumechange', () => {
+            this.volume = audio.volume;
+            this.isMuted = audio.muted;
+            this.dispatchEvent(new CustomEvent('db-volume-change', {
+                detail: { volume: this.volume },
+                bubbles: true,
+                composed: true,
+            }));
+            this.updateVolumeUI();
+        });
+        audio.addEventListener('ended', () => this.handleEnded());
+        audio.addEventListener('error', () => {
+            this.error = '오디오를 재생할 수 없습니다.';
+            this.dispatchEvent(new CustomEvent('db-error', {
+                detail: { error: this.error },
+                bubbles: true,
+                composed: true,
+            }));
+            this.updateUI();
+        });
+        audio.addEventListener('loadstart', () => {
+            this.isLoading = true;
+            this.error = null;
+            this.updateUI();
+        });
+        audio.addEventListener('canplay', () => {
+            this.isLoading = false;
+            this.updateUI();
+        });
+    }
+    handleEnded() {
+        this.isPlaying = false;
+        this.dispatchEvent(new CustomEvent('db-ended', { bubbles: true, composed: true }));
+        const playlist = this.getPlaylist();
+        if (playlist.length > 0) {
+            if (this.currentRepeatMode === 'one') {
+                if (this.audioEl) {
+                    this.audioEl.currentTime = 0;
+                    void this.audioEl.play();
+                }
+            }
+            else if (this.currentRepeatMode === 'all' || this.playlistIndex < playlist.length - 1) {
+                const nextIndex = this.playlistIndex + 1;
+                if (nextIndex < playlist.length) {
+                    this.setPlaylistIndex(nextIndex);
+                }
+                else if (this.currentRepeatMode === 'all') {
+                    this.setPlaylistIndex(0);
+                }
+            }
+        }
+        else if (this.getBool('loop') && this.audioEl) {
+            this.audioEl.currentTime = 0;
+            void this.audioEl.play();
+        }
+        this.updateUI();
+    }
+    setPlaylistIndex(index) {
+        this.playlistIndex = index;
+        this.dispatchEvent(new CustomEvent('db-playlist-change', {
+            detail: { index },
+            bubbles: true,
+            composed: true,
+        }));
+        this.loadCurrentTrack();
+        if (this.audioEl)
+            void this.audioEl.play();
+    }
+    togglePlay() {
+        if (!this.audioEl)
+            return;
+        if (this.isPlaying)
+            this.audioEl.pause();
+        else
+            void this.audioEl.play();
+    }
+    toggleMute() {
+        if (!this.audioEl)
+            return;
+        this.audioEl.muted = !this.isMuted;
+    }
+    toggleRepeatMode() {
+        const modes = ['none', 'one', 'all'];
+        const next = modes[(modes.indexOf(this.currentRepeatMode) + 1) % modes.length];
+        this.currentRepeatMode = next;
+        this.dispatchEvent(new CustomEvent('db-repeat-mode-change', {
+            detail: { mode: next },
+            bubbles: true,
+            composed: true,
+        }));
+        this.updateUI();
+    }
+    toggleShuffle() {
+        this.isShuffle = !this.isShuffle;
+        this.refreshShuffledPlaylist();
+        this.dispatchEvent(new CustomEvent('db-shuffle-change', {
+            detail: { shuffle: this.isShuffle },
+            bubbles: true,
+            composed: true,
+        }));
+        this.updateUI();
+    }
+    handlePlaybackRateChange(rate) {
+        if (!this.audioEl)
+            return;
+        this.audioEl.playbackRate = rate;
+        this.playbackRate = rate;
+        this.dispatchEvent(new CustomEvent('db-playback-rate-change', {
+            detail: { rate },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleKeyDown(event) {
+        if (!this.audioEl || !this.getBool('enable-keyboard', true))
+            return;
+        switch (event.code) {
+            case 'Space':
+                event.preventDefault();
+                this.togglePlay();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.audioEl.currentTime = Math.max(0, this.currentTime - 10);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.audioEl.currentTime = Math.min(this.duration, this.currentTime + 10);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.audioEl.volume = Math.min(1, this.volume + 0.1);
+                this.audioEl.muted = false;
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.audioEl.volume = Math.max(0, this.volume - 0.1);
+                this.audioEl.muted = this.audioEl.volume === 0;
+                break;
+            case 'KeyM':
+                event.preventDefault();
+                this.toggleMute();
+                break;
+            case 'KeyR':
+                event.preventDefault();
+                this.toggleRepeatMode();
+                break;
+            case 'KeyS':
+                event.preventDefault();
+                this.toggleShuffle();
+                break;
+        }
+    }
+    iconButton(icon, onClick, options) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `${CLASS}__control-button`;
+        button.append(createDbIcon(icon, this.getIconSize()));
+        if (options?.disabled)
+            button.disabled = true;
+        if (options?.data) {
+            Object.entries(options.data).forEach(([key, value]) => button.setAttribute(`data-${key}`, value));
+        }
+        button.addEventListener('click', onClick);
+        return button;
+    }
+    build() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'auto';
+        this.className = [
+            CLASS,
+            `${CLASS}--size-${size}`,
+            `${CLASS}--variant-${variant}`,
+            `${CLASS}--theme-${theme}`,
+        ].join(' ');
+        this.audioEl = document.createElement('audio');
+        this.audioEl.preload = 'metadata';
+        this.audioEl.hidden = true;
+        const loading = document.createElement('div');
+        loading.className = `${CLASS}__loading`;
+        const spinner = document.createElement('div');
+        spinner.className = `${CLASS}__spinner`;
+        loading.append(spinner);
+        const errorWrap = document.createElement('div');
+        errorWrap.className = `${CLASS}__error`;
+        const errorText = document.createElement('p');
+        errorText.textContent = '오디오를 재생할 수 없습니다.';
+        const retry = document.createElement('button');
+        retry.type = 'button';
+        retry.textContent = '다시 시도';
+        retry.addEventListener('click', () => window.location.reload());
+        errorWrap.append(errorText, retry);
+        const albumArt = document.createElement('div');
+        albumArt.className = `${CLASS}__album-art`;
+        this.albumImgEl = document.createElement('img');
+        this.albumImgEl.addEventListener('error', () => {
+            if (this.albumImgEl)
+                this.albumImgEl.style.display = 'none';
+            this.albumPlaceholderEl?.classList.remove('album-placeholder');
+        });
+        this.albumPlaceholderEl = document.createElement('div');
+        this.albumPlaceholderEl.className = 'album-placeholder';
+        this.albumPlaceholderEl.textContent = '🎵';
+        albumArt.append(this.albumImgEl, this.albumPlaceholderEl);
+        const main = document.createElement('div');
+        main.className = `${CLASS}__main`;
+        const info = document.createElement('div');
+        info.className = `${CLASS}__info`;
+        this.titleEl = document.createElement('div');
+        this.titleEl.className = `${CLASS}__title`;
+        this.artistEl = document.createElement('div');
+        this.artistEl.className = `${CLASS}__artist`;
+        this.albumEl = document.createElement('div');
+        this.albumEl.className = `${CLASS}__album`;
+        info.append(this.titleEl, this.artistEl, this.albumEl);
+        this.progressEl = document.createElement('div');
+        this.progressEl.className = `${CLASS}__progress`;
+        this.progressBarEl = document.createElement('div');
+        this.progressBarEl.className = `${CLASS}__progress-bar`;
+        this.progressHandleEl = document.createElement('div');
+        this.progressHandleEl.className = `${CLASS}__progress-handle`;
+        this.progressEl.append(this.progressBarEl, this.progressHandleEl);
+        this.progressEl.addEventListener('click', (event) => {
+            if (!this.audioEl || !this.progressEl)
+                return;
+            const rect = this.progressEl.getBoundingClientRect();
+            const percentage = (event.clientX - rect.left) / rect.width;
+            this.audioEl.currentTime = percentage * (this.duration || 0);
+        });
+        const controls = document.createElement('div');
+        controls.className = `${CLASS}__controls`;
+        const leftControls = document.createElement('div');
+        leftControls.className = `${CLASS}__left-controls`;
+        const centerControls = document.createElement('div');
+        centerControls.className = `${CLASS}__center-controls`;
+        const rightControls = document.createElement('div');
+        rightControls.className = `${CLASS}__right-controls`;
+        this.playButtonEl = document.createElement('button');
+        this.playButtonEl.type = 'button';
+        this.playButtonEl.className = `${CLASS}__play-button`;
+        this.playButtonEl.addEventListener('click', () => this.togglePlay());
+        centerControls.append(this.playButtonEl);
+        controls.append(leftControls, centerControls, rightControls);
+        const bottomControls = document.createElement('div');
+        bottomControls.className = `${CLASS}__bottom-controls`;
+        const leftBottom = document.createElement('div');
+        leftBottom.className = `${CLASS}__left-bottom`;
+        const rightBottom = document.createElement('div');
+        rightBottom.className = `${CLASS}__right-bottom`;
+        const time = document.createElement('div');
+        time.className = `${CLASS}__time`;
+        this.timeCurrentEl = document.createElement('span');
+        const slash = document.createElement('span');
+        slash.textContent = '/';
+        this.timeDurationEl = document.createElement('span');
+        time.append(this.timeCurrentEl, slash, this.timeDurationEl);
+        leftBottom.append(time);
+        const volumeWrap = document.createElement('div');
+        volumeWrap.className = `${CLASS}__volume`;
+        const muteButton = this.iconButton(this.isMuted || this.volume === 0 ? 'mute-filled' : 'volume-up', () => this.toggleMute());
+        muteButton.title = this.isMuted || this.volume === 0 ? '음소거 해제' : '음소거';
+        const volumeSlider = document.createElement('div');
+        volumeSlider.className = `${CLASS}__volume-slider`;
+        const volumeLabel = document.createElement('div');
+        volumeLabel.className = 'volume-label';
+        const volumeEmoji = document.createElement('span');
+        volumeEmoji.textContent = '🔊';
+        const volumePercent = document.createElement('span');
+        volumeLabel.append(volumeEmoji, volumePercent);
+        this.volumeInputEl = document.createElement('input');
+        this.volumeInputEl.type = 'range';
+        this.volumeInputEl.min = '0';
+        this.volumeInputEl.max = '1';
+        this.volumeInputEl.step = '0.1';
+        this.volumeInputEl.addEventListener('input', () => {
+            if (!this.audioEl || !this.volumeInputEl)
+                return;
+            const newVolume = parseFloat(this.volumeInputEl.value);
+            this.audioEl.volume = newVolume;
+            this.audioEl.muted = newVolume === 0;
+        });
+        volumeSlider.append(volumeLabel, this.volumeInputEl);
+        volumeWrap.append(muteButton, volumeSlider);
+        const settings = document.createElement('div');
+        settings.className = `${CLASS}__settings`;
+        const settingsButton = this.iconButton('settings', () => {
+            this.showSettingsMenu = !this.showSettingsMenu;
+            this.updateSettingsMenu();
+        });
+        this.settingsMenuEl = document.createElement('div');
+        this.settingsMenuEl.className = `${CLASS}__settings-menu`;
+        this.settingsMenuEl.hidden = true;
+        const settingGroup = document.createElement('div');
+        settingGroup.className = `${CLASS}__setting-group`;
+        const label = document.createElement('label');
+        label.textContent = '재생 속도';
+        const select = document.createElement('select');
+        select.addEventListener('change', () => this.handlePlaybackRateChange(parseFloat(select.value)));
+        settingGroup.append(label, select);
+        this.settingsMenuEl.append(settingGroup);
+        settings.append(settingsButton, this.settingsMenuEl);
+        rightBottom.append(volumeWrap, settings);
+        bottomControls.append(leftBottom, rightBottom);
+        main.append(info, this.progressEl, controls, bottomControls);
+        const playlist = document.createElement('div');
+        playlist.className = `${CLASS}__playlist`;
+        playlist.hidden = true;
+        const playlistTitle = document.createElement('h4');
+        playlistTitle.textContent = '플레이리스트';
+        this.playlistTracksEl = document.createElement('div');
+        this.playlistTracksEl.className = `${CLASS}__playlist-tracks`;
+        playlist.append(playlistTitle, this.playlistTracksEl);
+        this.append(this.audioEl, loading, errorWrap, albumArt, main, playlist);
+        this._leftControls = leftControls;
+        this._rightControls = rightControls;
+        this._controls = controls;
+        this._time = time;
+        this._volumeWrap = volumeWrap;
+        this._settings = settings;
+        this._playlist = playlist;
+        this._rateSelect = select;
+        this._volumePercent = volumePercent;
+        this._muteButton = muteButton;
+    }
+    get leftControls() {
+        return this._leftControls;
+    }
+    get rightControls() {
+        return this._rightControls;
+    }
+    get controlsEl() {
+        return this._controls;
+    }
+    get timeEl() {
+        return this._time;
+    }
+    get volumeWrap() {
+        return this._volumeWrap;
+    }
+    get settingsEl() {
+        return this._settings;
+    }
+    get playlistEl() {
+        return this._playlist;
+    }
+    get rateSelect() {
+        return this._rateSelect;
+    }
+    get volumePercent() {
+        return this._volumePercent;
+    }
+    get muteButton() {
+        return this._muteButton;
+    }
+    updateTrackInfo() {
+        const track = this.getCurrentTrack();
+        if (this.titleEl)
+            this.titleEl.textContent = track?.title || 'Unknown Track';
+        if (this.artistEl)
+            this.artistEl.textContent = track?.artist || 'Unknown Artist';
+        if (this.albumEl) {
+            if (track?.album) {
+                this.albumEl.textContent = track.album;
+                this.albumEl.hidden = false;
+            }
+            else {
+                this.albumEl.hidden = true;
+            }
+        }
+        if (this.albumImgEl && this.albumPlaceholderEl) {
+            if (track?.albumArt) {
+                this.albumImgEl.src = track.albumArt;
+                this.albumImgEl.alt = track.title || 'Album Art';
+                this.albumImgEl.style.display = '';
+            }
+            else {
+                this.albumImgEl.removeAttribute('src');
+                this.albumImgEl.style.display = 'none';
+            }
+            this.albumPlaceholderEl.className = 'album-placeholder';
+        }
+    }
+    updateProgress() {
+        const ratio = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
+        if (this.progressBarEl)
+            this.progressBarEl.style.width = `${ratio}%`;
+        if (this.progressHandleEl) {
+            this.progressHandleEl.style.left = `${ratio}%`;
+            if (ratio <= 0) {
+                this.progressHandleEl.style.transform = 'translate(0, -50%)';
+            }
+            else if (ratio >= 100) {
+                this.progressHandleEl.style.transform = 'translate(-100%, -50%)';
+            }
+            else {
+                this.progressHandleEl.style.transform = 'translate(-50%, -50%)';
+            }
+        }
+    }
+    updateTime() {
+        if (this.timeCurrentEl)
+            this.timeCurrentEl.textContent = this.formatTime(this.currentTime);
+        if (this.timeDurationEl)
+            this.timeDurationEl.textContent = this.formatTime(this.duration);
+    }
+    updateVolumeUI() {
+        if (this.volumeInputEl)
+            this.volumeInputEl.value = String(this.volume);
+        if (this.volumePercent)
+            this.volumePercent.textContent = `${Math.round(this.volume * 100)}%`;
+        if (this.muteButton) {
+            this.muteButton.replaceChildren(createDbIcon(this.isMuted || this.volume === 0 ? 'mute-filled' : 'volume-up', this.getIconSize()));
+            this.muteButton.title = this.isMuted || this.volume === 0 ? '음소거 해제' : '음소거';
+        }
+    }
+    updateSettingsMenu() {
+        if (!this.settingsMenuEl)
+            return;
+        this.settingsMenuEl.hidden = !this.showSettingsMenu;
+    }
+    rebuildControlButtons() {
+        const playlist = this.getPlaylist();
+        const iconSize = this.getIconSize() * 1.2;
+        this.leftControls.replaceChildren();
+        this.rightControls.replaceChildren();
+        if (playlist.length > 0) {
+            this.leftControls.append(this.iconButton('refresh', () => this.toggleShuffle(), { data: { shuffle: 'true' } }));
+        }
+        this.leftControls.append(this.iconButton('chevron-left', () => {
+            if (playlist.length > 0) {
+                const prev = this.playlistIndex - 1;
+                if (prev >= 0)
+                    this.setPlaylistIndex(prev);
+            }
+            else if (this.audioEl) {
+                this.audioEl.currentTime = 0;
+            }
+        }, { disabled: playlist.length > 0 && this.playlistIndex === 0 }));
+        if (this.playButtonEl) {
+            this.playButtonEl.replaceChildren(createDbIcon(this.isPlaying ? 'pause' : 'play', iconSize));
+        }
+        this.rightControls.append(this.iconButton('chevron-right', () => {
+            if (playlist.length > 0) {
+                const next = this.playlistIndex + 1;
+                if (next < playlist.length)
+                    this.setPlaylistIndex(next);
+            }
+        }, { disabled: playlist.length > 0 && this.playlistIndex === playlist.length - 1 }));
+        if (playlist.length > 0) {
+            this.rightControls.append(this.iconButton('repeat', () => this.toggleRepeatMode(), { data: { repeat: 'true' } }));
+        }
+    }
+    rebuildPlaylist() {
+        if (!this.playlistTracksEl)
+            return;
+        const playlist = this.getPlaylist();
+        const variant = this.getAttribute('variant') || 'default';
+        this.playlistEl.hidden = !(variant === 'full' && playlist.length > 0);
+        this.playlistTracksEl.replaceChildren();
+        playlist.forEach((track, index) => {
+            const row = document.createElement('div');
+            row.className = `${CLASS}__playlist-track${index === this.playlistIndex ? ` ${CLASS}__playlist-track--active` : ''}`;
+            row.addEventListener('click', () => this.setPlaylistIndex(index));
+            if (track.albumArt) {
+                const img = document.createElement('img');
+                img.src = track.albumArt;
+                img.alt = track.title || 'Album Art';
+                row.append(img);
+            }
+            const info = document.createElement('div');
+            info.className = `${CLASS}__playlist-track-info`;
+            const title = document.createElement('div');
+            title.className = `${CLASS}__playlist-track-title`;
+            title.textContent = track.title || 'Unknown Track';
+            const artist = document.createElement('div');
+            artist.className = `${CLASS}__playlist-track-artist`;
+            artist.textContent = track.artist || 'Unknown Artist';
+            info.append(title, artist);
+            row.append(info);
+            this.playlistTracksEl?.append(row);
+        });
+    }
+    updatePlaylistActive() {
+        if (!this.playlistTracksEl)
+            return;
+        Array.from(this.playlistTracksEl.children).forEach((child, index) => {
+            child.classList.toggle(`${CLASS}__playlist-track--active`, index === this.playlistIndex);
+        });
+    }
+    updateUI() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'auto';
+        const showControls = this.getBool('show-controls', true);
+        const showProgress = this.getBool('show-progress', true);
+        const showTime = this.getBool('show-time', true);
+        const showVolume = this.getBool('show-volume', true);
+        const showSettings = this.getBool('show-settings', false);
+        this.className = [
+            CLASS,
+            `${CLASS}--size-${size}`,
+            `${CLASS}--variant-${variant}`,
+            `${CLASS}--theme-${theme}`,
+            this.isPlaying && `${CLASS}--playing`,
+            !this.isPlaying && `${CLASS}--paused`,
+            this.isMuted && `${CLASS}--muted`,
+            this.isLoading && `${CLASS}--loading`,
+            this.error && `${CLASS}--error`,
+            this.isShuffle && `${CLASS}--shuffle`,
+            `${CLASS}--repeat-${this.currentRepeatMode}`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.audioEl) {
+            this.audioEl.autoplay = this.getBool('auto-play');
+            this.audioEl.loop = this.getBool('loop');
+            this.audioEl.muted = this.getBool('muted');
+            this.audioEl.playbackRate = this.playbackRate;
+        }
+        if (this.progressEl)
+            this.progressEl.hidden = !showProgress;
+        if (this.controlsEl)
+            this.controlsEl.hidden = !showControls;
+        if (this.timeEl)
+            this.timeEl.hidden = !showTime;
+        if (this.volumeWrap)
+            this.volumeWrap.hidden = !showVolume;
+        if (this.settingsEl)
+            this.settingsEl.hidden = !showSettings;
+        this.rateSelect.replaceChildren(...this.getPlaybackRates().map((rate) => {
+            const option = document.createElement('option');
+            option.value = String(rate);
+            option.textContent = `${rate}x`;
+            if (rate === this.playbackRate)
+                option.selected = true;
+            return option;
+        }));
+        this.rebuildControlButtons();
+        this.updateTrackInfo();
+        this.updateProgress();
+        this.updateTime();
+        this.updateVolumeUI();
+        this.updateSettingsMenu();
+        this.rebuildPlaylist();
+    }
+}
+if (!customElements.get('db-audio-player'))
+    customElements.define('db-audio-player', DbAudioPlayer);
+
+export { DbAudioPlayer };