@gradio/video 0.18.0 → 0.19.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/Index.svelte +8 -5
  3. package/dist/Index.svelte +8 -5
  4. package/dist/shared/VideoPreview.svelte +7 -4
  5. package/dist/shared/VideoPreview.svelte.d.ts +3 -2
  6. package/dist/types.d.ts +5 -1
  7. package/package.json +8 -8
  8. package/shared/VideoPreview.svelte +7 -4
  9. package/types.ts +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @gradio/video
2
2
 
3
+ ## 0.19.0
4
+
5
+ ### Features
6
+
7
+ - [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components. Thanks @abidlabs!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.20.0
12
+ - @gradio/utils@0.11.0
13
+ - @gradio/client@2.0.1
14
+ - @gradio/statustracker@0.12.1
15
+ - @gradio/upload@0.17.3
16
+ - @gradio/image@0.25.0
17
+
3
18
  ## 0.18.0
4
19
 
5
20
  ### Features
package/Index.svelte CHANGED
@@ -100,10 +100,10 @@
100
100
  show_label={gradio.shared.show_label}
101
101
  autoplay={gradio.props.autoplay}
102
102
  loop={gradio.props.loop}
103
- show_share_button={(gradio.props.buttons || []).includes("share")}
104
- show_download_button={(gradio.props.buttons || ["download"]).includes(
105
- "download"
106
- )}
103
+ buttons={gradio.props.buttons ?? ["download", "share"]}
104
+ on_custom_button_click={(id) => {
105
+ gradio.dispatch("custom_button_click", { id });
106
+ }}
107
107
  bind:playback_position={gradio.props.playback_position}
108
108
  on:play={() => gradio.dispatch("play")}
109
109
  on:pause={() => gradio.dispatch("pause")}
@@ -150,7 +150,10 @@
150
150
  bind:uploading
151
151
  label={gradio.shared.label}
152
152
  show_label={gradio.shared.show_label}
153
- show_download_button={(gradio.props.buttons || []).includes("download")}
153
+ buttons={gradio.props.buttons ?? ["download", "share"]}
154
+ on_custom_button_click={(id) => {
155
+ gradio.dispatch("custom_button_click", { id });
156
+ }}
154
157
  sources={gradio.props.sources}
155
158
  {active_source}
156
159
  webcam_options={gradio.props.webcam_options}
package/dist/Index.svelte CHANGED
@@ -100,10 +100,10 @@
100
100
  show_label={gradio.shared.show_label}
101
101
  autoplay={gradio.props.autoplay}
102
102
  loop={gradio.props.loop}
103
- show_share_button={(gradio.props.buttons || []).includes("share")}
104
- show_download_button={(gradio.props.buttons || ["download"]).includes(
105
- "download"
106
- )}
103
+ buttons={gradio.props.buttons ?? ["download", "share"]}
104
+ on_custom_button_click={(id) => {
105
+ gradio.dispatch("custom_button_click", { id });
106
+ }}
107
107
  bind:playback_position={gradio.props.playback_position}
108
108
  on:play={() => gradio.dispatch("play")}
109
109
  on:pause={() => gradio.dispatch("pause")}
@@ -150,7 +150,10 @@
150
150
  bind:uploading
151
151
  label={gradio.shared.label}
152
152
  show_label={gradio.shared.show_label}
153
- show_download_button={(gradio.props.buttons || []).includes("download")}
153
+ buttons={gradio.props.buttons ?? ["download", "share"]}
154
+ on_custom_button_click={(id) => {
155
+ gradio.dispatch("custom_button_click", { id });
156
+ }}
154
157
  sources={gradio.props.sources}
155
158
  {active_source}
156
159
  webcam_options={gradio.props.webcam_options}
package/dist/shared/VideoPreview.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  import type { FileData, Client } from "@gradio/client";
12
12
  import { Video, Download } from "@gradio/icons";
13
13
  import { uploadToHuggingFace } from "@gradio/utils";
14
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
14
15
 
15
16
  import Player from "./Player.svelte";
16
17
  import type { I18nFormatter } from "js/core/src/gradio_helper";
@@ -20,8 +21,8 @@
20
21
  export let label: string | undefined = undefined;
21
22
  export let show_label = true;
22
23
  export let autoplay: boolean;
23
- export let show_share_button = true;
24
- export let show_download_button = true;
24
+ export let buttons: (string | CustomButtonType)[] | null = null;
25
+ export let on_custom_button_click: ((id: number) => void) | null = null;
25
26
  export let loop: boolean;
26
27
  export let i18n: I18nFormatter;
27
28
  export let upload: Client["upload"];
@@ -91,8 +92,10 @@
91
92
  <div data-testid="download-div">
92
93
  <IconButtonWrapper
93
94
  display_top_corner={display_icon_button_wrapper_top_corner}
95
+ buttons={buttons ?? ["download", "share"]}
96
+ {on_custom_button_click}
94
97
  >
95
- {#if show_download_button}
98
+ {#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
96
99
  <DownloadLink
97
100
  href={value.is_stream
98
101
  ? value.url?.replace("playlist.m3u8", "playlist-file")
@@ -102,7 +105,7 @@
102
105
  <IconButton Icon={Download} label="Download" />
103
106
  </DownloadLink>
104
107
  {/if}
105
- {#if show_share_button}
108
+ {#if buttons?.some((btn) => typeof btn === "string" && btn === "share")}
106
109
  <ShareButton
107
110
  {i18n}
108
111
  on:error
package/dist/shared/VideoPreview.svelte.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FileData, Client } from "@gradio/client";
2
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
2
3
  import type { I18nFormatter } from "js/core/src/gradio_helper";
3
4
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
4
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -19,8 +20,8 @@ declare const VideoPreview: $$__sveltets_2_IsomorphicComponent<{
19
20
  label?: string | undefined;
20
21
  show_label?: boolean;
21
22
  autoplay: boolean;
22
- show_share_button?: boolean;
23
- show_download_button?: boolean;
23
+ buttons?: (string | CustomButtonType)[] | null;
24
+ on_custom_button_click?: ((id: number) => void) | null;
24
25
  loop: boolean;
25
26
  i18n: I18nFormatter;
26
27
  upload: Client["upload"];
package/dist/types.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import type { FileData } from "@gradio/client";
2
2
  import type { LoadingStatus } from "@gradio/statustracker";
3
+ import type { CustomButton } from "@gradio/utils";
3
4
  import type { WebcamOptions } from "./shared/utils";
4
5
  export interface VideoProps {
5
6
  value: FileData | null;
6
7
  height: number | undefined;
7
8
  width: number | undefined;
8
9
  autoplay: boolean;
9
- buttons: ("share" | "download" | "fullscreen")[];
10
+ buttons: ("share" | "download" | "fullscreen" | CustomButton)[];
10
11
  sources: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
11
12
  webcam_options: WebcamOptions;
12
13
  include_audio: boolean;
@@ -29,4 +30,7 @@ export interface VideoEvents {
29
30
  share: any;
30
31
  error: any;
31
32
  warning: any;
33
+ custom_button_click: {
34
+ id: number;
35
+ };
32
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/video",
3
- "version": "0.18.0",
3
+ "version": "0.19.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,13 +11,13 @@
11
11
  "@ffmpeg/util": "^0.12.2",
12
12
  "hls.js": "^1.6.13",
13
13
  "mrmime": "^2.0.1",
14
- "@gradio/icons": "^0.15.0",
15
- "@gradio/client": "^2.0.0",
16
- "@gradio/atoms": "^0.19.0",
17
- "@gradio/image": "^0.24.0",
18
- "@gradio/utils": "^0.10.4",
19
- "@gradio/upload": "^0.17.2",
20
- "@gradio/statustracker": "^0.12.0"
14
+ "@gradio/atoms": "^0.20.0",
15
+ "@gradio/client": "^2.0.1",
16
+ "@gradio/statustracker": "^0.12.1",
17
+ "@gradio/image": "^0.25.0",
18
+ "@gradio/upload": "^0.17.3",
19
+ "@gradio/utils": "^0.11.0",
20
+ "@gradio/icons": "^0.15.0"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@gradio/preview": "^0.15.1"
package/shared/VideoPreview.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  import type { FileData, Client } from "@gradio/client";
12
12
  import { Video, Download } from "@gradio/icons";
13
13
  import { uploadToHuggingFace } from "@gradio/utils";
14
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
14
15
 
15
16
  import Player from "./Player.svelte";
16
17
  import type { I18nFormatter } from "js/core/src/gradio_helper";
@@ -20,8 +21,8 @@
20
21
  export let label: string | undefined = undefined;
21
22
  export let show_label = true;
22
23
  export let autoplay: boolean;
23
- export let show_share_button = true;
24
- export let show_download_button = true;
24
+ export let buttons: (string | CustomButtonType)[] | null = null;
25
+ export let on_custom_button_click: ((id: number) => void) | null = null;
25
26
  export let loop: boolean;
26
27
  export let i18n: I18nFormatter;
27
28
  export let upload: Client["upload"];
@@ -91,8 +92,10 @@
91
92
  <div data-testid="download-div">
92
93
  <IconButtonWrapper
93
94
  display_top_corner={display_icon_button_wrapper_top_corner}
95
+ buttons={buttons ?? ["download", "share"]}
96
+ {on_custom_button_click}
94
97
  >
95
- {#if show_download_button}
98
+ {#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
96
99
  <DownloadLink
97
100
  href={value.is_stream
98
101
  ? value.url?.replace("playlist.m3u8", "playlist-file")
@@ -102,7 +105,7 @@
102
105
  <IconButton Icon={Download} label="Download" />
103
106
  </DownloadLink>
104
107
  {/if}
105
- {#if show_share_button}
108
+ {#if buttons?.some((btn) => typeof btn === "string" && btn === "share")}
106
109
  <ShareButton
107
110
  {i18n}
108
111
  on:error
package/types.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { FileData } from "@gradio/client";
2
2
  import type { LoadingStatus } from "@gradio/statustracker";
3
+ import type { CustomButton } from "@gradio/utils";
3
4
  import type { WebcamOptions } from "./shared/utils";
4
5
 
5
6
  export interface VideoProps {
@@ -7,7 +8,7 @@ export interface VideoProps {
7
8
  height: number | undefined;
8
9
  width: number | undefined;
9
10
  autoplay: boolean;
10
- buttons: ("share" | "download" | "fullscreen")[];
11
+ buttons: ("share" | "download" | "fullscreen" | CustomButton)[];
11
12
  sources:
12
13
  | ["webcam"]
13
14
  | ["upload"]
@@ -35,4 +36,5 @@ export interface VideoEvents {
35
36
  share: any;
36
37
  error: any;
37
38
  warning: any;
39
+ custom_button_click: { id: number };
38
40
  }