mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Improve source selection UX (#6766)
* Add new source option styling for pasting from clipboard Use SourceSelect in Image component * prevent device selection cut off tweak source selection ux * Check for dupe sources in source selection Set sources[0] to active_source in Image * tweaks * tweak * add image interaction test * more tests * improve light/dark mode color contrast * add changeset * remove unused prop * add no device found placeholder change T<sources> -> T<source_types> * style tweak * allow pasting on click + add e2e test * fix e2e tests * formatting * add timeout to e2e test * tweak * tweak test * change `getByLabel` to `getByText` * value tweak * logic tweak * test * formatting --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Hannah
GitHub
parent
16c0e4015c
commit
73268ee2e3
11
.changeset/strong-files-swim.md
Normal file
11
.changeset/strong-files-swim.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
"@gradio/app": patch
|
||||
"@gradio/atoms": patch
|
||||
"@gradio/audio": patch
|
||||
"@gradio/image": patch
|
||||
"@gradio/upload": patch
|
||||
"@gradio/video": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
fix:Improve source selection UX
|
||||
@ -48,7 +48,8 @@
|
||||
"remove": "Remove",
|
||||
"share": "Share",
|
||||
"submit": "Submit",
|
||||
"undo": "Undo"
|
||||
"undo": "Undo",
|
||||
"no_devices": "No devices found"
|
||||
},
|
||||
"dataframe": {
|
||||
"incorrect_format": "Incorrect format, only CSV and TSV files are supported",
|
||||
@ -110,6 +111,7 @@
|
||||
"drop_csv": "Drop CSV Here",
|
||||
"drop_file": "Drop File Here",
|
||||
"drop_image": "Drop Image Here",
|
||||
"drop_video": "Drop Video Here"
|
||||
"drop_video": "Drop Video Here",
|
||||
"paste_clipboard": "Paste from Clipboard"
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,33 @@ test("Image copy from clipboard dispatches upload event.", async ({ page }) => {
|
||||
navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
|
||||
});
|
||||
|
||||
await page.getByLabel("clipboard-image-toolbar-btn").click();
|
||||
await page.getByLabel("Paste from clipboard").click();
|
||||
await Promise.all([
|
||||
page.waitForResponse(
|
||||
(resp) => resp.url().includes("/clipboard.png") && resp.status() === 200
|
||||
)
|
||||
]);
|
||||
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
|
||||
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
|
||||
});
|
||||
|
||||
test("Image paste to clipboard via the Upload component works", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.evaluate(async () => {
|
||||
navigator.clipboard.writeText("123");
|
||||
});
|
||||
|
||||
await page.getByLabel("Paste from clipboard").click();
|
||||
await page.evaluate(async () => {
|
||||
const blob = await (
|
||||
await fetch(
|
||||
`https://gradio-builds.s3.amazonaws.com/assets/PDFDisplay.png`
|
||||
)
|
||||
).blob();
|
||||
navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
|
||||
});
|
||||
|
||||
await page.getByText("Paste from clipboard").click();
|
||||
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
|
||||
});
|
||||
|
||||
@ -3,9 +3,7 @@ import { test, expect, drag_and_drop_file } from "@gradio/tootils";
|
||||
test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly. Downloading the file works and has the correct name.", async ({
|
||||
page
|
||||
}) => {
|
||||
await page
|
||||
.getByRole("button", { name: "Drop Video Here - or - Click to Upload" })
|
||||
.click();
|
||||
await page.getByRole("button", { name: "Upload file" }).click();
|
||||
const uploader = await page.locator("input[type=file]");
|
||||
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
|
||||
|
||||
@ -14,9 +12,7 @@ test("Video click-to-upload uploads video successfuly. Clear, play, and pause bu
|
||||
|
||||
await page.getByLabel("Clear").click();
|
||||
await expect(page.getByLabel("# Change Events")).toHaveValue("2");
|
||||
await page
|
||||
.getByRole("button", { name: "Drop Video Here - or - Click to Upload" })
|
||||
.click();
|
||||
await page.getByRole("button", { name: "Upload file" }).click();
|
||||
|
||||
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
|
||||
|
||||
@ -30,9 +26,7 @@ test("Video click-to-upload uploads video successfuly. Clear, play, and pause bu
|
||||
});
|
||||
|
||||
test("Video play, pause events work correctly.", async ({ page }) => {
|
||||
await page
|
||||
.getByRole("button", { name: "Drop Video Here - or - Click to Upload" })
|
||||
.click();
|
||||
await page.getByLabel("Upload file").click();
|
||||
const uploader = await page.locator("input[type=file]");
|
||||
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
|
||||
|
||||
@ -48,6 +42,7 @@ test("Video play, pause events work correctly.", async ({ page }) => {
|
||||
test("Video drag-and-drop uploads a file to the server correctly.", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.getByLabel("Upload file").click();
|
||||
await drag_and_drop_file(
|
||||
page,
|
||||
"input[type=file]",
|
||||
@ -62,6 +57,7 @@ test("Video drag-and-drop uploads a file to the server correctly.", async ({
|
||||
test("Video drag-and-drop displays a warning when the file is of the wrong mime type.", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.getByLabel("Upload file").click();
|
||||
await drag_and_drop_file(
|
||||
page,
|
||||
"input[type=file]",
|
||||
|
||||
@ -1,22 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { Microphone, Upload, Video } from "@gradio/icons";
|
||||
import { Microphone, Upload, Webcam, ImagePaste } from "@gradio/icons";
|
||||
|
||||
export let sources: string[];
|
||||
export let active_source: string;
|
||||
type source_types = "upload" | "microphone" | "webcam" | "clipboard" | null;
|
||||
|
||||
export let sources: Partial<source_types>[];
|
||||
export let active_source: Partial<source_types>;
|
||||
export let handle_clear: () => void = () => {};
|
||||
export let handle_select: (
|
||||
source_type: Partial<source_types>
|
||||
) => void = () => {};
|
||||
|
||||
$: unique_sources = [...new Set(sources)];
|
||||
|
||||
async function handle_select_source(
|
||||
source: Partial<source_types>
|
||||
): Promise<void> {
|
||||
handle_clear();
|
||||
active_source = source;
|
||||
handle_select(source);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if sources.length > 1}
|
||||
{#if unique_sources.length > 1}
|
||||
<span class="source-selection" data-testid="source-select">
|
||||
{#if sources.includes("upload")}
|
||||
<button
|
||||
class="icon"
|
||||
class:selected={active_source === "upload"}
|
||||
class:selected={active_source === "upload" || !active_source}
|
||||
aria-label="Upload file"
|
||||
on:click={() => {
|
||||
handle_clear();
|
||||
active_source = "upload";
|
||||
}}><Upload /></button
|
||||
on:click={() => handle_select_source("upload")}><Upload /></button
|
||||
>
|
||||
{/if}
|
||||
|
||||
@ -25,10 +37,8 @@
|
||||
class="icon"
|
||||
class:selected={active_source === "microphone"}
|
||||
aria-label="Record audio"
|
||||
on:click={() => {
|
||||
handle_clear();
|
||||
active_source = "microphone";
|
||||
}}><Microphone /></button
|
||||
on:click={() => handle_select_source("microphone")}
|
||||
><Microphone /></button
|
||||
>
|
||||
{/if}
|
||||
|
||||
@ -36,11 +46,17 @@
|
||||
<button
|
||||
class="icon"
|
||||
class:selected={active_source === "webcam"}
|
||||
aria-label="Record video"
|
||||
on:click={() => {
|
||||
handle_clear();
|
||||
active_source = "webcam";
|
||||
}}><Video /></button
|
||||
aria-label="Capture from camera"
|
||||
on:click={() => handle_select_source("webcam")}><Webcam /></button
|
||||
>
|
||||
{/if}
|
||||
{#if sources.includes("clipboard")}
|
||||
<button
|
||||
class="icon"
|
||||
class:selected={active_source === "clipboard"}
|
||||
aria-label="Paste from clipboard"
|
||||
on:click={() => handle_select_source("clipboard")}
|
||||
><ImagePaste /></button
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
@ -58,7 +74,6 @@
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { I18nFormatter } from "@gradio/utils";
|
||||
import { Upload as UploadIcon } from "@gradio/icons";
|
||||
export let type: "video" | "image" | "audio" | "file" | "csv" = "file";
|
||||
import { Upload as UploadIcon, ImagePaste } from "@gradio/icons";
|
||||
export let type: "video" | "image" | "audio" | "file" | "csv" | "clipboard" =
|
||||
"file";
|
||||
export let i18n: I18nFormatter;
|
||||
export let message: string | undefined = undefined;
|
||||
export let mode: "full" | "short" = "full";
|
||||
@ -12,12 +13,19 @@
|
||||
video: "upload_text.drop_video",
|
||||
audio: "upload_text.drop_audio",
|
||||
file: "upload_text.drop_file",
|
||||
csv: "upload_text.drop_csv"
|
||||
csv: "upload_text.drop_csv",
|
||||
clipboard: "upload_text.paste_clipboard"
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="wrap">
|
||||
<span class="icon-wrap" class:hovered><UploadIcon /> </span>
|
||||
<span class="icon-wrap" class:hovered>
|
||||
{#if type === "clipboard"}
|
||||
<ImagePaste />
|
||||
{:else}
|
||||
<UploadIcon />
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{i18n(defs[type] || defs.file)}
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
|
||||
let dragging: boolean;
|
||||
|
||||
$: if (sources) {
|
||||
$: if (!active_source && sources) {
|
||||
active_source = sources[0];
|
||||
}
|
||||
|
||||
|
||||
@ -249,7 +249,6 @@
|
||||
bind:dragging
|
||||
on:error={({ detail }) => dispatch("error", detail)}
|
||||
{root}
|
||||
include_sources={sources.length > 1}
|
||||
>
|
||||
<slot />
|
||||
</Upload>
|
||||
|
||||
@ -1,25 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import StaticImage from "./Index.svelte";
|
||||
import { userEvent, within } from "@storybook/testing-library";
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Components/Image"
|
||||
component={Image}
|
||||
argTypes={{
|
||||
value: {
|
||||
control: "object",
|
||||
description: "The image URL or file to display",
|
||||
name: "value"
|
||||
},
|
||||
show_download_button: {
|
||||
options: [true, false],
|
||||
description: "If false, the download button will not be visible",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Meta title="Components/Image" component={Image} />
|
||||
|
||||
<Template let:args>
|
||||
<div
|
||||
@ -31,7 +16,7 @@
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Static Image with label and download button"
|
||||
name="static with label and download button"
|
||||
args={{
|
||||
value: {
|
||||
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
||||
@ -44,7 +29,7 @@
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Static Image with no label or download button"
|
||||
name="static with no label or download button"
|
||||
args={{
|
||||
value: {
|
||||
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
||||
@ -55,3 +40,47 @@
|
||||
show_download_button: false
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="interactive with upload, clipboard, and webcam"
|
||||
args={{
|
||||
sources: ["upload", "clipboard", "webcam"],
|
||||
value: {
|
||||
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
||||
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
||||
orig_name: "cheetah.jpg"
|
||||
},
|
||||
show_label: false,
|
||||
show_download_button: false,
|
||||
interactive: true
|
||||
}}
|
||||
play={async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const webcamButton = await canvas.findByLabelText("Capture from camera");
|
||||
userEvent.click(webcamButton);
|
||||
|
||||
userEvent.click(await canvas.findByTitle("select video source"));
|
||||
userEvent.click(await canvas.findByLabelText("select source"));
|
||||
userEvent.click(await canvas.findByLabelText("Upload file"));
|
||||
userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="interactive with webcam"
|
||||
args={{
|
||||
sources: ["webcam"],
|
||||
show_download_button: true,
|
||||
interactive: true
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="interactive with clipboard"
|
||||
args={{
|
||||
sources: ["clipboard"],
|
||||
show_download_button: true,
|
||||
interactive: true
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
import type { LoadingStatus } from "@gradio/statustracker";
|
||||
import { normalise_file } from "@gradio/client";
|
||||
|
||||
type sources = "upload" | "webcam" | "clipboard" | null;
|
||||
|
||||
export let elem_id = "";
|
||||
export let elem_classes: string[] = [];
|
||||
export let visible = true;
|
||||
@ -66,7 +68,7 @@
|
||||
$: url && gradio.dispatch("change");
|
||||
|
||||
let dragging: boolean;
|
||||
let active_tool: null | "webcam" = null;
|
||||
let active_source: sources = null;
|
||||
</script>
|
||||
|
||||
{#if !interactive}
|
||||
@ -124,7 +126,7 @@
|
||||
/>
|
||||
|
||||
<ImageUploader
|
||||
bind:active_tool
|
||||
bind:active_source
|
||||
bind:value
|
||||
selectable={_selectable}
|
||||
{root}
|
||||
@ -144,8 +146,6 @@
|
||||
loading_status.status = "error";
|
||||
gradio.dispatch("error", detail);
|
||||
}}
|
||||
on:click={() => gradio.dispatch("error", "bad thing happened")}
|
||||
on:error
|
||||
{label}
|
||||
{show_label}
|
||||
{pending}
|
||||
@ -153,8 +153,10 @@
|
||||
{mirror_webcam}
|
||||
i18n={gradio.i18n}
|
||||
>
|
||||
{#if sources.includes("upload")}
|
||||
<UploadText i18n={gradio.i18n} type="image" mode="short" />
|
||||
{#if active_source === "upload" || !active_source}
|
||||
<UploadText i18n={gradio.i18n} type="image" />
|
||||
{:else if active_source === "clipboard"}
|
||||
<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
|
||||
{:else}
|
||||
<Empty unpadded_box={true} size="large"><Image /></Empty>
|
||||
{/if}
|
||||
|
||||
@ -4,28 +4,21 @@
|
||||
import { Image as ImageIcon } from "@gradio/icons";
|
||||
import type { SelectData, I18nFormatter } from "@gradio/utils";
|
||||
import { get_coordinates_of_clicked_image } from "./utils";
|
||||
import {
|
||||
Webcam as WebcamIcon,
|
||||
ImagePaste,
|
||||
Upload as UploadIcon
|
||||
} from "@gradio/icons";
|
||||
import Webcam from "./Webcam.svelte";
|
||||
import { Toolbar, IconButton } from "@gradio/atoms";
|
||||
|
||||
import { Upload } from "@gradio/upload";
|
||||
import { type FileData, normalise_file } from "@gradio/client";
|
||||
import ClearImage from "./ClearImage.svelte";
|
||||
import { SelectSource } from "@gradio/atoms";
|
||||
import Image from "./Image.svelte";
|
||||
|
||||
export let value: null | FileData;
|
||||
export let label: string | undefined = undefined;
|
||||
export let show_label: boolean;
|
||||
|
||||
export let sources: ("clipboard" | "webcam" | "upload")[] = [
|
||||
"upload",
|
||||
"clipboard",
|
||||
"webcam"
|
||||
];
|
||||
type source_type = "upload" | "webcam" | "clipboard" | "microphone" | null;
|
||||
|
||||
export let sources: source_type[] = ["upload", "clipboard", "webcam"];
|
||||
export let streaming = false;
|
||||
export let pending = false;
|
||||
export let mirror_webcam: boolean;
|
||||
@ -35,19 +28,24 @@
|
||||
|
||||
let upload: Upload;
|
||||
let uploading = false;
|
||||
export let active_tool: "webcam" | null = null;
|
||||
export let active_source: source_type = null;
|
||||
|
||||
function handle_upload({ detail }: CustomEvent<FileData>): void {
|
||||
value = normalise_file(detail, root, null);
|
||||
dispatch("upload");
|
||||
}
|
||||
|
||||
function handle_clear(): void {
|
||||
value = null;
|
||||
dispatch("clear");
|
||||
dispatch("change", null);
|
||||
}
|
||||
|
||||
async function handle_save(img_blob: Blob | any): Promise<void> {
|
||||
pending = true;
|
||||
const f = await upload.load_files([new File([img_blob], `webcam.png`)]);
|
||||
|
||||
value = f?.[0] || null;
|
||||
if (!streaming) active_tool = null;
|
||||
|
||||
await tick();
|
||||
|
||||
@ -55,7 +53,7 @@
|
||||
pending = false;
|
||||
}
|
||||
|
||||
$: active_streaming = streaming && active_tool === "webcam";
|
||||
$: active_streaming = streaming && active_source === "webcam";
|
||||
$: if (uploading && !active_streaming) value = null;
|
||||
|
||||
$: value && !value.url && (value = normalise_file(value, root, null));
|
||||
@ -80,61 +78,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
const sources_meta = {
|
||||
upload: {
|
||||
icon: UploadIcon,
|
||||
label: i18n("Upload"),
|
||||
order: 0
|
||||
},
|
||||
webcam: {
|
||||
icon: WebcamIcon,
|
||||
label: i18n("Webcam"),
|
||||
order: 1
|
||||
},
|
||||
clipboard: {
|
||||
icon: ImagePaste,
|
||||
label: i18n("Paste"),
|
||||
order: 2
|
||||
}
|
||||
};
|
||||
|
||||
$: sources_list = sources.sort(
|
||||
(a, b) => sources_meta[a].order - sources_meta[b].order
|
||||
);
|
||||
|
||||
$: {
|
||||
if (sources.length === 1 && sources[0] === "webcam") {
|
||||
active_tool = "webcam";
|
||||
}
|
||||
$: if (!active_source && sources) {
|
||||
active_source = sources[0];
|
||||
}
|
||||
|
||||
async function handle_toolbar(
|
||||
async function handle_select_source(
|
||||
source: (typeof sources)[number]
|
||||
): Promise<void> {
|
||||
switch (source) {
|
||||
case "clipboard":
|
||||
navigator.clipboard.read().then(async (items) => {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const type = items[i].types.find((t) => t.startsWith("image/"));
|
||||
if (type) {
|
||||
value = null;
|
||||
items[i].getType(type).then(async (blob) => {
|
||||
const f = await upload.load_files([
|
||||
new File([blob], `clipboard.${type.replace("image/", "")}`)
|
||||
]);
|
||||
f;
|
||||
value = f?.[0] || null;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "webcam":
|
||||
active_tool = "webcam";
|
||||
break;
|
||||
case "upload":
|
||||
upload.open_file_upload();
|
||||
upload.paste_clipboard();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -155,21 +108,21 @@
|
||||
{/if}
|
||||
<div class="upload-container">
|
||||
<Upload
|
||||
hidden={value !== null || active_tool === "webcam"}
|
||||
hidden={value !== null || active_source === "webcam"}
|
||||
bind:this={upload}
|
||||
bind:uploading
|
||||
bind:dragging
|
||||
filetype="image/*"
|
||||
filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
|
||||
on:load={handle_upload}
|
||||
on:error
|
||||
{root}
|
||||
disable_click={!sources.includes("upload")}
|
||||
>
|
||||
{#if value === null && !active_tool}
|
||||
{#if value === null}
|
||||
<slot />
|
||||
{/if}
|
||||
</Upload>
|
||||
{#if active_tool === "webcam"}
|
||||
{#if active_source === "webcam" && !value}
|
||||
<Webcam
|
||||
on:capture={(e) => handle_save(e.detail)}
|
||||
on:stream={(e) => handle_save(e.detail)}
|
||||
@ -191,17 +144,12 @@
|
||||
{/if}
|
||||
</div>
|
||||
{#if sources.length > 1 || sources.includes("clipboard")}
|
||||
<Toolbar show_border={!value?.url}>
|
||||
{#each sources_list as source}
|
||||
<IconButton
|
||||
on:click={() => handle_toolbar(source)}
|
||||
Icon={sources_meta[source].icon}
|
||||
size="large"
|
||||
label="{source}-image-toolbar-btn"
|
||||
padded={false}
|
||||
/>
|
||||
{/each}
|
||||
</Toolbar>
|
||||
<SelectSource
|
||||
{sources}
|
||||
bind:active_source
|
||||
{handle_clear}
|
||||
handle_select={handle_select_source}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -209,6 +157,13 @@
|
||||
.image-frame :global(img) {
|
||||
width: var(--size-full);
|
||||
height: var(--size-full);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
|
||||
<video bind:this={video_source} class:flip={mirror_webcam} />
|
||||
{#if !streaming}
|
||||
<div class:capture={!recording} class="button-wrap">
|
||||
<div class="button-wrap">
|
||||
<button
|
||||
on:click={mode === "image" ? take_picture : take_recording}
|
||||
aria-label={mode === "image" ? "capture photo" : "start recording"}
|
||||
@ -212,29 +212,32 @@
|
||||
<div class="icon" title="select video source">
|
||||
<DropdownArrow />
|
||||
</div>
|
||||
|
||||
{#if options_open}
|
||||
<div class="select-wrap" use:click_outside={handle_click_outside}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events-->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions-->
|
||||
<span
|
||||
class="inset-icon"
|
||||
on:click|stopPropagation={() => (options_open = false)}
|
||||
>
|
||||
<DropdownArrow />
|
||||
</span>
|
||||
{#each video_sources as source}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events-->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions-->
|
||||
<div on:click={() => selectVideoSource(source.deviceId)}>
|
||||
{source.label}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if options_open}
|
||||
<select
|
||||
class="select-wrap"
|
||||
aria-label="select source"
|
||||
use:click_outside={handle_click_outside}
|
||||
>
|
||||
<button
|
||||
class="inset-icon"
|
||||
on:click|stopPropagation={() => (options_open = false)}
|
||||
>
|
||||
<DropdownArrow />
|
||||
</button>
|
||||
{#if video_sources.length === 0}
|
||||
<option value="">{i18n("common.no_devices")}</option>
|
||||
{:else}
|
||||
{#each video_sources as source}
|
||||
<option on:click={() => selectVideoSource(source.deviceId)}>
|
||||
{source.label}
|
||||
</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -243,36 +246,28 @@
|
||||
position: relative;
|
||||
width: var(--size-full);
|
||||
height: var(--size-full);
|
||||
min-height: var(--size-60);
|
||||
}
|
||||
|
||||
video {
|
||||
width: var(--size-full);
|
||||
height: var(--size-full);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-color: var(--block-background-fill);
|
||||
border: 1px solid var(--border-color-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--size-1-5);
|
||||
display: flex;
|
||||
bottom: var(--size-2);
|
||||
left: 0px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
box-shadow: var(--shadow-drop-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
width: var(--size-10);
|
||||
height: var(--size-8);
|
||||
padding: var(--size-2-5);
|
||||
padding-right: var(--size-1);
|
||||
z-index: var(--layer-3);
|
||||
}
|
||||
|
||||
.capture {
|
||||
width: var(--size-14);
|
||||
transform: translateX(var(--size-2-5));
|
||||
line-height: var(--size-3);
|
||||
color: var(--button-secondary-text-color);
|
||||
}
|
||||
|
||||
@media (--screen-md) {
|
||||
@ -289,9 +284,8 @@
|
||||
|
||||
.icon {
|
||||
opacity: 0.8;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -310,35 +304,39 @@
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
color: var(--button-secondary-text-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
/* padding: 0.5rem; */
|
||||
width: max-content;
|
||||
width: 95%;
|
||||
font-size: var(--text-md);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: var(--size-2);
|
||||
background-color: var(--block-background-fill);
|
||||
box-shadow: var(--shadow-drop-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
z-index: var(--layer-top);
|
||||
border: 1px solid var(--border-color-accent);
|
||||
border: 1px solid var(--border-color-primary);
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
line-height: var(--size-4);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
max-width: var(--size-52);
|
||||
}
|
||||
|
||||
.select-wrap > div {
|
||||
.select-wrap > option {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color-accent);
|
||||
padding-right: var(--size-8);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.select-wrap > div:hover {
|
||||
.select-wrap > option:hover {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.select-wrap > div:last-child {
|
||||
.select-wrap > option:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
export let root: string;
|
||||
export let hidden = false;
|
||||
export let format: "blob" | "file" = "file";
|
||||
export let include_sources = false;
|
||||
export let uploading = false;
|
||||
|
||||
let upload_id: string;
|
||||
@ -44,6 +43,26 @@
|
||||
dragging = !dragging;
|
||||
}
|
||||
|
||||
export function paste_clipboard(): void {
|
||||
navigator.clipboard.read().then(async (items) => {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const type = items[i].types.find((t) => t.startsWith("image/"));
|
||||
if (type) {
|
||||
dispatch("load", null);
|
||||
items[i].getType(type).then(async (blob) => {
|
||||
const file = new File(
|
||||
[blob],
|
||||
`clipboard.${type.replace("image/", "")}`
|
||||
);
|
||||
const f = await load_files([file]);
|
||||
dispatch("load", f?.[0]);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function open_file_upload(): void {
|
||||
if (disable_click) return;
|
||||
hidden_upload.value = "";
|
||||
@ -126,7 +145,19 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if uploading}
|
||||
{#if filetype === "clipboard"}
|
||||
<button
|
||||
class:hidden
|
||||
class:center
|
||||
class:boundedheight
|
||||
class:flex
|
||||
style:height="100%"
|
||||
tabindex={hidden ? -1 : 0}
|
||||
on:click={paste_clipboard}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
{:else if uploading}
|
||||
{#if !hidden}
|
||||
<UploadProgress {root} {upload_id} files={file_data} />
|
||||
{/if}
|
||||
@ -136,7 +167,7 @@
|
||||
class:center
|
||||
class:boundedheight
|
||||
class:flex
|
||||
style:height={include_sources ? "calc(100% - 40px" : "100%"}
|
||||
style:height="100%"
|
||||
tabindex={hidden ? -1 : 0}
|
||||
on:drag|preventDefault|stopPropagation
|
||||
on:dragstart|preventDefault|stopPropagation
|
||||
|
||||
@ -73,12 +73,8 @@
|
||||
value = initial_value;
|
||||
};
|
||||
|
||||
$: if (sources) {
|
||||
if (sources.length > 1) {
|
||||
active_source = "upload";
|
||||
} else {
|
||||
active_source = sources[0];
|
||||
}
|
||||
$: if (sources && !active_source) {
|
||||
active_source = sources[0];
|
||||
}
|
||||
|
||||
$: {
|
||||
|
||||
@ -62,59 +62,62 @@
|
||||
</script>
|
||||
|
||||
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
|
||||
{#if value === null || value.url === undefined}
|
||||
{#if active_source === "upload"}
|
||||
<Upload
|
||||
bind:dragging
|
||||
filetype="video/x-m4v,video/*"
|
||||
on:load={handle_load}
|
||||
on:error={({ detail }) => dispatch("error", detail)}
|
||||
{root}
|
||||
include_sources={sources.length > 1}
|
||||
>
|
||||
<slot />
|
||||
</Upload>
|
||||
{:else if active_source === "webcam"}
|
||||
<Webcam
|
||||
{mirror_webcam}
|
||||
{include_audio}
|
||||
mode="video"
|
||||
on:error
|
||||
on:capture={() => dispatch("change")}
|
||||
on:start_recording
|
||||
on:stop_recording
|
||||
{i18n}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<ModifyUpload {i18n} on:clear={handle_clear} />
|
||||
{#if playable()}
|
||||
{#key value?.url}
|
||||
<Player
|
||||
{root}
|
||||
interactive
|
||||
{autoplay}
|
||||
src={value.url}
|
||||
subtitle={subtitle?.url}
|
||||
on:play
|
||||
on:pause
|
||||
on:stop
|
||||
on:end
|
||||
mirror={mirror_webcam && active_source === "webcam"}
|
||||
{label}
|
||||
{handle_change}
|
||||
{handle_reset_value}
|
||||
/>
|
||||
{/key}
|
||||
{:else if value.size}
|
||||
<div class="file-name">{value.orig_name || value.url}</div>
|
||||
<div class="file-size">
|
||||
{prettyBytes(value.size)}
|
||||
<div data-testid="video" class="video-container">
|
||||
{#if value === null || value.url === undefined}
|
||||
<div class="upload-container">
|
||||
{#if active_source === "upload"}
|
||||
<Upload
|
||||
bind:dragging
|
||||
filetype="video/x-m4v,video/*"
|
||||
on:load={handle_load}
|
||||
on:error={({ detail }) => dispatch("error", detail)}
|
||||
{root}
|
||||
>
|
||||
<slot />
|
||||
</Upload>
|
||||
{:else if active_source === "webcam"}
|
||||
<Webcam
|
||||
{mirror_webcam}
|
||||
{include_audio}
|
||||
mode="video"
|
||||
on:error
|
||||
on:capture={() => dispatch("change")}
|
||||
on:start_recording
|
||||
on:stop_recording
|
||||
{i18n}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<ModifyUpload {i18n} on:clear={handle_clear} />
|
||||
{#if playable()}
|
||||
{#key value?.url}
|
||||
<Player
|
||||
{root}
|
||||
interactive
|
||||
{autoplay}
|
||||
src={value.url}
|
||||
subtitle={subtitle?.url}
|
||||
on:play
|
||||
on:pause
|
||||
on:stop
|
||||
on:end
|
||||
mirror={mirror_webcam && active_source === "webcam"}
|
||||
{label}
|
||||
{handle_change}
|
||||
{handle_reset_value}
|
||||
/>
|
||||
{/key}
|
||||
{:else if value.size}
|
||||
<div class="file-name">{value.orig_name || value.url}</div>
|
||||
<div class="file-size">
|
||||
{prettyBytes(value.size)}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<SelectSource {sources} bind:active_source {handle_clear} />
|
||||
<SelectSource {sources} bind:active_source {handle_clear} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.file-name {
|
||||
@ -127,4 +130,16 @@
|
||||
padding: var(--size-2);
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user