gradio/js/video/Video.stories.svelte
Hannah 798eca524d
Fit video media within Video component (#6698)
* Add mirror-wrap styling in Player.svelte

* add changeset

* add vertical video story

* formatting

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2023-12-07 18:19:09 +01:00

99 lines
2.0 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";
import { userEvent, within } from "@storybook/testing-library";
</script>
<Meta title="Components/Video" component={Video} />
<div>
<Template let:args>
<Video i18n={get(format)} {...args} />
</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="Static video with vertical video"
args={{
value: {
video: {
path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
orig_name: "world_vertical.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
}}
/>
<Story
name="Trim 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: "true",
sources: ["upload"],
width: 400
}}
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trimButton = canvas.getByLabelText("Trim video to selection");
userEvent.click(trimButton);
}}
/>