@gradio/video 0.1.2 → 0.1.4

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 (4) hide show
  1. package/CHANGELOG.md +17 -2
  2. package/Video.stories.svelte +20 -3
  3. package/package.json +6 -6
  4. package/shared/InteractiveVideo.svelte +4 -44
package/CHANGELOG.md CHANGED
@@ -1,10 +1,25 @@
1
1
  # @gradio/video
2
2
 
3
+ ## 0.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`6204ccac5`](https://github.com/gradio-app/gradio/commit/6204ccac5967763e0ebde550d04d12584243a120), [`4d3aad33a`](https://github.com/gradio-app/gradio/commit/4d3aad33a0b66639dbbb2928f305a79fb7789b2d), [`854b482f5`](https://github.com/gradio-app/gradio/commit/854b482f598e0dc47673846631643c079576da9c), [`f1409f95e`](https://github.com/gradio-app/gradio/commit/f1409f95ed39c5565bed6a601e41f94e30196a57)]:
8
+ - @gradio/image@0.3.4
9
+ - @gradio/upload@0.4.0
10
+ - @gradio/client@0.8.0
11
+
12
+ ## 0.1.3
13
+
14
+ ### Fixes
15
+
16
+ - [#6279](https://github.com/gradio-app/gradio/pull/6279) [`3cdeabc68`](https://github.com/gradio-app/gradio/commit/3cdeabc6843000310e1a9e1d17190ecbf3bbc780) - Ensure source selection does not get hidden in overflow. Thanks [@hannahblair](https://github.com/hannahblair)!
17
+
3
18
  ## 0.1.2
4
19
 
5
20
  ### Fixes
6
21
 
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)!
22
+ - [#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
23
 
9
24
  ## 0.1.1
10
25
 
@@ -176,4 +191,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
176
191
  - @gradio/image@0.1.0
177
192
  - @gradio/utils@0.0.2
178
193
  - @gradio/atoms@0.0.2
179
- - @gradio/upload@0.0.2
194
+ - @gradio/upload@0.0.2
package/Video.stories.svelte CHANGED
@@ -1,6 +1,8 @@
1
1
  <script>
2
2
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
3
  import Video from "./Index.svelte";
4
+ import { format } from "svelte-i18n";
5
+ import { get } from "svelte/store";
4
6
  </script>
5
7
 
6
8
  <Meta
@@ -22,9 +24,11 @@
22
24
  }}
23
25
  />
24
26
 
25
- <Template let:args>
26
- <Video {...args} />
27
- </Template>
27
+ <div>
28
+ <Template let:args>
29
+ <Video {...args} i18n={get(format)} />
30
+ </Template>
31
+ </div>
28
32
 
29
33
  <Story
30
34
  name="Record from webcam"
@@ -55,3 +59,16 @@
55
59
  width: 400
56
60
  }}
57
61
  />
62
+
63
+ <Story
64
+ name="Upload video"
65
+ args={{
66
+ label: "world video",
67
+ show_label: true,
68
+ interactive: true,
69
+ sources: ["upload", "webcam"],
70
+ width: 400,
71
+ height: 400,
72
+ value: null
73
+ }}
74
+ />
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
7
7
  "license": "ISC",
8
8
  "private": false,
9
9
  "dependencies": {
10
- "@gradio/atoms": "^0.2.0",
11
- "@gradio/client": "^0.7.1",
10
+ "@gradio/atoms": "^0.2.1",
11
+ "@gradio/client": "^0.8.0",
12
12
  "@gradio/icons": "^0.2.0",
13
- "@gradio/image": "^0.3.2",
14
- "@gradio/statustracker": "^0.3.0",
15
- "@gradio/upload": "^0.3.2",
13
+ "@gradio/image": "^0.3.4",
14
+ "@gradio/statustracker": "^0.3.1",
15
+ "@gradio/upload": "^0.4.0",
16
16
  "@gradio/utils": "^0.2.0",
17
17
  "@gradio/wasm": "^0.2.0"
18
18
  },
package/shared/InteractiveVideo.svelte CHANGED
@@ -4,11 +4,12 @@
4
4
  import type { FileData } from "@gradio/client";
5
5
  import { BlockLabel } from "@gradio/atoms";
6
6
  import { Webcam } from "@gradio/image";
7
- import { Video, Upload as UploadIcon } from "@gradio/icons";
7
+ import { Video } from "@gradio/icons";
8
8
 
9
9
  import { prettyBytes, playable } from "./utils";
10
10
  import Player from "./Player.svelte";
11
11
  import type { I18nFormatter } from "@gradio/utils";
12
+ import { SelectSource } from "@gradio/atoms";
12
13
 
13
14
  export let value: FileData | null = null;
14
15
  export let subtitle: FileData | null = null;
@@ -69,6 +70,7 @@
69
70
  on:load={handle_load}
70
71
  on:error={({ detail }) => dispatch("error", detail)}
71
72
  {root}
73
+ include_sources={sources.length > 1}
72
74
  >
73
75
  <slot />
74
76
  </Upload>
@@ -112,26 +114,7 @@
112
114
  {/if}
113
115
  {/if}
114
116
 
115
- {#if sources.length > 1}
116
- <span class="source-selection">
117
- <button
118
- class="icon"
119
- aria-label="Upload video"
120
- on:click={() => {
121
- handle_clear();
122
- active_source = "upload";
123
- }}><UploadIcon /></button
124
- >
125
- <button
126
- class="icon"
127
- aria-label="Record video"
128
- on:click={() => {
129
- handle_clear();
130
- active_source = "webcam";
131
- }}><Video /></button
132
- >
133
- </span>
134
- {/if}
117
+ <SelectSource {sources} bind:active_source {handle_clear} />
135
118
 
136
119
  <style>
137
120
  .file-name {
@@ -144,27 +127,4 @@
144
127
  padding: var(--size-2);
145
128
  font-size: var(--text-xl);
146
129
  }
147
-
148
- .source-selection {
149
- display: flex;
150
- align-items: center;
151
- justify-content: center;
152
- border-top: 1px solid var(--border-color-primary);
153
- width: 95%;
154
- margin: 0 auto;
155
- }
156
-
157
- .icon {
158
- width: 22px;
159
- height: 22px;
160
- margin: var(--spacing-lg) var(--spacing-xs);
161
- padding: var(--spacing-xs);
162
- color: var(--neutral-400);
163
- border-radius: var(--radius-md);
164
- }
165
-
166
- .icon:hover,
167
- .icon:focus {
168
- color: var(--color-accent);
169
- }
170
130
  </style>