import{i as k,a as y,b as d,n as o}from"./property-ChPqBGW_.js";import{r as h}from"./state-BnFRu-9h.js";var g=Object.defineProperty,p=(l,t,e,i)=>{for(var s=void 0,c=l.length-1,u;c>=0;c--)(u=l[c])&&(s=u(t,e,s)||s);return s&&g(t,e,s),s};class f{constructor(t){this.tracks=[],this.trackCount=t,this.reset()}reset(){this.tracks=new Array(this.trackCount).fill(!1)}getAvailableTrack(){const t=this.tracks.map((e,i)=>({occupied:e,index:i})).filter(e=>!e.occupied).map(e=>e.index);return t.length===0?-1:t[Math.floor(Math.random()*t.length)]}occupyTrack(t){t>=0&&t<this.trackCount&&(this.tracks[t]=!0)}releaseTrack(t){t>=0&&t<this.trackCount&&(this.tracks[t]=!1)}}const m=class m extends k{constructor(){super(),this.danmakus=[],this.maxDisplay=50,this.trackCount=10,this.speed=100,this.opacity=1,this.fontSize=20,this.fontFamily='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',this.enableAnimation=!0,this.scrollDuration=8,this.fixedDuration=5,this.displayedDanmakus=[],this.danmakuTimers=new Map,this.trackManager=new f(this.trackCount)}connectedCallback(){super.connectedCallback(),this.trackManager=new f(this.trackCount)}disconnectedCallback(){super.disconnectedCallback(),this.danmakuTimers.forEach(t=>window.clearTimeout(t)),this.danmakuTimers.clear()}updated(t){super.updated(t),t.has("danmakus")&&this.handleNewDanmakus(),t.has("trackCount")&&(this.trackManager=new f(this.trackCount))}firstUpdated(t){super.firstUpdated(t),this.danmakus&&this.danmakus.length>0&&this.handleNewDanmakus()}handleNewDanmakus(){(this.danmakus??[]).filter(i=>!this.displayedDanmakus.some(s=>s.id===i.id)).forEach(i=>{this.addDanmaku(i)})}addDanmaku(t){if(this.displayedDanmakus.length>=this.maxDisplay){const u=this.displayedDanmakus[0];this.removeDanmaku(u.id)}let e=-1;if(t.position==="scroll"){if(e=this.trackManager.getAvailableTrack(),e===-1){setTimeout(()=>this.addDanmaku(t),500);return}this.trackManager.occupyTrack(e)}const i={...t,trackIndex:e};this.displayedDanmakus=[...this.displayedDanmakus,i],this.dispatchEvent(new CustomEvent("danmaku-displayed",{detail:{danmaku:t},bubbles:!0,composed:!0}));const s=t.position==="scroll"?this.scrollDuration*1e3:this.fixedDuration*1e3,c=window.setTimeout(()=>{this.removeDanmaku(t.id)},s);this.danmakuTimers.set(t.id,c)}removeDanmaku(t){const e=this.displayedDanmakus.find(s=>s.id===t);if(!e)return;e.trackIndex>=0&&this.trackManager.releaseTrack(e.trackIndex);const i=this.danmakuTimers.get(t);i&&(window.clearTimeout(i),this.danmakuTimers.delete(t)),this.displayedDanmakus=this.displayedDanmakus.filter(s=>s.id!==t),this.dispatchEvent(new CustomEvent("danmaku-removed",{detail:{id:t},bubbles:!0,composed:!0}))}clear(){this.danmakuTimers.forEach(t=>window.clearTimeout(t)),this.danmakuTimers.clear(),this.displayedDanmakus=[],this.trackManager.reset()}getDanmakuStyle(t){const e=[`color: ${t.color||"#ffffff"}`,`font-size: ${t.fontSize||this.fontSize}px`,`font-family: ${this.fontFamily}`,`opacity: ${this.opacity}`];if(t.position==="scroll"&&t.trackIndex>=0){const i=100/this.trackCount,s=t.trackIndex*i+i*.1;e.push(`top: ${s}%`),e.push(`animation-duration: ${this.scrollDuration}s`)}else if(t.position==="top"){const i=5+this.displayedDanmakus.filter(s=>s.position==="top").indexOf(t)%3*10;e.push(`top: ${i}%`),e.push(`animation-duration: ${this.fixedDuration}s`)}else if(t.position==="bottom"){const i=5+this.displayedDanmakus.filter(s=>s.position==="bottom").indexOf(t)%3*10;e.push(`bottom: ${i}%`),e.push(`animation-duration: ${this.fixedDuration}s`)}return this.enableAnimation||e.push("animation: none"),e.join("; ")}render(){return d`
      <div class="danmaku-container">
        ${this.displayedDanmakus.map(t=>d`
          <div
            class="danmaku-item ${t.position}"
            style="${this.getDanmakuStyle(t)}"
            data-id="${t.id}"
          >
            ${t.userName?d`<span class="danmaku-user">${t.userName}: </span>`:""}
            <span class="danmaku-content">${t.content}</span>
          </div>
        `)}
      </div>
    `}};m.styles=y`
    :host {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .danmaku-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .danmaku-item {
      position: absolute;
      white-space: nowrap;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      pointer-events: none;
      font-weight: 500;
      will-change: transform, opacity;
      line-height: 1.4;
    }

    .danmaku-item.scroll {
      animation: danmaku-scroll linear forwards;
    }

    .danmaku-item.top {
      left: 50%;
      transform: translateX(-50%);
      animation: danmaku-fade ease forwards;
    }

    .danmaku-item.bottom {
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      animation: danmaku-fade ease forwards;
    }

    @keyframes danmaku-scroll {
      from { transform: translateX(100vw); }
      to { transform: translateX(-100%); }
    }

    @keyframes danmaku-fade {
      0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
      10% { opacity: 1; transform: translateX(-50%) scale(1); }
      90% { opacity: 1; transform: translateX(-50%) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
    }
  `;let n=m;p([o({type:Array,hasChanged(l,t){if(!t||!l)return t!==l;if(t.length!==l.length)return!0;const e=new Set(t.map(s=>s.id)),i=new Set(l.map(s=>s.id));if(e.size!==i.size)return!0;for(const s of i)if(!e.has(s))return!0;return!1}})],n.prototype,"danmakus");p([o({type:Number,attribute:"max-display"})],n.prototype,"maxDisplay");p([o({type:Number,attribute:"track-count"})],n.prototype,"trackCount");p([o({type:Number})],n.prototype,"speed");p([o({type:Number})],n.prototype,"opacity");p([o({type:Number,attribute:"font-size"})],n.prototype,"fontSize");p([o({type:String,attribute:"font-family"})],n.prototype,"fontFamily");p([o({type:Boolean,attribute:"enable-animation"})],n.prototype,"enableAnimation");p([o({type:Number,attribute:"scroll-duration"})],n.prototype,"scrollDuration");p([o({type:Number,attribute:"fixed-duration"})],n.prototype,"fixedDuration");p([h()],n.prototype,"displayedDanmakus");customElements.get("m7s-danmaku-layer")||customElements.define("m7s-danmaku-layer",n);var x=Object.defineProperty,r=(l,t,e,i)=>{for(var s=void 0,c=l.length-1,u;c>=0;c--)(u=l[c])&&(s=u(t,e,s)||s);return s&&x(t,e,s),s};const b=class b extends k{constructor(){super(...arguments),this.placeholder="Send message...",this.maxLength=100,this.disabled=!1,this.color="#ffffff",this.fontSize=20,this.position="scroll",this.enableColorPicker=!0,this.enablePositionSelect=!1,this.inputValue="",this.selectedColor="#ffffff",this.selectedPosition="scroll",this.showColorPanel=!1,this.isFocused=!1,this.colorPresets=["#ffffff","#ff4757","#2ed573","#1e90ff","#ffa502","#ff6348","#747d8c","#a4b0be","#ff6b81","#7bed9f","#70a1ff","#5352ed","#eccc68","#ff7f50","#dfe4ea","#57606f"]}connectedCallback(){super.connectedCallback(),this.selectedColor=this.color,this.selectedPosition=this.position}handleInput(t){const e=t.target;this.inputValue=e.value,this.dispatchEvent(new CustomEvent("input",{detail:{content:this.inputValue},bubbles:!0,composed:!0}))}handleSubmit(t){t&&t.preventDefault(),!(!this.inputValue.trim()||this.disabled)&&(this.dispatchEvent(new CustomEvent("submit",{detail:{content:this.inputValue.trim(),color:this.selectedColor,position:this.selectedPosition},bubbles:!0,composed:!0})),this.inputValue="")}handleKeyDown(t){t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this.handleSubmit())}handleFocus(){this.isFocused=!0,this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0}))}handleBlur(){this.isFocused=!1,this.showColorPanel=!1,this.dispatchEvent(new CustomEvent("blur",{bubbles:!0,composed:!0}))}selectColor(t){this.selectedColor=t,this.showColorPanel=!1}selectPosition(t){this.selectedPosition=t}getCharCountClass(){return this.inputValue.length/this.maxLength>.9?"char-count warning":"char-count"}render(){return d`
      <div class="input-wrapper">
        <input
          class="danmaku-input"
          type="text"
          .value="${this.inputValue}"
          placeholder="${this.placeholder}"
          maxlength="${this.maxLength}"
          ?disabled="${this.disabled}"
          @input="${this.handleInput}"
          @keydown="${this.handleKeyDown}"
          @focus="${this.handleFocus}"
          @blur="${this.handleBlur}"
        />
        <div class="input-options">
          ${this.enableColorPicker?d`
            <div class="color-picker">
              <div
                class="color-btn"
                style="background-color: ${this.selectedColor}"
                @click="${()=>this.showColorPanel=!this.showColorPanel}"
              ></div>
              ${this.showColorPanel?d`
                <div class="color-panel">
                  ${this.colorPresets.map(t=>d`
                    <div
                      class="color-option"
                      style="background-color: ${t}"
                      @click="${()=>this.selectColor(t)}"
                    ></div>
                  `)}
                </div>
              `:""}
            </div>
          `:""}
          ${this.enablePositionSelect?d`
            <div class="position-select">
              <button
                class="position-btn ${this.selectedPosition==="scroll"?"active":""}"
                @click="${()=>this.selectPosition("scroll")}"
              >滚</button>
              <button
                class="position-btn ${this.selectedPosition==="top"?"active":""}"
                @click="${()=>this.selectPosition("top")}"
              >顶</button>
              <button
                class="position-btn ${this.selectedPosition==="bottom"?"active":""}"
                @click="${()=>this.selectPosition("bottom")}"
              >底</button>
            </div>
          `:""}
        </div>
        ${this.isFocused?d`
          <span class="${this.getCharCountClass()}">${this.inputValue.length}/${this.maxLength}</span>
        `:""}
      </div>
      <button
        class="send-btn"
        ?disabled="${this.disabled||!this.inputValue.trim()}"
        @click="${this.handleSubmit}"
      >
        Send
      </button>
    `}};b.styles=y`
    :host {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .input-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
    }

    .danmaku-input {
      width: 100%;
      padding: 8px 12px;
      padding-right: 80px;
      border: none;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 14px;
      outline: none;
      transition: all 0.3s ease;
      box-sizing: border-box;
    }

    .danmaku-input:focus {
      background: rgba(255, 255, 255, 0.2);
    }

    .danmaku-input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    .danmaku-input:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .input-options {
      position: absolute;
      right: 8px;
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .color-picker {
      position: relative;
    }

    .color-btn {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .color-btn:hover {
      transform: scale(1.1);
    }

    .color-panel {
      position: absolute;
      bottom: 100%;
      right: 0;
      margin-bottom: 8px;
      padding: 8px;
      background: rgba(0, 0, 0, 0.9);
      border-radius: 8px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      z-index: 100;
    }

    .color-option {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .color-option:hover {
      transform: scale(1.1);
    }

    .position-select {
      display: flex;
      gap: 2px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      padding: 2px;
    }

    .position-btn {
      padding: 2px 6px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      font-size: 11px;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.2s ease;
    }

    .position-btn:hover {
      color: #fff;
    }

    .position-btn.active {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
    }

    .send-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #ff4757;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .send-btn:hover {
      background: #ff6b7a;
    }

    .send-btn:active {
      transform: scale(0.95);
    }

    .send-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .char-count {
      position: absolute;
      right: 8px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .char-count.warning {
      color: #ff4757;
    }
  `;let a=b;r([o({type:String})],a.prototype,"placeholder");r([o({type:Number,attribute:"max-length"})],a.prototype,"maxLength");r([o({type:Boolean})],a.prototype,"disabled");r([o({type:String})],a.prototype,"color");r([o({type:Number,attribute:"font-size"})],a.prototype,"fontSize");r([o({type:String})],a.prototype,"position");r([o({type:Boolean,attribute:"enable-color-picker"})],a.prototype,"enableColorPicker");r([o({type:Boolean,attribute:"enable-position-select"})],a.prototype,"enablePositionSelect");r([h()],a.prototype,"inputValue");r([h()],a.prototype,"selectedColor");r([h()],a.prototype,"selectedPosition");r([h()],a.prototype,"showColorPanel");r([h()],a.prototype,"isFocused");customElements.get("m7s-danmaku-input")||customElements.define("m7s-danmaku-input",a);export{a as DanmakuInput,n as DanmakuLayer};
