import{b as p,a as d,n as a}from"./property-ChPqBGW_.js";import{t as y}from"./custom-element-C-crYl4r.js";import{r as o}from"./state-BnFRu-9h.js";import{e as m}from"./query-BYlH-2gt.js";import{B as v}from"./base-element-8qyqvBFG.js";import{r as f,v as g,c as _,p as b,l as w,e as P}from"./styles-BhbdDvdk.js";import{L as $}from"./live-player-6SvZDb9M.js";import{V as k}from"./vod-player-BXpWdm4G.js";import{f as c}from"./time-BQ1bZM2l.js";import"./index-DWRYsVdq.js";import"./base-player-BWJBhwy4.js";import"./flv-demuxer-D42STsrK.js";import"./http-client-BKzSvxm0.js";var T=Object.defineProperty,R=Object.getOwnPropertyDescriptor,i=(e,s,r,n)=>{for(var l=n>1?void 0:n?R(s,r):s,h=e.length-1,u;h>=0;h--)(u=e[h])&&(l=(n?u(s,r,l):u(l))||l);return n&&l&&T(s,r,l),l};let t=class extends v{constructor(){super("PlayerElement"),this.src="",this.type="auto",this.controls=!1,this.autoplay=!1,this.muted=!1,this.loop=!1,this.debug=!1,this.volume=1,this.playbackRates=[.5,.75,1,1.25,1.5,2],this._isPlaying=!1,this._isLoading=!1,this._currentTime=0,this._duration=0,this._bufferedPercent=0,this._volume=1,this._isMuted=!1,this._playbackRate=1,this._error="",this._showRateMenu=!1,this._controlsVisible=!0,this.player=null,this.controlsTimer=null,this.updateTimer=null}onInitialize(){this.initPlayer()}onDisconnect(){this.cleanup()}updated(e){e.has("src")&&this.src&&this.player&&this.loadSource(),e.has("debug")&&this.player&&this.logger.setEnabled(this.debug)}async initPlayer(){if(!this.videoElement)return;this.detectPlayerType()==="live"?this.player=new $({autoplay:this.autoplay,muted:this.muted,volume:this.volume,debug:this.debug}):this.player=new k({autoplay:this.autoplay,muted:this.muted,volume:this.volume,loop:this.loop,debug:this.debug}),this.player.attachVideo(this.videoElement),this.setupPlayerListeners(),this.startUpdateLoop(),this.src&&await this.loadSource()}detectPlayerType(){return this.type!=="auto"?this.type:this.src.includes(".m3u8")||this.src.includes(".mp4")?"vod":this.src.startsWith("ws://")||this.src.startsWith("wss://")||this.src.includes("webrtc")||this.src.includes(".flv")?"live":"vod"}setupPlayerListeners(){this.player&&(this.player.on("play",()=>{this._isPlaying=!0,this.dispatchCustomEvent("play")}),this.player.on("pause",()=>{this._isPlaying=!1,this.dispatchCustomEvent("pause")}),this.player.on("timeupdate",({currentTime:e,duration:s})=>{this._currentTime=e,this._duration=s,this.dispatchCustomEvent("timeupdate",{currentTime:e,duration:s})}),this.player.on("waiting",()=>{this._isLoading=!0}),this.player.on("canplay",()=>{this._isLoading=!1}),this.player.on("error",e=>{this._error=e.message,this._isLoading=!1,this.dispatchCustomEvent("error",{error:e})}),this.player.on("volumechange",({volume:e,muted:s})=>{this._volume=e,this._isMuted=s}),this.player.on("ratechange",({rate:e})=>{this._playbackRate=e}))}async loadSource(){if(!(!this.player||!this.src)){this._isLoading=!0,this._error="";try{await this.player.load(this.src)}catch(e){this._error=e.message}finally{this._isLoading=!1}}}startUpdateLoop(){this.updateTimer=window.setInterval(()=>{if(this.videoElement&&this.videoElement.buffered.length>0){const e=this.videoElement.buffered.end(this.videoElement.buffered.length-1);this._bufferedPercent=this._duration>0?e/this._duration*100:0}},500)}cleanup(){this.controlsTimer&&clearTimeout(this.controlsTimer),this.updateTimer&&clearInterval(this.updateTimer),this.player&&(this.player.dispose(),this.player=null)}togglePlay(){this.player&&(this._isPlaying?this.player.pause():this.player.play())}handleSeek(e){const s=e.target,r=parseFloat(s.value)/100*this._duration;this.player?.seek(r)}handleVolumeChange(e){const s=e.target,r=parseFloat(s.value);this._volume=r,this.player?.setVolume(r)}toggleMute(){this.player?.toggleMute()}setPlaybackRate(e){this.player?.setPlaybackRate(e),this._showRateMenu=!1}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen():this.requestFullscreen()}handleMouseMove(){this._controlsVisible=!0,this.controlsTimer&&clearTimeout(this.controlsTimer),this.controlsTimer=window.setTimeout(()=>{this._isPlaying&&(this._controlsVisible=!1)},3e3)}play(){return this.player?.play()??Promise.resolve()}pause(){this.player?.pause()}seek(e){this.player?.seek(e)}setVolume(e){this.player?.setVolume(e)}getCurrentTime(){return this.player?.currentTime??0}getDuration(){return this.player?.duration??0}render(){const e=this._duration>0?this._currentTime/this._duration*100:0;return p`
      <div 
        class="player-container"
        @mousemove=${this.handleMouseMove}
        @mouseleave=${()=>this._isPlaying&&(this._controlsVisible=!1)}
      >
        <video></video>

        ${this.controls?p`
          <div class="controls ${this._controlsVisible?"":"hidden"}">
            <button @click=${this.togglePlay}>
              <iconify-icon icon="${this._isPlaying?"mdi:pause":"mdi:play"}"></iconify-icon>
            </button>

            <div class="progress-container">
              <div class="progress-bar" @click=${s=>{const r=s.currentTarget.getBoundingClientRect(),n=(s.clientX-r.left)/r.width;this.player?.seek(n*this._duration)}}>
                <div class="progress-buffered" style="width: ${this._bufferedPercent}%"></div>
                <div class="progress-played" style="width: ${e}%"></div>
                <div class="progress-thumb" style="left: ${e}%"></div>
              </div>
            </div>

            <span class="time-display">
              ${c(this._currentTime)} / ${c(this._duration)}
            </span>

            <button @click=${this.toggleMute}>
              <iconify-icon icon="${this._isMuted?"mdi:volume-off":"mdi:volume-high"}"></iconify-icon>
            </button>

            <input
              type="range"
              class="volume-slider"
              min="0"
              max="1"
              step="0.1"
              .value=${String(this._volume)}
              @input=${this.handleVolumeChange}
            />

            <div class="rate-selector">
              <button @click=${()=>this._showRateMenu=!this._showRateMenu}>
                ${this._playbackRate}x
              </button>
              ${this._showRateMenu?p`
                <div class="rate-menu">
                  ${this.playbackRates.map(s=>p`
                    <div 
                      class="rate-option ${s===this._playbackRate?"active":""}"
                      @click=${()=>this.setPlaybackRate(s)}
                    >
                      ${s}x
                    </div>
                  `)}
                </div>
              `:""}
            </div>

            <button class="fullscreen-btn" @click=${this.toggleFullscreen}>
              <iconify-icon icon="mdi:fullscreen"></iconify-icon>
            </button>
          </div>
        `:""}

        ${this._isLoading?p`
          <div class="loading">
            <div class="loading-spinner"></div>
            <span>Loading...</span>
          </div>
        `:""}

        ${this._error?p`
          <div class="error">${this._error}</div>
        `:""}
      </div>
    `}};t.styles=[f,g,_,b,w,P,d`
      :host {
        display: block;
        width: 100%;
      }

      .player-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        background: #000;
      }

      video {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .volume-slider {
        width: 80px;
        height: 4px;
        -webkit-appearance: none;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        outline: none;
      }

      .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        background: white;
        border-radius: 50%;
        cursor: pointer;
      }

      .rate-selector {
        position: relative;
      }

      .rate-menu {
        position: absolute;
        bottom: 100%;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 4px;
        padding: 4px 0;
        margin-bottom: 8px;
      }

      .rate-option {
        padding: 6px 16px;
        cursor: pointer;
        white-space: nowrap;
      }

      .rate-option:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .rate-option.active {
        color: #1890ff;
      }

      .fullscreen-btn {
        margin-left: auto;
      }

      iconify-icon {
        vertical-align: middle;
      }
    `];i([a({type:String})],t.prototype,"src",2);i([a({type:String})],t.prototype,"type",2);i([a({type:Boolean})],t.prototype,"controls",2);i([a({type:Boolean})],t.prototype,"autoplay",2);i([a({type:Boolean})],t.prototype,"muted",2);i([a({type:Boolean})],t.prototype,"loop",2);i([a({type:Boolean})],t.prototype,"debug",2);i([a({type:Number})],t.prototype,"volume",2);i([a({type:Array})],t.prototype,"playbackRates",2);i([o()],t.prototype,"_isPlaying",2);i([o()],t.prototype,"_isLoading",2);i([o()],t.prototype,"_currentTime",2);i([o()],t.prototype,"_duration",2);i([o()],t.prototype,"_bufferedPercent",2);i([o()],t.prototype,"_volume",2);i([o()],t.prototype,"_isMuted",2);i([o()],t.prototype,"_playbackRate",2);i([o()],t.prototype,"_error",2);i([o()],t.prototype,"_showRateMenu",2);i([o()],t.prototype,"_controlsVisible",2);i([m("video")],t.prototype,"videoElement",2);t=i([y("m7s-player")],t);export{t as PlayerElement};
