@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,503 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = 'designbase-wc-video-player';
-const CONTROL_ICON = 20;
-const CENTER_ICON = 48;
-class DbVideoPlayer extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.rafId = null;
-        this.playlistIndex = 0;
-        this.isFullscreen = false;
-        this.showControlsOverlay = false;
-        this.isPlaying = false;
-        this.isMuted = false;
-        this.volume = 1;
-        this.lastVolumeBeforeMute = 1;
-        this.currentTime = 0;
-        this.duration = 0;
-        this.isLoading = false;
-        this.error = null;
-        this.onFullscreenChange = () => {
-            this.isFullscreen = document.fullscreenElement === this;
-            this.dispatchEvent(new CustomEvent('db-fullscreen-change', {
-                detail: { isFullscreen: this.isFullscreen },
-                bubbles: true,
-                composed: true,
-            }));
-            this.updateUI();
-        };
-        this.onMouseEnter = () => {
-            this.showControlsOverlay = true;
-            this.updateUI();
-        };
-        this.onMouseLeave = () => {
-            this.showControlsOverlay = false;
-            this.updateUI();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'src',
-            'poster',
-            'title',
-            'description',
-            'size',
-            'variant',
-            'theme',
-            'auto-play',
-            'loop',
-            'muted',
-            'show-controls',
-            'enable-fullscreen',
-            'show-progress',
-            'show-time',
-            'show-volume',
-            'playlist',
-            'current-index',
-        ];
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.built = true;
-            this.build();
-            this.bindVideoEvents();
-        }
-        this.syncFromAttributes();
-        this.updateUI();
-        document.addEventListener('fullscreenchange', this.onFullscreenChange);
-        this.addEventListener('mouseenter', this.onMouseEnter);
-        this.addEventListener('mouseleave', this.onMouseLeave);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('fullscreenchange', this.onFullscreenChange);
-        this.removeEventListener('mouseenter', this.onMouseEnter);
-        this.removeEventListener('mouseleave', this.onMouseLeave);
-        this.stopProgressAnimation();
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'src' || name === 'playlist' || name === 'current-index') {
-            this.loadVideoSource();
-            return;
-        }
-        if (name === 'muted' && this.videoEl) {
-            this.videoEl.muted = this.getBool('muted');
-        }
-        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 [];
-        }
-    }
-    getCurrentSrc() {
-        const playlist = this.getPlaylist();
-        if (playlist.length > 0) {
-            const index = Number(this.getAttribute('current-index') || this.playlistIndex || 0);
-            return playlist[Math.max(0, Math.min(playlist.length - 1, index))];
-        }
-        return this.getAttribute('src') || '';
-    }
-    formatTime(time) {
-        if (!Number.isFinite(time) || time < 0)
-            return '0:00';
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-    }
-    iconButton(icon, size, onClick) {
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = `${CLASS}__control-button`;
-        button.append(createDbIcon(icon, size));
-        button.addEventListener('click', (event) => {
-            event.stopPropagation();
-            onClick();
-        });
-        return button;
-    }
-    skipButton(label, seconds) {
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = `${CLASS}__skip-button`;
-        button.textContent = label;
-        button.setAttribute('aria-label', seconds < 0 ? '10초 되감기' : '10초 빨리감기');
-        button.addEventListener('click', (event) => {
-            event.stopPropagation();
-            this.seekBy(seconds);
-        });
-        return button;
-    }
-    syncFromAttributes() {
-        this.playlistIndex = Number(this.getAttribute('current-index') || 0);
-        this.isMuted = this.getBool('muted');
-        this.volume = this.isMuted ? 0 : 1;
-        this.lastVolumeBeforeMute = this.volume > 0 ? this.volume : 1;
-        this.loadVideoSource();
-    }
-    loadVideoSource() {
-        if (!this.videoEl)
-            return;
-        const src = this.getCurrentSrc();
-        if (!src)
-            return;
-        const absoluteSrc = new URL(src, window.location.href).href;
-        if (this.videoEl.src !== absoluteSrc) {
-            this.videoEl.src = src;
-            this.videoEl.load();
-        }
-        this.videoEl.poster = this.getAttribute('poster') || '';
-        this.videoEl.autoplay = this.getBool('auto-play');
-        this.videoEl.loop = this.getBool('loop');
-        this.videoEl.muted = this.getBool('muted');
-        this.videoEl.playsInline = true;
-    }
-    bindVideoEvents() {
-        const video = this.videoEl;
-        if (!video)
-            return;
-        video.addEventListener('play', () => {
-            this.isPlaying = true;
-            this.startProgressAnimation();
-            this.dispatchEvent(new CustomEvent('db-play', { bubbles: true, composed: true }));
-            this.updateUI();
-        });
-        video.addEventListener('pause', () => {
-            this.isPlaying = false;
-            this.stopProgressAnimation();
-            this.dispatchEvent(new CustomEvent('db-pause', { bubbles: true, composed: true }));
-            this.updateUI();
-        });
-        video.addEventListener('timeupdate', () => {
-            this.currentTime = video.currentTime;
-            this.duration = Number.isFinite(video.duration) ? video.duration : 0;
-            this.dispatchEvent(new CustomEvent('db-time-update', {
-                detail: { currentTime: this.currentTime, duration: this.duration },
-                bubbles: true,
-                composed: true,
-            }));
-            this.updateProgress();
-            this.updateTime();
-        });
-        video.addEventListener('volumechange', () => {
-            this.volume = video.volume;
-            this.isMuted = video.muted || video.volume === 0;
-            if (!this.isMuted && this.volume > 0)
-                this.lastVolumeBeforeMute = this.volume;
-            this.dispatchEvent(new CustomEvent('db-volume-change', { detail: { volume: this.volume }, bubbles: true, composed: true }));
-            this.updateVolumeUI();
-        });
-        video.addEventListener('ended', () => {
-            this.isPlaying = false;
-            this.stopProgressAnimation();
-            this.dispatchEvent(new CustomEvent('db-ended', { bubbles: true, composed: true }));
-            const playlist = this.getPlaylist();
-            const next = this.playlistIndex + 1;
-            if (playlist.length > 0 && next < playlist.length) {
-                this.playlistIndex = next;
-                this.loadVideoSource();
-                void video.play();
-            }
-            this.updateUI();
-        });
-        video.addEventListener('error', () => {
-            this.error = '비디오를 재생할 수 없습니다.';
-            this.dispatchEvent(new CustomEvent('db-error', { detail: { error: this.error }, bubbles: true, composed: true }));
-            this.updateUI();
-        });
-        video.addEventListener('loadstart', () => {
-            this.isLoading = true;
-            this.error = null;
-            this.updateUI();
-        });
-        video.addEventListener('loadedmetadata', () => {
-            this.duration = Number.isFinite(video.duration) ? video.duration : 0;
-            this.updateTime();
-        });
-        video.addEventListener('canplay', () => {
-            this.isLoading = false;
-            this.updateUI();
-        });
-        video.addEventListener('click', () => this.togglePlay());
-    }
-    togglePlay() {
-        if (!this.videoEl)
-            return;
-        if (this.videoEl.paused)
-            void this.videoEl.play();
-        else
-            this.videoEl.pause();
-    }
-    toggleMute() {
-        if (!this.videoEl)
-            return;
-        if (this.isMuted) {
-            this.videoEl.muted = false;
-            this.videoEl.volume = this.lastVolumeBeforeMute > 0 ? this.lastVolumeBeforeMute : 1;
-            return;
-        }
-        if (this.videoEl.volume > 0)
-            this.lastVolumeBeforeMute = this.videoEl.volume;
-        this.videoEl.muted = true;
-        this.videoEl.volume = 0;
-    }
-    seekBy(seconds) {
-        if (!this.videoEl)
-            return;
-        const duration = Number.isFinite(this.videoEl.duration) ? this.videoEl.duration : 0;
-        const maxTime = duration > 0 ? duration : Number.MAX_SAFE_INTEGER;
-        const nextTime = Math.max(0, Math.min(maxTime, this.videoEl.currentTime + seconds));
-        this.videoEl.currentTime = nextTime;
-    }
-    toggleFullscreen() {
-        if (!this.getBool('enable-fullscreen', true))
-            return;
-        if (!this.isFullscreen)
-            void this.requestFullscreen?.();
-        else
-            void document.exitFullscreen?.();
-    }
-    build() {
-        this.videoEl = document.createElement('video');
-        this.videoEl.className = `${CLASS}__video`;
-        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', () => {
-            this.error = null;
-            this.loadVideoSource();
-            this.updateUI();
-        });
-        errorWrap.append(errorText, retry);
-        this.dimOverlayEl = document.createElement('div');
-        this.dimOverlayEl.className = `${CLASS}__dim-overlay`;
-        this.overlayEl = document.createElement('div');
-        this.overlayEl.className = `${CLASS}__overlay`;
-        const top = document.createElement('div');
-        top.className = `${CLASS}__top-controls`;
-        const titleWrap = document.createElement('div');
-        titleWrap.className = `${CLASS}__title`;
-        const titleEl = document.createElement('h3');
-        const descEl = document.createElement('p');
-        titleWrap.append(titleEl, descEl);
-        top.append(titleWrap);
-        this._titleEl = titleEl;
-        this._descEl = descEl;
-        const center = document.createElement('div');
-        center.className = `${CLASS}__center-controls`;
-        const rewindButton = this.skipButton('-10', -10);
-        this.centerPlayEl = document.createElement('button');
-        this.centerPlayEl.type = 'button';
-        this.centerPlayEl.className = `${CLASS}__play-button`;
-        this.centerPlayEl.addEventListener('click', (event) => {
-            event.stopPropagation();
-            this.togglePlay();
-        });
-        const forwardButton = this.skipButton('+10', 10);
-        center.append(rewindButton, this.centerPlayEl, forwardButton);
-        const bottom = document.createElement('div');
-        bottom.className = `${CLASS}__bottom-controls`;
-        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.videoEl || !Number.isFinite(this.duration) || this.duration <= 0)
-                return;
-            const rect = this.progressEl.getBoundingClientRect();
-            const percentage = (event.clientX - rect.left) / rect.width;
-            this.videoEl.currentTime = percentage * this.duration;
-        });
-        const controls = document.createElement('div');
-        controls.className = `${CLASS}__controls`;
-        const left = document.createElement('div');
-        left.className = `${CLASS}__left-controls`;
-        this.togglePlayEl = this.iconButton('play', CONTROL_ICON, () => this.togglePlay());
-        this.volumeWrapEl = document.createElement('div');
-        this.volumeWrapEl.className = `${CLASS}__volume`;
-        this.muteButtonEl = this.iconButton('volume-up', CONTROL_ICON, () => this.toggleMute());
-        const volumeSlider = document.createElement('div');
-        volumeSlider.className = `${CLASS}__volume-slider`;
-        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.videoEl || !this.volumeInputEl)
-                return;
-            const nextVolume = parseFloat(this.volumeInputEl.value);
-            if (nextVolume > 0)
-                this.lastVolumeBeforeMute = nextVolume;
-            this.videoEl.volume = nextVolume;
-            this.videoEl.muted = nextVolume === 0;
-        });
-        volumeSlider.append(this.volumeInputEl);
-        this.volumeWrapEl.append(this.muteButtonEl, volumeSlider);
-        this.timeEl = document.createElement('div');
-        this.timeEl.className = `${CLASS}__time`;
-        this.timeCurrentEl = document.createElement('span');
-        const slash = document.createElement('span');
-        slash.textContent = '/';
-        this.timeDurationEl = document.createElement('span');
-        this.timeEl.append(this.timeCurrentEl, slash, this.timeDurationEl);
-        left.append(this.togglePlayEl, this.volumeWrapEl, this.timeEl);
-        const right = document.createElement('div');
-        right.className = `${CLASS}__right-controls`;
-        this.fullscreenButtonEl = this.iconButton('expand', CONTROL_ICON, () => this.toggleFullscreen());
-        right.append(this.fullscreenButtonEl);
-        controls.append(left, right);
-        bottom.append(this.progressEl, controls);
-        this.overlayEl.append(top, center, bottom);
-        this.append(this.videoEl, loading, errorWrap, this.dimOverlayEl, this.overlayEl);
-    }
-    get titleEl() {
-        return this._titleEl;
-    }
-    get descEl() {
-        return this._descEl;
-    }
-    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}%`;
-    }
-    updateTime() {
-        if (this.timeCurrentEl)
-            this.timeCurrentEl.textContent = this.formatTime(this.currentTime);
-        if (this.timeDurationEl)
-            this.timeDurationEl.textContent = this.formatTime(this.duration);
-    }
-    updateVolumeUI() {
-        const visibleVolume = this.isMuted ? 0 : this.volume;
-        if (this.volumeInputEl)
-            this.volumeInputEl.value = String(visibleVolume);
-        if (this.muteButtonEl) {
-            this.muteButtonEl.replaceChildren(createDbIcon(this.isMuted || visibleVolume === 0 ? 'mute-filled' : 'volume-up', CONTROL_ICON));
-        }
-    }
-    startProgressAnimation() {
-        this.stopProgressAnimation();
-        const tick = () => {
-            if (!this.videoEl || this.videoEl.paused || this.videoEl.ended)
-                return;
-            this.currentTime = this.videoEl.currentTime;
-            this.duration = Number.isFinite(this.videoEl.duration) ? this.videoEl.duration : 0;
-            this.updateProgress();
-            this.updateTime();
-            this.rafId = requestAnimationFrame(tick);
-        };
-        this.rafId = requestAnimationFrame(tick);
-    }
-    stopProgressAnimation() {
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-    }
-    updatePlayIcons() {
-        const centerIcon = this.isPlaying ? 'pause' : 'play';
-        if (this.centerPlayEl) {
-            this.centerPlayEl.replaceChildren(createDbIcon(centerIcon, CENTER_ICON));
-        }
-        if (this.togglePlayEl) {
-            this.togglePlayEl.replaceChildren(createDbIcon(centerIcon, CONTROL_ICON));
-        }
-    }
-    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 enableFullscreen = this.getBool('enable-fullscreen', true);
-        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`,
-            showControls && this.showControlsOverlay && `${CLASS}--show-controls`,
-            this.isFullscreen && `${CLASS}--fullscreen`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const title = this.getAttribute('title');
-        const description = this.getAttribute('description');
-        if (this.titleEl) {
-            if (title) {
-                this.titleEl.textContent = title;
-                this.titleEl.hidden = false;
-            }
-            else {
-                this.titleEl.hidden = true;
-            }
-        }
-        if (this.descEl) {
-            if (description) {
-                this.descEl.textContent = description;
-                this.descEl.hidden = false;
-            }
-            else {
-                this.descEl.hidden = true;
-            }
-        }
-        if (this.overlayEl)
-            this.overlayEl.hidden = !showControls;
-        if (this.dimOverlayEl)
-            this.dimOverlayEl.hidden = !showControls;
-        if (this.progressEl)
-            this.progressEl.hidden = !showProgress;
-        if (this.timeEl)
-            this.timeEl.hidden = !showTime;
-        if (this.volumeWrapEl)
-            this.volumeWrapEl.hidden = !showVolume;
-        if (this.fullscreenButtonEl)
-            this.fullscreenButtonEl.hidden = !enableFullscreen;
-        if (this.fullscreenButtonEl) {
-            this.fullscreenButtonEl.replaceChildren(createDbIcon(this.isFullscreen ? 'shrink' : 'expand', CONTROL_ICON));
-        }
-        this.updatePlayIcons();
-        this.updateProgress();
-        this.updateTime();
-        this.updateVolumeUI();
-    }
-}
-if (!customElements.get('db-video-player'))
-    customElements.define('db-video-player', DbVideoPlayer);
-
-export { DbVideoPlayer };
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-video-player",s=20;class DbVideoPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.rafId=null,this.playlistIndex=0,this.isFullscreen=!1,this.showControlsOverlay=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.lastVolumeBeforeMute=1,this.currentTime=0,this.duration=0,this.isLoading=!1,this.error=null,this.onFullscreenChange=()=>{this.isFullscreen=document.fullscreenElement===this,this.dispatchEvent(new CustomEvent("db-fullscreen-change",{detail:{isFullscreen:this.isFullscreen},bubbles:!0,composed:!0})),this.updateUI()},this.onMouseEnter=()=>{this.showControlsOverlay=!0,this.updateUI()},this.onMouseLeave=()=>{this.showControlsOverlay=!1,this.updateUI()}}static get observedAttributes(){return["src","poster","title","description","size","variant","theme","auto-play","loop","muted","show-controls","enable-fullscreen","show-progress","show-time","show-volume","playlist","current-index"]}connectedCallback(){this.built||(this.built=!0,this.build(),this.bindVideoEvents()),this.syncFromAttributes(),this.updateUI(),document.addEventListener("fullscreenchange",this.onFullscreenChange),this.addEventListener("mouseenter",this.onMouseEnter),this.addEventListener("mouseleave",this.onMouseLeave)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this.onFullscreenChange),this.removeEventListener("mouseenter",this.onMouseEnter),this.removeEventListener("mouseleave",this.onMouseLeave),this.stopProgressAnimation()}attributeChangedCallback(t){this.built&&("src"!==t&&"playlist"!==t&&"current-index"!==t?("muted"===t&&this.videoEl&&(this.videoEl.muted=this.getBool("muted")),this.updateUI()):this.loadVideoSource())}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[]}}getCurrentSrc(){const t=this.getPlaylist();if(t.length>0){const e=Number(this.getAttribute("current-index")||this.playlistIndex||0);return t[Math.max(0,Math.min(t.length-1,e))]}return this.getAttribute("src")||""}formatTime(t){if(!Number.isFinite(t)||t<0)return"0:00";return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}iconButton(s,i,l){const n=document.createElement("button");return n.type="button",n.className=`${e}__control-button`,n.append(t(s,i)),n.addEventListener("click",t=>{t.stopPropagation(),l()}),n}skipButton(t,s){const i=document.createElement("button");return i.type="button",i.className=`${e}__skip-button`,i.textContent=t,i.setAttribute("aria-label",s<0?"10초 되감기":"10초 빨리감기"),i.addEventListener("click",t=>{t.stopPropagation(),this.seekBy(s)}),i}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.lastVolumeBeforeMute=this.volume>0?this.volume:1,this.loadVideoSource()}loadVideoSource(){if(!this.videoEl)return;const t=this.getCurrentSrc();if(!t)return;const e=new URL(t,window.location.href).href;this.videoEl.src!==e&&(this.videoEl.src=t,this.videoEl.load()),this.videoEl.poster=this.getAttribute("poster")||"",this.videoEl.autoplay=this.getBool("auto-play"),this.videoEl.loop=this.getBool("loop"),this.videoEl.muted=this.getBool("muted"),this.videoEl.playsInline=!0}bindVideoEvents(){const t=this.videoEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.startProgressAnimation(),this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.stopProgressAnimation(),this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=Number.isFinite(t.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||0===t.volume,!this.isMuted&&this.volume>0&&(this.lastVolumeBeforeMute=this.volume),this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>{this.isPlaying=!1,this.stopProgressAnimation(),this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const e=this.getPlaylist(),s=this.playlistIndex+1;e.length>0&&s<e.length&&(this.playlistIndex=s,this.loadVideoSource(),t.play()),this.updateUI()}),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("loadedmetadata",()=>{this.duration=Number.isFinite(t.duration)?t.duration:0,this.updateTime()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}),t.addEventListener("click",()=>this.togglePlay()))}togglePlay(){this.videoEl&&(this.videoEl.paused?this.videoEl.play():this.videoEl.pause())}toggleMute(){if(this.videoEl){if(this.isMuted)return this.videoEl.muted=!1,void(this.videoEl.volume=this.lastVolumeBeforeMute>0?this.lastVolumeBeforeMute:1);this.videoEl.volume>0&&(this.lastVolumeBeforeMute=this.videoEl.volume),this.videoEl.muted=!0,this.videoEl.volume=0}}seekBy(t){if(!this.videoEl)return;const e=Number.isFinite(this.videoEl.duration)?this.videoEl.duration:0,s=e>0?e:Number.MAX_SAFE_INTEGER,i=Math.max(0,Math.min(s,this.videoEl.currentTime+t));this.videoEl.currentTime=i}toggleFullscreen(){this.getBool("enable-fullscreen",!0)&&(this.isFullscreen?document.exitFullscreen?.():this.requestFullscreen?.())}build(){this.videoEl=document.createElement("video"),this.videoEl.className=`${e}__video`;const t=document.createElement("div");t.className=`${e}__loading`;const i=document.createElement("div");i.className=`${e}__spinner`,t.append(i);const l=document.createElement("div");l.className=`${e}__error`;const n=document.createElement("p");n.textContent="비디오를 재생할 수 없습니다.";const o=document.createElement("button");o.type="button",o.textContent="다시 시도",o.addEventListener("click",()=>{this.error=null,this.loadVideoSource(),this.updateUI()}),l.append(n,o),this.dimOverlayEl=document.createElement("div"),this.dimOverlayEl.className=`${e}__dim-overlay`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${e}__overlay`;const r=document.createElement("div");r.className=`${e}__top-controls`;const a=document.createElement("div");a.className=`${e}__title`;const h=document.createElement("h3"),u=document.createElement("p");a.append(h,u),r.append(a),this._titleEl=h,this._descEl=u;const d=document.createElement("div");d.className=`${e}__center-controls`;const c=this.skipButton("-10",-10);this.centerPlayEl=document.createElement("button"),this.centerPlayEl.type="button",this.centerPlayEl.className=`${e}__play-button`,this.centerPlayEl.addEventListener("click",t=>{t.stopPropagation(),this.togglePlay()});const m=this.skipButton("+10",10);d.append(c,this.centerPlayEl,m);const E=document.createElement("div");E.className=`${e}__bottom-controls`,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.videoEl||!Number.isFinite(this.duration)||this.duration<=0)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.videoEl.currentTime=s*this.duration});const p=document.createElement("div");p.className=`${e}__controls`;const v=document.createElement("div");v.className=`${e}__left-controls`,this.togglePlayEl=this.iconButton("play",s,()=>this.togglePlay()),this.volumeWrapEl=document.createElement("div"),this.volumeWrapEl.className=`${e}__volume`,this.muteButtonEl=this.iconButton("volume-up",s,()=>this.toggleMute());const g=document.createElement("div");g.className=`${e}__volume-slider`,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.videoEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);t>0&&(this.lastVolumeBeforeMute=t),this.videoEl.volume=t,this.videoEl.muted=0===t}),g.append(this.volumeInputEl),this.volumeWrapEl.append(this.muteButtonEl,g),this.timeEl=document.createElement("div"),this.timeEl.className=`${e}__time`,this.timeCurrentEl=document.createElement("span");const b=document.createElement("span");b.textContent="/",this.timeDurationEl=document.createElement("span"),this.timeEl.append(this.timeCurrentEl,b,this.timeDurationEl),v.append(this.togglePlayEl,this.volumeWrapEl,this.timeEl);const y=document.createElement("div");y.className=`${e}__right-controls`,this.fullscreenButtonEl=this.iconButton("expand",s,()=>this.toggleFullscreen()),y.append(this.fullscreenButtonEl),p.append(v,y),E.append(this.progressEl,p),this.overlayEl.append(r,d,E),this.append(this.videoEl,t,l,this.dimOverlayEl,this.overlayEl)}get titleEl(){return this._titleEl}get descEl(){return this._descEl}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}%`)}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){const e=this.isMuted?0:this.volume;this.volumeInputEl&&(this.volumeInputEl.value=String(e)),this.muteButtonEl&&this.muteButtonEl.replaceChildren(t(this.isMuted||0===e?"mute-filled":"volume-up",s))}startProgressAnimation(){this.stopProgressAnimation();const tick=()=>{!this.videoEl||this.videoEl.paused||this.videoEl.ended||(this.currentTime=this.videoEl.currentTime,this.duration=Number.isFinite(this.videoEl.duration)?this.videoEl.duration:0,this.updateProgress(),this.updateTime(),this.rafId=requestAnimationFrame(tick))};this.rafId=requestAnimationFrame(tick)}stopProgressAnimation(){null!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)}updatePlayIcons(){const e=this.isPlaying?"pause":"play";this.centerPlayEl&&this.centerPlayEl.replaceChildren(t(e,48)),this.togglePlayEl&&this.togglePlayEl.replaceChildren(t(e,s))}updateUI(){const i=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"default",n=this.getAttribute("theme")||"auto",o=this.getBool("show-controls",!0),r=this.getBool("show-progress",!0),a=this.getBool("show-time",!0),h=this.getBool("show-volume",!0),u=this.getBool("enable-fullscreen",!0);this.className=[e,`${e}--size-${i}`,`${e}--variant-${l}`,`${e}--theme-${n}`,this.isPlaying&&`${e}--playing`,!this.isPlaying&&`${e}--paused`,this.isMuted&&`${e}--muted`,this.isLoading&&`${e}--loading`,this.error&&`${e}--error`,o&&this.showControlsOverlay&&`${e}--show-controls`,this.isFullscreen&&`${e}--fullscreen`].filter(Boolean).join(" ");const d=this.getAttribute("title"),c=this.getAttribute("description");this.titleEl&&(d?(this.titleEl.textContent=d,this.titleEl.hidden=!1):this.titleEl.hidden=!0),this.descEl&&(c?(this.descEl.textContent=c,this.descEl.hidden=!1):this.descEl.hidden=!0),this.overlayEl&&(this.overlayEl.hidden=!o),this.dimOverlayEl&&(this.dimOverlayEl.hidden=!o),this.progressEl&&(this.progressEl.hidden=!r),this.timeEl&&(this.timeEl.hidden=!a),this.volumeWrapEl&&(this.volumeWrapEl.hidden=!h),this.fullscreenButtonEl&&(this.fullscreenButtonEl.hidden=!u),this.fullscreenButtonEl&&this.fullscreenButtonEl.replaceChildren(t(this.isFullscreen?"shrink":"expand",s)),this.updatePlayIcons(),this.updateProgress(),this.updateTime(),this.updateVolumeUI()}}customElements.get("db-video-player")||customElements.define("db-video-player",DbVideoPlayer);export{DbVideoPlayer};