@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

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