@gradio/video 0.14.7 → 0.14.9

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 (12) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/Index.svelte +3 -5
  3. package/Video.stories.svelte +29 -5
  4. package/Video.test.ts +45 -9
  5. package/dist/Index.svelte +2 -4
  6. package/dist/Index.svelte.d.ts +4 -13
  7. package/dist/shared/InteractiveVideo.svelte +4 -5
  8. package/dist/shared/InteractiveVideo.svelte.d.ts +2 -4
  9. package/dist/shared/utils.d.ts +4 -0
  10. package/package.json +6 -6
  11. package/shared/InteractiveVideo.svelte +5 -6
  12. package/shared/utils.ts +5 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @gradio/video
2
2
 
3
+ ## 0.14.9
4
+
5
+ ### Fixes
6
+
7
+ - [#10979](https://github.com/gradio-app/gradio/pull/10979) [`975feee`](https://github.com/gradio-app/gradio/commit/975feee3925e5b65e52ae00da5c5066d8889ae6a) - improve webcam options for the ImageEditor. Thanks @pngwn!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/upload@0.16.1
12
+ - @gradio/atoms@0.15.1
13
+ - @gradio/statustracker@0.10.8
14
+ - @gradio/icons@0.12.0
15
+ - @gradio/image@0.22.1
16
+
17
+ ## 0.14.8
18
+
19
+ ### Dependency updates
20
+
21
+ - @gradio/statustracker@0.10.7
22
+ - @gradio/atoms@0.15.0
23
+ - @gradio/icons@0.11.0
24
+ - @gradio/upload@0.16.0
25
+ - @gradio/image@0.22.0
26
+
3
27
  ## 0.14.7
4
28
 
5
29
  ### Dependency updates
package/Index.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  import Video from "./shared/InteractiveVideo.svelte";
10
10
  import { StatusTracker } from "@gradio/statustracker";
11
11
  import type { LoadingStatus } from "@gradio/statustracker";
12
-
12
+ import type { WebcamOptions } from "./shared/utils";
13
13
  export let elem_id = "";
14
14
  export let elem_classes: string[] = [];
15
15
  export let visible = true;
@@ -28,7 +28,6 @@
28
28
  export let loading_status: LoadingStatus;
29
29
  export let height: number | undefined;
30
30
  export let width: number | undefined;
31
- export let webcam_constraints: { [key: string]: any } | null = null;
32
31
 
33
32
  export let container = false;
34
33
  export let scale: number | null = null;
@@ -52,7 +51,7 @@
52
51
  clear_status: LoadingStatus;
53
52
  }>;
54
53
  export let interactive: boolean;
55
- export let mirror_webcam: boolean;
54
+ export let webcam_options: WebcamOptions;
56
55
  export let include_audio: boolean;
57
56
  export let loop = false;
58
57
  export let input_ready: boolean;
@@ -199,12 +198,11 @@
199
198
  {show_download_button}
200
199
  {sources}
201
200
  {active_source}
202
- {mirror_webcam}
201
+ {webcam_options}
203
202
  {include_audio}
204
203
  {autoplay}
205
204
  {root}
206
205
  {loop}
207
- {webcam_constraints}
208
206
  {handle_reset_value}
209
207
  on:clear={() => gradio.dispatch("clear")}
210
208
  on:play={() => gradio.dispatch("play")}
package/Video.stories.svelte CHANGED
@@ -34,7 +34,11 @@
34
34
  show_label: true,
35
35
  interactive: true,
36
36
  height: 400,
37
- width: 400
37
+ width: 400,
38
+ webcam_options: {
39
+ mirror: true,
40
+ constraints: null
41
+ }
38
42
  }}
39
43
  />
40
44
 
@@ -53,7 +57,11 @@
53
57
  show_download_button: true,
54
58
  interactive: false,
55
59
  height: 200,
