Mercurial > code > home > repos > light9

comparison web/light9-vidref-live.js @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/light9-vidref-live.js@3ae1e7f8db23
children
comparison
equal deleted inserted replaced
2375:623836db99af 2376:4556eebe5d73
1 import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js';
2 import { rounding } from '/node_modules/significant-rounding/index.js';
3 import './light9-vidref-replay.js';
4
5 import debug from '/lib/debug/debug-build-es6.js';
6 const log = debug('live');
7
8 class Light9VidrefLive extends LitElement {
9
10 static get properties() {
11 return {
12 description: { type: String },
13 enabled: { type: Boolean }
14 };
15 }
16
17 constructor() {
18 super();
19 this.live = null;
20 }
21
22 onEnabled() {
23 if (this.shadowRoot.querySelector('#enabled').checked) {
24
25 this.live = reconnectingWebSocket(
26 'live', (msg) => {
27 this.shadowRoot.querySelector('#live').src = 'data:image/jpeg;base64,' + msg.jpeg;
28 this.description = msg.description;
29 });
30 this.shadowRoot.querySelector('#liveWidget').style.display = 'block';
31 } else {
32 if (this.live) {
33 this.live.disconnect();
34 this.live = null;
35 this.shadowRoot.querySelector('#liveWidget').style.display = 'none';
36 }
37 }
38 }
39
40 disconnectedCallback() {
41 log('bye');
42 //close socket
43
44 }
45
46 static get styles() {
47 return css`
48 :host {
49 display: inline-block;
50 }
51 #live {
52 border: 4px solid orange;
53 }
54 `;
55 }
56
57 render() {
58 return html`
59 <label><input type="checkbox" id="enabled" ?checked="${this.enabled}" @change="${this.onEnabled}">Show live</label>
60 <div id="liveWidget" style="display: none"><img id="live" ></div>
61 `;
62
63 }
64 }
65 customElements.define('light9-vidref-live', Light9VidrefLive);