@gradio/video 0.6.12 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @gradio/video
 
+## 0.8.0
+
+### Features
+
+- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9.  Thanks @renovate!
+- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`.  Thanks @hannahblair!
+
+### Fixes
+
+- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.2
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/wasm@0.10.1
+- @gradio/statustracker@0.5.1
+- @gradio/image@0.11.0
+
+## 0.7.0
+
+### Highlights
+
+#### Setting File Upload Limits ([#7909](https://github.com/gradio-app/gradio/pull/7909) [`2afca65`](https://github.com/gradio-app/gradio/commit/2afca6541912b37dc84f447c7ad4af21607d7c72))
+
+We have added a `max_file_size` size parameter to `launch()` that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).
+
+The following code snippet sets a max file size of 5 megabytes.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
+![max_file_size_upload](https://github.com/gradio-app/gradio/assets/41651716/7547330c-a082-4901-a291-3f150a197e45)
+
+
+#### Error states can now be cleared
+
+When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the `x` icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.
+
+![error_modal_calculator](https://github.com/gradio-app/gradio/assets/41651716/16cb071c-accd-45a6-9c18-0dea27d4bd98)
+
+ Thanks @freddyaboulton!
+
+### Fixes
+
+- [#8066](https://github.com/gradio-app/gradio/pull/8066) [`624f9b9`](https://github.com/gradio-app/gradio/commit/624f9b9477f74a581a6c14119234f9efdfcda398) - make gradio dev tools a local dependency rather than bundling.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.1
+- @gradio/client@0.17.0
+- @gradio/image@0.10.0
+- @gradio/statustracker@0.5.0
+- @gradio/upload@0.9.0
+- @gradio/utils@0.4.0
+
 ## 0.6.12
 
 ### Dependency updates

package/Index.svelte

@@ -48,6 +48,7 @@
 		share: ShareData;
 		error: string;
 		warning: string;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 	export let mirror_webcam: boolean;
@@ -137,6 +138,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<StaticVideo
@@ -154,6 +156,7 @@
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
+			upload={gradio.client.upload}
 		/>
 	</Block>
 {:else}
@@ -175,6 +178,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<Video
@@ -202,6 +206,9 @@
 			on:start_recording={() => gradio.dispatch("start_recording")}
 			on:stop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
+			max_file_size={gradio.max_file_size}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream_factory}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.6.12",
+  "version": "0.8.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,17 @@
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.7.0",
-    "@gradio/client": "^0.16.0",
+    "@gradio/atoms": "^0.7.2",
     "@gradio/icons": "^0.4.0",
-    "@gradio/statustracker": "^0.4.12",
-    "@gradio/upload": "^0.8.5",
-    "@gradio/utils": "^0.3.2",
-    "@gradio/wasm": "^0.10.0",
-    "@gradio/image": "^0.9.12"
+    "@gradio/client": "^0.18.0",
+    "@gradio/image": "^0.11.0",
+    "@gradio/statustracker": "^0.5.1",
+    "@gradio/upload": "^0.10.0",
+    "@gradio/utils": "^0.4.1",
+    "@gradio/wasm": "^0.10.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.9.0"
   },
   "exports": {
     ".": "./index.ts",

package/shared/InteractiveVideo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
-	import type { FileData } from "@gradio/client";
+	import type { FileData, Client } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Webcam } from "@gradio/image";
 	import { Video } from "@gradio/icons";
@@ -28,6 +28,9 @@
 	export let i18n: I18nFormatter;
 	export let active_source: "webcam" | "upload" = "webcam";
 	export let handle_reset_value: () => void = () => {};
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream_factory"];
 
 	const dispatch = createEventDispatcher<{
 		change: FileData | null;
@@ -77,8 +80,11 @@
 					bind:dragging
 					filetype="video/x-m4v,video/*"
 					on:load={handle_load}
+					{max_file_size}
 					on:error={({ detail }) => dispatch("error", detail)}
 					{root}
+					{upload}
+					{stream_handler}
 				>
 					<slot />
 				</Upload>
@@ -93,6 +99,7 @@
 					on:start_recording
 					on:stop_recording
 					{i18n}
+					{upload}
 				/>
 			{/if}
 		</div>
@@ -105,6 +112,7 @@
 		{#if playable()}
 			{#key value?.url}
 				<Player
+					{upload}
 					{root}
 					interactive
 					{autoplay}

package/shared/Player.svelte

@@ -3,8 +3,8 @@
 	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
-	import type { FileData } from "@gradio/client";
-	import { prepare_files, upload } from "@gradio/client";
+	import type { FileData, Client } from "@gradio/client";
+	import { prepare_files } from "@gradio/client";
 	import { format_time } from "@gradio/utils";
 
 	export let root = "";
@@ -16,6 +16,7 @@
 	export let interactive = false;
 	export let handle_change: (video: FileData) => void = () => {};
 	export let handle_reset_value: () => void = () => {};
+	export let upload: Client["upload"];
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;

package/shared/VideoPreview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, afterUpdate, tick } from "svelte";
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
-	import type { FileData } from "@gradio/client";
+	import type { FileData, Client } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { DownloadLink } from "@gradio/wasm/svelte";
@@ -17,6 +17,7 @@
 	export let show_share_button = true;
 	export let show_download_button = true;
 	export let i18n: I18nFormatter;
+	export let upload: Client["upload"];
 
 	let old_value: FileData | null = null;
 	let old_subtitle: FileData | null = null;
@@ -64,6 +65,7 @@
 			mirror={false}
 			{label}
 			interactive={false}
+			{upload}
 		/>
 	{/key}
 	<div class="icon-buttons" data-testid="download-div">

package/shared/VideoTimeline.svelte

@@ -9,7 +9,7 @@
 
 	let thumbnails: string[] = [];
 	let numberOfThumbnails = 10;
-	let intervalId: number | NodeJS.Timer;
+	let intervalId: ReturnType<typeof setInterval> | undefined;
 	let videoDuration: number;
 
 	let leftHandlePosition = 0;
@@ -136,7 +136,7 @@
 		window.removeEventListener("mouseup", stopDragging);
 		window.removeEventListener("keydown", moveHandle);
 
-		if (intervalId) {
+		if (intervalId !== undefined) {
 			clearInterval(intervalId);
 		}
 	});