56
- width: 400
60
+ width: 400,
61
+ webcam_options: {
62
+ mirror: true,
63
+ constraints: null
64
+ }
57
65
  }}
58
66
  />
59
67
  <Story
@@ -71,7 +79,11 @@
71
79
  show_download_button: false,
72
80
  interactive: false,
73
81
  height: 200,
74
- width: 400
82
+ width: 400,
83
+ webcam_options: {
84
+ mirror: true,
85
+ constraints: null
86
+ }
75
87
  }}
76
88
  />
77
89
 
@@ -84,7 +96,11 @@
84
96
  sources: ["upload", "webcam"],
85
97
  width: 400,
86
98
  height: 400,
87
- value: null
99
+ value: null,
100
+ webcam_options: {
101
+ mirror: true,
102
+ constraints: null
103
+ }
88
104
  }}
89
105
  />
90
106
 
@@ -104,6 +120,10 @@
104
120
  url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
105
121
  orig_name: "world.mp4"
106
122
  }
123
+ },
124
+ webcam_options: {
125
+ mirror: true,
126
+ constraints: null
107
127
  }
108
128
  }}
109
129
  />
@@ -122,7 +142,11 @@
122
142
  show_label: true,
123
143
  interactive: "true",
124
144
  sources: ["upload"],
125
- width: 400
145
+ width: 400,
146
+ webcam_options: {
147
+ mirror: true,
148
+ constraints: null
149
+ }
126
150
  }}
