@avs/go 0.13.71745 → 0.13.71758

package/src/avs-go-dataviz.js

@@ -27,7 +27,7 @@ import {Viewer, TransformInteractor, PanInteractor, ZoomRectangleInteractor, Pic
 import {AvsHttpMixin} from './avs-http-mixin.js';
 import {AvsStreamMixin} from './avs-stream-mixin.js';
 import {AvsDataSourceMixin} from './avs-data-source-mixin.js';
-import {LOGO} from './logo.js';
+import {LOGO, CAMERA, PLAY, COPY, RESET, DELETE} from './logo.js';
 import {Euler, Vector3, Quaternion} from 'three';
 
 /**
@@ -82,30 +82,58 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           left: 8px;
           padding: 8px;
           background-color: rgba(128, 128, 128, 0.8);
-          color: white;
           font-size: 10pt;
           border-radius: 8px;
-        }
-        button {
-          padding: 4px 8px;
-          border-radius: 4px;
-          margin-top: 4px;
-        }
-        button:not([disabled]) {
-          cursor: pointer;
+          background:var(--avs-animation-controls-background, rgba(80,80,80,0.75));
+          color:var(--avs-animation-controls-color, #ffffff);
+          font-family:var(--avs-animation-controls-font-family);
+          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
         }
         #animationControlsTitle {
-          font-weight: bold;
           margin-bottom: 8px;
+          font-weight: 700;
         }
-        #animationDelay:not([disabled]) {
+        .btn {
+          padding: 4px;
+          border-radius: 4px;
+          margin: 4px;
+          background:var(--avs-animation-controls-button-background, white);
+          color:var(--avs-animation-controls-button-color, black);
+          display: inline-flex;
+          align-items: center;
+          box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
           cursor: pointer;
+          user-select: none;
+        }
+        .btn.disabled {
+          cursor: default;
+          pointer-events: none;
+          box-shadow: none;
+          background-color: darkgrey;
+          color: grey;
+        }
+        #animationDelay {
+          width: 30px;
+          height: 29px;
+          background:var(--avs-animation-controls-button-background, white);
+          color:var(--avs-animation-controls-button-color, black);
+          border-width: 0;
+          border-radius: 4px;
+          box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
+          margin: 4px;
         }
-        #animationPlay {
-          margin-top: 12px;
+        #animationDelay:disabled {
+          pointer-events: none;
+          box-shadow: none;
+          background-color: darkgrey;
+          color: grey;
         }
-        #animationReset {
-          margin-top: 12px;
+        #animationSnapshotIcon {
+          height: 24px;
+        }
+        #animationSnapshotLabel {
+          margin-left: 4px;
+          height: 16px;
         }
         #sceneImage {
           width:100%;
@@ -133,7 +161,7 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           font-weight:var(--avs-zoom-overlay-font-weight, bold);
           font-style:var(--avs-zoom-overlay-font-style);
         }
-        #tooltip {
+        #tooltip, #animationTooltip {
           position:absolute;
           opacity:0;
           transition:opacity ease 0.3s;
@@ -174,26 +202,23 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
         <div id="dataVizDiv"></div>
         <div id="animationControls">
           <div id="animationControlsTitle">Animation Controls</div>
-          <div id="animationDelayLabel">Snapshot Delay (0s)</div>
-          <div>
-            <input type="range" disabled min="0" max="5" value="0" class="slider" id="animationDelay">
-          </div>
-          <div>
-            <button type="button" id="animationSnapshot">Take Snapshot (0)</button>
-          </div>
-          <div>
-            <button type="button" disabled id="animationPlay">Play Animation</button>
-          </div>
-          <div>
-            <button type="button" disabled id="animationShare">Share Animation</button>
+          <div style="display: flex; justify-content: center">
+            <input type="number" disabled min="1" max="10" value="0" step="1" id="animationDelay" data-tooltip="Frame delay (seconds)">
+            <a class="btn" id="animationSnapshot" data-tooltip="Take snapshot">
+              <div id="animationSnapshotIcon"></div>
+              <div id="animationSnapshotLabel">0</div>
+            </a>
           </div>
-          <div>
-            <button type="button" id="animationReset">Reset Transform</button>
+          <div style="display: flex; justify-content: center">
+            <a class="btn disabled" id="animationPlay" data-tooltip="Play animation"></a>
+            <a class="btn disabled" id="animationCopy" data-tooltip="Copy animation URL to clipboard"></a>
           </div>
-          <div>
-            <button type="button" disabled id="animationClear">Clear Animation</button>
+          <div style="display: flex; justify-content: center">
+            <a class="btn" id="animationReset" data-tooltip="Reset transform"></a>
+            <a class="btn disabled" id="animationClear" data-tooltip="Clear animation"></a>
           </div>
         </div>
+        <div id="animationTooltip"></div>
         <div id="zoomOverlay"></div>
         <div id="spinnerDiv">
           <div id="spinner"></div>
@@ -954,30 +979,36 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
          */
         this.dispatchEvent(new CustomEvent('avs-scene-info', sceneEvent));
 
-        // Set tooltip and zoom overlay style to reversed theme
+        // Set animation controls, tooltip and zoom overlay style to reversed theme
         if (json.sceneInfo.backgroundColor) {
           var col = json.sceneInfo.backgroundColor.match(/[0-9.]+/gi);
-          var bgCol = window.getComputedStyle(this.parentNode, null).getPropertyValue("background-color").trim().match(/[0-9.]+/gi);
+          var bgCol = this.getInheritedBackgroundCol(this.parentNode).trim().match(/[0-9.]+/gi);
           var blendedR = (col[0] * col[3]);
           var blendedG = (col[1] * col[3]);
           var blendedB = (col[2] * col[3]);
-		  if (bgCol) {
-            // In case sceneInfo.backgroundColor is transparent, blend with our parent's background color
+		      if (col[3] == 0) {
+            // In case sceneInfo.backgroundColor is transparent, blend with inherited background color
             blendedR += (bgCol[0] * (1 - col[3]));
             blendedG += (bgCol[1] * (1 - col[3]));
             blendedB += (bgCol[2] * (1 - col[3]));
-		  }
+          }
+          this.$.animationControls.style.color = "var(--avs-animation-controls-color, rgb(" + blendedR + ", " + blendedG + ", " + blendedB + "))";
           this.$.zoomOverlay.style.color = "var(--avs-zoom-overlay-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
           this.$.tooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
+          this.$.animationTooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
         }
         if (json.sceneInfo.color) {
           var col = json.sceneInfo.color.match(/[0-9.]+/gi);
-          this.$.zoomOverlay.style.background = "var(--avs-zoom-overlay-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + "))";
+          this.$.animationControls.style.background = "var(--avs-animation-controls-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
+          this.$.zoomOverlay.style.background = "var(--avs-zoom-overlay-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
           this.$.tooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
