@corti/dictation-web
Version:
Web component for Corti Dictation
65 lines • 2.23 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from 'lit';
import { property, customElement } from 'lit/decorators.js';
let AudioVisualiser = class AudioVisualiser extends LitElement {
constructor() {
super(...arguments);
this.level = 0; // expects a value from 0 to 100
this.active = true;
}
render() {
// Each segment represents 20%. Using Math.ceil to fill segments optimistically.
const activeSegments = Math.round(this.level * 5);
const segments = [];
for (let i = 0; i < 5; i += 1) {
segments.push(html `
<div class="segment ${i < activeSegments ? 'active' : ''}"></div>
`);
}
return html `
<div class="container ${this.active ? 'active' : ''}">${segments}</div>
`;
}
};
AudioVisualiser.styles = css `
:host {
height: 100%;
}
.container {
display: flex;
width: 8px;
flex-direction: column-reverse; /* Bottom-up stacking */
height: 100%;
gap: 1px;
opacity: 0.5;
&.active {
opacity: 1;
}
}
.segment {
flex: 1;
background-color: var(--action-accent-text-color);
transition: background-color 0.25s;
border-radius: 1px;
opacity: 0.5;
}
.segment.active {
opacity: 1;
}
`;
__decorate([
property({ type: Number })
], AudioVisualiser.prototype, "level", void 0);
__decorate([
property({ type: Boolean })
], AudioVisualiser.prototype, "active", void 0);
AudioVisualiser = __decorate([
customElement('audio-visualiser')
], AudioVisualiser);
export { AudioVisualiser };
//# sourceMappingURL=audio-visualiser.js.map