@design.estate/dees-wcctools 1.2.1 → 1.3.0

package/ts_web/elements/wcc-record-button.ts

@@ -0,0 +1,108 @@
+import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
+
+@customElement('wcc-record-button')
+export class WccRecordButton extends DeesElement {
+  @property({ type: String })
+  accessor state: 'idle' | 'recording' = 'idle';
+
+  @property({ type: Number })
+  accessor duration: number = 0;
+
+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: #666;
+        user-select: none;
+      }
+
+      :host(:hover) {
+        background: rgba(239, 68, 68, 0.05);
+        color: #f87171;
+      }
+
+      :host(.recording) {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+      }
+
+      .rec-icon {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      :host(.recording) .rec-icon {
+        animation: pulse-recording 1s ease-in-out infinite;
+      }
+
+      @keyframes pulse-recording {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.9); }
+      }
+
+      .recording-timer {
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 0.7rem;
+      }
+    `
+  ];
+
+  private formatDuration(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="content">
+        <div class="rec-icon"></div>
+        ${this.state === 'recording' ? html`
+          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
+        ` : null}
+      </div>
+    `;
+  }
+
+  async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    this.addEventListener('click', this.handleClick);
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    this.dispatchEvent(new CustomEvent('record-click', {
+      bubbles: true,
+      composed: true
+    }));
+  };
+
+  updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('state')) {
+      if (this.state === 'recording') {
+        this.classList.add('recording');
+      } else {
+        this.classList.remove('recording');
+      }
+    }
+  }
+}