mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-24 13:01:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ensure source selection does not get hidden in overflow ()

Browse Source 
* 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>
This commit is contained in:
Hannah 2023-11-07 11:58:34 +01:00 committed by GitHub
parent dfdaf10926
commit 3cdeabc684
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 124 additions and 94 deletions

9
.changeset/mean-papayas-try.md Normal file

@ -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

74
js/atoms/src/SelectSource.svelte Normal file

@ -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>

1
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 = {};

10
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"
}}
/>

50
js/audio/interactive/InteractiveAudio.svelte

@ -3,7 +3,7 @@
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";
@ -11,6 +11,7 @@
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} />

3
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 {

23
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
}}
/>

48
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>