@gradio/video 0.1.1 → 0.1.2

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 (7) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/Index.svelte +12 -5
  3. package/Video.stories.svelte +19 -3
  4. package/package.json +3 -3
  5. package/shared/InteractiveVideo.svelte +2 -2
  6. package/shared/Video.svelte +11 -4
  7. package/shared/VideoTimeline.svelte +11 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @gradio/video
2
2
 
3
+ ## 0.1.2
4
+
5
+ ### Fixes
6
+
7
+ - [#6234](https://github.com/gradio-app/gradio/pull/6234) [`aaa55ce85`](https://github.com/gradio-app/gradio/commit/aaa55ce85e12f95aba9299445e9c5e59824da18e) - Video/Audio fixes. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
+
3
9
  ## 0.1.1
4
10
 
5
11
  ### Patch Changes
@@ -170,4 +176,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
170
176
  - @gradio/image@0.1.0
171
177
  - @gradio/utils@0.0.2
172
178
  - @gradio/atoms@0.0.2
173
- - @gradio/upload@0.0.2
179
+ - @gradio/upload@0.0.2
package/Index.svelte CHANGED
@@ -47,6 +47,7 @@
47
47
  stop_recording: never;
48
48
  share: ShareData;
49
49
  error: string;
50
+ warning: string;
50
51
  }>;
51
52
  export let interactive: boolean;
52
53
  export let mirror_webcam: boolean;
@@ -109,6 +110,16 @@
109
110
  value = null;
110
111
  }
111
112
  }
113
+
114
+ function handle_error({ detail }: CustomEvent<string>): void {
115
+ const [level, status] = detail.includes("Invalid file type")
116
+ ? ["warning", "complete"]
117
+ : ["error", "error"];
118
+ loading_status = loading_status || {};
119
+ loading_status.status = status as LoadingStatus["status"];
120
+ loading_status.message = detail;
121
+ gradio.dispatch(level as "error" | "warning", detail);
122
+ }
112
123
  </script>
113
124
 
114
125
  {#if !interactive}
@@ -175,11 +186,7 @@
175
186
  subtitle={_subtitle}
176
187
  on:change={handle_change}
177
188
  on:drag={({ detail }) => (dragging = detail)}
178
- on:error={({ detail }) => {
179
- loading_status = loading_status || {};
180
- loading_status.status = "error";
181
- loading_status.message = detail;
182
- }}
189
+ on:error={handle_error}
183
190
  {label}
184
191
  {show_label}
185
192
  {sources}
package/Video.stories.svelte CHANGED
@@ -27,15 +27,31 @@
27
27
  </Template>
28
28
 
29
29
  <Story
30
- name="Primary"
30
+ name="Record from webcam"
31
31
  args={{
32
- value: ["https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4"],
33
32
  format: "mp4",
34
33
  label: "world video",
35
34
  show_label: true,
36
35
  interactive: true,
37
- autoplay: true,
38
36
  height: 400,
39
37
  width: 400
40
38
  }}
41
39
  />
40
+
41
+ <Story
42
+ name="Static video"
43
+ args={{
44
+ value: {
45
+ video: {
46
+ path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
47
+ url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
48
+ orig_name: "world.mp4"
49
+ }
50
+ },
51
+ label: "world video",
52
+ show_label: true,
53
+ interactive: false,
54
+ height: 200,
55
+ width: 400
56
+ }}
57
+ />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,9 +10,9 @@
10
10
  "@gradio/atoms": "^0.2.0",
11
11
  "@gradio/client": "^0.7.1",
12
12
  "@gradio/icons": "^0.2.0",
13
- "@gradio/image": "^0.3.1",
13
+ "@gradio/image": "^0.3.2",
14
14
  "@gradio/statustracker": "^0.3.0",
15
- "@gradio/upload": "^0.3.1",
15
+ "@gradio/upload": "^0.3.2",
16
16
  "@gradio/utils": "^0.2.0",
17
17
  "@gradio/wasm": "^0.2.0"
18
18
  },
