@gradio/video 0.16.0 → 0.17.0-dev.0

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 CHANGED
@@ -1,5 +1,31 @@
1
1
  # @gradio/video
2
2
 
3
+ ## 0.17.0-dev.0
4
+
5
+ ### Features
6
+
7
+ - [#12041](https://github.com/gradio-app/gradio/pull/12041) [`90e8a2c`](https://github.com/gradio-app/gradio/commit/90e8a2c23774e1d2a7401bccf4bdc86f70531de5) - Video subtitles. Thanks @dawoodkhan82!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/upload@0.17.2-dev.0
12
+ - @gradio/client@2.0.0-dev.0
13
+ - @gradio/image@0.23.2-dev.0
14
+
15
+ ## 0.16.0
16
+
17
+ ### Dependency updates
18
+
19
+ - @gradio/client@1.19.1
20
+
21
+ ## 0.16.0
22
+
23
+ ### Dependency updates
24
+
25
+ - @gradio/image@0.23.1
26
+ - @gradio/upload@0.17.1
27
+ - @gradio/atoms@0.18.1
28
+
3
29
  ## 0.16.0
4
30
 
5
31
  ### Features
package/Example.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  export let type: "gallery" | "table";
7
7
  export let selected = false;
8
- export let value: { video: FileData; subtitles: FileData | null } | null;
8
+ export let value: null | FileData = null;
9
9
  export let loop: boolean;
10
10
  let video: HTMLVideoElement;
11
11
 
@@ -35,7 +35,7 @@
35
35
  on:loadeddata={init}
36
36
  on:mouseover={video.play.bind(video)}
37
37
  on:mouseout={video.pause.bind(video)}
38
- src={value?.video.url}
38
+ src={value?.url}
39
39
  is_stream={false}
40
40
  {loop}
41
41
  />
package/Index.svelte CHANGED
@@ -13,9 +13,9 @@
13
13
  export let elem_id = "";
14
14
  export let elem_classes: string[] = [];
15
15
  export let visible: boolean | "hidden" = true;
16
- export let value: { video: FileData; subtitles: FileData | null } | null =
17
- null;
18
- let old_value: { video: FileData; subtitles: FileData | null } | null = null;
16
+ export let value: null | FileData = null;
17
+ let old_value: null | FileData = null;
18
+ export let subtitles: null | FileData = null;
19
19
 
20
20
  export let label: string;
21
21
  export let sources:
@@ -33,8 +33,7 @@
33
33
  export let scale: number | null = null;
34
34
  export let min_width: number | undefined = undefined;
35
35
  export let autoplay = false;
36
- export let show_share_button = true;
37
- export let show_download_button: boolean;
36
+ export let buttons: string[] | null = null;
38
37
  export let gradio: Gradio<{
39
38
  change: never;
40
39
  clear: never;
@@ -57,14 +56,9 @@
57
56
  export let input_ready: boolean;
58
57
  let uploading = false;
59
58
  $: input_ready = !uploading;
60
-
61
- let _video: FileData | null = null;
62
- let _subtitle: FileData | null = null;
63
-
64
59
  let active_source: "webcam" | "upload";
65
60
 
66
- let initial_value: { video: FileData; subtitles: FileData | null } | null =
67
- value;
61
+ let initial_value: FileData | null = null;
68
62
 
69
63
  $: if (value && initial_value === null) {
70
64
  initial_value = value;
@@ -82,16 +76,6 @@
82
76
  active_source = sources[0];
83
77
  }
84
78
 
85
- $: {
86
- if (value != null) {
87
- _video = value.video;
88
- _subtitle = value.subtitles;
89
- } else {
90
- _video = null;
91
- _subtitle = null;
92
- }
93
- }
94
-
95
79
  let dragging = false;
96
80
 
97
81
  $: {
@@ -103,10 +87,7 @@
103
87
 
104
88
  function handle_change({ detail }: CustomEvent<FileData | null>): void {
105
89
  if (detail != null) {
106
- value = { video: detail, subtitles: null } as {
107
- video: FileData;
108
- subtitles: FileData | null;
109
- } | null;
90
+ value = detail;
110
91
  } else {
111
92
  value = null;
112
93
  }
@@ -146,14 +127,14 @@
146
127
  />
147
128
 
148
129
  <StaticVideo
149
- value={_video}
150
- subtitle={_subtitle}
130
+ {value}
131
+ subtitle={subtitles}
151
132
  {label}
152
133
  {show_label}
153
134
  {autoplay}
154
135
  {loop}
155
- {show_share_button}
156
- {show_download_button}
136
+ show_share_button={buttons?.includes("share") ?? true}
137
+ show_download_button={buttons?.includes("download") ?? true}
157
138
  on:play={() => gradio.dispatch("play")}
158
139
  on:pause={() => gradio.dispatch("pause")}
159
140
  on:stop={() => gradio.dispatch("stop")}
@@ -187,15 +168,15 @@
187
168
  />
188
169
 
189
170
  <Video
190
- value={_video}
191
- subtitle={_subtitle}
171
+ {value}
172
+ subtitle={subtitles}
192
173
  on:change={handle_change}
193
174
  on:drag={({ detail }) => (dragging = detail)}
194
175
  on:error={handle_error}
195
176
  bind:uploading
196
177
  {label}
197
178
  {show_label}
198
- {show_download_button}
179
+ show_download_button={buttons?.includes("download") ?? false}
199
180
  {sources}
200
181
  {active_source}
201
182
  {webcam_options}
@@ -46,11 +46,9 @@
46
46
  name="Static video"
47
47
  args={{
48
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
- }
49
+ path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
50
+ url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
51
+ orig_name: "world.mp4"
54
52
  },
55
53
  label: "world video",
56
54
  show_label: true,
@@ -68,11 +66,9 @@
68
66
  name="Static video with vertical video"
69
67
  args={{
70
68
  value: {
71
- video: {
72
- path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
73
- url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
74
- orig_name: "world_vertical.mp4"
75
- }
69
+ path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
70
+ url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
71
+ orig_name: "world_vertical.mp4"
76
72
  },
77
73
  label: "world video",
78
74
  show_label: true,
@@ -115,11 +111,9 @@
115
111
  width: 400,
116
112
  height: 400,
117
113
  value: {
118
- video: {
119
- path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
120
- url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
121
- orig_name: "world.mp4"
122
- }
114
+ path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
115
+ url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
116
+ orig_name: "world.mp4"
123
117
  },
124
118
  webcam_options: {
125
119
  mirror: true,
@@ -132,11 +126,9 @@
132
126
  name="Trim video"
133
127
  args={{
134
128
  value: {
135
- video: {
136
- path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
137
- url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
138
- orig_name: "world.mp4"
139
- }
129
+ path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
130
+ url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
131
+ orig_name: "world.mp4"
140
132
  },
141
133
  label: "world video",
142
134
  show_label: true,
package/Video.test.ts CHANGED
@@ -40,11 +40,8 @@ describe("Video", () => {
40
40
  show_label: true,
41
41
  loading_status,
42
42
  value: {
43
- video: {
44
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
45
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
46
- },
47
- subtitles: null
43
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
44
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
48
45
  },
49
46
  label: "Test Label",
50
47
  root: "foo",
@@ -72,11 +69,8 @@ describe("Video", () => {
72
69
  show_label: false,
73
70
  loading_status,
74
71
  value: {
75
- video: {
76
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
77
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
78
- },
79
- subtitles: null
72
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
73
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
80
74
  },
81
75
  label: "Video Component",
82
76
  root: "foo",
@@ -99,11 +93,8 @@ describe("Video", () => {
99
93
  show_label: true,
100
94
  loading_status,
101
95
  value: {
102
- video: {
103
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
104
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
105
- },
106
- subtitles: null
96
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
97
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
107
98
  },
108
99
  root: "foo",
109
100
  proxy_url: null,
@@ -130,11 +121,8 @@ describe("Video", () => {
130
121
  loading_status,
131
122
  interactive: false,
132
123
  value: {
133
- video: {
134
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
135
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
136
- },
137
- subtitles: null
124
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
125
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
138
126
  },
139
127
  root: "foo",
140
128
  proxy_url: null,
@@ -158,11 +146,8 @@ describe("Video", () => {
158
146
  show_label: true,
159
147
  loading_status,
160
148
  value: {
161
- video: {
162
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
163
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
164
- },
165
- subtitles: null
149
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
150
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
166
151
  },
167
152
  root: "foo",
168
153
  proxy_url: null,
@@ -187,11 +172,8 @@ describe("Video", () => {
187
172
  loading_status,
188
173
  interactive: false,
189
174
  value: {
190
- video: {
191
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
192
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
193
- },
194
- subtitles: null
175
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
176
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
195
177
  },
196
178
  root: "foo",
197
179
  proxy_url: null,
@@ -209,9 +191,7 @@ describe("Video", () => {
209
191
  startButton.dispatchEvent(new Event("loadeddata"));
210
192
  component.$set({
211
193
  value: {
212
- video: {
213
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
214
- }
194
+ path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
215
195
  }
216
196
  });
217
197
  startButton.dispatchEvent(new Event("loadeddata"));
@@ -224,11 +204,8 @@ describe("Video", () => {
224
204
  loading_status,
225
205
  interactive: true,
226
206
  value: {
227
- video: {
228
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
229
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
230
- },
231
- subtitles: null
207
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
208
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
232
209
  },
233
210
  root: "foo",
234
211
  proxy_url: null,
@@ -246,11 +223,8 @@ describe("Video", () => {
246
223
  startButton.dispatchEvent(new Event("loadeddata"));
247
224
  component.$set({
248
225
  value: {
249
- video: {
250
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
251
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
252
- },
253
- subtitles: null
226
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
227
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
254
228
  }
255
229
  });
256
230
  startButton.dispatchEvent(new Event("loadeddata"));
@@ -258,10 +232,8 @@ describe("Video", () => {
258
232
  });
259
233
  test("renders video and download button", async () => {
260
234
  const data = {
261
- video: {
262
- path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
263
- url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
264
- }
235
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
236
+ url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
265
237
  };
266
238
  const results = await render(Video, {
267
239
  interactive: false,
@@ -278,7 +250,7 @@ describe("Video", () => {
278
250
  const downloadButton = results.getAllByTestId("download-div")[0];
279
251
  expect(
280
252
  downloadButton.getElementsByTagName("a")[0].getAttribute("href")
281
- ).toBe(data.video.path);
253
+ ).toBe(data.path);
282
254
  expect(
283
255
  downloadButton.getElementsByTagName("button").length
284
256
  ).toBeGreaterThan(0);
@@ -3,7 +3,7 @@ import { playable } from "./shared/utils";
3
3
  import {} from "@gradio/client";
4
4
  export let type;
5
5
  export let selected = false;
6
- export let value;
6
+ export let value = null;
7
7
  export let loop;
8
8
  let video;
9
9
  async function init() {
@@ -31,7 +31,7 @@ async function init() {
31
31
  on:loadeddata={init}
32
32
  on:mouseover={video.play.bind(video)}
33
33
  on:mouseout={video.pause.bind(video)}
34
- src={value?.video.url}
34
+ src={value?.url}
35
35
  is_stream={false}
36
36
  {loop}
37
37
  />
@@ -4,10 +4,7 @@ declare const __propDef: {
4
4
  props: {
5
5
  type: "gallery" | "table";
6
6
  selected?: boolean;
7
- value: {
8
- video: FileData;
9
- subtitles: FileData | null;
10
- } | null;
7
+ value?: null | FileData;
11
8
  loop: boolean;
12
9
  };
13
10
  events: {
package/dist/Index.svelte CHANGED
@@ -9,6 +9,7 @@ export let elem_classes = [];
9
9
  export let visible = true;
10
10
  export let value = null;
11
11
  let old_value = null;
12
+ export let subtitles = null;
12
13
  export let label;
13
14
  export let sources;
14
15
  export let root;
@@ -20,8 +21,7 @@ export let container = false;
20
21
  export let scale = null;
21
22
  export let min_width = void 0;
22
23
  export let autoplay = false;
23
- export let show_share_button = true;
24
- export let show_download_button;
24
+ export let buttons = null;
25
25
  export let gradio;
26
26
  export let interactive;
27
27
  export let webcam_options;
@@ -30,10 +30,8 @@ export let loop = false;
30
30
  export let input_ready;
31
31
  let uploading = false;
32
32
  $: input_ready = !uploading;
33
- let _video = null;
34
- let _subtitle = null;
35
33
  let active_source;
36
- let initial_value = value;
34
+ let initial_value = null;
37
35
  $: if (value && initial_value === null) {
38
36
  initial_value = value;
39
37
  }
@@ -46,15 +44,6 @@ const handle_reset_value = () => {
46
44
  $: if (sources && !active_source) {
47
45
  active_source = sources[0];
48
46
  }
49
- $: {
50
- if (value != null) {
51
- _video = value.video;
52
- _subtitle = value.subtitles;
53
- } else {
54
- _video = null;
55
- _subtitle = null;
56
- }
57
- }
58
47
  let dragging = false;
59
48
  $: {
60
49
  if (JSON.stringify(value) !== JSON.stringify(old_value)) {
@@ -64,7 +53,7 @@ $: {
64
53
  }
65
54
  function handle_change({ detail }) {
66
55
  if (detail != null) {
67
- value = { video: detail, subtitles: null };
56
+ value = detail;
68
57
  } else {
69
58
  value = null;
70
59
  }
@@ -101,14 +90,14 @@ function handle_error({ detail }) {
101
90
  />
102
91
 
103
92
  <StaticVideo
104
- value={_video}
105
- subtitle={_subtitle}
93
+ {value}
94
+ subtitle={subtitles}
106
95
  {label}
107
96
  {show_label}
108
97
  {autoplay}
109
98
  {loop}
110
- {show_share_button}
111
- {show_download_button}
99
+ show_share_button={buttons?.includes("share") ?? true}
100
+ show_download_button={buttons?.includes("download") ?? true}
112
101
  on:play={() => gradio.dispatch("play")}
113
102
  on:pause={() => gradio.dispatch("pause")}
114
103
  on:stop={() => gradio.dispatch("stop")}
@@ -142,15 +131,15 @@ function handle_error({ detail }) {
142
131
  />
143
132
 
144
133
  <Video
145
- value={_video}
146
- subtitle={_subtitle}
134
+ {value}
135
+ subtitle={subtitles}
147
136
  on:change={handle_change}
148
137
  on:drag={({ detail }) => (dragging = detail)}
149
138
  on:error={handle_error}
150
139
  bind:uploading
151
140
  {label}
152
141
  {show_label}
153
- {show_download_button}
142
+ show_download_button={buttons?.includes("download") ?? false}
154
143
  {sources}
155
144
  {active_source}
156
145
  {webcam_options}
@@ -8,10 +8,8 @@ declare const __propDef: {
8
8
  elem_id?: string;
9
9
  elem_classes?: string[];
10
10
  visible?: boolean | "hidden";
11
- value?: {
12
- video: FileData;
13
- subtitles: FileData | null;
14
- } | null;
11
+ value?: null | FileData;
12
+ subtitles?: null | FileData;
15
13
  label: string;
16
14
  sources: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
17
15
  root: string;
@@ -23,8 +21,7 @@ declare const __propDef: {
23
21
  scale?: number | null;
24
22
  min_width?: number | undefined;
25
23
  autoplay?: boolean;
26
- show_share_button?: boolean;
27
- show_download_button: boolean;
24
+ buttons?: string[] | null;
28
25
  gradio: Gradio<{
29
26
  change: never;
30
27
  clear: never;
@@ -66,15 +63,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
66
63
  get visible(): boolean | "hidden" | undefined;
67
64
  /**accessor*/
68
65
  set visible(_: boolean | "hidden" | undefined);
69
- get value(): {
70
- video: FileData;
71
- subtitles: FileData | null;
72
- } | null | undefined;
73
- /**accessor*/
74
- set value(_: {
75
- video: FileData;
76
- subtitles: FileData | null;
77
- } | null | undefined);
66
+ get value(): any;
67
+ /**accessor*/
68
+ set value(_: any);
69
+ get subtitles(): any;
70
+ /**accessor*/
71
+ set subtitles(_: any);
78
72
  get label(): string;
79
73
  /**accessor*/
80
74
  set label(_: string);
@@ -108,12 +102,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
108
102
  get autoplay(): boolean | undefined;
109
103
  /**accessor*/
110
104
  set autoplay(_: boolean | undefined);
111
- get show_share_button(): boolean | undefined;
112
- /**accessor*/
113
- set show_share_button(_: boolean | undefined);
114
- get show_download_button(): boolean;
105
+ get buttons(): string[] | null | undefined;
115
106
  /**accessor*/
116
- set show_download_button(_: boolean);
107
+ set buttons(_: string[] | null | undefined);
117
108
  get gradio(): Gradio<{
118
109
  change: never;
119
110
  clear: never;
@@ -0,0 +1,5 @@
1
+ export interface SubtitleData {
2
+ start: number;
3
+ end: number;
4
+ text: string;
5
+ }
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.16.0",
3
+ "version": "0.17.0-dev.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,13 +11,13 @@
11
11
  "@ffmpeg/util": "^0.12.1",
12
12
  "hls.js": "^1.5.13",
13
13
  "mrmime": "^2.0.0",
14
- "@gradio/atoms": "^0.18.0",
14
+ "@gradio/atoms": "^0.18.1",
15
+ "@gradio/client": "^2.0.0-dev.0",
15
16
  "@gradio/icons": "^0.14.0",
16
- "@gradio/client": "^1.19.0",
17
- "@gradio/upload": "^0.17.0",
18
- "@gradio/image": "^0.23.0",
17
+ "@gradio/image": "^0.23.2-dev.0",
18
+ "@gradio/statustracker": "^0.11.1",
19
19
  "@gradio/utils": "^0.10.2",
20
- "@gradio/statustracker": "^0.11.1"
20
+ "@gradio/upload": "^0.17.2-dev.0"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@gradio/preview": "^0.14.0"
@@ -0,0 +1,5 @@
1
+ export interface SubtitleData {
2
+ start: number;
3
+ end: number;
4
+ text: string;
5
+ }