@gradio/video 0.1.0-beta.5 → 0.1.0-beta.7

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +34 -33
  2. package/{example/Video.svelte → Example.svelte} +21 -19
  3. package/Index.svelte +173 -0
  4. package/Video.stories.svelte +1 -1
  5. package/package.json +11 -12
  6. package/{interactive/Video.svelte → shared/InteractiveVideo.svelte} +3 -3
  7. package/shared/Player.svelte +19 -26
  8. package/shared/StaticVideo.svelte +70 -0
  9. package/shared/Video.svelte +70 -0
  10. package/{static → shared}/VideoPreview.svelte +1 -1
  11. package/example/index.ts +0 -1
  12. package/interactive/InteractiveVideo.svelte +0 -130
  13. package/interactive/index.ts +0 -1
  14. package/shared/index.ts +0 -2
  15. package/static/StaticVideo.svelte +0 -106
  16. package/static/index.ts +0 -1
package/CHANGELOG.md CHANGED
@@ -1,55 +1,56 @@
1
1
  # @gradio/video
2
2
 
3
- ## 0.1.0-beta.5
4
-
5
- ### Features
6
-
7
- - [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
-
9
- ## 0.1.0-beta.4
3
+ ## 0.1.0-beta.7
10
4
 
11
5
  ### Patch Changes
12
6
 
13
- - Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
14
- - @gradio/utils@0.2.0-beta.3
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
7
+ - Updated dependencies [[`174b73619`](https://github.com/gradio-app/gradio/commit/174b736194756e23f51bbaf6f850bac5f1ca95b5), [`5fbda0bd2`](https://github.com/gradio-app/gradio/commit/5fbda0bd2b2bbb2282249b8875d54acf87cd7e84)]:
8
+ - @gradio/wasm@0.2.0-beta.1
9
+ - @gradio/image@0.3.0-beta.7
19
10
 
20
- ## 0.1.0-beta.3
11
+ ## 0.1.0-beta.6
21
12
 
22
- ### Patch Changes
13
+ ### Features
23
14
 
24
- - Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
25
- - @gradio/utils@0.2.0-beta.2
26
- - @gradio/atoms@0.2.0-beta.2
27
- - @gradio/image@0.3.0-beta.3
28
- - @gradio/statustracker@0.3.0-beta.3
29
- - @gradio/upload@0.3.0-beta.2
15
+ - [#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)!
16
+ - [#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)!
30
17
 
31
- ## 0.1.0-beta.2
18
+ ## 0.1.0
32
19
 
33
20
  ### Features
34
21
 
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)!
22
+ - [#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)!
23
+ - [#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)!
36
24
 
37
- ## 0.1.0-beta.1
25
+ ## 0.0.11
38
26
 
39
27
  ### Patch Changes
40
28
 
41
29
  - Updated dependencies []:
42
- - @gradio/utils@0.2.0-beta.1
43
- - @gradio/atoms@0.2.0-beta.1
44
- - @gradio/image@0.3.0-beta.1
45
- - @gradio/statustracker@0.3.0-beta.1
46
- - @gradio/upload@0.3.0-beta.1
30
+ - @gradio/utils@0.1.2
31
+ - @gradio/atoms@0.1.4
32
+ - @gradio/image@0.3.2
33
+ - @gradio/statustracker@0.2.2
34
+ - @gradio/upload@0.3.2
47
35
 
48
- ## 0.1.0-beta.0
36
+ ## 0.0.10
49
37
 
50
- ### Features
38
+ ### Patch Changes
39
+
40
+ - Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
41
+ - @gradio/icons@0.2.0
42
+ - @gradio/atoms@0.1.3
43
+ - @gradio/image@0.3.1
44
+ - @gradio/statustracker@0.2.1
45
+ - @gradio/upload@0.3.1
46
+
47
+ ## 0.0.9
48
+
49
+ ### Patch Changes
51
50
 
52
- - [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
51
+ - Updated dependencies [[`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423)]:
52
+ - @gradio/image@0.3.0
53
+ - @gradio/upload@0.3.0
53
54
 
54
55
  ## 0.0.8
55
56
 
@@ -127,4 +128,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
127
128
  - @gradio/image@0.1.0
128
129
  - @gradio/utils@0.0.2
129
130
  - @gradio/atoms@0.0.2
130
- - @gradio/upload@0.0.2
131
+ - @gradio/upload@0.0.2
package/{example/Video.svelte → Example.svelte} RENAMED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- import { playable } from "../shared";
3
- import { onMount } from "svelte";
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
- <video
28
- muted
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
- on:mouseover={video.play}
35
- on:mouseout={video.pause}
36
- src={samples_dir + value}
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
- video {
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
- video:hover,
51
- video.selected {
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
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
- import Video from "./interactive";
3
+ import Video from "./Index.svelte";
4
4
  </script>
5
5
 
6
6
  <Meta
package/package.json CHANGED
@@ -1,25 +1,24 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.1.0-beta.5",
3
+ "version": "0.1.0-beta.7",
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.3",
12
- "@gradio/icons": "^0.2.0-beta.0",
13
- "@gradio/image": "^0.3.0-beta.5",
14
- "@gradio/statustracker": "^0.3.0-beta.5",
15
- "@gradio/upload": "^0.3.0-beta.3",
16
- "@gradio/utils": "^0.2.0-beta.3"
10
+ "@gradio/atoms": "^0.2.0-beta.4",
11
+ "@gradio/icons": "^0.2.0-beta.1",
12
+ "@gradio/image": "^0.3.0-beta.7",
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.1"
17
17
  },
18
18
  "main_changeset": true,
19
19
  "exports": {
20
- "./package.json": "./package.json",
21
- "./interactive": "./interactive/index.ts",
22
- "./static": "./static/index.ts",
23
- "./example": "./example/index.ts"
20
+ ".": "./Index.svelte",
21
+ "./example": "./Example.svelte",
22
+ "./package.json": "./package.json"
24
23
  }
25
24
  }
package/{interactive/Video.svelte → shared/InteractiveVideo.svelte} RENAMED
@@ -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/interactive";
6
+ import { Webcam } from "@gradio/image";
7
7
  import { Video } from "@gradio/icons";
8
8
 
9
- import { prettyBytes, playable } from "../shared/utils";
10
- import Player from "../shared/Player.svelte";
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 { loaded } from "./utils";
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
- <video
87
- {src}
88
- preload="auto"
89
- on:click={play_pause}
90
- on:play
91
- on:pause
92
- on:ended={handle_end}
93
- bind:currentTime={time}
94
- bind:duration
95
- bind:paused
96
- bind:this={video}
97
- class:mirror
98
- use:loaded={{ autoplay }}
99
- data-testid={`${label}-player`}
100
- >
101
- <track kind="captions" src={subtitle} default />
102
- </video>
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
  }
package/shared/StaticVideo.svelte ADDED
@@ -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>
package/shared/Video.svelte ADDED
@@ -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>
package/{static → shared}/VideoPreview.svelte RENAMED
@@ -5,7 +5,7 @@
5
5
  import { Video, Download } from "@gradio/icons";
6
6
  import { uploadToHuggingFace } from "@gradio/utils";
7
7
 
8
- import { Player } from "../shared";
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";
package/interactive/InteractiveVideo.svelte DELETED
@@ -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,2 +0,0 @@
1
- export * from "./utils";
2
- export { default as Player } from "./Player.svelte";
package/static/StaticVideo.svelte 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";