[ui] respect editable in AudioViewer; add `disable` props to input/selector

webui/src/App.svelte

@@ -102,5 +102,10 @@
     input {
       display: none;
     }
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.7;
+    }
   }
 </style>

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}

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);

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>
 

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}