import{i as v,A as d,b as n,a as u,n as r}from"./property-ChPqBGW_.js";import{t as g}from"./custom-element-C-crYl4r.js";import{r as h}from"./state-BnFRu-9h.js";import{e as y}from"./query-BYlH-2gt.js";import{b as m}from"./tokens-BNnjLb74.js";var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,t=(i,o,a,l)=>{for(var s=l>1?void 0:l?b(o,a):o,p=i.length-1,c;p>=0;p--)(c=i[p])&&(s=(l?c(o,a,s):c(s))||s);return l&&s&&f(o,a,s),s};let e=class extends v{constructor(){super(...arguments),this.fit="contain",this.autoplay=!0,this.muted=!0,this.loop=!1,this.playsInline=!0,this.mirror=!1,this.showPlaceholder=!0,this.showLoading=!0,this.showError=!0,this.loadingText="Loading...",this._isLoading=!1,this._isPlaying=!1,this._hasError=!1,this._errorMessage="",this.handleLoadStart=()=>{this._isLoading=!0,this.dispatchEvent(new CustomEvent("loadstart"))},this.handleCanPlay=()=>{this._isLoading=!1,this.dispatchEvent(new CustomEvent("canplay"))},this.handlePlay=()=>{this._isPlaying=!0,this._isLoading=!1,this.dispatchEvent(new CustomEvent("play"))},this.handlePause=()=>{this._isPlaying=!1,this.dispatchEvent(new CustomEvent("pause"))},this.handleEnded=()=>{this._isPlaying=!1,this.dispatchEvent(new CustomEvent("ended"))},this.handleVideoError=i=>{const o=i.target.error;this.handleError(new Error(o?.message||"Video error"))}}get video(){return this.videoElement}get isPlaying(){return this._isPlaying}get isLoading(){return this._isLoading}get hasError(){return this._hasError}get hasSource(){return!!(this.src||this.srcObject)}updated(i){(i.has("src")||i.has("srcObject"))&&this.updateVideoSource()}async play(){if(this.videoElement)try{await this.videoElement.play()}catch(i){this.handleError(i)}}pause(){this.videoElement?.pause()}stop(){this.videoElement&&(this.videoElement.pause(),this.videoElement.currentTime=0)}updateVideoSource(){this.videoElement&&(this._hasError=!1,this._errorMessage="",this.srcObject?(this.videoElement.srcObject=this.srcObject,this._isLoading=!0):this.src?(this.videoElement.src=this.src,this._isLoading=!0):(this.videoElement.srcObject=null,this.videoElement.src="",this._isLoading=!1,this._isPlaying=!1))}handleError(i){this._hasError=!0,this._isLoading=!1,this._errorMessage=i.message,this.dispatchEvent(new CustomEvent("error",{detail:{error:i}}))}render(){const i=this.showPlaceholder&&!this.hasSource&&!this._isLoading,o=this.showLoading&&this._isLoading,a=this.showError&&this._hasError;return n`
      <div class="video-wrapper">
        <video
          class="${this.getVideoClasses()}"
          ?autoplay=${this.autoplay}
          ?muted=${this.muted}
          ?loop=${this.loop}
          ?playsinline=${this.playsInline}
          .poster=${this.poster||""}
          @loadstart=${this.handleLoadStart}
          @canplay=${this.handleCanPlay}
          @play=${this.handlePlay}
          @pause=${this.handlePause}
          @ended=${this.handleEnded}
          @error=${this.handleVideoError}
        ></video>
      </div>

      ${i?this.renderPlaceholder():d}
      ${o?this.renderLoading():d}
      ${a?this.renderError():d}

      <div class="overlay content-overlay interactive">
        <slot></slot>
      </div>
    `}getVideoClasses(){const i=[`fit-${this.fit}`];return this.mirror&&i.push("mirror"),this.hasSource||i.push("hidden"),i.join(" ")}renderPlaceholder(){return n`
      <div class="overlay placeholder">
        <slot name="placeholder">
          <span>No video</span>
        </slot>
      </div>
    `}renderLoading(){return n`
      <div class="overlay">
        <slot name="loading">
          <div class="loading-indicator">
            <div class="spinner"></div>
            ${this.loadingText?n`<span>${this.loadingText}</span>`:d}
          </div>
        </slot>
      </div>
    `}renderError(){return n`
      <div class="overlay">
        <slot name="error">
          <div class="error-indicator">
            <span>⚠</span>
            <span>${this._errorMessage||"Video error"}</span>
          </div>
        </slot>
      </div>
    `}};e.styles=[m,u`
      :host {
        --_video-bg: var(--monibuca-video-bg, #000);
        --_placeholder-bg: var(--monibuca-video-placeholder-bg, #1a1a1a);
        --_radius: var(--monibuca-video-radius, 0);
        
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        background: var(--_video-bg);
        border-radius: var(--_radius);
        overflow: hidden;
      }

      .video-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      video {
        width: 100%;
        height: 100%;
        background: transparent;
      }

      video.fit-contain { object-fit: contain; }
      video.fit-cover { object-fit: cover; }
      video.fit-fill { object-fit: fill; }
      video.fit-none { object-fit: none; }

      video.mirror {
        transform: scaleX(-1);
      }

      .overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }

      .overlay.interactive {
        pointer-events: auto;
      }

      .placeholder {
        background: var(--_placeholder-bg);
        color: var(--monibuca-color-text-inverse);
      }

      .loading-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--monibuca-spacing-sm);
        color: var(--monibuca-color-text-inverse);
      }

      .spinner {
        width: 32px;
        height: 32px;
        border: 3px solid rgba(255, 255, 255, 0.2);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      .error-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--monibuca-spacing-sm);
        color: var(--monibuca-color-error);
        text-align: center;
        padding: var(--monibuca-spacing-md);
      }

      .content-overlay {
        z-index: 1;
      }

      /* Aspect ratio support */
      :host([ratio="16:9"]) {
        aspect-ratio: 16 / 9;
      }
      :host([ratio="4:3"]) {
        aspect-ratio: 4 / 3;
      }
      :host([ratio="1:1"]) {
        aspect-ratio: 1 / 1;
      }

      /* Hidden video when no source */
      video.hidden {
        visibility: hidden;
      }
    `];t([r({type:String})],e.prototype,"src",2);t([r({attribute:!1})],e.prototype,"srcObject",2);t([r({type:String})],e.prototype,"fit",2);t([r({type:Boolean})],e.prototype,"autoplay",2);t([r({type:Boolean})],e.prototype,"muted",2);t([r({type:Boolean})],e.prototype,"loop",2);t([r({type:Boolean,attribute:"plays-inline"})],e.prototype,"playsInline",2);t([r({type:Boolean})],e.prototype,"mirror",2);t([r({type:String,reflect:!0})],e.prototype,"ratio",2);t([r({type:Boolean,attribute:"show-placeholder"})],e.prototype,"showPlaceholder",2);t([r({type:Boolean,attribute:"show-loading"})],e.prototype,"showLoading",2);t([r({type:Boolean,attribute:"show-error"})],e.prototype,"showError",2);t([r({type:String,attribute:"loading-text"})],e.prototype,"loadingText",2);t([r({type:String})],e.prototype,"poster",2);t([h()],e.prototype,"_isLoading",2);t([h()],e.prototype,"_isPlaying",2);t([h()],e.prototype,"_hasError",2);t([h()],e.prototype,"_errorMessage",2);t([y("video")],e.prototype,"videoElement",2);e=t([g("mb-video")],e);export{e as MbVideo};
