From 5663f3c8454a3908e144e706260ae1fa729727a2 Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Tue, 19 Dec 2023 19:24:08 +0000
Subject: [PATCH] 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>
---
 .changeset/strong-files-swim.md              |  11 ++
 js/app/src/lang/en.json                      |   6 +-
 js/app/test/image_component_events.spec.ts   |  28 ++++-
 js/app/test/video_component_events.spec.ts   |  14 +--
 js/atoms/src/SelectSource.svelte             |  53 ++++++---
 js/atoms/src/UploadText.svelte               |  16 ++-
 js/audio/Index.svelte                        |   2 +-
 js/audio/interactive/InteractiveAudio.svelte |   1 -
 js/image/Image.stories.svelte                |  67 ++++++++---
 js/image/Index.svelte                        |  14 ++-
 js/image/shared/ImageUploader.svelte         | 111 ++++++------------
 js/image/shared/Webcam.svelte                | 106 +++++++++--------
 js/upload/src/Upload.svelte                  |  37 +++++-
 js/video/Index.svelte                        |   8 +-
 js/video/shared/InteractiveVideo.svelte      | 115 +++++++++++--------
 15 files changed, 336 insertions(+), 253 deletions(-)
 create mode 100644 .changeset/strong-files-swim.md

diff --git a/.changeset/strong-files-swim.md b/.changeset/strong-files-swim.md
new file mode 100644
index 0000000000000..002dc818f9d25
--- /dev/null
+++ b/.changeset/strong-files-swim.md
@@ -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
diff --git a/js/app/src/lang/en.json b/js/app/src/lang/en.json
index e29f3ee13065c..58ef444c90f1b 100644
--- a/js/app/src/lang/en.json
+++ b/js/app/src/lang/en.json
@@ -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"
 	}
 }
diff --git a/js/app/test/image_component_events.spec.ts b/js/app/test/image_component_events.spec.ts
index 36cce521c880a..54d46086b4bff 100644
--- a/js/app/test/image_component_events.spec.ts
+++ b/js/app/test/image_component_events.spec.ts
@@ -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");
+});
diff --git a/js/app/test/video_component_events.spec.ts b/js/app/test/video_component_events.spec.ts
index 0006ed35c2604..8120a62816463 100644
--- a/js/app/test/video_component_events.spec.ts
+++ b/js/app/test/video_component_events.spec.ts
@@ -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]",
diff --git a/js/atoms/src/SelectSource.svelte b/js/atoms/src/SelectSource.svelte
index a2db4585cb1f8..6e01a3cff9e61 100644
--- a/js/atoms/src/SelectSource.svelte
+++ b/js/atoms/src/SelectSource.svelte
@@ -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 {
diff --git a/js/atoms/src/UploadText.svelte b/js/atoms/src/UploadText.svelte
index 84112f82980d6..88f9a7d823d0b 100644
--- a/js/atoms/src/UploadText.svelte
+++ b/js/atoms/src/UploadText.svelte
@@ -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)}
 
diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
index 8529278d2f2c0..a34278e524f5b 100644
--- a/js/audio/Index.svelte
+++ b/js/audio/Index.svelte
@@ -85,7 +85,7 @@
 
 	let dragging: boolean;
 
-	$: if (sources) {
+	$: if (!active_source && sources) {
 		active_source = sources[0];
 	}
 
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
index 2db20039d464b..21492620ebd6f 100644
--- a/js/audio/interactive/InteractiveAudio.svelte
+++ b/js/audio/interactive/InteractiveAudio.svelte
@@ -249,7 +249,6 @@
 			bind:dragging
 			on:error={({ detail }) => dispatch("error", detail)}
 			{root}
-			include_sources={sources.length > 1}
 		>
 			<slot />
 		</Upload>
diff --git a/js/image/Image.stories.svelte b/js/image/Image.stories.svelte
index 579f53ca3d08e..1d7d349130aee 100644
--- a/js/image/Image.stories.svelte
+++ b/js/image/Image.stories.svelte
@@ -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
+	}}
+/>
diff --git a/js/image/Index.svelte b/js/image/Index.svelte
index 6b7618abbe470..cb40440db9030 100644
--- a/js/image/Index.svelte
+++ b/js/image/Index.svelte
@@ -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}
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index 91cb293e68660..6ded6dbe61312 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -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 {
diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte
index c1ea8a88f2dc4..a1385ef1c3553 100644
--- a/js/image/shared/Webcam.svelte
+++ b/js/image/shared/Webcam.svelte
@@ -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;
 	}
 
diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
index be104c5cdc5f4..039c1e72700aa 100644
--- a/js/upload/src/Upload.svelte
+++ b/js/upload/src/Upload.svelte
@@ -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
diff --git a/js/video/Index.svelte b/js/video/Index.svelte
index 50e4050653106..540eeac181014 100644
--- a/js/video/Index.svelte
+++ b/js/video/Index.svelte
@@ -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];
 	}
 
 	$: {
diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte
index c6ad8780950d3..2b01da2d7c592 100644
--- a/js/video/shared/InteractiveVideo.svelte
+++ b/js/video/shared/InteractiveVideo.svelte
@@ -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>