gradio/js/video/Video.stories.svelte
Hannah 3cdeabc684
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>
2023-11-07 11:58:34 +01:00

75 lines
1.6 KiB
Svelte

<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
title="Components/Video"
component={Video}
argTypes={{
video: {
control: "text",
description:
"A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.",
name: "value"
},
autoplay: {
control: [true, false],
description: "Whether to autoplay the video on load",
name: "autoplay",
value: true
}
}}
/>
<div>
<Template let:args>
<Video {...args} i18n={get(format)} />
</Template>
</div>
<Story
name="Record from webcam"
args={{
format: "mp4",
label: "world video",
show_label: true,
interactive: true,
height: 400,
width: 400
}}
/>
<Story
name="Static video"
args={{
value: {
video: {
path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
orig_name: "world.mp4"
}
},
label: "world video",
show_label: true,
interactive: false,
height: 200,
width: 400
}}
/>
<Story
name="Upload video"
args={{
label: "world video",
show_label: true,
interactive: true,
sources: ["upload", "webcam"],
width: 400,
height: 400,
value: null
}}
/>