+          this.$.animationTooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
         }
         if (json.sceneInfo.fontFamily) {
+          this.$.animationControls.style.fontFamily = "var(--avs-animation-controls-font-family, " + json.sceneInfo.fontFamily + ")";
           this.$.zoomOverlay.style.fontFamily = "var(--avs-zoom-overlay-font-family, " + json.sceneInfo.fontFamily + ")";
           this.$.tooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + json.sceneInfo.fontFamily + ")";
+          this.$.animationTooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + json.sceneInfo.fontFamily + ")";
         }
       }
 
@@ -1041,6 +1072,30 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }
   }
 
+  getInheritedBackgroundCol(el) {
+    var defaultStyle = this.getDefaultBackground();
+
+    var bgCol = window.getComputedStyle(el).backgroundColor;
+    if (bgCol != defaultStyle) {
+      return bgCol;
+    }
+
+    if (!el.parentElement) {
+      return defaultStyle;
+    }
+
+    return this.getInheritedBackgroundCol(el.parentElement);
+  }
+
+  getDefaultBackground() {
+    // have to add to the document in order to use getComputedStyle
+    var div = document.createElement("div");
+    document.head.appendChild(div);
+    var bg = window.getComputedStyle(div).backgroundColor;
+    document.head.removeChild(div);
+    return bg;
+  }
+
   /**
    *
    */
@@ -1495,23 +1550,42 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
           }
         });
 
