-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Video.stories.svelte
98 lines (85 loc) 路 1.96 KB
/
Video.stories.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<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";
import { waitFor } from "@testing-library/dom";
</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="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);
await new Promise((r) => setTimeout(r, 4000));
const rightHandle = canvas.getByLabelText(
"end drag handle for trimming video"
);
userEvent.click(rightHandle);
for (let i = 0; i < 4; i++) {
await userEvent.keyboard("[ArrowRight]");
}
userEvent.click(canvas.getByText("Trim"));
}}
/>