[ui] respect editable in AudioViewer; add `disable` props to input/selector
parent
20b7270197
commit
89332de506
|
@ -102,5 +102,10 @@
|
||||||
input {
|
input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if audio}
|
{#if audio}
|
||||||
<AudioViewer {address} {detail} />
|
<AudioViewer {address} {detail} {editable} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if video}
|
{#if video}
|
||||||
{#if imageLoaded != address}
|
{#if imageLoaded != address}
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let detail: boolean;
|
export let detail: boolean;
|
||||||
|
export let editable: boolean;
|
||||||
|
|
||||||
let containerEl: HTMLDivElement;
|
let containerEl: HTMLDivElement;
|
||||||
let timelineEl: HTMLDivElement;
|
let timelineEl: HTMLDivElement;
|
||||||
|
@ -95,7 +96,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (wavesurfer) {
|
$: if (wavesurfer) {
|
||||||
if (detail) {
|
if (editable) {
|
||||||
wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
|
wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
|
||||||
} else {
|
} else {
|
||||||
wavesurfer.disableDragSelection();
|
wavesurfer.disableDragSelection();
|
||||||
|
@ -232,6 +233,7 @@
|
||||||
Start: <input
|
Start: <input
|
||||||
type="number"
|
type="number"
|
||||||
value={Math.round(currentAnnotation.start * 100) / 100}
|
value={Math.round(currentAnnotation.start * 100) / 100}
|
||||||
|
disabled={!editable}
|
||||||
on:input={(ev) => {
|
on:input={(ev) => {
|
||||||
currentAnnotation.update({
|
currentAnnotation.update({
|
||||||
start: parseInt(ev.currentTarget.value),
|
start: parseInt(ev.currentTarget.value),
|
||||||
|
@ -244,6 +246,7 @@
|
||||||
End: <input
|
End: <input
|
||||||
type="number"
|
type="number"
|
||||||
value={Math.round(currentAnnotation.end * 100) / 100}
|
value={Math.round(currentAnnotation.end * 100) / 100}
|
||||||
|
disabled={!editable}
|
||||||
on:input={(ev) => {
|
on:input={(ev) => {
|
||||||
currentAnnotation.update({
|
currentAnnotation.update({
|
||||||
end: parseInt(ev.currentTarget.value),
|
end: parseInt(ev.currentTarget.value),
|
||||||
|
@ -256,6 +259,7 @@
|
||||||
Color: <input
|
Color: <input
|
||||||
type="color"
|
type="color"
|
||||||
value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
|
value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
|
||||||
|
disabled={!editable}
|
||||||
on:input={(ev) => {
|
on:input={(ev) => {
|
||||||
currentAnnotation.update({ color: ev.currentTarget.value });
|
currentAnnotation.update({ color: ev.currentTarget.value });
|
||||||
updateAnnotation(currentAnnotation);
|
updateAnnotation(currentAnnotation);
|
||||||
|
@ -263,14 +267,16 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="existControls">
|
{#if editable}
|
||||||
<div class="button" on:click={() => currentAnnotation.remove()}>
|
<div class="existControls">
|
||||||
<Icon name="trash" />
|
<div class="button" on:click={() => currentAnnotation.remove()}>
|
||||||
</div>
|
<Icon name="trash" />
|
||||||
<!-- <div class="button">
|
</div>
|
||||||
|
<!-- <div class="button">
|
||||||
<Icon name="check" />
|
<Icon name="check" />
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{#key currentAnnotation}
|
{#key currentAnnotation}
|
||||||
|
@ -278,6 +284,7 @@
|
||||||
type="value"
|
type="value"
|
||||||
valueTypes={["String"]}
|
valueTypes={["String"]}
|
||||||
value={currentAnnotation.data}
|
value={currentAnnotation.data}
|
||||||
|
disabled={!editable}
|
||||||
on:input={(ev) => {
|
on:input={(ev) => {
|
||||||
currentAnnotation.update({ data: ev.detail });
|
currentAnnotation.update({ data: ev.detail });
|
||||||
updateAnnotation(currentAnnotation);
|
updateAnnotation(currentAnnotation);
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
export let placeholder = "";
|
export let placeholder = "";
|
||||||
export let value = "";
|
export let value = "";
|
||||||
|
export let disabled = false;
|
||||||
|
|
||||||
let focused = false;
|
let focused = false;
|
||||||
$: dispatch("focusChange", focused);
|
$: dispatch("focusChange", focused);
|
||||||
|
@ -22,6 +23,7 @@
|
||||||
on:input={onInput}
|
on:input={onInput}
|
||||||
on:focus={() => (focused = true)}
|
on:focus={() => (focused = true)}
|
||||||
on:blur={() => (focused = false)}
|
on:blur={() => (focused = false)}
|
||||||
|
{disabled}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
export let type: "attribute" | "value";
|
export let type: "attribute" | "value";
|
||||||
export let valueTypes: VALUE_TYPE[] | undefined = undefined;
|
export let valueTypes: VALUE_TYPE[] | undefined = undefined;
|
||||||
export let placeholder = "";
|
export let placeholder = "";
|
||||||
|
export let disabled = false;
|
||||||
|
|
||||||
let inputValue = "";
|
let inputValue = "";
|
||||||
if (type == "attribute") {
|
if (type == "attribute") {
|
||||||
|
@ -194,6 +195,7 @@
|
||||||
bind:value={inputValue}
|
bind:value={inputValue}
|
||||||
on:input={onInput}
|
on:input={onInput}
|
||||||
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
||||||
|
{disabled}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in New Issue