-        this.$.animationDelay.addEventListener('input', this._handleAnimationDelayChange.bind(this));
+        this.$.animationSnapshotIcon.innerHTML = CAMERA;
+        this.$.animationPlay.innerHTML = PLAY;
+        this.$.animationCopy.innerHTML = COPY;
+        this.$.animationReset.innerHTML = RESET;
+        this.$.animationClear.innerHTML = DELETE;
+
+        this.$.animationDelay.addEventListener('change', this._handleAnimationDelayChange.bind(this));
         this.$.animationSnapshot.addEventListener('click', this._handleAnimationSnapshot.bind(this));
         this.$.animationPlay.addEventListener('click', this.runAnimation.bind(this));
-        this.$.animationShare.addEventListener('click', this._handleAnimationShare.bind(this));
+        this.$.animationCopy.addEventListener('click', this._handleAnimationCopy.bind(this));
         this.$.animationReset.addEventListener('click', this.resetTransform.bind(this));
         this.$.animationClear.addEventListener('click', this._handleAnimationClear.bind(this));
 
+        this.$.animationDelay.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationSnapshot.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationPlay.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationCopy.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationReset.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+        this.$.animationClear.addEventListener('pointermove', this._handlePointerEnterAnimationControl.bind(this));
+
+        this.$.animationDelay.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationSnapshot.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationPlay.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationCopy.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationReset.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+        this.$.animationClear.addEventListener('pointerout', this._handlePointerLeaveAnimationControl.bind(this));
+
         this.animationTime = 0;
         this.transformAnimationFrames ??= [];
         if (this.transformAnimationFrames.length > 0) {
-          this.$.animationDelayLabel.innerHTML = "Snapshot Delay (2s)";
           this.$.animationDelay.value = 2;
           this.$.animationDelay.disabled = false;
-          this.$.animationSnapshot.innerHTML = "Take Snapshot (" + this.transformAnimationFrames.length + ")";
-          this.$.animationPlay.disabled = false;
-          this.$.animationShare.disabled = false;
-          this.$.animationClear.disabled = false;
+          this.$.animationSnapshotLabel.innerHTML = this.transformAnimationFrames.length;
+          this.$.animationPlay.classList.remove("disabled");
+          this.$.animationCopy.classList.remove("disabled");
+          this.$.animationClear.classList.remove("disabled");
           this.animationTime = this.transformAnimationFrames[this.transformAnimationFrames.length - 1].time / 1000;
         }
 
@@ -1522,13 +1596,37 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     }); 
   }
 
