From 2ba8dab95e10596ac88539a74e47024836138019 Mon Sep 17 00:00:00 2001
From: Luciano Iam <lucianito@gmail.com>
Date: Tue, 14 Apr 2020 09:53:25 +0200
Subject: WebSockets: update JS client and demo

avoid hardcoded node name strings in mixer-demo
improve mixer-demo design
split ardour.js client into control and metadata mixins
rename JS client class Ardour to ArdourClient
JS client improve mixin implementation
JS client improve manifest parser
NO-OP whitespace and comments
NO-OP update websurface manifest versions
add Ardour icon in mixer-demo
improve mixer-demo scrolling on touch screens
---
 share/web_surfaces/builtin/mixer-demo/css/main.css |  50 +++++++---
 .../builtin/mixer-demo/img/ardour-icon.svg         |  21 +++++
 share/web_surfaces/builtin/mixer-demo/index.html   |   9 +-
 share/web_surfaces/builtin/mixer-demo/js/main.js   |  44 ++++-----
 share/web_surfaces/builtin/mixer-demo/manifest.xml |   2 +-
 share/web_surfaces/builtin/transport/manifest.xml  |   2 +-
 share/web_surfaces/index/main.js                   |   4 +-
 share/web_surfaces/shared/ardour.js                | 102 ++++-----------------
 share/web_surfaces/shared/callback.js              |   2 +
 share/web_surfaces/shared/control.js               |  73 +++++++++++++++
 share/web_surfaces/shared/metadata.js              |  51 +++++++++++
 11 files changed, 237 insertions(+), 123 deletions(-)
 create mode 100644 share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg
 create mode 100644 share/web_surfaces/shared/control.js
 create mode 100644 share/web_surfaces/shared/metadata.js

diff --git a/share/web_surfaces/builtin/mixer-demo/css/main.css b/share/web_surfaces/builtin/mixer-demo/css/main.css
index 5477f9840e..0fd812c39b 100644
--- a/share/web_surfaces/builtin/mixer-demo/css/main.css
+++ b/share/web_surfaces/builtin/mixer-demo/css/main.css
@@ -7,6 +7,8 @@ body {
     color: rgb(248,248,242);
     font-family: Helvetica, Arial, sans-serif;
     height: 100%;
+    width: 100%;
+    position: fixed;
     margin: 0;
 }
 
@@ -20,26 +22,46 @@ div {
     height: 100%;
 }
 
-#strips {
+#surface {
     flex: 1;
-    overflow: scroll;
-    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
     box-shadow: 0px 0px 10px #000;
 }
 
-#manifest {
+#top {
+    display: flex;
+    align-items: center;
     padding: 0.25em 0.5em;
-    opacity: 0.5;
-    background: rgba(0,0,0,0.4);
+    box-shadow: 0px 0px 10px #000;
+}
+
+#top > img {
+    height: 24px;
+}
+
+#top > span {
+    opacity: 0.75;
+    margin-left: 12px;
 }
 
 #log {
-    height: 6em;
+    height: 7em;
     overflow: scroll;
     overflow-x: hidden;
     background: rgba(0,0,0,0.4);
 }
 
+#strips {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: scroll;
+    overflow-x: hidden;
+    background: rgba(0,0,0,0.2);
+}
+
 #log pre {
     margin: 0;
     font-family: Menlo, monospace;
@@ -64,10 +86,12 @@ div {
 }
 
 .strip {
-    margin: 5%;
-    padding: 2.5% 5%;
+    margin: 20px;
+    padding: 20px 40px;
     background: rgba(0,0,0,0.1);
     border-radius: 5px;
+    width: 100%;
+    max-width: 768px;
 }
 
 .slider-meter {
@@ -75,12 +99,12 @@ div {
 }
 
 .strip-slider {
-    margin-top: 2.5%;
+    margin-top: 20px;
 }
 
 .plugin {
-    margin: 5%;
-    padding: 2.5% 5%;
+    margin: 40px 0;
+    padding: 20px 40px;
     background: rgba(0,0,0,0.05);
     border-radius: 5px;
 }
@@ -90,7 +114,7 @@ div {
 }
 
 .plugin-param {
-    margin: 5%;
+    margin: 40px;
 }
 
 .plugin-param.boolean {
diff --git a/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg b/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg
new file mode 100644
index 0000000000..b824d7df55
--- /dev/null
+++ b/share/web_surfaces/builtin/mixer-demo/img/ardour-icon.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="92px" height="80px" viewBox="0 0 92 80" enable-background="new 0 0 92 80" xml:space="preserve">
+<path id="path6984" fill="#C61F40" d="
+	M45.586,0.44L-0.082,79.558c3.356,0,2.828-2.382,4.417-2.382c1.681,0.004,1.367,1.19,2.951,1.19c0.814,0,1.467-0.806,1.466-2.804
+	c0-2.664,0.661-4.017,1.476-4.017s1.476,1.187,1.476,2.372c0,1.492,0.662,2.678,1.476,2.678c0.814,0,1.477-2.019,1.477-4.512
+	l-0.01-2.857c0-3.447,0.661-6.24,1.476-6.24s1.477,1.207,1.476,5.112c0,3.104,0.662,6.198,1.476,6.198
+	c0.814,0,1.478-3.602,1.477-9.382c0-6.68,0.65-10.996,1.465-10.996c0.815,0,1.477,4.32,1.476,8.582c0,4.977,0.662,9.878,1.477,9.878
+	s1.477-4.902,1.476-11.701c0-7.302,0.651-12.609,1.466-12.609c0.813,0,1.477,5.308,1.476,11.406c0,6.4,0.661,11.955,1.476,11.955
+	s1.476-5.551,1.476-12.661c0-7.109,0.651-12.766,1.466-12.766s1.476,5.656,1.476,12.649c0,6.994,0.662,12.641,1.476,12.641
+	c0.814,0,1.477-5.65,1.477-12.397c0-6.602,0.65-12.135,1.465-12.135s1.476,5.53,1.476,12.746c0,6.952,0.663,12.271,1.477,12.271
+	c0.813,0,1.477-5.318,1.476-11.332c0-5.651,0.651-10.669,1.465-10.669c0.814,0,1.478,5.027,1.477,11.882
+	c0,6.413,0.661,11.068,1.476,11.068s1.477-4.657,1.476-9.667c0-4.514,0.651-8.781,1.466-8.781s1.477,4.265,1.476,10.32
+	c0,5.522,0.662,9.351,1.476,9.351c0.814,0,1.477-3.825,1.477-7.727c0-3.353,0.65-6.737,1.465-6.737s1.476,3.382,1.476,8.382
+	c0,4.449,0.662,7.389,1.477,7.389s1.476-2.586,1.476-5.407c0-2.911,0.662-5.145,1.476-5.145c0.814,0,1.466,2.501,1.466,6.356
+	c0,3.345,0.661,5.439,1.476,5.439s1.476-1.732,1.476-3.479c0-1.801,0.662-3.563,1.477-3.563c0.813,0,1.465,1.703,1.465,4.459
+	c0,2.317,0.662,3.668,1.477,3.668s1.477-0.941,1.477-2.034c0-1.438,0.661-2.098,1.476-2.098s1.466,0.987,1.466,2.814
+	c0,1.44,0.661,2.192,1.476,2.192c1.539,0,1.331-1.917,2.951-1.929c1.773,0,1.253,2.571,2.941,2.571c1.217,0,2.159-0.469,2.952-0.474
+	c1.316,0,1.408,0.928,4.416,0.928L45.588,0.44H45.586z"/>
+</svg>
diff --git a/share/web_surfaces/builtin/mixer-demo/index.html b/share/web_surfaces/builtin/mixer-demo/index.html
index a94dd17f61..d1c4308616 100644
--- a/share/web_surfaces/builtin/mixer-demo/index.html
+++ b/share/web_surfaces/builtin/mixer-demo/index.html
@@ -8,8 +8,13 @@
     </head>
     <body>
         <div id="main">
-            <div id="manifest"></div>
-            <div id="strips"></div>
+            <div id="surface">
+                <div id="top">
+                    <img src="img/ardour-icon.svg">
+                    <span id="manifest"></span>
+                </div>
+                <div id="strips"></div>
+            </div>
             <div id="log"></div>
         </div>
         <script type="module" src="js/main.js"></script>
diff --git a/share/web_surfaces/builtin/mixer-demo/js/main.js b/share/web_surfaces/builtin/mixer-demo/js/main.js
index a2780565b6..64d5fca33f 100644
--- a/share/web_surfaces/builtin/mixer-demo/js/main.js
+++ b/share/web_surfaces/builtin/mixer-demo/js/main.js
@@ -21,7 +21,7 @@
  // tightly to the message stream
 
 import { ANode, Message } from '/shared/message.js';
-import { Ardour } from '/shared/ardour.js';
+import { ArdourClient } from '/shared/ardour.js';
 
 import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
         StripPanSlider, StripGainSlider, StripMeter } from './widget.js';
@@ -32,7 +32,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
     const FEEDBACK_NODES = [ANode.STRIP_GAIN, ANode.STRIP_PAN, ANode.STRIP_METER,
                             ANode.STRIP_PLUGIN_ENABLE, ANode.STRIP_PLUGIN_PARAM_VALUE];
     
-    const ardour = new Ardour(location.host);
+    const ardour = new ArdourClient(location.host);
     const widgets = {};
 
     main();
@@ -40,7 +40,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
     function main () {
         ardour.getSurfaceManifest().then((manifest) => {
             const div = document.getElementById('manifest');
-            div.innerHTML = `${manifest.name} v${manifest.version}`;
+            div.innerHTML = `${manifest.name.toUpperCase()} v${manifest.version} — ${manifest.description}`;
         });
 
         ardour.addCallback({
@@ -75,7 +75,7 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
         createElem(`<label class="comp-name" for="${id}">∿&emsp;&emsp;${name}</label>`, div);
         
         // meter
-        const meter = new StripMeter('strip_meter', addr);
+        const meter = new StripMeter(ANode.STRIP_METER, addr);
         meter.el.classList.add('slider-meter');
         meter.attach(div);
         register(meter);
@@ -83,14 +83,14 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
         // gain
         let holder = createElem(`<div class="strip-slider"></div>`, div); 
         createElem(`<label>Gain</label>`, holder);
-        const gain = new StripGainSlider('strip_gain', addr);
+        const gain = new StripGainSlider(ANode.STRIP_GAIN, addr);
         gain.attach(holder, (val) => send(gain));
         register(gain);
 
         // pan
         holder = createElem(`<div class="strip-slider"></div>`, div); 
         createElem(`<label>Pan</label>`, holder);
-        const pan = new StripPanSlider('strip_pan', addr);
+        const pan = new StripPanSlider(ANode.STRIP_PAN, addr);
         pan.attach(holder, (val) => send(pan));
         register(pan);
     }
@@ -100,33 +100,33 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
         const id = `plugin-${addr[0]}-${addr[1]}`;
         const div = createElem(`<div class="plugin" id="${id}"></div>`, strip);
         createElem(`<label class="comp-name">⨍&emsp;&emsp;${name}</label>`, div);
-        const enable = new Switch('strip_plugin_enable', addr);
+        const enable = new Switch(ANode.STRIP_PLUGIN_ENABLE, addr);
         enable.el.classList.add('plugin-enable');
         enable.attach(div, (val) => send(enable));
         register(enable);
     }
 
-    function createStripPluginParam (addr, name, data_type, min, max, is_log) {
-        let param, clazz;
-
-        if (data_type == 'b') {
-            clazz = 'boolean';
-            param = new Switch('strip_plugin_param_value', addr);
-        } else if (data_type == 'i') {
-            clazz = 'discrete';
-            param = new DiscreteSlider('strip_plugin_param_value', addr, min, max);
-        } else if (data_type == 'd') {
-            clazz = 'continuous';
-            if (is_log) {
-                param = new LogarithmicSlider('strip_plugin_param_value', addr, min, max);
+    function createStripPluginParam (addr, name, dataType, min, max, isLog) {
+        let param, cssClass;
+
+        if (dataType == 'b') {
+            cssClass = 'boolean';
+            param = new Switch(ANode.STRIP_PLUGIN_PARAM_VALUE, addr);
+        } else if (dataType == 'i') {
+            cssClass = 'discrete';
+            param = new DiscreteSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max);
+        } else if (dataType == 'd') {
+            cssClass = 'continuous';
+            if (isLog) {
+                param = new LogarithmicSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max);
             } else {
-                param = new ContinuousSlider('strip_plugin_param_value', addr, min, max);
+                param = new ContinuousSlider(ANode.STRIP_PLUGIN_PARAM_VALUE, addr, min, max);
             }
         }
 
         const plugin = document.getElementById(`plugin-${addr[0]}-${addr[1]}`);
         const id = `param-${addr[0]}-${addr[1]}-${addr[2]}`;
-        const div = createElem(`<div class="plugin-param ${clazz}" id="${id}"></div>`, plugin);
+        const div = createElem(`<div class="plugin-param ${cssClass}" id="${id}"></div>`, plugin);
         createElem(`<label for="${id}">${name}</label>`, div);
 
         param.attach(div, (val) => send(param));
diff --git a/share/web_surfaces/builtin/mixer-demo/manifest.xml b/share/web_surfaces/builtin/mixer-demo/manifest.xml
index f0c1b5ddc3..bfa80a21b9 100644
--- a/share/web_surfaces/builtin/mixer-demo/manifest.xml
+++ b/share/web_surfaces/builtin/mixer-demo/manifest.xml
@@ -2,5 +2,5 @@
 <WebSurface>
   <Name value="Mixer Demo"/>
   <Description value="Mixer control capabilities demo aimed at developers"/>
-  <Version value="0.0.1"/>
+  <Version value="0.1.0"/>
 </WebSurface>
diff --git a/share/web_surfaces/builtin/transport/manifest.xml b/share/web_surfaces/builtin/transport/manifest.xml
index 2f9174a152..aef70440cc 100644
--- a/share/web_surfaces/builtin/transport/manifest.xml
+++ b/share/web_surfaces/builtin/transport/manifest.xml
@@ -2,5 +2,5 @@
 <WebSurface>
   <Name value="Transport"/>
   <Description value="Provides basic transport control (under construction)"/>
-  <Version value="0.0.1"/>
+  <Version value="0.1.0"/>
 </WebSurface>
diff --git a/share/web_surfaces/index/main.js b/share/web_surfaces/index/main.js
index 2dcb59e654..3594268991 100644
--- a/share/web_surfaces/index/main.js
+++ b/share/web_surfaces/index/main.js
@@ -16,13 +16,13 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import { Ardour } from '/shared/ardour.js';
+import { ArdourClient } from '/shared/ardour.js';
 
 (() => {
 
     async function main () {
         try {
-            const surfaces = await new Ardour().getAvailableSurfaces();
+            const surfaces = await new ArdourClient().getAvailableSurfaces();
             printSurfaces(surfaces);
         } catch (err) {
             printError(`Error loading surfaces list: ${err.message}`);
diff --git a/share/web_surfaces/shared/ardour.js b/share/web_surfaces/shared/ardour.js
index 77e6bf49b9..a7e6978ba2 100644
--- a/share/web_surfaces/shared/ardour.js
+++ b/share/web_surfaces/shared/ardour.js
@@ -16,10 +16,14 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import { ANode, Message } from './message.js';
+import { MetadataMixin } from './metadata.js';
+import { ControlMixin } from './control.js';
+import { Message } from './message.js';
 import { MessageChannel } from './channel.js';
 
-export class Ardour {
+// See *Mixin for the available APIs
+
+class BaseArdourClient {
 
 	constructor () {
 		this._callbacks = [];
@@ -56,90 +60,11 @@ export class Ardour {
 		this._channel.send(msg);
 	}
 
-	// Surface metadata API over HTTP
-
-	async getAvailableSurfaces () {
-		const response = await fetch('/surfaces.json');
-		
-		if (response.status == 200) {
-			return await response.json();
-		} else {
-			throw this._fetchResponseStatusError(response.status);
-		}
-	}
-
-	async getSurfaceManifest () {
-		const response = await fetch('manifest.xml');
-
-		if (response.status == 200) {
-			const xmlText = await response.text();
-			const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml');
-			return {
-				name: xmlDoc.getElementsByTagName('Name')[0].getAttribute('value'),
-				description: xmlDoc.getElementsByTagName('Description')[0].getAttribute('value'),
-				version: xmlDoc.getElementsByTagName('Version')[0].getAttribute('value')
-			}
-		} else {
-			throw this._fetchResponseStatusError(response.status);
-		}
-	}
-
-	// Surface control API over WebSockets
-	// clients need to call open() before calling these methods
-
-	async getTempo () {
-		return (await this._sendAndReceive(ANode.TEMPO))[0];
-	}
-	
-	async getStripGain (stripId) {
-		return (await this._sendAndReceive(ANode.STRIP_GAIN, [stripId]))[0];
-	}
-
-	async getStripPan (stripId) {
-		return (await this._sendAndReceive(ANode.STRIP_PAN, [stripId]))[0];
-	}
-
-	async getStripMute (stripId) {
-		return (await this._sendAndReceive(ANode.STRIP_MUTE, [stripId]))[0];
-	}
-
-	async getStripPluginEnable (stripId, pluginId) {
-		return (await this._sendAndReceive(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId]))[0];
-	}
-
-	async getStripPluginParamValue (stripId, pluginId, paramId) {
-		return (await this._sendAndReceive(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId]))[0];
-	}
-
-	setTempo (bpm) {
-		this._send(ANode.TEMPO, [], [bpm]);
-	}
-
-	setStripGain (stripId, db) {
-		this._send(ANode.STRIP_GAIN, [stripId], [db]);
-	}
-
-	setStripPan (stripId, value) {
-		this._send(ANode.STRIP_PAN, [stripId], [value]);
-	}
-
-	setStripMute (stripId, value) {
-		this._send(ANode.STRIP_MUTE, [stripId], [value]);
-	}
-
-	setStripPluginEnable (stripId, pluginId, value) {
-		this._send(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId], [value]);
-	}
-
-	setStripPluginParamValue (stripId, pluginId, paramId, value) {
-		this._send(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId], [value]);
-	}
-
 	// Private methods
 
 	_send (node, addr, val) {
 		const msg = new Message(node, addr, val);
-		this._channel.send(msg);
+		this.send(msg);
 		return msg;
 	}
 
@@ -178,3 +103,16 @@ export class Ardour {
 	}
 
 }
+
+export class ArdourClient extends mixin(BaseArdourClient, ControlMixin, MetadataMixin) {}
+
+function mixin (dstClass, ...classes) {
+	for (const srcClass of classes) {
+		for (const methName of Object.getOwnPropertyNames(srcClass.prototype)) {
+			if (methName != 'constructor') {
+				dstClass.prototype[methName] = srcClass.prototype[methName];
+			}
+		}
+	}
+	return dstClass;
+}
diff --git a/share/web_surfaces/shared/callback.js b/share/web_surfaces/shared/callback.js
index 1328f49ffb..a510b118cf 100644
--- a/share/web_surfaces/shared/callback.js
+++ b/share/web_surfaces/shared/callback.js
@@ -16,6 +16,8 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
+ // Example empty callback
+
  export class ArdourCallback {
 
 	onTempo (bpm) {}
diff --git a/share/web_surfaces/shared/control.js b/share/web_surfaces/shared/control.js
new file mode 100644
index 0000000000..19116bf4c7
--- /dev/null
+++ b/share/web_surfaces/shared/control.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright © 2020 Luciano Iam <lucianito@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import { ANode } from './message.js';
+
+// Surface control API over WebSockets
+
+export class ControlMixin {
+
+	async getTempo () {
+		return (await this._sendAndReceive(ANode.TEMPO))[0];
+	}
+	
+	async getStripGain (stripId) {
+		return (await this._sendAndReceive(ANode.STRIP_GAIN, [stripId]))[0];
+	}
+
+	async getStripPan (stripId) {
+		return (await this._sendAndReceive(ANode.STRIP_PAN, [stripId]))[0];
+	}
+
+	async getStripMute (stripId) {
+		return (await this._sendAndReceive(ANode.STRIP_MUTE, [stripId]))[0];
+	}
+
+	async getStripPluginEnable (stripId, pluginId) {
+		return (await this._sendAndReceive(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId]))[0];
+	}
+
+	async getStripPluginParamValue (stripId, pluginId, paramId) {
+		return (await this._sendAndReceive(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId]))[0];
+	}
+
+	setTempo (bpm) {
+		this._send(ANode.TEMPO, [], [bpm]);
+	}
+
+	setStripGain (stripId, db) {
+		this._send(ANode.STRIP_GAIN, [stripId], [db]);
+	}
+
+	setStripPan (stripId, value) {
+		this._send(ANode.STRIP_PAN, [stripId], [value]);
+	}
+
+	setStripMute (stripId, value) {
+		this._send(ANode.STRIP_MUTE, [stripId], [value]);
+	}
+
+	setStripPluginEnable (stripId, pluginId, value) {
+		this._send(ANode.STRIP_PLUGIN_ENABLE, [stripId, pluginId], [value]);
+	}
+
+	setStripPluginParamValue (stripId, pluginId, paramId, value) {
+		this._send(ANode.STRIP_PLUGIN_PARAM_VALUE, [stripId, pluginId, paramId], [value]);
+	}
+
+}
diff --git a/share/web_surfaces/shared/metadata.js b/share/web_surfaces/shared/metadata.js
new file mode 100644
index 0000000000..888476c681
--- /dev/null
+++ b/share/web_surfaces/shared/metadata.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright © 2020 Luciano Iam <lucianito@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+// Surface metadata API over HTTP
+
+export class MetadataMixin {
+
+	async getAvailableSurfaces () {
+		const response = await fetch('/surfaces.json');
+		
+		if (response.status == 200) {
+			return await response.json();
+		} else {
+			throw this._fetchResponseStatusError(response.status);
+		}
+	}
+
+	async getSurfaceManifest () {
+		const response = await fetch('manifest.xml');
+
+		if (response.status == 200) {
+			const manifest = {};
+			const xmlText = await response.text();
+			const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml');
+			
+			for (const child of xmlDoc.children[0].children) {
+				manifest[child.tagName.toLowerCase()] = child.getAttribute('value');
+			}
+
+			return manifest;
+		} else {
+			throw this._fetchResponseStatusError(response.status);
+		}
+	}
+
+}
-- 
cgit v1.2.3