@gradio/video 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -1
- package/Index.svelte +12 -5
- package/Video.stories.svelte +39 -6
- package/package.json +6 -6
- package/shared/InteractiveVideo.svelte +5 -45
- package/shared/Video.svelte +11 -4
- package/shared/VideoTimeline.svelte +11 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @gradio/video
|
|
2
2
|
|
|
3
|
+
## 0.1.3
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#6279](https://github.com/gradio-app/gradio/pull/6279) [`3cdeabc68`](https://github.com/gradio-app/gradio/commit/3cdeabc6843000310e1a9e1d17190ecbf3bbc780) - Ensure source selection does not get hidden in overflow. Thanks [@hannahblair](https://github.com/hannahblair)!
|
|
8
|
+
|
|
9
|
+
## 0.1.2
|
|
10
|
+
|
|
11
|
+
### Fixes
|
|
12
|
+
|
|
13
|
+
- [#6234](https://github.com/gradio-app/gradio/pull/6234) [`aaa55ce85`](https://github.com/gradio-app/gradio/commit/aaa55ce85e12f95aba9299445e9c5e59824da18e) - Video/Audio fixes. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
|
|
14
|
+
|
|
3
15
|
## 0.1.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -170,4 +182,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
|
|
|
170
182
|
- @gradio/image@0.1.0
|
|
171
183
|
- @gradio/utils@0.0.2
|
|
172
184
|
- @gradio/atoms@0.0.2
|
|
173
|
-
- @gradio/upload@0.0.2
|
|
185
|
+
- @gradio/upload@0.0.2
|
package/Index.svelte
CHANGED
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
stop_recording: never;
|
|
48
48
|
share: ShareData;
|
|
49
49
|
error: string;
|
|
50
|
+
warning: string;
|
|
50
51
|
}>;
|
|
51
52
|
export let interactive: boolean;
|
|
52
53
|
export let mirror_webcam: boolean;
|
|
@@ -109,6 +110,16 @@
|
|
|
109
110
|
value = null;
|
|
110
111
|
}
|
|
111
112
|
}
|
|
113
|
+
|
|
114
|
+
function handle_error({ detail }: CustomEvent<string>): void {
|
|
115
|
+
const [level, status] = detail.includes("Invalid file type")
|
|
116
|
+
? ["warning", "complete"]
|
|
117
|
+
: ["error", "error"];
|
|
118
|
+
loading_status = loading_status || {};
|
|
119
|
+
loading_status.status = status as LoadingStatus["status"];
|
|
120
|
+
loading_status.message = detail;
|
|
121
|
+
gradio.dispatch(level as "error" | "warning", detail);
|
|
122
|
+
}
|
|
112
123
|
</script>
|
|
113
124
|
|
|
114
125
|
{#if !interactive}
|
|
@@ -175,11 +186,7 @@
|
|
|
175
186
|
subtitle={_subtitle}
|
|
176
187
|
on:change={handle_change}
|
|
177
188
|
on:drag={({ detail }) => (dragging = detail)}
|
|
178
|
-
on:error={
|
|
179
|
-
loading_status = loading_status || {};
|
|
180
|
-
loading_status.status = "error";
|
|
181
|
-
loading_status.message = detail;
|
|
182
|
-
}}
|
|
189
|
+
on:error={handle_error}
|
|
183
190
|
{label}
|
|
184
191
|
{show_label}
|
|
185
192
|
{sources}
|
package/Video.stories.svelte
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
|
3
3
|
import Video from "./Index.svelte";
|
|
4
|
+
import { format } from "svelte-i18n";
|
|
5
|
+
import { get } from "svelte/store";
|
|
4
6
|
</script>
|
|
5
7
|
|
|
6
8
|
<Meta
|
|
@@ -22,20 +24,51 @@
|
|
|
22
24
|
}}
|
|
23
25
|
/>
|
|
24
26
|
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
|
|
27
|
+
<div>
|
|
28
|
+
<Template let:args>
|
|
29
|
+
<Video {...args} i18n={get(format)} />
|
|
30
|
+
</Template>
|
|
31
|
+
</div>
|
|
28
32
|
|
|
29
33
|
<Story
|
|
30
|
-
name="
|
|
34
|
+
name="Record from webcam"
|
|
31
35
|
args={{
|
|
32
|
-
value: ["https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4"],
|
|
33
36
|
format: "mp4",
|
|
34
37
|
label: "world video",
|
|
35
38
|
show_label: true,
|
|
36
39
|
interactive: true,
|
|
37
|
-
autoplay: true,
|
|
38
40
|
height: 400,
|
|
39
41
|
width: 400
|
|
40
42
|
}}
|
|
41
43
|
/>
|
|
44
|
+
|
|
45
|
+
<Story
|
|
46
|
+
name="Static video"
|
|
47
|
+
args={{
|
|
48
|
+
value: {
|
|
49
|
+
video: {
|
|
50
|
+
path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
|
|
51
|
+
url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
|
|
52
|
+
orig_name: "world.mp4"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
label: "world video",
|
|
56
|
+
show_label: true,
|
|
57
|
+
interactive: false,
|
|
58
|
+
height: 200,
|
|
59
|
+
width: 400
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
|
|
63
|
+
<Story
|
|
64
|
+
name="Upload video"
|
|
65
|
+
args={{
|
|
66
|
+
label: "world video",
|
|
67
|
+
show_label: true,
|
|
68
|
+
interactive: true,
|
|
69
|
+
sources: ["upload", "webcam"],
|
|
70
|
+
width: 400,
|
|
71
|
+
height: 400,
|
|
72
|
+
value: null
|
|
73
|
+
}}
|
|
74
|
+
/>
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/video",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "ISC",
|
|
8
8
|
"private": false,
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@gradio/atoms": "^0.2.
|
|
11
|
-
"@gradio/client": "^0.7.
|
|
10
|
+
"@gradio/atoms": "^0.2.1",
|
|
11
|
+
"@gradio/client": "^0.7.2",
|
|
12
12
|
"@gradio/icons": "^0.2.0",
|
|
13
|
-
"@gradio/image": "^0.3.
|
|
14
|
-
"@gradio/statustracker": "^0.3.
|
|
15
|
-
"@gradio/upload": "^0.3.
|
|
13
|
+
"@gradio/image": "^0.3.3",
|
|
14
|
+
"@gradio/statustracker": "^0.3.1",
|
|
15
|
+
"@gradio/upload": "^0.3.3",
|
|
16
16
|
"@gradio/utils": "^0.2.0",
|
|
17
17
|
"@gradio/wasm": "^0.2.0"
|
|
18
18
|
},
|
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
import type { FileData } from "@gradio/client";
|
|
5
5
|
import { BlockLabel } from "@gradio/atoms";
|
|
6
6
|
import { Webcam } from "@gradio/image";
|
|
7
|
-
import { Video
|
|
7
|
+
import { Video } from "@gradio/icons";
|
|
8
8
|
|
|
9
9
|
import { prettyBytes, playable } from "./utils";
|
|
10
10
|
import Player from "./Player.svelte";
|
|
11
11
|
import type { I18nFormatter } from "@gradio/utils";
|
|
12
|
+
import { SelectSource } from "@gradio/atoms";
|
|
12
13
|
|
|
13
14
|
export let value: FileData | null = null;
|
|
14
15
|
export let subtitle: FileData | null = null;
|
|
@@ -48,7 +49,6 @@
|
|
|
48
49
|
|
|
49
50
|
function handle_clear(): void {
|
|
50
51
|
value = null;
|
|
51
|
-
active_source = sources[0];
|
|
52
52
|
dispatch("change", null);
|
|
53
53
|
dispatch("clear");
|
|
54
54
|
}
|
|
@@ -68,7 +68,9 @@
|
|
|
68
68
|
bind:dragging
|
|
69
69
|
filetype="video/x-m4v,video/*"
|
|
70
70
|
on:load={handle_load}
|
|
71
|
+
on:error={({ detail }) => dispatch("error", detail)}
|
|
71
72
|
{root}
|
|
73
|
+
include_sources={sources.length > 1}
|
|
72
74
|
>
|
|
73
75
|
<slot />
|
|
74
76
|
</Upload>
|
|
@@ -112,26 +114,7 @@
|
|
|
112
114
|
{/if}
|
|
113
115
|
{/if}
|
|
114
116
|
|
|
115
|
-
{
|
|
116
|
-
<span class="source-selection">
|
|
117
|
-
<button
|
|
118
|
-
class="icon"
|
|
119
|
-
aria-label="Upload video"
|
|
120
|
-
on:click={() => {
|
|
121
|
-
handle_clear();
|
|
122
|
-
active_source = "upload";
|
|
123
|
-
}}><UploadIcon /></button
|
|
124
|
-
>
|
|
125
|
-
<button
|
|
126
|
-
class="icon"
|
|
127
|
-
aria-label="Record audio"
|
|
128
|
-
on:click={() => {
|
|
129
|
-
handle_clear();
|
|
130
|
-
active_source = "webcam";
|
|
131
|
-
}}><Video /></button
|
|
132
|
-
>
|
|
133
|
-
</span>
|
|
134
|
-
{/if}
|
|
117
|
+
<SelectSource {sources} bind:active_source {handle_clear} />
|
|
135
118
|
|
|
136
119
|
<style>
|
|
137
120
|
.file-name {
|
|
@@ -144,27 +127,4 @@
|
|
|
144
127
|
padding: var(--size-2);
|
|
145
128
|
font-size: var(--text-xl);
|
|
146
129
|
}
|
|
147
|
-
|
|
148
|
-
.source-selection {
|
|
149
|
-
display: flex;
|
|
150
|
-
align-items: center;
|
|
151
|
-
justify-content: center;
|
|
152
|
-
border-top: 1px solid var(--border-color-primary);
|
|
153
|
-
width: 95%;
|
|
154
|
-
margin: 0 auto;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.icon {
|
|
158
|
-
width: 22px;
|
|
159
|
-
height: 22px;
|
|
160
|
-
margin: var(--spacing-lg) var(--spacing-xs);
|
|
161
|
-
padding: var(--spacing-xs);
|
|
162
|
-
color: var(--neutral-400);
|
|
163
|
-
border-radius: var(--radius-md);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.icon:hover,
|
|
167
|
-
.icon:focus {
|
|
168
|
-
color: var(--color-accent);
|
|
169
|
-
}
|
|
170
130
|
</style>
|
package/shared/Video.svelte
CHANGED
|
@@ -91,7 +91,8 @@
|
|
|
91
91
|
position: relative;
|
|
92
92
|
background-color: var(--border-color-accent-subdued);
|
|
93
93
|
animation: shadowPulse 2s linear infinite;
|
|
94
|
-
box-shadow:
|
|
94
|
+
box-shadow:
|
|
95
|
+
-24px 0 var(--border-color-accent-subdued),
|
|
95
96
|
24px 0 var(--border-color-accent-subdued);
|
|
96
97
|
margin: var(--spacing-md);
|
|
97
98
|
border-radius: 50%;
|
|
@@ -102,15 +103,21 @@
|
|
|
102
103
|
|
|
103
104
|
@keyframes shadowPulse {
|
|
104
105
|
33% {
|
|
105
|
-
box-shadow:
|
|
106
|
+
box-shadow:
|
|
107
|
+
-24px 0 var(--border-color-accent-subdued),
|
|
108
|
+
24px 0 #fff;
|
|
106
109
|
background: #fff;
|
|
107
110
|
}
|
|
108
111
|
66% {
|
|
109
|
-
box-shadow:
|
|
112
|
+
box-shadow:
|
|
113
|
+
-24px 0 #fff,
|
|
114
|
+
24px 0 #fff;
|
|
110
115
|
background: var(--border-color-accent-subdued);
|
|
111
116
|
}
|
|
112
117
|
100% {
|
|
113
|
-
box-shadow:
|
|
118
|
+
box-shadow:
|
|
119
|
+
-24px 0 #fff,
|
|
120
|
+
24px 0 var(--border-color-accent-subdued);
|
|
114
121
|
background: #fff;
|
|
115
122
|
}
|
|
116
123
|
}
|
|
@@ -202,7 +202,8 @@
|
|
|
202
202
|
position: relative;
|
|
203
203
|
background-color: var(--border-color-accent-subdued);
|
|
204
204
|
animation: shadowPulse 2s linear infinite;
|
|
205
|
-
box-shadow:
|
|
205
|
+
box-shadow:
|
|
206
|
+
-24px 0 var(--border-color-accent-subdued),
|
|
206
207
|
24px 0 var(--border-color-accent-subdued);
|
|
207
208
|
margin: var(--spacing-md);
|
|
208
209
|
border-radius: 50%;
|
|
@@ -213,15 +214,21 @@
|
|
|
213
214
|
|
|
214
215
|
@keyframes shadowPulse {
|
|
215
216
|
33% {
|
|
216
|
-
box-shadow:
|
|
217
|
+
box-shadow:
|
|
218
|
+
-24px 0 var(--border-color-accent-subdued),
|
|
219
|
+
24px 0 #fff;
|
|
217
220
|
background: #fff;
|
|
218
221
|
}
|
|
219
222
|
66% {
|
|
220
|
-
box-shadow:
|
|
223
|
+
box-shadow:
|
|
224
|
+
-24px 0 #fff,
|
|
225
|
+
24px 0 #fff;
|
|
221
226
|
background: var(--border-color-accent-subdued);
|
|
222
227
|
}
|
|
223
228
|
100% {
|
|
224
|
-
box-shadow:
|
|
229
|
+
box-shadow:
|
|
230
|
+
-24px 0 #fff,
|
|
231
|
+
24px 0 var(--border-color-accent-subdued);
|
|
225
232
|
background: #fff;
|
|
226
233
|
}
|
|
227
234
|
}
|