@ircam/comote-helpers 1.0.1 → 1.0.3

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

@@ -1,99 +0,0 @@
-: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

@@ -1,35 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,73 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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~

@@ -1,131 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,79 +0,0 @@
-: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;
-  }
-}