@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,752 +1 @@
-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 };
+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};