[ui] respect editable in AudioViewer; add `disable` props to input/selector
parent
20b7270197
commit
89332de506
|
@ -102,5 +102,10 @@
|
|||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
{#if audio}
|
||||
<AudioViewer {address} {detail} />
|
||||
<AudioViewer {address} {detail} {editable} />
|
||||
{/if}
|
||||
{#if video}
|
||||
{#if imageLoaded != address}
|
||||
|
|
|
@ -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,6 +267,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if editable}
|
||||
<div class="existControls">
|
||||
<div class="button" on:click={() => currentAnnotation.remove()}>
|
||||
<Icon name="trash" />
|
||||
|
@ -271,6 +276,7 @@
|
|||
<Icon name="check" />
|
||||
</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);
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue