Ensure source selection does not get hidden in overflow (#6279)

* add wrapper around content and source selection * formatting * remove upload 100% height * add changeset * move source selection to atoms * formatting * add changeset * add changeset * add changeset * tweak <Upload /> height to accomodate source selection * add changeset * calc new height with source selection * formatting * tweak --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Nov 7, 2023 · 3cdeabc · 3cdeabc
1 parent dfdaf10
commit 3cdeabc
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 94 deletions.
diff --git a/.changeset/mean-papayas-try.md b/.changeset/mean-papayas-try.md
@@ -0,0 +1,9 @@
+---
+"@gradio/atoms": patch
+"@gradio/audio": patch
+"@gradio/upload": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:Ensure source selection does not get hidden in overflow
diff --git a/js/atoms/src/SelectSource.svelte b/js/atoms/src/SelectSource.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Microphone, Upload, Video } from "@gradio/icons";
+
+	export let sources: string[];
+	export let active_source: string;
+	export let handle_clear: () => void = () => {};
+</script>
+
+{#if sources.length > 1}
+	<span class="source-selection">
+		{#if sources.includes("upload")}
+			<button
+				class="icon"
+				aria-label="Upload file"
+				on:click={() => {
+					handle_clear();
+					active_source = "upload";
+				}}><Upload /></button
+			>
+		{/if}
+
+		{#if sources.includes("microphone")}
+			<button
+				class="icon"
+				aria-label="Record audio"
+				on:click={() => {
+					handle_clear();
+					active_source = "microphone";
+				}}><Microphone /></button
+			>
+		{/if}
+
+		{#if sources.includes("webcam")}
+			<button
+				class="icon"
+				aria-label="Record video"
+				on:click={() => {
+					handle_clear();
+					active_source = "webcam";
+				}}><Video /></button
+			>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	.source-selection {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-top: 1px solid var(--border-color-primary);
+		width: 95%;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin-left: auto;
+		margin-right: auto;
+		align-self: flex-end;
+	}
+
+	.icon {
+		width: 22px;
+		height: 22px;
+		margin: var(--spacing-lg) var(--spacing-xs);
+		padding: var(--spacing-xs);
+		color: var(--neutral-400);
+		border-radius: var(--radius-md);
+	}
+
+	.icon:hover,
+	.icon:focus {
+		color: var(--color-accent);
+	}
+</style>
diff --git a/js/atoms/src/index.ts b/js/atoms/src/index.ts
@@ -7,5 +7,6 @@ export { default as Info } from "./Info.svelte";
 export { default as ShareButton } from "./ShareButton.svelte";
 export { default as UploadText } from "./UploadText.svelte";
 export { default as Toolbar } from "./Toolbar.svelte";
+export { default as SelectSource } from "./SelectSource.svelte";
 
 export const BLOCK_KEY = {};
diff --git a/js/audio/Audio.stories.svelte b/js/audio/Audio.stories.svelte
@@ -30,3 +30,13 @@
 		label: "Audio Recorder"
 	}}
 />
+
+<Story
+	name="Upload Audio"
+	args={{
+		value: null,
+		interactive: true,
+		sources: ["microphone", "upload"],
+		label: "Audio Upload"
+	}}
+/>
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -3,14 +3,15 @@
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import { upload, prepare_files, type FileData } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
-	import { Music, Microphone, Upload as UploadIcon } from "@gradio/icons";
+	import { Music } from "@gradio/icons";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
 	import { _ } from "svelte-i18n";
 
 	import type { IBlobEvent, IMediaRecorder } from "extendable-media-recorder";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
 	import AudioRecorder from "../recorder/AudioRecorder.svelte";
 	import StreamAudio from "../streaming/StreamAudio.svelte";
+	import { SelectSource } from "@gradio/atoms";
 
 	export let value: null | FileData = null;
 	export let label: string;
@@ -227,6 +228,7 @@
 			bind:dragging
 			on:error={({ detail }) => dispatch("error", detail)}
 			{root}
+			include_sources={sources.length > 1}
 		>
 			<slot />
 		</Upload>
@@ -253,48 +255,4 @@
 	/>
 {/if}
 
-{#if sources.length > 1}
-	<span class="source-selection">
-		<button
-			class="icon"
-			aria-label="Upload audio"
-			on:click={() => {
-				clear();
-				active_source = "upload";
-			}}><UploadIcon /></button
-		>
-		<button
-			class="icon"
-			aria-label="Record audio"
-			on:click={() => {
-				clear();
-				active_source = "microphone";
-			}}><Microphone /></button
-		>
-	</span>
-{/if}
-
-<style>
-	.source-selection {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-top: 1px solid var(--border-color-primary);
-		width: 95%;
-		margin: 0 auto;
-	}
-
-	.icon {
-		width: 22px;
-		height: 22px;
-		margin: var(--spacing-lg) var(--spacing-xs);
-		padding: var(--spacing-xs);
-		color: var(--neutral-400);
-		border-radius: var(--radius-md);
-	}
-
-	.icon:hover,
-	.icon:focus {
-		color: var(--color-accent);
-	}
-</style>
+<SelectSource {sources} bind:active_source handle_clear={clear} />
diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
@@ -13,6 +13,7 @@
 	export let disable_click = false;
 	export let root: string;
 	export let hidden = false;
+	export let include_sources = false;
 
 	// Needed for wasm support
 	const upload_fn = getContext<typeof upload_files>("upload_files");
@@ -94,6 +95,7 @@
 	class:center
 	class:boundedheight
 	class:flex
+	style:height={include_sources ? "calc(100% - 40px" : "100%"}
 	on:drag|preventDefault|stopPropagation
 	on:dragstart|preventDefault|stopPropagation
 	on:dragend|preventDefault|stopPropagation
@@ -122,7 +124,6 @@
 	button {
 		cursor: pointer;
 		width: var(--size-full);
-		height: var(--size-full);
 	}
 
 	.hidden {

diff --git a/js/video/Video.stories.svelte b/js/video/Video.stories.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Video from "./Index.svelte";
+	import { format } from "svelte-i18n";
+	import { get } from "svelte/store";
 </script>
 
 <Meta
@@ -22,9 +24,11 @@
 	}}
 />
 
-<Template let:args>
-	<Video {...args} />
-</Template>
+<div>
+	<Template let:args>
+		<Video {...args} i18n={get(format)} />
+	</Template>
+</div>
 
 <Story
 	name="Record from webcam"
@@ -55,3 +59,16 @@
 		width: 400
 	}}
 />