+  _handlePointerEnterAnimationControl(e) {
+    if (!this.showAnimationTooltip) {
+      var adjustedCoords = this._getAdjustedCoords(e.clientX, e.clientY);
+      var pos = this._calcTooltipPosition(adjustedCoords.x, adjustedCoords.y);
+      this.$.animationTooltip.style.left = pos.x + "px";
+      this.$.animationTooltip.style.top = pos.y + "px";
+      this.$.animationTooltip.style.opacity = 1;
+      this.$.animationTooltip.innerHTML = e.currentTarget.dataset.tooltip ?? e.currentTarget.id;
+      this.showAnimationTooltip = true;
+    }
+  }
+
+  _handlePointerLeaveAnimationControl() {
+    this.$.animationTooltip.style.opacity = 0;
+    this.showAnimationTooltip = false;
+  }
+
   _round2dp(n) {
     return Math.round((n + Number.EPSILON) * 100) / 100;
   }
 
   _handleAnimationDelayChange() {
-    const delay = this.$.animationDelay.value;
-    this.$.animationDelayLabel.innerHTML = "Snapshot Delay (" + delay + "s)";
+    let delay = Number(this.$.animationDelay.value);
+    if (delay < 1) {
+      delay = 1;
+      this.$.animationDelay.value = delay;
+    }
+    if (delay > 10) {
+      delay = 10;
+      this.$.animationDelay.value = delay;
+    }
   }
 
   _handleAnimationSnapshot() {
@@ -1551,29 +1649,27 @@ export class AvsGoDataViz extends AvsDataSourceMixin(AvsStreamMixin(AvsHttpMixin
     this.transformAnimationFrames.push(frame);
 
     if (this.transformAnimationFrames.length == 1) {
-      this.$.animationDelayLabel.innerHTML = "Snapshot Delay (2s)";
       this.$.animationDelay.value = 2;
       this.$.animationDelay.disabled = false;
-      this.$.animationPlay.disabled = false;
-      this.$.animationShare.disabled = false;
-      this.$.animationClear.disabled = false;
+      this.$.animationPlay.classList.remove("disabled");
+      this.$.animationCopy.classList.remove("disabled");
+      this.$.animationClear.classList.remove("disabled");
     }
-    this.$.animationSnapshot.innerHTML = "Take Snapshot (" + this.transformAnimationFrames.length + ")";
+    this.$.animationSnapshotLabel.innerHTML = this.transformAnimationFrames.length;
   }
 
   _handleAnimationClear() {
     this.transformAnimationFrames.length = 0;
-    this.$.animationDelayLabel.innerHTML = "Snapshot Delay (0s)";
     this.$.animationDelay.value = 0;
     this.$.animationDelay.disabled = true;
-    this.$.animationSnapshot.innerHTML = "Take Snapshot (0)";
-    this.$.animationPlay.disabled = true;
-    this.$.animationShare.disabled = true;
-    this.$.animationClear.disabled = true;
+    this.$.animationSnapshotLabel.innerHTML = "0";
+    this.$.animationPlay.classList.add("disabled");
+    this.$.animationCopy.classList.add("disabled");
+    this.$.animationClear.classList.add("disabled");
     this.animationTime = 0;
   }
 
-  _handleAnimationShare() {
+  _handleAnimationCopy() {
     const json = JSON.stringify(this.transformAnimationFrames);
     const encoded = btoa(json);
 

package/src/constants.js

@@ -18,4 +18,4 @@
  * Advanced Visual Systems Inc. (http://www.avs.com)
  */
 
-export var VERSION = '0.13.71745';
+export var VERSION = '0.13.71758';

package/src/logo.js

@@ -18,4 +18,10 @@
  * Advanced Visual Systems Inc. (http://www.avs.com)
  */
 
-export var LOGO = "<svg viewBox=\"0 0 12.170833 12.170834\" height=\"46\" width=\"46\"><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\" style=\"display:inline;fill:#2e8cbd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0598462\" id=\"path22\" /><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\"  style=\"fill:none;stroke:#2e8cbd;stroke-width:0.179539;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1\" id=\"path26\" /><g id=\"g78\" class=\"spinnerBackground\"><path d=\"M 5.0916012,7.2951741 C 4.5581951,6.6568 4.1217726,6.1273448 4.1217726,6.1186069 c 0,-0.022412 1.9511841,-2.3603376 1.9654853,-2.3550616 0.00645,0.00237 0.4481639,0.5337638 0.981573,1.1808488 L 8.0386633,6.1209126 7.7794202,6.4289493 C 7.6368389,6.5983701 7.1955674,7.1235887 6.7988191,7.5961017 6.4020707,8.0686158 6.0738528,8.4553619 6.0694438,8.4555369 6.0650388,8.4557059 5.6250056,7.9335497 5.0916012,7.2951741 Z\" id=\"path39\" /><path d=\"M 5.5264617,9.7764122 C 5.5385577,9.7616559 6.2319291,8.9374956 7.0672769,7.9449584 7.9026265,6.9524246 8.5861155,6.1329723 8.5861409,6.1239554 8.5861681,6.1149485 8.0879549,5.5032753 7.4789997,4.7647 6.8700453,4.0261248 6.3741103,3.4156149 6.3769213,3.4080117 6.3797713,3.4004117 6.562373,3.1774787 6.7827896,2.9126121 7.164399,2.4540426 7.1848936,2.4323657 7.2117806,2.4588741 7.2273026,2.4741751 7.9274525,3.3048587 8.767655,4.3048177 L 10.295296,6.1229243 9.4136171,7.1736012 C 8.9286921,7.751474 8.2336861,8.5795488 7.8691565,9.0137659 L 7.2063776,9.8032561 H 6.3554188 c -0.7939025,0 -0.8494825,-0.00179 -0.8289571,-0.026839 z\" id=\"path41\" /><path d=\"M 3.4382986,7.9881037 C 2.6063322,7.0074024 1.9089456,6.1852746 1.8885531,6.1611518 L 1.8514763,6.1172937 4.2262773,3.2714352 6.6010789,0.42557499 H 7.4490822 8.2970851 L 7.0763447,1.8883334 c -3.0218884,3.6209928 -3.5158893,4.2139972 -3.519859,4.2252855 -0.00231,0.00662 0.4954141,0.6094855 1.1060858,1.3397178 0.6106728,0.7302338 1.1103133,1.3348316 1.1103133,1.3435515 0,0.017734 -0.7956667,0.9718373 -0.8117152,0.9733472 -0.00562,5.108e-4 -0.6909038,-0.80143 -1.522871,-1.7821306 z\" id=\"path43\" /></g></svg>";
+export var LOGO = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"46px\" viewBox=\"0 0 12.170833 12.170834\" width=\"46px\"><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\" style=\"display:inline;fill:#2e8cbd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0598462\" id=\"path22\" /><path d=\"M 7.2486073,9.9076469 H 5.2849946 L 8.4704866,6.123394 6.2360101,3.4130208 7.1885217,2.271515 10.424524,6.122616 Z M 6.0677825,8.6164059 3.9785527,6.1181874 6.0843599,3.5947138 8.1676051,6.1217782 Z M 1.7215741,6.1177086 6.5503222,0.33124232 H 8.5047186 L 3.6754319,6.1184268 5.9155339,8.7972611 4.958833,9.9337997 Z M 7.3399924,2.0900614 9.0019205,0.09856041 H 6.441462 L 1.4175556,6.1188457 4.7994028,10.140329 H 7.3569887 L 10.728423,6.122616 Z\"  style=\"fill:none;stroke:#2e8cbd;stroke-width:0.179539;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1\" id=\"path26\" /><g id=\"g78\" class=\"spinnerBackground\"><path d=\"M 5.0916012,7.2951741 C 4.5581951,6.6568 4.1217726,6.1273448 4.1217726,6.1186069 c 0,-0.022412 1.9511841,-2.3603376 1.9654853,-2.3550616 0.00645,0.00237 0.4481639,0.5337638 0.981573,1.1808488 L 8.0386633,6.1209126 7.7794202,6.4289493 C 7.6368389,6.5983701 7.1955674,7.1235887 6.7988191,7.5961017 6.4020707,8.0686158 6.0738528,8.4553619 6.0694438,8.4555369 6.0650388,8.4557059 5.6250056,7.9335497 5.0916012,7.2951741 Z\" id=\"path39\" /><path d=\"M 5.5264617,9.7764122 C 5.5385577,9.7616559 6.2319291,8.9374956 7.0672769,7.9449584 7.9026265,6.9524246 8.5861155,6.1329723 8.5861409,6.1239554 8.5861681,6.1149485 8.0879549,5.5032753 7.4789997,4.7647 6.8700453,4.0261248 6.3741103,3.4156149 6.3769213,3.4080117 6.3797713,3.4004117 6.562373,3.1774787 6.7827896,2.9126121 7.164399,2.4540426 7.1848936,2.4323657 7.2117806,2.4588741 7.2273026,2.4741751 7.9274525,3.3048587 8.767655,4.3048177 L 10.295296,6.1229243 9.4136171,7.1736012 C 8.9286921,7.751474 8.2336861,8.5795488 7.8691565,9.0137659 L 7.2063776,9.8032561 H 6.3554188 c -0.7939025,0 -0.8494825,-0.00179 -0.8289571,-0.026839 z\" id=\"path41\" /><path d=\"M 3.4382986,7.9881037 C 2.6063322,7.0074024 1.9089456,6.1852746 1.8885531,6.1611518 L 1.8514763,6.1172937 4.2262773,3.2714352 6.6010789,0.42557499 H 7.4490822 8.2970851 L 7.0763447,1.8883334 c -3.0218884,3.6209928 -3.5158893,4.2139972 -3.519859,4.2252855 -0.00231,0.00662 0.4954141,0.6094855 1.1060858,1.3397178 0.6106728,0.7302338 1.1103133,1.3348316 1.1103133,1.3435515 0,0.017734 -0.7956667,0.9718373 -0.8117152,0.9733472 -0.00562,5.108e-4 -0.6909038,-0.80143 -1.522871,-1.7821306 z\" id=\"path43\" /></g></svg>";
+
+export var CAMERA = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h4.05l1.83-2h4.24l1.83 2H20v12zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z\"/></svg>";
+export var PLAY = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z\"/></svg>";
+export var COPY = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>";
+export var RESET = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z\"/></g></svg>";
+export var DELETE = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"/></svg>";