127
151
  play={async ({ canvasElement }) => {
128
152
  const canvas = within(canvasElement);
package/Video.test.ts CHANGED
@@ -53,7 +53,11 @@ describe("Video", () => {
53
53
  pending: false,
54
54
  name: "bar",
55
55
  sources: ["upload"],
56
- interactive: true
56
+ interactive: true,
57
+ webcam_options: {
58
+ mirror: true,
59
+ constraints: null
60
+ }
57
61
  });
58
62
  let vid = getByTestId("Test Label-player") as HTMLVideoElement;
59
63
  assert.equal(
@@ -81,7 +85,11 @@ describe("Video", () => {
81
85
  pending: false,
82
86
  name: "bar",
83
87
  sources: ["upload"],
84
- interactive: true
88
+ interactive: true,
89
+ webcam_options: {
90
+ mirror: true,
91
+ constraints: null
92
+ }
85
93
  });
86
94
  assert.equal(queryAllByText("Video Component").length, 1);
87
95
  });
@@ -103,7 +111,11 @@ describe("Video", () => {
103
111
  pending: false,
104
112
  name: "bar",
105
113
  sources: ["upload"],
106
- mode: "static"
114
+ mode: "static",
115
+ webcam_options: {
116
+ mirror: true,
117
+ constraints: null
118
+ }
107
119
  });
108
120
  let vid = getByTestId("test-player") as HTMLVideoElement;
109
121
  assert.equal(
@@ -129,7 +141,11 @@ describe("Video", () => {
129
141
  streaming: false,
130
142
  pending: false,
131
143
  sources: ["upload"],
132
- autoplay: true
144
+ autoplay: true,
145
+ webcam_options: {
146
+ mirror: true,
147
+ constraints: null
148
+ }
133
149
  });
134
150
  const startButton = getByTestId("test-player") as HTMLVideoElement;
135
151
  const fn = spyOn(startButton, "play");
@@ -153,7 +169,11 @@ describe("Video", () => {
153
169
  streaming: false,
154
170
  pending: false,
155
171
  sources: ["upload"],
156
- autoplay: true
172
+ autoplay: true,
173
+ webcam_options: {
174
+ mirror: true,
175
+ constraints: null
176
+ }
157
177
  });
158
178
  const startButton = getByTestId("test-player") as HTMLVideoElement;
159
179
  const fn = spyOn(startButton, "play");
@@ -178,7 +198,11 @@ describe("Video", () => {
178
198
  streaming: false,
179
199
  pending: false,
180
200
  sources: ["upload"],
181
- autoplay: true
201
+ autoplay: true,
202
+ webcam_options: {
203
+ mirror: true,
204
+ constraints: null
205
+ }
182
206
  });
183
207
  const startButton = getByTestId("test-player") as HTMLVideoElement;
184
208
  const fn = spyOn(startButton, "play");
@@ -211,7 +235,11 @@ describe("Video", () => {
211
235
  streaming: false,
212
236
  pending: false,
213
237
  sources: ["upload"],
214
- autoplay: true
238
+ autoplay: true,
239
+ webcam_options: {
240
+ mirror: true,
241
+ constraints: null
242
+ }
215
243
  });
216
244
  const startButton = getByTestId("test-player") as HTMLVideoElement;
217
245
  const fn = spyOn(startButton, "play");
@@ -240,7 +268,11 @@ describe("Video", () => {
240
268
  label: "video",
241
269
  show_label: true,
242
270
  value: data,
243
- root: "https://localhost:8000"
271
+ root: "https://localhost:8000",
272
+ webcam_options: {
273
+ mirror: true,
274
+ constraints: null
275
+ }
244
276
  });
245
277
 
246
278
  const downloadButton = results.getAllByTestId("download-div")[0];
@@ -267,7 +299,11 @@ describe("Video", () => {
267
299
  streaming: false,
268
300
  pending: false,
269
301
  sources: ["upload"],
270
- autoplay: true
302
+ autoplay: true,
303
+ webcam_options: {
304
+ mirror: true,
305
+ constraints: null
306
+ }
271
307
  });
272
308
 
273
309
  const mock = listen("change");
package/dist/Index.svelte CHANGED
@@ -16,7 +16,6 @@ export let show_label;
16
16
  export let loading_status;
17
17
  export let height;
18
18
  export let width;
19
- export let webcam_constraints = null;
20
19
  export let container = false;
21
20
  export let scale = null;
22
21
  export let min_width = void 0;
@@ -25,7 +24,7 @@ export let show_share_button = true;
25
24
  export let show_download_button;
26
25
  export let gradio;
27
26
  export let interactive;
28
- export let mirror_webcam;
27
+ export let webcam_options;
29
28
  export let include_audio;
30
29
  export let loop = false;
31
30
  export let input_ready;
@@ -157,12 +156,11 @@ function handle_error({ detail }) {
157
156
  {show_download_button}
158
157
  {sources}
159
158
  {active_source}
160
- {mirror_webcam}
159
+ {webcam_options}
161
160
  {include_audio}
162
161
  {autoplay}
163
162
  {root}
164
163
  {loop}
165
- {webcam_constraints}
166
164
  {handle_reset_value}
167
165
  on:clear={() => gradio.dispatch("clear")}
168
166
  on:play={() => gradio.dispatch("play")}
package/dist/Index.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
2
2
  import type { Gradio, ShareData } from "@gradio/utils";
3
3
  import type { FileData } from "@gradio/client";
4
4
  import type { LoadingStatus } from "@gradio/statustracker";
5
+ import type { WebcamOptions } from "./shared/utils";
5
6
  declare const __propDef: {
6
7
  props: {
7
8
  elem_id?: string | undefined;
@@ -18,9 +19,6 @@ declare const __propDef: {
18
19
  loading_status: LoadingStatus;
19
20
  height: number | undefined;
20
21
  width: number | undefined;
21
- webcam_constraints?: ({
22
- [key: string]: any;
23
- } | null) | undefined;
24
22
  container?: boolean | undefined;
25
23
  scale?: (number | null) | undefined;
26
24
  min_width?: number | undefined;
@@ -43,7 +41,7 @@ declare const __propDef: {
43
41
  clear_status: LoadingStatus;
44
42
  }>;
45
43
  interactive: boolean;
46
- mirror_webcam: boolean;
44
+ webcam_options: WebcamOptions;
47
45
  include_audio: boolean;
48
46
  loop?: boolean | undefined;
49
47
  input_ready: boolean;
@@ -96,13 +94,6 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
96
94
  get width(): number | undefined;
97
95
  /**accessor*/
98
96
  set width(_: number | undefined);
99
- get webcam_constraints(): {
100
- [key: string]: any;
101
- } | null | undefined;
102
- /**accessor*/
103
- set webcam_constraints(_: {
104
- [key: string]: any;
105
- } | null | undefined);
106
97
  get container(): boolean | undefined;
107
98
  /**accessor*/
108
99
  set container(_: boolean | undefined);
@@ -155,9 +146,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
155
146
  get interactive(): boolean;
156
147
  /**accessor*/
157
148
  set interactive(_: boolean);
158
- get mirror_webcam(): boolean;
149
+ get webcam_options(): WebcamOptions;
159
150
  /**accessor*/
160
- set mirror_webcam(_: boolean);
151
+ set webcam_options(_: WebcamOptions);
161
152
  get include_audio(): boolean;
162
153
  /**accessor*/
163
154
  set include_audio(_: boolean);
package/dist/shared/InteractiveVideo.svelte CHANGED
@@ -12,7 +12,7 @@ export let sources = ["webcam", "upload"];
12
12
  export let label = void 0;
13
13
  export let show_download_button = false;
14
14
  export let show_label = true;
15
- export let mirror_webcam = false;
15
+ export let webcam_options;
16
16
  export let include_audio;
17
17
  export let autoplay;
18
18
  export let root;
@@ -25,7 +25,6 @@ export let upload;
25
25
  export let stream_handler;
26
26
  export let loop;
27
27
  export let uploading = false;
28
- export let webcam_constraints = null;
29
28
  let has_change_history = false;
30
29
  const dispatch = createEventDispatcher();
31
30
  function handle_load({ detail }) {
@@ -74,9 +73,9 @@ $:
74
73
  {:else if active_source === "webcam"}
75
74
  <Webcam
76
75
  {root}
77
- {mirror_webcam}
76
+ mirror_webcam={webcam_options.mirror}
77
+ webcam_constraints={webcam_options.constraints}
78
78
  {include_audio}
79
- {webcam_constraints}
80
79
  mode="video"
81
80
  on:error
82
81
  on:capture={handle_capture}
@@ -102,7 +101,7 @@ $:
102
101
  on:pause
103
102
  on:stop
104
103
  on:end
105
- mirror={mirror_webcam && active_source === "webcam"}
104
+ mirror={webcam_options.mirror && active_source === "webcam"}
106
105
  {label}
107
106
  {handle_change}
108
107
  {handle_reset_value}
package/dist/shared/InteractiveVideo.svelte.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  import type { FileData, Client } from "@gradio/client";
3
+ import type { WebcamOptions } from "./utils";
3
4
  import type { I18nFormatter } from "@gradio/utils";
4
5
  declare const __propDef: {
5
6
  props: {
@@ -9,7 +10,7 @@ declare const __propDef: {
9
10
  label?: string | undefined;
10
11
  show_download_button?: boolean | undefined;
11
12
  show_label?: boolean | undefined;
12
- mirror_webcam?: boolean | undefined;
13
+ webcam_options: WebcamOptions;
13
14
  include_audio: boolean;
14
15
  autoplay: boolean;
15
16
  root: string;
@@ -21,9 +22,6 @@ declare const __propDef: {
21
22
  stream_handler: Client["stream"];
22
23
  loop: boolean;
23
24
  uploading?: boolean | undefined;
24
- webcam_constraints?: ({
25
- [key: string]: any;
26
- } | null) | undefined;
27
25
  };
28
26
  events: {
29
27
  error: CustomEvent<any>;
package/dist/shared/utils.d.ts CHANGED
@@ -7,3 +7,7 @@ export declare function loaded(node: HTMLVideoElement, { autoplay }: {
7
7
  export default function loadFfmpeg(): Promise<FFmpeg>;
8
8
  export declare function blob_to_data_url(blob: Blob): Promise<string>;
9
9
  export declare function trimVideo(ffmpeg: FFmpeg, startTime: number, endTime: number, videoElement: HTMLVideoElement): Promise<any>;
10
+ export interface WebcamOptions {
11
+ mirror: boolean;
12
+ constraints: Record<string, any>;
13
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.14.7",
3
+ "version": "0.14.9",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,14 +11,14 @@
11
11
  "@ffmpeg/util": "^0.12.1",
12
12
  "hls.js": "^1.5.13",
13
13
  "mrmime": "^2.0.0",
14
- "@gradio/atoms": "^0.14.1",
14
+ "@gradio/atoms": "^0.15.1",
15
+ "@gradio/icons": "^0.12.0",
15
16
  "@gradio/client": "^1.14.1",
16
- "@gradio/image": "^0.21.7",
17
- "@gradio/statustracker": "^0.10.6",
18
- "@gradio/upload": "^0.15.7",
17
+ "@gradio/image": "^0.22.1",
18
+ "@gradio/statustracker": "^0.10.8",
19
19
  "@gradio/utils": "^0.10.1",
20
20
  "@gradio/wasm": "^0.18.1",
21
- "@gradio/icons": "^0.10.0"
21
+ "@gradio/upload": "^0.16.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@gradio/preview": "^0.13.0"
package/shared/InteractiveVideo.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  import { BlockLabel } from "@gradio/atoms";
6
6
  import { Webcam } from "@gradio/image";
7
7
  import { Video } from "@gradio/icons";
8
-
8
+ import type { WebcamOptions } from "./utils";
9
9
  import { prettyBytes, playable } from "./utils";
10
10
  import Player from "./Player.svelte";
11
11
  import type { I18nFormatter } from "@gradio/utils";
@@ -21,7 +21,7 @@
21
21
  export let label: string | undefined = undefined;
22
22
  export let show_download_button = false;
23
23
  export let show_label = true;
24
- export let mirror_webcam = false;
24
+ export let webcam_options: WebcamOptions;
25
25
  export let include_audio: boolean;
26
26
  export let autoplay: boolean;
27
27
  export let root: string;
@@ -33,7 +33,6 @@
33
33
  export let stream_handler: Client["stream"];
34
34
  export let loop: boolean;
35
35
  export let uploading = false;
36
- export let webcam_constraints: { [key: string]: any } | null = null;
37
36
 
38
37
  let has_change_history = false;
39
38
 
@@ -99,9 +98,9 @@
99
98
  {:else if active_source === "webcam"}
100
99
  <Webcam
101
100
  {root}
102
- {mirror_webcam}
101
+ mirror_webcam={webcam_options.mirror}
102
+ webcam_constraints={webcam_options.constraints}
103
103
  {include_audio}
104
- {webcam_constraints}
105
104
  mode="video"
106
105
  on:error
107
106
  on:capture={handle_capture}
@@ -127,7 +126,7 @@
127
126
  on:pause
128
127
  on:stop
129
128
  on:end
130
- mirror={mirror_webcam && active_source === "webcam"}
129
+ mirror={webcam_options.mirror && active_source === "webcam"}
131
130
  {label}
132
131
  {handle_change}
133
132
  {handle_reset_value}
package/shared/utils.ts CHANGED
@@ -144,3 +144,8 @@ const getVideoExtensionFromMimeType = (mimeType: string): string | null => {
144
144
 
145
145
  return videoMimeToExtensionMap[mimeType] || null;
146
146
  };
147
+
148
+ export interface WebcamOptions {
149
+ mirror: boolean;
150
+ constraints: Record<string, any>;
151
+ }