mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-21 02:19:59 +08:00
a2badf151e
* migrate to storybook 8 * add changeset * formatting * test * pnpm lock * revert test * update testing-library * pass (and improve) failing tests * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
133 lines
2.7 KiB
Svelte
133 lines
2.7 KiB
Svelte
<script context="module">
|
|
import { 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/test";
|
|
import { allModes } from "../storybook/modes";
|
|
|
|
export const meta = {
|
|
title: "Components/Video",
|
|
component: Video,
|
|
parameters: {
|
|
chromatic: {
|
|
modes: {
|
|
desktop: allModes["desktop"],
|
|
mobile: allModes["mobile"]
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<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,
|
|
show_download_button: 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,
|
|
show_download_button: false,
|
|
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="Upload video with download button"
|
|
args={{
|
|
label: "world video",
|
|
show_label: true,
|
|
interactive: true,
|
|
sources: ["upload", "webcam"],
|
|
show_download_button: true,
|
|
width: 400,
|
|
height: 400,
|
|
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"
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<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);
|
|
}}
|
|
/>
|