109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
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');
|
|
}
|
|
}
|
|
}
|
|
}
|