+
+<Story
+	name="Upload video"
+	args={{
+		label: "world video",
+		show_label: true,
+		interactive: true,
+		sources: ["upload", "webcam"],
+		width: 400,
+		height: 400,
+		value: null
+	}}
+/>
diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte
@@ -4,11 +4,12 @@
 	import type { FileData } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Webcam } from "@gradio/image";
-	import { Video, Upload as UploadIcon } from "@gradio/icons";
+	import { Video } from "@gradio/icons";
 
 	import { prettyBytes, playable } from "./utils";
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { SelectSource } from "@gradio/atoms";
 
 	export let value: FileData | null = null;
 	export let subtitle: FileData | null = null;
@@ -69,6 +70,7 @@
 			on:load={handle_load}
 			on:error={({ detail }) => dispatch("error", detail)}
 			{root}
+			include_sources={sources.length > 1}
 		>
 			<slot />
 		</Upload>
@@ -112,26 +114,7 @@
 	{/if}
 {/if}
 
-{#if sources.length > 1}
-	<span class="source-selection">
-		<button
-			class="icon"
-			aria-label="Upload video"
-			on:click={() => {
-				handle_clear();
-				active_source = "upload";
-			}}><UploadIcon /></button
-		>
-		<button
-			class="icon"
-			aria-label="Record video"
-			on:click={() => {
-				handle_clear();
-				active_source = "webcam";
-			}}><Video /></button
-		>
-	</span>
-{/if}
+<SelectSource {sources} bind:active_source {handle_clear} />
 
 <style>
 	.file-name {
@@ -144,27 +127,4 @@
 		padding: var(--size-2);
 		font-size: var(--text-xl);
 	}
-
-	.source-selection {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-top: 1px solid var(--border-color-primary);
-		width: 95%;
-		margin: 0 auto;
-	}
-
-	.icon {
-		width: 22px;
-		height: 22px;
-		margin: var(--spacing-lg) var(--spacing-xs);
-		padding: var(--spacing-xs);
-		color: var(--neutral-400);
-		border-radius: var(--radius-md);
-	}
-
-	.icon:hover,
-	.icon:focus {
-		color: var(--color-accent);
-	}
 </style>