@ircam/comote-helpers 0.3.3 → 1.0.1

package/examples/simple-webview/public/styles.css

@@ -0,0 +1,99 @@
+:root {
+  --background-color: #181817;
+  --font-color: #ffffff;
+  --font-family: Consolas, monaco, monospace;
+  --font-size: 62.5%;
+  --interface-margin: 20px;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+html, body {
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--background-color);
+  color: var(--font-color);
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+body {
+  padding: 20px;
+  margin: 0;
+  display: flex;
+}
+
+.screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  background-color: #181817;
+  color: var(--font-color);
+  align-items: center;
+}
+
+.screen h1 {
+  margin: 0px 0px 20px 0px;
+}
+
+.interface {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.interface sc-slider {
+  width: 100%;
+  height: 100%;
+  margin-right: var(--interface-margin);
+}
+
+.interface-right {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.interface-right sc-button {
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+}
+
+.interface-right sc-button + sc-button {
+  margin-top: var(--interface-margin);
+}
+
+.footer {
+  width: 100%;
+  height: 35px;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.footer p {
+  width: 100%;
+  margin: 0px var(--interface-margin) 0px 0px;
+  text-align: center;
+  font-size: 15px;
+} 
+
+.footer a {
+  color: var(--font-color);
+}
+
+.footer sc-button {
+  width: 100%;
+  height: 100%;
+  font-size: 15px;
+}

package/examples/simple-webview/src/client.js

@@ -0,0 +1,35 @@
+import { html, render } from 'lit';
+import '@ircam/sc-components';
+
+render(html`
+  <div class="screen">
+
+    <h1> Basic CoMote Webview </h1>
+
+    <div class="interface">
+      <sc-slider
+        min="0"
+        max="1"
+        step="0.01"
+        value="0.5"
+        orientation="vertical"
+        @input=${e => sendEvent(`slider`, e.detail.value)}
+      ></sc-slider>
+      <div class=interface-right>
+        <sc-button
+          @press=${e => sendEvent(`button1`, 1)}
+          @release=${e => sendEvent(`button1`, 0)}
+        >1</sc-button>
+        <sc-button
+          @press=${e => sendEvent(`button2`, 1)}
+          @release=${e => sendEvent(`button2`, 0)}
+        >2</sc-button>
+      </div>
+    </div>
+
+    <div class="footer">
+      <p>Built with <br><a target="_blank" href="https://ircam-ismm.github.io/sc-components/">sc-components</a></p>
+      <sc-button @press=${e => toggleModal()}>fullscreen</sc-button>
+    </div>
+  </div>
+`, document.body);

package/examples/simple-webview/src/server.js

@@ -0,0 +1,20 @@
+const handler = require('serve-handler');
+const http = require('node:http');
+const path = require('node:path');
+
+const port = 8001;
+const publicPath = '../public'; // relative to this file
+
+const server = http.createServer((request, response) => {
+  const localPath = __dirname;
+
+  // You pass two more arguments for config and middleware
+  // More details here: https://github.com/vercel/serve-handler#options
+  return handler(request, response, {
+    public: path.resolve(localPath, publicPath),
+  });
+});
+
+server.listen(port, () => {
+  console.log(`Running at http://localhost:${port}`);
+});

package/examples/soundworks/.build/clients/components/sw-audit.js

@@ -0,0 +1,64 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+function padLeft(value, size) {
+  let str = value + ''; // cast to string
+
+  while (str.length <= size) {
+    str = `&nbsp;${str}`;
+  }
+  return str;
+}
+
+/**
+ * Component for the soundworks internal audit state
+ */
+class SwAudit extends LitElement {
+  static styles = css`
+    :host > div {
+      background-color: var(--sw-light-background-color);
+      height: 100%;
+      padding: 0 20px;
+      overflow: hidden;
+    }
+  `;
+  constructor() {
+    super();
+    this.client = null;
+    this._auditState = null;
+    this._numClientsString = '';
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    this._auditState = await this.client.getAuditState();
+    this._auditState.onUpdate(updates => {
+      if ('numClients' in updates) {
+        const numClientsStrings = [];
+        const numClients = this._auditState.get('numClients');
+        for (let role in numClients) {
+          const str = `${role}: ${padLeft(numClients[role], 2)}`;
+          numClientsStrings.push(str);
+        }
+        this._numClientsString = numClientsStrings.join(' - ');
+      }
+      this.requestUpdate();
+    }, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._auditState.detach();
+  }
+  render() {
+    if (this._auditState === null) {
+      return nothing;
+    }
+    const avgLatency = this._auditState.get('averageNetworkLatency');
+    const avgLatencyString = padLeft((avgLatency * 1e3).toFixed(2), 6);
+    return html`
+      <div>
+        ${unsafeHTML(this._numClientsString)} | avg latency: ${unsafeHTML(avgLatencyString)} ms
+      </div>
+    `;
+  }
+}
+customElements.define('sw-audit', SwAudit);
+//# sourceMappingURL=./sw-audit.js.map

package/examples/soundworks/.build/clients/components/sw-audit.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LitElement","html","css","nothing","unsafeHTML","padLeft","value","size","str","length","SwAudit","styles","constructor","client","_auditState","_numClientsString","connectedCallback","getAuditState","onUpdate","updates","numClientsStrings","numClients","get","role","push","join","requestUpdate","disconnectedCallback","detach","render","avgLatency","avgLatencyString","toFixed","customElements","define"],"sources":["../../../src/clients/components/sw-audit.js"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nfunction padLeft(value, size) {\n  let str = value + ''; // cast to string\n\n  while (str.length <= size) {\n    str = `&nbsp;${str}`;\n  }\n\n  return str;\n}\n\n/**\n * Component for the soundworks internal audit state\n */\nclass SwAudit extends LitElement {\n  static styles = css`\n    :host > div {\n      background-color: var(--sw-light-background-color);\n      height: 100%;\n      padding: 0 20px;\n      overflow: hidden;\n    }\n  `;\n\n  constructor() {\n    super();\n\n    this.client = null;\n    this._auditState = null;\n    this._numClientsString = '';\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    this._auditState = await this.client.getAuditState();\n    this._auditState.onUpdate(updates => {\n      if ('numClients' in updates) {\n        const numClientsStrings = [];\n        const numClients = this._auditState.get('numClients');\n\n        for (let role in numClients) {\n          const str = `${role}: ${padLeft(numClients[role], 2)}`;\n          numClientsStrings.push(str);\n        }\n\n        this._numClientsString = numClientsStrings.join(' - ');\n      }\n\n      this.requestUpdate();\n    }, true);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._auditState.detach();\n  }\n\n  render() {\n    if (this._auditState === null) {\n      return nothing;\n    }\n\n    const avgLatency = this._auditState.get('averageNetworkLatency');\n    const avgLatencyString = padLeft((avgLatency * 1e3).toFixed(2), 6);\n\n    return html`\n      <div>\n        ${unsafeHTML(this._numClientsString)} | avg latency: ${unsafeHTML(avgLatencyString)} ms\n      </div>\n    `;\n  }\n}\n\ncustomElements.define('sw-audit', SwAudit);\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,GAAG,EAAEC,OAAO,QAAQ,KAAK;AACpD,SAASC,UAAU,QAAQ,+BAA+B;AAE1D,SAASC,OAAOA,CAACC,KAAK,EAAEC,IAAI,EAAE;EAC5B,IAAIC,GAAG,GAAGF,KAAK,GAAG,EAAE,CAAC,CAAC;;EAEtB,OAAOE,GAAG,CAACC,MAAM,IAAIF,IAAI,EAAE;IACzBC,GAAG,GAAG,SAASA,GAAG,EAAE;EACtB;EAEA,OAAOA,GAAG;AACZ;;AAEA;AACA;AACA;AACA,MAAME,OAAO,SAASV,UAAU,CAAC;EAC/B,OAAOW,MAAM,GAAGT,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;EAEDU,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IAEP,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,WAAW,GAAG,IAAI;IACvB,IAAI,CAACC,iBAAiB,GAAG,EAAE;EAC7B;EAEA,MAAMC,iBAAiBA,CAAA,EAAG;IACxB,KAAK,CAACA,iBAAiB,CAAC,CAAC;IAEzB,IAAI,CAACF,WAAW,GAAG,MAAM,IAAI,CAACD,MAAM,CAACI,aAAa,CAAC,CAAC;IACpD,IAAI,CAACH,WAAW,CAACI,QAAQ,CAACC,OAAO,IAAI;MACnC,IAAI,YAAY,IAAIA,OAAO,EAAE;QAC3B,MAAMC,iBAAiB,GAAG,EAAE;QAC5B,MAAMC,UAAU,GAAG,IAAI,CAACP,WAAW,CAACQ,GAAG,CAAC,YAAY,CAAC;QAErD,KAAK,IAAIC,IAAI,IAAIF,UAAU,EAAE;UAC3B,MAAMb,GAAG,GAAG,GAAGe,IAAI,KAAKlB,OAAO,CAACgB,UAAU,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;UACtDH,iBAAiB,CAACI,IAAI,CAAChB,GAAG,CAAC;QAC7B;QAEA,IAAI,CAACO,iBAAiB,GAAGK,iBAAiB,CAACK,IAAI,CAAC,KAAK,CAAC;MACxD;MAEA,IAAI,CAACC,aAAa,CAAC,CAAC;IACtB,CAAC,EAAE,IAAI,CAAC;EACV;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,KAAK,CAACA,oBAAoB,CAAC,CAAC;IAE5B,IAAI,CAACb,WAAW,CAACc,MAAM,CAAC,CAAC;EAC3B;EAEAC,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACf,WAAW,KAAK,IAAI,EAAE;MAC7B,OAAOX,OAAO;IAChB;IAEA,MAAM2B,UAAU,GAAG,IAAI,CAAChB,WAAW,CAACQ,GAAG,CAAC,uBAAuB,CAAC;IAChE,MAAMS,gBAAgB,GAAG1B,OAAO,CAAC,CAACyB,UAAU,GAAG,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAElE,OAAO/B,IAAI;AACf;AACA,UAAUG,UAAU,CAAC,IAAI,CAACW,iBAAiB,CAAC,mBAAmBX,UAAU,CAAC2B,gBAAgB,CAAC;AAC3F;AACA,KAAK;EACH;AACF;AAEAE,cAAc,CAACC,MAAM,CAAC,UAAU,EAAExB,OAAO,CAAC","ignoreList":[]}

package/examples/soundworks/.build/clients/components/sw-credits.js

@@ -0,0 +1,73 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '@ircam/sc-components/sc-icon.js';
+class SwCredits extends LitElement {
+  static properties = {
+    _show: {
+      type: Boolean,
+      state: true
+    }
+  };
+  static styles = css`
+    :host {
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+    }
+
+    :host > footer {
+      display: block;
+      line-height: 1.6rem;
+      padding: 20px;
+      background-color: var(--sw-light-background-color);
+      box-sizing: border-box;
+    }
+
+    footer span {
+      font-style: italic;
+      color: var(--sw-light-font-color);
+      font-weight: bold;
+    }
+
+    footer a {
+      color: var(--sw-light-font-color);
+    }
+
+    sc-icon {
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      z-index: 1001;
+      border: none;
+      background-color: transparent;
+      opacity: 0.6;
+    }
+  `;
+  constructor() {
+    super();
+    this._show = false;
+    this.infos = {};
+  }
+  render() {
+    const $footer = html`
+      <footer>
+        <p>
+           <span>${this.infos.name}</span>
+          ${this.infos.author ? html`by <span>${this.infos.author}</span>` : ``}
+          has been developped using the <a href="https://soundworks.dev" target="_blank">soundworks</a>
+          framework developped by the ISMM team at Ircam.
+        </p>
+        <p>
+          Copyright (c) 2014-present IRCAM – Centre Pompidou (France, Paris)
+        </p>
+      </footer>
+    `;
+    return html`
+      ${this._show ? $footer : nothing}
+      <sc-icon type="question" @release=${e => this._show = !this._show}></sc-icon>
+    `;
+  }
+}
+customElements.define('sw-credits', SwCredits);
+//# sourceMappingURL=./sw-credits.js.map

package/examples/soundworks/.build/clients/components/sw-credits.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LitElement","html","css","nothing","SwCredits","properties","_show","type","Boolean","state","styles","constructor","infos","render","$footer","name","author","e","customElements","define"],"sources":["../../../src/clients/components/sw-credits.js"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\n\nimport '@ircam/sc-components/sc-icon.js';\n\nclass SwCredits extends LitElement {\n  static properties = {\n    _show: {\n      type: Boolean,\n      state: true,\n    },\n  };\n\n  static styles = css`\n    :host {\n      width: 100%;\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      z-index: 1000;\n    }\n\n    :host > footer {\n      display: block;\n      line-height: 1.6rem;\n      padding: 20px;\n      background-color: var(--sw-light-background-color);\n      box-sizing: border-box;\n    }\n\n    footer span {\n      font-style: italic;\n      color: var(--sw-light-font-color);\n      font-weight: bold;\n    }\n\n    footer a {\n      color: var(--sw-light-font-color);\n    }\n\n    sc-icon {\n      position: absolute;\n      bottom: 20px;\n      right: 20px;\n      z-index: 1001;\n      border: none;\n      background-color: transparent;\n      opacity: 0.6;\n    }\n  `;\n\n  constructor() {\n    super();\n\n    this._show = false;\n    this.infos = {};\n  }\n\n  render() {\n    const $footer = html`\n      <footer>\n        <p>\n           <span>${this.infos.name}</span>\n          ${this.infos.author ? html`by <span>${this.infos.author}</span>` : ``}\n          has been developped using the <a href=\"https://soundworks.dev\" target=\"_blank\">soundworks</a>\n          framework developped by the ISMM team at Ircam.\n        </p>\n        <p>\n          Copyright (c) 2014-present IRCAM – Centre Pompidou (France, Paris)\n        </p>\n      </footer>\n    `;\n\n    return html`\n      ${this._show ? $footer : nothing}\n      <sc-icon type=\"question\" @release=${e => this._show = !this._show}></sc-icon>\n    `\n  }\n}\n\ncustomElements.define('sw-credits', SwCredits);\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,GAAG,EAAEC,OAAO,QAAQ,KAAK;AAEpD,OAAO,iCAAiC;AAExC,MAAMC,SAAS,SAASJ,UAAU,CAAC;EACjC,OAAOK,UAAU,GAAG;IAClBC,KAAK,EAAE;MACLC,IAAI,EAAEC,OAAO;MACbC,KAAK,EAAE;IACT;EACF,CAAC;EAED,OAAOC,MAAM,GAAGR,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;EAEDS,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IAEP,IAAI,CAACL,KAAK,GAAG,KAAK;IAClB,IAAI,CAACM,KAAK,GAAG,CAAC,CAAC;EACjB;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAMC,OAAO,GAAGb,IAAI;AACxB;AACA;AACA,mBAAmB,IAAI,CAACW,KAAK,CAACG,IAAI;AAClC,YAAY,IAAI,CAACH,KAAK,CAACI,MAAM,GAAGf,IAAI,YAAY,IAAI,CAACW,KAAK,CAACI,MAAM,SAAS,GAAG,EAAE;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;IAED,OAAOf,IAAI;AACf,QAAQ,IAAI,CAACK,KAAK,GAAGQ,OAAO,GAAGX,OAAO;AACtC,0CAA0Cc,CAAC,IAAI,IAAI,CAACX,KAAK,GAAG,CAAC,IAAI,CAACA,KAAK;AACvE,KAAK;EACH;AACF;AAEAY,cAAc,CAACC,MAAM,CAAC,YAAY,EAAEf,SAAS,CAAC","ignoreList":[]}

package/examples/soundworks/.build/clients/player/.editorbackup/PlayerExperience.js~

@@ -0,0 +1,131 @@
+import { AbstractExperience } from '@soundworks/core/client';
+import { render, html, nothing } from 'lit/html.js';
+import renderInitializationScreens from '@soundworks/template-helpers/client/render-initialization-screens.js';
+import * as CoMoteQRCode from '@ircam/comote-helpers/qrcode.js';
+
+import '@ircam/simple-components/sc-editor.js';
+import '@ircam/simple-components/sc-text.js';
+import '@ircam/simple-components/sc-toggle.js';
+
+const SOCKET_PORT = 8901;
+
+class PlayerExperience extends AbstractExperience {
+  constructor(client, config, $container) {
+    super(client);
+
+    this.config = config;
+    this.$container = $container;
+    this.rafId = null;
+
+    renderInitializationScreens(client, config, $container);
+  }
+
+  async start() {
+    super.start();
+
+    window.addEventListener('resize', () => this.render());
+
+    this.infos = await this.client.stateManager.attach('infos');
+    this.infos.subscribe(() => this.render());
+
+    this.infos.subscribe(async updates => {
+      if (updates.comoteConfig) {
+        this.qrCode = await CoMoteQRCode.dataURL(this.infos.get('comoteConfig'));
+      }
+
+      if (updates.buttonA) {
+        console.log(updates.buttonA);
+      }
+
+      this.render();
+    }, true);
+
+    this.render();
+  }
+
+  render() {
+    // debounce with requestAnimationFrame
+    window.cancelAnimationFrame(this.rafId);
+
+    this.rafId = window.requestAnimationFrame(() => {
+      const values =
+
+      render(html`
+        <div style="padding: 20px">
+          <h1 style="margin: 20px 0">CoMo.te dashboard</h1>
+
+          <div style="margin-bottom: 10px;">
+            <sc-text
+              value="WiFi infos"
+              width="310"
+              readonly
+            ></sc-text>
+            <sc-text
+              value="${JSON.stringify(this.infos.get('wifiInfos'), null, 2)}"
+              readonly
+              height="80"
+              width="300"
+            ></sc-text>
+          </div>
+          <div style="margin-bottom: 10px;">
+            <sc-text
+              value="Settings"
+              width="310"
+              readonly
+            ></sc-text>
+            <sc-editor
+              value="${JSON.stringify(this.infos.get('comoteConfig'), null, 2)}"
+              @change="${e => this.infos.set({ comoteConfig: JSON.parse(e.detail.value) })}"
+            ></sc-editor>
+          </div>
+
+          ${this.qrCode ?
+            html`
+              <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+                <sc-text
+                  style="display: block; margin-bottom: 4px;"
+                  width="300"
+                  value="Flash QR to retrieve settings in CoMo.te"
+                  readonly
+                ></sc-text>
+                <img src="${this.qrCode}" width="300" height="300" />
+              </div>
+            `
+          : nothing}
+
+          <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+            <sc-text
+              value="${JSON.stringify(this.infos.get('data'), null, 2)}"
+              readonly
+              height="334"
+              width="300"
+            ></sc-text>
+          </div>
+
+          <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+            <div style="margin-bottom: 6px">
+              <sc-text
+                value="buttonA"
+                readonly
+              ></sc-text>
+              <sc-toggle
+                .active=${this.infos.get('buttonA')}
+              ></sc-toggle>
+            </div>
+            <div style="margin-bottom: 6px">
+              <sc-text
+                value="buttonB"
+                readonly
+              ></sc-text>
+              <sc-toggle
+                .active=${this.infos.get('buttonB')}
+              ></sc-toggle>
+            </div>
+          </div>
+        </div>
+      `, this.$container);
+    });
+  }
+}
+
+export default PlayerExperience;

package/examples/soundworks/.build/clients/player/index.js

@@ -0,0 +1,116 @@
+import '@soundworks/helpers/polyfills.js';
+import { Client } from '@soundworks/core/client.js';
+import { loadConfig, launcher } from '@soundworks/helpers/browser.js';
+import { html, render } from 'lit';
+import '../components/sw-credits.js';
+import * as CoMoteQRCode from '@ircam/comote-helpers/qrcode.js';
+import '@ircam/sc-components/sc-text.js';
+import '@ircam/sc-components/sc-toggle.js';
+import '@ircam/sc-components/sc-editor.js';
+import '@ircam/sc-components/sc-tab.js';
+
+// - General documentation: https://soundworks.dev/
+// - API documentation:     https://soundworks.dev/api
+// - Issue Tracker:         https://github.com/collective-soundworks/soundworks/issues
+// - Wizard & Tools:        `npx soundworks`
+
+async function main($container) {
+  /**
+   * Load configuration from config files and create the soundworks client
+   */
+  const config = loadConfig();
+  const client = new Client(config);
+  launcher.register(client, {
+    initScreensContainer: $container
+  });
+  await client.start();
+  const global = await client.stateManager.attach('global');
+  let qrCode;
+  let data = {};
+  let buttonA = false;
+  let buttonB = false;
+  let control = {};
+  global.onUpdate(async updates => {
+    if ('comoteConfig' in updates) {
+      qrCode = await CoMoteQRCode.dataURL(updates.comoteConfig);
+    }
+    if ('data' in updates) {
+      ({
+        data
+      } = updates);
+      if ('control' in updates.data) {
+        control = updates.data.control;
+        if ('buttonA' in updates.data.control) {
+          buttonA = !!updates.data.control.buttonA;
+        } else if ('buttonB' in updates.data.control) {
+          buttonB = !!updates.data.control.buttonB;
+        }
+      }
+    }
+    renderApp();
+  }, true);
+  function renderApp() {
+    render(html`
+      <div style="padding: 20px">
+        <h1 style="margin: 20px 0">CoMote dashboard</h1>
+
+        <div style="margin-bottom: 10px;">
+          <sc-text>WiFi infos</sc-text>
+          <sc-text style="height: 80px;">${JSON.stringify(global.get('wifiInfos'), null, 2)}</sc-text>
+        </div>
+        <div style="margin-bottom: 10px;">
+          <sc-text>Settings</sc-text>
+          <sc-editor
+            value=${JSON.stringify(global.get('comoteConfig'), null, 2)}
+            @change=${e => global.set({
+      comoteConfig: JSON.parse(e.detail.value)
+    })}
+          ></sc-editor>
+        </div>
+
+        <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+          <sc-text style="display: block; margin-bottom: 4px;">Flash QR to retrieve settings in CoMote</sc-text>
+          <img src=${qrCode} width="300" height="300" style="image-rendering: pixelated;"/>
+        </div>
+
+        <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+          <sc-text style="width: 300px; height: 350px">${JSON.stringify(data, null, 2)}</sc-text>
+        </div>
+
+        <div style="display: inline-block; vertical-align: top; margin-right: 12px">
+          <div style="margin-bottom: 6px">
+            <sc-text>buttonA</sc-text>
+            <sc-toggle .active=${buttonA}></sc-toggle>
+          </div>
+          <div style="margin-bottom: 6px">
+            <sc-text>buttonB</sc-text>
+            <sc-toggle .active=${buttonB}></sc-toggle>
+          </div>
+          <div style="margin-bottom: 6px">
+            <sc-text>Arbitrary control (webview)</sc-text>
+            <sc-text>${JSON.stringify(control)}</sc-text>
+          </div>
+        </div>
+
+        <div style="margin-top: 12px">
+          <sc-text>webview page</sc-text>
+          <sc-tab
+            .options=${['1', '2']}
+            value=${global.get('webviewPage')}
+            @change=${e => global.set({
+      webviewPage: e.detail.value
+    })}
+          ></sc-tab>
+        </div>
+      </div>
+    `, $container);
+  }
+}
+
+// The launcher enables instanciation of multiple clients in the same page to
+// facilitate development and testing.
+// e.g. `http://127.0.0.1:8000?emulate=10` to run 10 clients side-by-side
+launcher.execute(main, {
+  numClients: parseInt(new URLSearchParams(window.location.search).get('emulate')) || 1
+});
+//# sourceMappingURL=./index.js.map

package/examples/soundworks/.build/clients/player/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Client","loadConfig","launcher","html","render","CoMoteQRCode","main","$container","config","client","register","initScreensContainer","start","global","stateManager","attach","qrCode","data","buttonA","buttonB","control","onUpdate","updates","dataURL","comoteConfig","renderApp","JSON","stringify","get","e","set","parse","detail","value","webviewPage","execute","numClients","parseInt","URLSearchParams","window","location","search"],"sources":["../../../src/clients/player/index.js"],"sourcesContent":["import '@soundworks/helpers/polyfills.js';\nimport { Client } from '@soundworks/core/client.js';\nimport { loadConfig, launcher } from '@soundworks/helpers/browser.js';\nimport { html, render } from 'lit';\n\nimport '../components/sw-credits.js';\nimport * as CoMoteQRCode from '@ircam/comote-helpers/qrcode.js';\n\nimport '@ircam/sc-components/sc-text.js';\nimport '@ircam/sc-components/sc-toggle.js';\nimport '@ircam/sc-components/sc-editor.js';\nimport '@ircam/sc-components/sc-tab.js';\n\n// - General documentation: https://soundworks.dev/\n// - API documentation:     https://soundworks.dev/api\n// - Issue Tracker:         https://github.com/collective-soundworks/soundworks/issues\n// - Wizard & Tools:        `npx soundworks`\n\nasync function main($container) {\n  /**\n   * Load configuration from config files and create the soundworks client\n   */\n  const config = loadConfig();\n  const client = new Client(config);\n  launcher.register(client, { initScreensContainer: $container });\n\n  await client.start();\n\n  const global = await client.stateManager.attach('global');\n\n  let qrCode;\n  let data = {};\n  let buttonA = false;\n  let buttonB = false;\n  let control = {};\n\n  global.onUpdate(async updates => {\n    if ('comoteConfig' in updates) {\n      qrCode = await CoMoteQRCode.dataURL(updates.comoteConfig);\n    }\n\n    if ('data' in updates) {\n      ({data} = updates);\n\n      if ('control' in updates.data) {\n        control = updates.data.control;\n\n        if ('buttonA' in updates.data.control) {\n          buttonA = !!updates.data.control.buttonA;\n        } else if ('buttonB' in updates.data.control) {\n          buttonB = !!updates.data.control.buttonB;\n        }\n      }\n    }\n\n    renderApp();\n  }, true);\n\n  function renderApp() {\n    render(html`\n      <div style=\"padding: 20px\">\n        <h1 style=\"margin: 20px 0\">CoMote dashboard</h1>\n\n        <div style=\"margin-bottom: 10px;\">\n          <sc-text>WiFi infos</sc-text>\n          <sc-text style=\"height: 80px;\">${JSON.stringify(global.get('wifiInfos'), null, 2)}</sc-text>\n        </div>\n        <div style=\"margin-bottom: 10px;\">\n          <sc-text>Settings</sc-text>\n          <sc-editor\n            value=${JSON.stringify(global.get('comoteConfig'), null, 2)}\n            @change=${e => global.set({ comoteConfig: JSON.parse(e.detail.value) })}\n          ></sc-editor>\n        </div>\n\n        <div style=\"display: inline-block; vertical-align: top; margin-right: 12px\">\n          <sc-text style=\"display: block; margin-bottom: 4px;\">Flash QR to retrieve settings in CoMote</sc-text>\n          <img src=${qrCode} width=\"300\" height=\"300\" style=\"image-rendering: pixelated;\"/>\n        </div>\n\n        <div style=\"display: inline-block; vertical-align: top; margin-right: 12px\">\n          <sc-text style=\"width: 300px; height: 350px\">${JSON.stringify(data, null, 2)}</sc-text>\n        </div>\n\n        <div style=\"display: inline-block; vertical-align: top; margin-right: 12px\">\n          <div style=\"margin-bottom: 6px\">\n            <sc-text>buttonA</sc-text>\n            <sc-toggle .active=${buttonA}></sc-toggle>\n          </div>\n          <div style=\"margin-bottom: 6px\">\n            <sc-text>buttonB</sc-text>\n            <sc-toggle .active=${buttonB}></sc-toggle>\n          </div>\n          <div style=\"margin-bottom: 6px\">\n            <sc-text>Arbitrary control (webview)</sc-text>\n            <sc-text>${JSON.stringify(control)}</sc-text>\n          </div>\n        </div>\n\n        <div style=\"margin-top: 12px\">\n          <sc-text>webview page</sc-text>\n          <sc-tab\n            .options=${['1', '2']}\n            value=${global.get('webviewPage')}\n            @change=${e => global.set({ webviewPage: e.detail.value })}\n          ></sc-tab>\n        </div>\n      </div>\n    `, $container);\n  }\n}\n\n// The launcher enables instanciation of multiple clients in the same page to\n// facilitate development and testing.\n// e.g. `http://127.0.0.1:8000?emulate=10` to run 10 clients side-by-side\nlauncher.execute(main, {\n  numClients: parseInt(new URLSearchParams(window.location.search).get('emulate')) || 1,\n});\n"],"mappings":"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","ignoreList":[]}

package/examples/soundworks/.build/clients/styles/app.scss

@@ -0,0 +1,79 @@
+:root {
+  --sw-background-color: #000000;
+  --sw-medium-background-color: #121212;
+  --sw-light-background-color: #242424;
+  --sw-lighter-background-color: #363636;
+  --sw-font-color: #ffffff;
+  --sw-light-font-color: #cccccc;
+  --sw-font-color-error: #a94442;
+  --sw-font-family: Consolas, monaco, monospace;
+  --sw-font-size: 62.5%; // such that 1rem == 10px
+}
+
+html, body {
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--sw-background-color);
+  color: var(--sw-font-color);
+}
+
+html {
+  font-size: var(--sw-font-size);
+}
+
+body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: var(--sw-font-family);
+}
+
+body.loading {
+  background-image: url(../../images/loader.gif);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.simple-layout {
+  display: block;
+  flex-grow: 1;
+  padding: 20px;
+  position: relative;
+}
+
+// default styles for controller layout
+.controller-layout {
+  display: block;
+  flex-grow: 1;
+  position: relative;
+
+  & > header {
+    display: block;
+    height: 38px;
+    line-height: 38px;
+    background-color: var(--sw-medium-background-color);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--sw-lighter-background-color);
+
+    h1 {
+      font-size: 12px;
+      margin: 0;
+      padding-left: 20px;
+      max-width: 50%;
+      overflow: hidden;
+    }
+
+    sc-audit {
+      max-width: 50%;
+    }
+  }
+
+  & > section {
+    padding: 20px;
+  }
+}