package/shared/InteractiveVideo.svelte CHANGED
@@ -48,7 +48,6 @@
48
48
 
49
49
  function handle_clear(): void {
50
50
  value = null;
51
- active_source = sources[0];
52
51
  dispatch("change", null);
53
52
  dispatch("clear");
54
53
  }
@@ -68,6 +67,7 @@
68
67
  bind:dragging
69
68
  filetype="video/x-m4v,video/*"
70
69
  on:load={handle_load}
70
+ on:error={({ detail }) => dispatch("error", detail)}
71
71
  {root}
72
72
  >
73
73
  <slot />
@@ -124,7 +124,7 @@
124
124
  >
125
125
  <button
126
126
  class="icon"
127
- aria-label="Record audio"
127
+ aria-label="Record video"
128
128
  on:click={() => {
129
129
  handle_clear();
130
130
  active_source = "webcam";
package/shared/Video.svelte CHANGED
@@ -91,7 +91,8 @@
91
91
  position: relative;
92
92
  background-color: var(--border-color-accent-subdued);
93
93
  animation: shadowPulse 2s linear infinite;
94
- box-shadow: -24px 0 var(--border-color-accent-subdued),
94
+ box-shadow:
95
+ -24px 0 var(--border-color-accent-subdued),
95
96
  24px 0 var(--border-color-accent-subdued);
96
97
  margin: var(--spacing-md);
97
98
  border-radius: 50%;
@@ -102,15 +103,21 @@
102
103
 
103
104
  @keyframes shadowPulse {
104
105
  33% {
105
- box-shadow: -24px 0 var(--border-color-accent-subdued), 24px 0 #fff;
106
+ box-shadow:
107
+ -24px 0 var(--border-color-accent-subdued),
108
+ 24px 0 #fff;
106
109
  background: #fff;
107
110
  }
108
111
  66% {
109
- box-shadow: -24px 0 #fff, 24px 0 #fff;
112
+ box-shadow:
113
+ -24px 0 #fff,
114
+ 24px 0 #fff;
110
115
  background: var(--border-color-accent-subdued);
111
116
  }
112
117
  100% {
113
- box-shadow: -24px 0 #fff, 24px 0 var(--border-color-accent-subdued);
118
+ box-shadow:
119
+ -24px 0 #fff,
120
+ 24px 0 var(--border-color-accent-subdued);
114
121
  background: #fff;
115
122
  }
116
123
  }
package/shared/VideoTimeline.svelte CHANGED
@@ -202,7 +202,8 @@
202
202
  position: relative;
203
203
  background-color: var(--border-color-accent-subdued);
204
204
  animation: shadowPulse 2s linear infinite;
205
- box-shadow: -24px 0 var(--border-color-accent-subdued),
205
+ box-shadow:
206
+ -24px 0 var(--border-color-accent-subdued),
206
207
  24px 0 var(--border-color-accent-subdued);
207
208
  margin: var(--spacing-md);
208
209
  border-radius: 50%;
@@ -213,15 +214,21 @@
213
214
 
214
215
  @keyframes shadowPulse {
215
216
  33% {
216
- box-shadow: -24px 0 var(--border-color-accent-subdued), 24px 0 #fff;
217
+ box-shadow:
218
+ -24px 0 var(--border-color-accent-subdued),
219
+ 24px 0 #fff;
217
220
  background: #fff;
218
221
  }
219
222
  66% {
220
- box-shadow: -24px 0 #fff, 24px 0 #fff;
223
+ box-shadow:
224
+ -24px 0 #fff,
225
+ 24px 0 #fff;
221
226
  background: var(--border-color-accent-subdued);
222
227
  }
223
228
  100% {
224
- box-shadow: -24px 0 #fff, 24px 0 var(--border-color-accent-subdued);
229
+ box-shadow:
230
+ -24px 0 #fff,
231
+ 24px 0 var(--border-color-accent-subdued);
225
232
  background: #fff;
226
233
  }
227
234
  }