@ircam/comote-helpers 0.3.1 → 1.0.1

package/examples/soundworks/.vendors/public/webcomponentsjs/webcomponents-loader.js

@@ -0,0 +1,238 @@
+/**
+ * @license
+ * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+(function () {
+  'use strict';
+
+  /**
+   * Basic flow of the loader process
+   *
+   * There are 4 flows the loader can take when booting up
+   *
+   * - Synchronous script, no polyfills needed
+   *   - wait for `DOMContentLoaded`
+   *   - fire WCR event, as there could not be any callbacks passed to `waitFor`
+   *
+   * - Synchronous script, polyfills needed
+   *   - document.write the polyfill bundle
+   *   - wait on the `load` event of the bundle to batch Custom Element upgrades
+   *   - wait for `DOMContentLoaded`
+   *   - run callbacks passed to `waitFor`
+   *   - fire WCR event
+   *
+   * - Asynchronous script, no polyfills needed
+   *   - wait for `DOMContentLoaded`
+   *   - run callbacks passed to `waitFor`
+   *   - fire WCR event
+   *
+   * - Asynchronous script, polyfills needed
+   *   - Append the polyfill bundle script
+   *   - wait for `load` event of the bundle
+   *   - batch Custom Element Upgrades
+   *   - run callbacks pass to `waitFor`
+   *   - fire WCR event
+   */
+
+  var polyfillsLoaded = false;
+  var whenLoadedFns = [];
+  var allowUpgrades = false;
+  var flushFn;
+
+  function fireEvent() {
+    window.WebComponents.ready = true;
+    document.dispatchEvent(
+      new CustomEvent('WebComponentsReady', {bubbles: true})
+    );
+  }
+
+  function batchCustomElements() {
+    if (window.customElements && customElements.polyfillWrapFlushCallback) {
+      customElements.polyfillWrapFlushCallback(function (flushCallback) {
+        flushFn = flushCallback;
+        if (allowUpgrades) {
+          flushFn();
+        }
+      });
+    }
+  }
+
+  function asyncReady() {
+    batchCustomElements();
+    ready();
+  }
+
+  function ready() {
+    // bootstrap <template> elements before custom elements
+    if (window.HTMLTemplateElement && HTMLTemplateElement.bootstrap) {
+      HTMLTemplateElement.bootstrap(window.document);
+    }
+    polyfillsLoaded = true;
+    runWhenLoadedFns().then(fireEvent);
+  }
+
+  function runWhenLoadedFns() {
+    allowUpgrades = false;
+    var fnsMap = whenLoadedFns.map(function (fn) {
+      return fn instanceof Function ? fn() : fn;
+    });
+    whenLoadedFns = [];
+    return Promise.all(fnsMap)
+      .then(function () {
+        allowUpgrades = true;
+        flushFn && flushFn();
+      })
+      .catch(function (err) {
+        console.error(err);
+      });
+  }
+
+  window.WebComponents = window.WebComponents || {};
+  window.WebComponents.ready = window.WebComponents.ready || false;
+  window.WebComponents.waitFor =
+    window.WebComponents.waitFor ||
+    function (waitFn) {
+      if (!waitFn) {
+        return;
+      }
+      whenLoadedFns.push(waitFn);
+      if (polyfillsLoaded) {
+        runWhenLoadedFns();
+      }
+    };
+  window.WebComponents._batchCustomElements = batchCustomElements;
+
+  var name = 'webcomponents-loader.js';
+  // Feature detect which polyfill needs to be imported.
+  var polyfills = [];
+  if (
+    !(
+      'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype
+    ) ||
+    (window.ShadyDOM && window.ShadyDOM.force)
+  ) {
+    polyfills.push('sd');
+  }
+  if (!window.customElements || window.customElements.forcePolyfill) {
+    polyfills.push('ce');
+  }
+
+  var needsTemplate = (function () {
+    // no real <template> because no `content` property (IE and older browsers)
+    var t = document.createElement('template');
+    if (!('content' in t)) {
+      return true;
+    }
+    // broken doc fragment (older Edge)
+    if (!(t.content.cloneNode() instanceof DocumentFragment)) {
+      return true;
+    }
+    // broken <template> cloning (Edge up to at least version 17)
+    var t2 = document.createElement('template');
+    t2.content.appendChild(document.createElement('div'));
+    t.content.appendChild(t2);
+    var clone = t.cloneNode(true);
+    return (
+      clone.content.childNodes.length === 0 ||
+      clone.content.firstChild.content.childNodes.length === 0
+    );
+  })();
+
+  // NOTE: any browser that does not have template or ES6 features
+  // must load the full suite of polyfills.
+  if (
+    !window.Promise ||
+    !Array.from ||
+    !window.URL ||
+    !window.Symbol ||
+    needsTemplate
+  ) {
+    polyfills = ['sd-ce-pf'];
+  }
+
+  if (polyfills.length) {
+    // When the Trusted Types API is available, `policy` is a
+    // `TrustedTypePolicy` with functions for creating trusted HTML, scripts,
+    // and script URLs. This policy is used below to (a) approve the bundle URL
+    // string created by the loader that is assigned to a `<script>`'s `src`
+    // attribute, (b) approve a constant script string that is assigned to that
+    // `<script>'s `onload` attribute, and (c) approve the string of HTML that
+    // the loader reads from that `<script>`'s `outerHTML`.
+    //
+    // If the Trusted Types API is not available, the returned object exposes a
+    // similar interface to a `TrustedTypePolicy`, but all of its functions are
+    // the identity function.
+    var policy = (function () {
+      var identity = function (x) {
+        return x;
+      };
+      var policyOptions = {
+        createHTML: identity,
+        createScript: identity,
+        createScriptURL: identity,
+      };
+      var policy =
+        window.trustedTypes &&
+        window.trustedTypes.createPolicy('webcomponents-loader', policyOptions);
+      return policy || policyOptions;
+    })();
+
+    var url;
+    var polyfillFile = 'bundles/webcomponents-' + polyfills.join('-') + '.js';
+
+    // Load it from the right place.
+    if (window.WebComponents.root) {
+      url = window.WebComponents.root + polyfillFile;
+      if (
+        window.trustedTypes &&
+        window.trustedTypes.isScriptURL(window.WebComponents.root)
+      ) {
+        url = policy.createScriptURL(url);
+      }
+    } else {
+      var script = document.querySelector('script[src*="' + name + '"]');
+      // Load it from the right place.
+      url = policy.createScriptURL(script.src.replace(name, polyfillFile));
+    }
+
+    var newScript = document.createElement('script');
+    newScript.src = url;
+    // if readyState is 'loading', this script is synchronous
+    if (document.readyState === 'loading') {
+      // make sure custom elements are batched whenever parser gets to the injected script
+      newScript.setAttribute(
+        'onload',
+        policy.createScript('window.WebComponents._batchCustomElements()')
+      );
+      document.write(policy.createHTML(newScript.outerHTML));
+      document.addEventListener('DOMContentLoaded', ready);
+    } else {
+      newScript.addEventListener('load', function () {
+        asyncReady();
+      });
+      newScript.addEventListener('error', function () {
+        throw new Error('Could not load polyfill bundle' + url);
+      });
+      document.head.appendChild(newScript);
+    }
+  } else {
+    // if readyState is 'complete', script is loaded imperatively on a spec-compliant browser, so just fire WCR
+    if (document.readyState === 'complete') {
+      polyfillsLoaded = true;
+      fireEvent();
+    } else {
+      // this script may come between DCL and load, so listen for both, and cancel load listener if DCL fires
+      window.addEventListener('load', ready);
+      window.addEventListener('DOMContentLoaded', function () {
+        window.removeEventListener('load', ready);
+        ready();
+      });
+    }
+  }
+})();

