From 89332de5064140754e32e280b617689bfe1fb12e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 10 Mar 2022 20:35:29 +0100
Subject: [PATCH] [ui] respect editable in AudioViewer; add `disable` props to
 input/selector

---
 webui/src/App.svelte                          |  5 +++++
 .../src/components/display/BlobPreview.svelte |  2 +-
 .../display/blobs/AudioViewer.svelte          | 21 ++++++++++++-------
 webui/src/components/utils/Input.svelte       |  2 ++
 webui/src/components/utils/Selector.svelte    |  2 ++
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/webui/src/App.svelte b/webui/src/App.svelte
index 52ce456..8b40db2 100644
--- a/webui/src/App.svelte
+++ b/webui/src/App.svelte
@@ -102,5 +102,10 @@
     input {
       display: none;
     }
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.7;
+    }
   }
 </style>
diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 45e437f..021b75f 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -44,7 +44,7 @@
       </div>
     {/if}
     {#if audio}
-      <AudioViewer {address} {detail} />
+      <AudioViewer {address} {detail} {editable} />
     {/if}
     {#if video}
       {#if imageLoaded != address}
diff --git a/webui/src/components/display/blobs/AudioViewer.svelte b/webui/src/components/display/blobs/AudioViewer.svelte
index de0b0e5..bff095d 100644
--- a/webui/src/components/display/blobs/AudioViewer.svelte
+++ b/webui/src/components/display/blobs/AudioViewer.svelte
@@ -16,6 +16,7 @@
 
   export let address: string;
   export let detail: boolean;
+  export let editable: boolean;
 
   let containerEl: HTMLDivElement;
   let timelineEl: HTMLDivElement;
@@ -95,7 +96,7 @@
   }
 
   $: if (wavesurfer) {
-    if (detail) {
+    if (editable) {
       wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
     } else {
       wavesurfer.disableDragSelection();
@@ -232,6 +233,7 @@
             Start: <input
               type="number"
               value={Math.round(currentAnnotation.start * 100) / 100}
+              disabled={!editable}
               on:input={(ev) => {
                 currentAnnotation.update({
                   start: parseInt(ev.currentTarget.value),
@@ -244,6 +246,7 @@
             End: <input
               type="number"
               value={Math.round(currentAnnotation.end * 100) / 100}
+              disabled={!editable}
               on:input={(ev) => {
                 currentAnnotation.update({
                   end: parseInt(ev.currentTarget.value),
@@ -256,6 +259,7 @@
             Color: <input
               type="color"
               value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
+              disabled={!editable}
               on:input={(ev) => {
                 currentAnnotation.update({ color: ev.currentTarget.value });
                 updateAnnotation(currentAnnotation);
@@ -263,14 +267,16 @@
             />
           </div>
         </div>
-        <div class="existControls">
-          <div class="button" on:click={() => currentAnnotation.remove()}>
-            <Icon name="trash" />
-          </div>
-          <!-- <div class="button">
+        {#if editable}
+          <div class="existControls">
+            <div class="button" on:click={() => currentAnnotation.remove()}>
+              <Icon name="trash" />
+            </div>
+            <!-- <div class="button">
             <Icon name="check" />
           </div> -->
-        </div>
+          </div>
+        {/if}
       </div>
       <div class="content">
         {#key currentAnnotation}
@@ -278,6 +284,7 @@
             type="value"
             valueTypes={["String"]}
             value={currentAnnotation.data}
+            disabled={!editable}
             on:input={(ev) => {
               currentAnnotation.update({ data: ev.detail });
               updateAnnotation(currentAnnotation);
diff --git a/webui/src/components/utils/Input.svelte b/webui/src/components/utils/Input.svelte
index 45044b8..d206ca9 100644
--- a/webui/src/components/utils/Input.svelte
+++ b/webui/src/components/utils/Input.svelte
@@ -5,6 +5,7 @@
 
   export let placeholder = "";
   export let value = "";
+  export let disabled = false;
 
   let focused = false;
   $: dispatch("focusChange", focused);
@@ -22,6 +23,7 @@
     on:input={onInput}
     on:focus={() => (focused = true)}
     on:blur={() => (focused = false)}
+    {disabled}
   />
 </div>
 
diff --git a/webui/src/components/utils/Selector.svelte b/webui/src/components/utils/Selector.svelte
index f7cbfba..b0db64a 100644
--- a/webui/src/components/utils/Selector.svelte
+++ b/webui/src/components/utils/Selector.svelte
@@ -18,6 +18,7 @@
   export let type: "attribute" | "value";
   export let valueTypes: VALUE_TYPE[] | undefined = undefined;
   export let placeholder = "";
+  export let disabled = false;
 
   let inputValue = "";
   if (type == "attribute") {
@@ -194,6 +195,7 @@
       bind:value={inputValue}
       on:input={onInput}
       on:focusChange={(ev) => (inputFocused = ev.detail)}
+      {disabled}
       {placeholder}
     />
   {/if}