@gradio/video 0.1.0-beta.5 → 0.1.0-beta.6
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 +26 -33
- package/{example/Video.svelte → Example.svelte} +21 -19
- package/Index.svelte +173 -0
- package/Video.stories.svelte +1 -1
- package/package.json +11 -12
- package/{interactive/Video.svelte → shared/InteractiveVideo.svelte} +3 -3
- package/shared/Player.svelte +19 -26
- package/shared/StaticVideo.svelte +70 -0
- package/shared/Video.svelte +70 -0
- package/{static → shared}/VideoPreview.svelte +1 -1
- package/example/index.ts +0 -1
- package/interactive/InteractiveVideo.svelte +0 -130
- package/interactive/index.ts +0 -1
- package/shared/index.ts +0 -2
- package/static/StaticVideo.svelte +0 -106
- package/static/index.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,55 +1,48 @@
|
|
|
1
1
|
# @gradio/video
|
|
2
2
|
|
|
3
|
-
## 0.1.0-beta.
|
|
3
|
+
## 0.1.0-beta.6
|
|
4
4
|
|
|
5
5
|
### Features
|
|
6
6
|
|
|
7
|
-
- [#
|
|
7
|
+
- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
|
|
8
|
+
- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
|
|
8
9
|
|
|
9
|
-
## 0.1.0
|
|
10
|
+
## 0.1.0
|
|
10
11
|
|
|
11
|
-
###
|
|
12
|
+
### Features
|
|
12
13
|
|
|
13
|
-
-
|
|
14
|
-
|
|
15
|
-
- @gradio/atoms@0.2.0-beta.3
|
|
16
|
-
- @gradio/image@0.3.0-beta.4
|
|
17
|
-
- @gradio/statustracker@0.3.0-beta.4
|
|
18
|
-
- @gradio/upload@0.3.0-beta.3
|
|
14
|
+
- [#5627](https://github.com/gradio-app/gradio/pull/5627) [`b67115e8e`](https://github.com/gradio-app/gradio/commit/b67115e8e6e489fffd5271ea830211863241ddc5) - Lite: Make the Examples component display media files using pseudo HTTP requests to the Wasm server. Thanks [@whitphx](https://github.com/whitphx)!
|
|
15
|
+
- [#5934](https://github.com/gradio-app/gradio/pull/5934) [`8d909624f`](https://github.com/gradio-app/gradio/commit/8d909624f61a49536e3c0f71cb2d9efe91216219) - Fix styling issues with Audio, Image and Video components. Thanks [@aliabd](https://github.com/aliabd)!
|
|
19
16
|
|
|
20
|
-
## 0.
|
|
17
|
+
## 0.0.11
|
|
21
18
|
|
|
22
19
|
### Patch Changes
|
|
23
20
|
|
|
24
|
-
- Updated dependencies [
|
|
25
|
-
- @gradio/utils@0.
|
|
26
|
-
- @gradio/atoms@0.
|
|
27
|
-
- @gradio/image@0.3.
|
|
28
|
-
- @gradio/statustracker@0.
|
|
29
|
-
- @gradio/upload@0.3.
|
|
30
|
-
|
|
31
|
-
## 0.1.0-beta.2
|
|
32
|
-
|
|
33
|
-
### Features
|
|
34
|
-
|
|
35
|
-
- [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
|
|
21
|
+
- Updated dependencies []:
|
|
22
|
+
- @gradio/utils@0.1.2
|
|
23
|
+
- @gradio/atoms@0.1.4
|
|
24
|
+
- @gradio/image@0.3.2
|
|
25
|
+
- @gradio/statustracker@0.2.2
|
|
26
|
+
- @gradio/upload@0.3.2
|
|
36
27
|
|
|
37
|
-
## 0.
|
|
28
|
+
## 0.0.10
|
|
38
29
|
|
|
39
30
|
### Patch Changes
|
|
40
31
|
|
|
41
|
-
- Updated dependencies []:
|
|
42
|
-
- @gradio/
|
|
43
|
-
- @gradio/atoms@0.
|
|
44
|
-
- @gradio/image@0.3.
|
|
45
|
-
- @gradio/statustracker@0.
|
|
46
|
-
- @gradio/upload@0.3.
|
|
32
|
+
- Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
|
|
33
|
+
- @gradio/icons@0.2.0
|
|
34
|
+
- @gradio/atoms@0.1.3
|
|
35
|
+
- @gradio/image@0.3.1
|
|
36
|
+
- @gradio/statustracker@0.2.1
|
|
37
|
+
- @gradio/upload@0.3.1
|
|
47
38
|
|
|
48
|
-
## 0.
|
|
39
|
+
## 0.0.9
|
|
49
40
|
|
|
50
|
-
###
|
|
41
|
+
### Patch Changes
|
|
51
42
|
|
|
52
|
-
-
|
|
43
|
+
- Updated dependencies [[`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423)]:
|
|
44
|
+
- @gradio/image@0.3.0
|
|
45
|
+
- @gradio/upload@0.3.0
|
|
53
46
|
|
|
54
47
|
## 0.0.8
|
|
55
48
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import Video from "./shared/Video.svelte";
|
|
3
|
+
import { playable } from "./shared/utils";
|
|
4
4
|
|
|
5
5
|
export let type: "gallery" | "table";
|
|
6
6
|
export let selected = false;
|
|
@@ -17,48 +17,50 @@
|
|
|
17
17
|
await video.play();
|
|
18
18
|
video.pause();
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
onMount(() => {
|
|
22
|
-
init();
|
|
23
|
-
});
|
|
24
20
|
</script>
|
|
25
21
|
|
|
26
22
|
{#if playable()}
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
playsinline
|
|
30
|
-
bind:this={video}
|
|
23
|
+
<div
|
|
24
|
+
class="container"
|
|
31
25
|
class:table={type === "table"}
|
|
32
26
|
class:gallery={type === "gallery"}
|
|
33
27
|
class:selected
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
>
|
|
29
|
+
<Video
|
|
30
|
+
muted
|
|
31
|
+
playsinline
|
|
32
|
+
bind:node={video}
|
|
33
|
+
on:loadeddata={init}
|
|
34
|
+
on:mouseover={video.play.bind(video)}
|
|
35
|
+
on:mouseout={video.pause.bind(video)}
|
|
36
|
+
src={samples_dir + value}
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
38
39
|
{:else}
|
|
39
40
|
<div>{value}</div>
|
|
40
41
|
{/if}
|
|
41
42
|
|
|
42
43
|
<style>
|
|
43
|
-
|
|
44
|
+
.container {
|
|
44
45
|
flex: none;
|
|
45
46
|
border: 2px solid var(--border-color-primary);
|
|
46
47
|
border-radius: var(--radius-lg);
|
|
47
48
|
max-width: none;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
.container:hover,
|
|
52
|
+
.container.selected {
|
|
52
53
|
border-color: var(--border-color-accent);
|
|
53
54
|
}
|
|
54
|
-
.table {
|
|
55
|
+
.container.table {
|
|
55
56
|
margin: 0 auto;
|
|
56
57
|
width: var(--size-20);
|
|
57
58
|
height: var(--size-20);
|
|
58
59
|
object-fit: cover;
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
.gallery {
|
|
62
|
+
.container.gallery {
|
|
63
|
+
height: var(--size-20);
|
|
62
64
|
max-height: var(--size-20);
|
|
63
65
|
object-fit: cover;
|
|
64
66
|
}
|
package/Index.svelte
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<svelte:options accessors={true} />
|
|
2
|
+
|
|
3
|
+
<script lang="ts">
|
|
4
|
+
import type { Gradio, ShareData } from "@gradio/utils";
|
|
5
|
+
import type { FileData } from "@gradio/upload";
|
|
6
|
+
import { normalise_file } from "@gradio/upload";
|
|
7
|
+
import { Block, UploadText } from "@gradio/atoms";
|
|
8
|
+
import StaticVideo from "./shared/VideoPreview.svelte";
|
|
9
|
+
import Video from "./shared/InteractiveVideo.svelte";
|
|
10
|
+
import { StatusTracker } from "@gradio/statustracker";
|
|
11
|
+
import type { LoadingStatus } from "@gradio/statustracker";
|
|
12
|
+
|
|
13
|
+
export let elem_id = "";
|
|
14
|
+
export let elem_classes: string[] = [];
|
|
15
|
+
export let visible = true;
|
|
16
|
+
export let value: { video: FileData; subtitles: FileData | null } | null =
|
|
17
|
+
null;
|
|
18
|
+
let old_value: { video: FileData; subtitles: FileData | null } | null = null;
|
|
19
|
+
|
|
20
|
+
export let label: string;
|
|
21
|
+
export let source: "upload" | "webcam";
|
|
22
|
+
export let root: string;
|
|
23
|
+
export let root_url: null | string;
|
|
24
|
+
export let show_label: boolean;
|
|
25
|
+
export let loading_status: LoadingStatus;
|
|
26
|
+
export let height: number | undefined;
|
|
27
|
+
export let width: number | undefined;
|
|
28
|
+
|
|
29
|
+
export let container = false;
|
|
30
|
+
export let scale: number | null = null;
|
|
31
|
+
export let min_width: number | undefined = undefined;
|
|
32
|
+
export let autoplay = false;
|
|
33
|
+
export let show_share_button = true;
|
|
34
|
+
export let gradio: Gradio<{
|
|
35
|
+
change: never;
|
|
36
|
+
clear: never;
|
|
37
|
+
play: never;
|
|
38
|
+
pause: never;
|
|
39
|
+
upload: never;
|
|
40
|
+
stop: never;
|
|
41
|
+
end: never;
|
|
42
|
+
start_recording: never;
|
|
43
|
+
stop_recording: never;
|
|
44
|
+
share: ShareData;
|
|
45
|
+
error: string;
|
|
46
|
+
}>;
|
|
47
|
+
export let mode: "static" | "interactive";
|
|
48
|
+
export let mirror_webcam: boolean;
|
|
49
|
+
export let include_audio: boolean;
|
|
50
|
+
|
|
51
|
+
let _video: FileData | null = null;
|
|
52
|
+
let _subtitle: FileData | null = null;
|
|
53
|
+
|
|
54
|
+
$: {
|
|
55
|
+
if (value != null) {
|
|
56
|
+
_video = normalise_file(value.video, root, root_url);
|
|
57
|
+
_subtitle = normalise_file(value.subtitles, root, root_url);
|
|
58
|
+
} else {
|
|
59
|
+
_video = null;
|
|
60
|
+
_subtitle = null;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
let dragging = false;
|
|
65
|
+
|
|
66
|
+
$: {
|
|
67
|
+
if (JSON.stringify(value) !== JSON.stringify(old_value)) {
|
|
68
|
+
old_value = value;
|
|
69
|
+
gradio.dispatch("change");
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function handle_change({ detail }: CustomEvent<FileData | null>): void {
|
|
74
|
+
if (detail != null) {
|
|
75
|
+
value = { video: detail, subtitles: null } as {
|
|
76
|
+
video: FileData;
|
|
77
|
+
subtitles: FileData | null;
|
|
78
|
+
} | null;
|
|
79
|
+
} else {
|
|
80
|
+
value = null;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
{#if mode === "static"}
|
|
86
|
+
<Block
|
|
87
|
+
{visible}
|
|
88
|
+
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
89
|
+
border_mode={dragging ? "focus" : "base"}
|
|
90
|
+
padding={false}
|
|
91
|
+
{elem_id}
|
|
92
|
+
{elem_classes}
|
|
93
|
+
{height}
|
|
94
|
+
{width}
|
|
95
|
+
{container}
|
|
96
|
+
{scale}
|
|
97
|
+
{min_width}
|
|
98
|
+
allow_overflow={false}
|
|
99
|
+
>
|
|
100
|
+
<StatusTracker
|
|
101
|
+
autoscroll={gradio.autoscroll}
|
|
102
|
+
i18n={gradio.i18n}
|
|
103
|
+
{...loading_status}
|
|
104
|
+
/>
|
|
105
|
+
|
|
106
|
+
<StaticVideo
|
|
107
|
+
value={_video}
|
|
108
|
+
subtitle={_subtitle}
|
|
109
|
+
{label}
|
|
110
|
+
{show_label}
|
|
111
|
+
{autoplay}
|
|
112
|
+
{show_share_button}
|
|
113
|
+
on:play={() => gradio.dispatch("play")}
|
|
114
|
+
on:pause={() => gradio.dispatch("pause")}
|
|
115
|
+
on:stop={() => gradio.dispatch("stop")}
|
|
116
|
+
on:end={() => gradio.dispatch("end")}
|
|
117
|
+
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
118
|
+
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
119
|
+
i18n={gradio.i18n}
|
|
120
|
+
/>
|
|
121
|
+
</Block>
|
|
122
|
+
{:else}
|
|
123
|
+
<Block
|
|
124
|
+
{visible}
|
|
125
|
+
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
126
|
+
border_mode={dragging ? "focus" : "base"}
|
|
127
|
+
padding={false}
|
|
128
|
+
{elem_id}
|
|
129
|
+
{elem_classes}
|
|
130
|
+
{height}
|
|
131
|
+
{width}
|
|
132
|
+
{container}
|
|
133
|
+
{scale}
|
|
134
|
+
{min_width}
|
|
135
|
+
allow_overflow={false}
|
|
136
|
+
>
|
|
137
|
+
<StatusTracker
|
|
138
|
+
autoscroll={gradio.autoscroll}
|
|
139
|
+
i18n={gradio.i18n}
|
|
140
|
+
{...loading_status}
|
|
141
|
+
/>
|
|
142
|
+
|
|
143
|
+
<Video
|
|
144
|
+
value={_video}
|
|
145
|
+
subtitle={_subtitle}
|
|
146
|
+
on:change={handle_change}
|
|
147
|
+
on:drag={({ detail }) => (dragging = detail)}
|
|
148
|
+
on:error={({ detail }) => {
|
|
149
|
+
loading_status = loading_status || {};
|
|
150
|
+
loading_status.status = "error";
|
|
151
|
+
loading_status.message = detail;
|
|
152
|
+
}}
|
|
153
|
+
{label}
|
|
154
|
+
{show_label}
|
|
155
|
+
{source}
|
|
156
|
+
{mirror_webcam}
|
|
157
|
+
{include_audio}
|
|
158
|
+
{autoplay}
|
|
159
|
+
{root}
|
|
160
|
+
on:clear={() => gradio.dispatch("clear")}
|
|
161
|
+
on:play={() => gradio.dispatch("play")}
|
|
162
|
+
on:pause={() => gradio.dispatch("pause")}
|
|
163
|
+
on:upload={() => gradio.dispatch("upload")}
|
|
164
|
+
on:stop={() => gradio.dispatch("stop")}
|
|
165
|
+
on:end={() => gradio.dispatch("end")}
|
|
166
|
+
on:start_recording={() => gradio.dispatch("start_recording")}
|
|
167
|
+
on:stop_recording={() => gradio.dispatch("stop_recording")}
|
|
168
|
+
i18n={gradio.i18n}
|
|
169
|
+
>
|
|
170
|
+
<UploadText i18n={gradio.i18n} type="video" />
|
|
171
|
+
</Video>
|
|
172
|
+
</Block>
|
|
173
|
+
{/if}
|
package/Video.stories.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/video",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.6",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "index.svelte",
|
|
7
6
|
"author": "",
|
|
8
7
|
"license": "ISC",
|
|
9
8
|
"private": false,
|
|
10
9
|
"dependencies": {
|
|
11
|
-
"@gradio/atoms": "^0.2.0-beta.
|
|
12
|
-
"@gradio/icons": "^0.2.0-beta.
|
|
13
|
-
"@gradio/image": "^0.3.0-beta.
|
|
14
|
-
"@gradio/statustracker": "^0.3.0-beta.
|
|
15
|
-
"@gradio/upload": "^0.3.0-beta.
|
|
16
|
-
"@gradio/utils": "^0.2.0-beta.
|
|
10
|
+
"@gradio/atoms": "^0.2.0-beta.4",
|
|
11
|
+
"@gradio/icons": "^0.2.0-beta.1",
|
|
12
|
+
"@gradio/image": "^0.3.0-beta.6",
|
|
13
|
+
"@gradio/statustracker": "^0.3.0-beta.6",
|
|
14
|
+
"@gradio/upload": "^0.3.0-beta.4",
|
|
15
|
+
"@gradio/utils": "^0.2.0-beta.4",
|
|
16
|
+
"@gradio/wasm": "^0.2.0-beta.0"
|
|
17
17
|
},
|
|
18
18
|
"main_changeset": true,
|
|
19
19
|
"exports": {
|
|
20
|
-
"
|
|
21
|
-
"./
|
|
22
|
-
"./
|
|
23
|
-
"./example": "./example/index.ts"
|
|
20
|
+
".": "./Index.svelte",
|
|
21
|
+
"./example": "./Example.svelte",
|
|
22
|
+
"./package.json": "./package.json"
|
|
24
23
|
}
|
|
25
24
|
}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
import { Upload, ModifyUpload } from "@gradio/upload";
|
|
4
4
|
import type { FileData } from "@gradio/upload";
|
|
5
5
|
import { BlockLabel } from "@gradio/atoms";
|
|
6
|
-
import { Webcam } from "@gradio/image
|
|
6
|
+
import { Webcam } from "@gradio/image";
|
|
7
7
|
import { Video } from "@gradio/icons";
|
|
8
8
|
|
|
9
|
-
import { prettyBytes, playable } from "
|
|
10
|
-
import Player from "
|
|
9
|
+
import { prettyBytes, playable } from "./utils";
|
|
10
|
+
import Player from "./Player.svelte";
|
|
11
11
|
import type { I18nFormatter } from "@gradio/utils";
|
|
12
12
|
|
|
13
13
|
export let value: FileData | null = null;
|
package/shared/Player.svelte
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { createEventDispatcher } from "svelte";
|
|
3
3
|
import { Play, Pause, Maximise, Undo } from "@gradio/icons";
|
|
4
|
-
import
|
|
4
|
+
import Video from "./StaticVideo.svelte";
|
|
5
5
|
|
|
6
6
|
export let src: string;
|
|
7
7
|
export let subtitle: string | null = null;
|
|
@@ -83,23 +83,24 @@
|
|
|
83
83
|
</script>
|
|
84
84
|
|
|
85
85
|
<div class="wrap">
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
86
|
+
<div class:mirror>
|
|
87
|
+
<Video
|
|
88
|
+
{src}
|
|
89
|
+
preload="auto"
|
|
90
|
+
{autoplay}
|
|
91
|
+
on:click={play_pause}
|
|
92
|
+
on:play
|
|
93
|
+
on:pause
|
|
94
|
+
on:ended={handle_end}
|
|
95
|
+
bind:currentTime={time}
|
|
96
|
+
bind:duration
|
|
97
|
+
bind:paused
|
|
98
|
+
bind:node={video}
|
|
99
|
+
data-testid={`${label}-player`}
|
|
100
|
+
>
|
|
101
|
+
<track kind="captions" src={subtitle} default />
|
|
102
|
+
</Video>
|
|
103
|
+
</div>
|
|
103
104
|
|
|
104
105
|
<div class="controls">
|
|
105
106
|
<div class="inner">
|
|
@@ -168,14 +169,6 @@
|
|
|
168
169
|
background-color: rgba(255, 255, 255, 0.9);
|
|
169
170
|
}
|
|
170
171
|
|
|
171
|
-
video {
|
|
172
|
-
position: inherit;
|
|
173
|
-
background-color: black;
|
|
174
|
-
width: var(--size-full);
|
|
175
|
-
height: var(--size-full);
|
|
176
|
-
object-fit: contain;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
172
|
.mirror {
|
|
180
173
|
transform: scaleX(-1);
|
|
181
174
|
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLVideoAttributes } from "svelte/elements";
|
|
3
|
+
import { createEventDispatcher } from "svelte";
|
|
4
|
+
import { loaded } from "./utils";
|
|
5
|
+
|
|
6
|
+
import { resolve_wasm_src } from "@gradio/wasm/svelte";
|
|
7
|
+
|
|
8
|
+
export let src: HTMLVideoAttributes["src"] = undefined;
|
|
9
|
+
|
|
10
|
+
export let muted: HTMLVideoAttributes["muted"] = undefined;
|
|
11
|
+
export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
|
|
12
|
+
export let preload: HTMLVideoAttributes["preload"] = undefined;
|
|
13
|
+
export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
|
|
14
|
+
export let controls: HTMLVideoAttributes["controls"] = undefined;
|
|
15
|
+
|
|
16
|
+
export let currentTime: number | undefined = undefined;
|
|
17
|
+
export let duration: number | undefined = undefined;
|
|
18
|
+
export let paused: boolean | undefined = undefined;
|
|
19
|
+
|
|
20
|
+
export let node: HTMLVideoElement | undefined = undefined;
|
|
21
|
+
|
|
22
|
+
const dispatch = createEventDispatcher();
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#await resolve_wasm_src(src) then resolved_src}
|
|
26
|
+
<!--
|
|
27
|
+
The spread operator with `$$props` or `$$restProps` can't be used here
|
|
28
|
+
to pass props from the parent component to the <video> element
|
|
29
|
+
because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
|
|
30
|
+
For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
|
|
31
|
+
Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
|
|
32
|
+
-->
|
|
33
|
+
<video
|
|
34
|
+
src={resolved_src}
|
|
35
|
+
{muted}
|
|
36
|
+
{playsinline}
|
|
37
|
+
{preload}
|
|
38
|
+
{autoplay}
|
|
39
|
+
{controls}
|
|
40
|
+
on:loadeddata={dispatch.bind(null, "loadeddata")}
|
|
41
|
+
on:click={dispatch.bind(null, "click")}
|
|
42
|
+
on:play={dispatch.bind(null, "play")}
|
|
43
|
+
on:pause={dispatch.bind(null, "pause")}
|
|
44
|
+
on:ended={dispatch.bind(null, "ended")}
|
|
45
|
+
on:mouseover={dispatch.bind(null, "mouseover")}
|
|
46
|
+
on:mouseout={dispatch.bind(null, "mouseout")}
|
|
47
|
+
on:focus={dispatch.bind(null, "focus")}
|
|
48
|
+
on:blur={dispatch.bind(null, "blur")}
|
|
49
|
+
bind:currentTime
|
|
50
|
+
bind:duration
|
|
51
|
+
bind:paused
|
|
52
|
+
bind:this={node}
|
|
53
|
+
use:loaded={{ autoplay: autoplay ?? false }}
|
|
54
|
+
data-testid={$$props["data-testid"]}
|
|
55
|
+
>
|
|
56
|
+
<slot />
|
|
57
|
+
</video>
|
|
58
|
+
{:catch error}
|
|
59
|
+
<p style="color: red;">{error.message}</p>
|
|
60
|
+
{/await}
|
|
61
|
+
|
|
62
|
+
<style>
|
|
63
|
+
video {
|
|
64
|
+
position: inherit;
|
|
65
|
+
background-color: black;
|
|
66
|
+
width: var(--size-full);
|
|
67
|
+
height: var(--size-full);
|
|
68
|
+
object-fit: contain;
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLVideoAttributes } from "svelte/elements";
|
|
3
|
+
import { createEventDispatcher } from "svelte";
|
|
4
|
+
import { loaded } from "./utils";
|
|
5
|
+
|
|
6
|
+
import { resolve_wasm_src } from "@gradio/wasm/svelte";
|
|
7
|
+
|
|
8
|
+
export let src: HTMLVideoAttributes["src"] = undefined;
|
|
9
|
+
|
|
10
|
+
export let muted: HTMLVideoAttributes["muted"] = undefined;
|
|
11
|
+
export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
|
|
12
|
+
export let preload: HTMLVideoAttributes["preload"] = undefined;
|
|
13
|
+
export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
|
|
14
|
+
export let controls: HTMLVideoAttributes["controls"] = undefined;
|
|
15
|
+
|
|
16
|
+
export let currentTime: number | undefined = undefined;
|
|
17
|
+
export let duration: number | undefined = undefined;
|
|
18
|
+
export let paused: boolean | undefined = undefined;
|
|
19
|
+
|
|
20
|
+
export let node: HTMLVideoElement | undefined = undefined;
|
|
21
|
+
|
|
22
|
+
const dispatch = createEventDispatcher();
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#await resolve_wasm_src(src) then resolved_src}
|
|
26
|
+
<!--
|
|
27
|
+
The spread operator with `$$props` or `$$restProps` can't be used here
|
|
28
|
+
to pass props from the parent component to the <video> element
|
|
29
|
+
because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
|
|
30
|
+
For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
|
|
31
|
+
Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
|
|
32
|
+
-->
|
|
33
|
+
<video
|
|
34
|
+
src={resolved_src}
|
|
35
|
+
{muted}
|
|
36
|
+
{playsinline}
|
|
37
|
+
{preload}
|
|
38
|
+
{autoplay}
|
|
39
|
+
{controls}
|
|
40
|
+
on:loadeddata={dispatch.bind(null, "loadeddata")}
|
|
41
|
+
on:click={dispatch.bind(null, "click")}
|
|
42
|
+
on:play={dispatch.bind(null, "play")}
|
|
43
|
+
on:pause={dispatch.bind(null, "pause")}
|
|
44
|
+
on:ended={dispatch.bind(null, "ended")}
|
|
45
|
+
on:mouseover={dispatch.bind(null, "mouseover")}
|
|
46
|
+
on:mouseout={dispatch.bind(null, "mouseout")}
|
|
47
|
+
on:focus={dispatch.bind(null, "focus")}
|
|
48
|
+
on:blur={dispatch.bind(null, "blur")}
|
|
49
|
+
bind:currentTime
|
|
50
|
+
bind:duration
|
|
51
|
+
bind:paused
|
|
52
|
+
bind:this={node}
|
|
53
|
+
use:loaded={{ autoplay: autoplay ?? false }}
|
|
54
|
+
data-testid={$$props["data-testid"]}
|
|
55
|
+
>
|
|
56
|
+
<slot />
|
|
57
|
+
</video>
|
|
58
|
+
{:catch error}
|
|
59
|
+
<p style="color: red;">{error.message}</p>
|
|
60
|
+
{/await}
|
|
61
|
+
|
|
62
|
+
<style>
|
|
63
|
+
video {
|
|
64
|
+
position: inherit;
|
|
65
|
+
background-color: black;
|
|
66
|
+
width: var(--size-full);
|
|
67
|
+
height: var(--size-full);
|
|
68
|
+
object-fit: contain;
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Video, Download } from "@gradio/icons";
|
|
6
6
|
import { uploadToHuggingFace } from "@gradio/utils";
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import Player from "./Player.svelte";
|
|
9
9
|
import type { I18nFormatter } from "js/app/src/gradio_helper";
|
|
10
10
|
|
|
11
11
|
export let value: FileData | null = null;
|
package/example/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Video.svelte";
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
<svelte:options accessors={true} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import type { Gradio } from "@gradio/utils";
|
|
5
|
-
import type { FileData } from "@gradio/upload";
|
|
6
|
-
import { normalise_file } from "@gradio/upload";
|
|
7
|
-
import { Block } from "@gradio/atoms";
|
|
8
|
-
import Video from "./Video.svelte";
|
|
9
|
-
import { UploadText } from "@gradio/atoms";
|
|
10
|
-
|
|
11
|
-
import { StatusTracker } from "@gradio/statustracker";
|
|
12
|
-
import type { LoadingStatus } from "@gradio/statustracker";
|
|
13
|
-
|
|
14
|
-
export let elem_id = "";
|
|
15
|
-
export let elem_classes: string[] = [];
|
|
16
|
-
export let visible = true;
|
|
17
|
-
export let value: { video: FileData; subtitles: FileData | null } | null =
|
|
18
|
-
null;
|
|
19
|
-
let old_value: { video: FileData; subtitles: FileData | null } | null = null;
|
|
20
|
-
|
|
21
|
-
export let label: string;
|
|
22
|
-
export let source: "upload" | "webcam";
|
|
23
|
-
export let root: string;
|
|
24
|
-
export let root_url: null | string;
|
|
25
|
-
export let show_label: boolean;
|
|
26
|
-
export let loading_status: LoadingStatus;
|
|
27
|
-
export let height: number | undefined;
|
|
28
|
-
export let width: number | undefined;
|
|
29
|
-
export let mirror_webcam: boolean;
|
|
30
|
-
export let include_audio: boolean;
|
|
31
|
-
export let container = false;
|
|
32
|
-
export let scale: number | null = null;
|
|
33
|
-
export let min_width: number | undefined = undefined;
|
|
34
|
-
export let autoplay = false;
|
|
35
|
-
export let gradio: Gradio<{
|
|
36
|
-
change: never;
|
|
37
|
-
clear: never;
|
|
38
|
-
play: never;
|
|
39
|
-
pause: never;
|
|
40
|
-
upload: never;
|
|
41
|
-
stop: never;
|
|
42
|
-
end: never;
|
|
43
|
-
start_recording: never;
|
|
44
|
-
stop_recording: never;
|
|
45
|
-
}>;
|
|
46
|
-
|
|
47
|
-
let _video: FileData | null = null;
|
|
48
|
-
let _subtitle: FileData | null = null;
|
|
49
|
-
|
|
50
|
-
$: {
|
|
51
|
-
if (value != null) {
|
|
52
|
-
_video = normalise_file(value.video, root, root_url);
|
|
53
|
-
_subtitle = normalise_file(value.subtitles, root, root_url);
|
|
54
|
-
} else {
|
|
55
|
-
_video = null;
|
|
56
|
-
_subtitle = null;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
let dragging = false;
|
|
61
|
-
|
|
62
|
-
function handle_change({ detail }: CustomEvent<FileData | null>): void {
|
|
63
|
-
if (detail != null) {
|
|
64
|
-
value = { video: detail, subtitles: null } as {
|
|
65
|
-
video: FileData;
|
|
66
|
-
subtitles: FileData | null;
|
|
67
|
-
} | null;
|
|
68
|
-
} else {
|
|
69
|
-
value = null;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
$: {
|
|
74
|
-
if (JSON.stringify(value) !== JSON.stringify(old_value)) {
|
|
75
|
-
old_value = value;
|
|
76
|
-
gradio.dispatch("change");
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
</script>
|
|
80
|
-
|
|
81
|
-
<Block
|
|
82
|
-
{visible}
|
|
83
|
-
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
84
|
-
border_mode={dragging ? "focus" : "base"}
|
|
85
|
-
padding={false}
|
|
86
|
-
{elem_id}
|
|
87
|
-
{elem_classes}
|
|
88
|
-
{height}
|
|
89
|
-
{width}
|
|
90
|
-
{container}
|
|
91
|
-
{scale}
|
|
92
|
-
{min_width}
|
|
93
|
-
allow_overflow={false}
|
|
94
|
-
>
|
|
95
|
-
<StatusTracker
|
|
96
|
-
autoscroll={gradio.autoscroll}
|
|
97
|
-
i18n={gradio.i18n}
|
|
98
|
-
{...loading_status}
|
|
99
|
-
/>
|
|
100
|
-
|
|
101
|
-
<Video
|
|
102
|
-
value={_video}
|
|
103
|
-
subtitle={_subtitle}
|
|
104
|
-
on:change={handle_change}
|
|
105
|
-
on:drag={({ detail }) => (dragging = detail)}
|
|
106
|
-
on:error={({ detail }) => {
|
|
107
|
-
loading_status = loading_status || {};
|
|
108
|
-
loading_status.status = "error";
|
|
109
|
-
loading_status.message = detail;
|
|
110
|
-
}}
|
|
111
|
-
{label}
|
|
112
|
-
{show_label}
|
|
113
|
-
{source}
|
|
114
|
-
{mirror_webcam}
|
|
115
|
-
{include_audio}
|
|
116
|
-
{autoplay}
|
|
117
|
-
{root}
|
|
118
|
-
on:clear={() => gradio.dispatch("clear")}
|
|
119
|
-
on:play={() => gradio.dispatch("play")}
|
|
120
|
-
on:pause={() => gradio.dispatch("pause")}
|
|
121
|
-
on:upload={() => gradio.dispatch("upload")}
|
|
122
|
-
on:stop={() => gradio.dispatch("stop")}
|
|
123
|
-
on:end={() => gradio.dispatch("end")}
|
|
124
|
-
on:start_recording={() => gradio.dispatch("start_recording")}
|
|
125
|
-
on:stop_recording={() => gradio.dispatch("stop_recording")}
|
|
126
|
-
i18n={gradio.i18n}
|
|
127
|
-
>
|
|
128
|
-
<UploadText i18n={gradio.i18n} type="video" />
|
|
129
|
-
</Video>
|
|
130
|
-
</Block>
|
package/interactive/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./InteractiveVideo.svelte";
|
package/shared/index.ts
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
<svelte:options accessors={true} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import type { Gradio, ShareData } from "@gradio/utils";
|
|
5
|
-
import type { FileData } from "@gradio/upload";
|
|
6
|
-
import { normalise_file } from "@gradio/upload";
|
|
7
|
-
import { Block } from "@gradio/atoms";
|
|
8
|
-
import StaticVideo from "./VideoPreview.svelte";
|
|
9
|
-
|
|
10
|
-
import { StatusTracker } from "@gradio/statustracker";
|
|
11
|
-
import type { LoadingStatus } from "@gradio/statustracker";
|
|
12
|
-
|
|
13
|
-
export let elem_id = "";
|
|
14
|
-
export let elem_classes: string[] = [];
|
|
15
|
-
export let visible = true;
|
|
16
|
-
export let value: { video: FileData; subtitles: FileData | null } | null =
|
|
17
|
-
null;
|
|
18
|
-
let old_value: { video: FileData; subtitles: FileData | null } | null = null;
|
|
19
|
-
|
|
20
|
-
export let label: string;
|
|
21
|
-
export let source: "upload" | "webcam";
|
|
22
|
-
export let root: string;
|
|
23
|
-
export let root_url: null | string;
|
|
24
|
-
export let show_label: boolean;
|
|
25
|
-
export let loading_status: LoadingStatus;
|
|
26
|
-
export let height: number | undefined;
|
|
27
|
-
export let width: number | undefined;
|
|
28
|
-
|
|
29
|
-
export let container = false;
|
|
30
|
-
export let scale: number | null = null;
|
|
31
|
-
export let min_width: number | undefined = undefined;
|
|
32
|
-
export let autoplay = false;
|
|
33
|
-
export let show_share_button = true;
|
|
34
|
-
export let gradio: Gradio<{
|
|
35
|
-
change: never;
|
|
36
|
-
clear: never;
|
|
37
|
-
play: never;
|
|
38
|
-
pause: never;
|
|
39
|
-
upload: never;
|
|
40
|
-
stop: never;
|
|
41
|
-
end: never;
|
|
42
|
-
start_recording: never;
|
|
43
|
-
stop_recording: never;
|
|
44
|
-
share: ShareData;
|
|
45
|
-
error: string;
|
|
46
|
-
}>;
|
|
47
|
-
|
|
48
|
-
let _video: FileData | null = null;
|
|
49
|
-
let _subtitle: FileData | null = null;
|
|
50
|
-
|
|
51
|
-
$: {
|
|
52
|
-
if (value != null) {
|
|
53
|
-
_video = normalise_file(value.video, root, root_url);
|
|
54
|
-
_subtitle = normalise_file(value.subtitles, root, root_url);
|
|
55
|
-
} else {
|
|
56
|
-
_video = null;
|
|
57
|
-
_subtitle = null;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
let dragging = false;
|
|
62
|
-
|
|
63
|
-
$: {
|
|
64
|
-
if (JSON.stringify(value) !== JSON.stringify(old_value)) {
|
|
65
|
-
old_value = value;
|
|
66
|
-
gradio.dispatch("change");
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<Block
|
|
72
|
-
{visible}
|
|
73
|
-
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
74
|
-
border_mode={dragging ? "focus" : "base"}
|
|
75
|
-
padding={false}
|
|
76
|
-
{elem_id}
|
|
77
|
-
{elem_classes}
|
|
78
|
-
{height}
|
|
79
|
-
{width}
|
|
80
|
-
{container}
|
|
81
|
-
{scale}
|
|
82
|
-
{min_width}
|
|
83
|
-
allow_overflow={false}
|
|
84
|
-
>
|
|
85
|
-
<StatusTracker
|
|
86
|
-
autoscroll={gradio.autoscroll}
|
|
87
|
-
i18n={gradio.i18n}
|
|
88
|
-
{...loading_status}
|
|
89
|
-
/>
|
|
90
|
-
|
|
91
|
-
<StaticVideo
|
|
92
|
-
value={_video}
|
|
93
|
-
subtitle={_subtitle}
|
|
94
|
-
{label}
|
|
95
|
-
{show_label}
|
|
96
|
-
{autoplay}
|
|
97
|
-
{show_share_button}
|
|
98
|
-
on:play={() => gradio.dispatch("play")}
|
|
99
|
-
on:pause={() => gradio.dispatch("pause")}
|
|
100
|
-
on:stop={() => gradio.dispatch("stop")}
|
|
101
|
-
on:end={() => gradio.dispatch("end")}
|
|
102
|
-
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
103
|
-
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
104
|
-
i18n={gradio.i18n}
|
|
105
|
-
/>
|
|
106
|
-
</Block>
|
package/static/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./StaticVideo.svelte";
|