package/examples/soundworks/LICENSE

@@ -0,0 +1,28 @@
+Copyright (c) 2014-present IRCAM – Centre Pompidou (France, Paris)
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this
+  list of conditions and the following disclaimer in the documentation and/or
+  other materials provided with the distribution.
+
+* Neither the name of the IRCAM nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/examples/soundworks/README.md

@@ -0,0 +1,26 @@
+# CoMote example app
+
+This application showcases the usage of the `comote-helpers` SDK for the CoMote application.
+
+## Usage
+
+1. Install Node.js LTS
+2. Install and launch the Web application
+
+```
+cd path/to/comote-helpers/example
+npm install 
+npm run dev
+```
+
+A web page will be accessible at `http://127.0.0.1:8000` on the computer running the server.
+
+3. Connect your mobile phone on the same WiFi as the computer running the server
+4. Launch the CoMote application on your mobile phone
+5. Scan the QRCode on the web page from the CoMote application
+
+...and enjoy the sensors and controls streamed to the Web page through WebSockets
+
+## License
+
+[BSF-3-Clause](../LICENSE)

package/examples/soundworks/config/application.yaml

@@ -0,0 +1,8 @@
+name: "CoMote Example"
+author: ""
+clients:
+  player:
+    target: browser
+    default: true
+  webview:
+    target: browser

package/examples/soundworks/config/env-default.yaml

@@ -0,0 +1,12 @@
+type: development
+port: 8000
+subpath: ""
+serverAddress: ""
+useHttps: false
+httpsInfos:
+  cert: null
+  key: null
+auth:
+  clients: []
+  login: ""
+  password: ""

package/examples/soundworks/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@ircam/comote-example-soundworks",
+  "description": "comote soundworks example application",
+  "authors": [],
+  "license": "BSD-3-Clause",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "npm run clean && sass src/clients/styles:.build/public/css && soundworks-build -b",
+    "clean": "soundworks-build -D",
+    "dev": "npm run build && (concurrently -i -p \"none\" \"npm run watch:inspect server\" \"soundworks-build -b -w\" \"npm run watch:sass\")",
+    "start": "node .build/server/index.js",
+    "watch": "soundworks-build -p",
+    "watch:inspect": "soundworks-build -i -p",
+    "watch:sass": "sass --watch src/clients/styles:.build/public/css",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@ircam/comote-helpers": "^1.0.0",
+    "@ircam/sc-components": "^3.0.0-alpha.60",
+    "@soundworks/core": "^4.0.0-alpha.21",
+    "@soundworks/helpers": "^1.0.0-alpha.12",
+    "json5": "^2.2.3",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@ircam/eslint-config": "^1.2.1",
+    "@soundworks/build": "^1.0.0-alpha.6",
+    "@soundworks/create": "^1.0.0-alpha.23",
+    "concurrently": "^8.2.2",
+    "eslint": "^9.6.0",
+    "sass": "^1.77.1"
+  }
+}

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

@@ -0,0 +1,78 @@
+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);

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

@@ -0,0 +1,80 @@
+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);

package/examples/soundworks/src/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;