@gradio/video 0.10.4 → 0.11.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @gradio/video
 
+## 0.11.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/image@0.16.0-beta.2
+
+## 0.11.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.11.0
+
+### Features
+
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
 ## 0.10.4
 
 ### Fixes

package/Example.svelte

@@ -36,6 +36,7 @@
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
 				src={value?.video.url}
+				is_stream={false}
 				{loop}
 			/>
 		</div>

package/Index.svelte

@@ -54,6 +54,9 @@
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
 	export let loop = false;
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
 
 	let _video: FileData | null = null;
 	let _subtitle: FileData | null = null;
@@ -158,7 +161,7 @@
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
+			upload={(...args) => gradio.client.upload(...args)}
 		/>
 	</Block>
 {:else}
@@ -189,6 +192,7 @@
 			on:change={handle_change}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:error={handle_error}
+			bind:uploading
 			{label}
 			{show_label}
 			{show_download_button}
@@ -210,8 +214,8 @@
 			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}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>

package/dist/Example.svelte

@@ -32,6 +32,7 @@ async function init() {
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
 				src={value?.video.url}
+				is_stream={false}
 				{loop}
 			/>
 		</div>

package/dist/Index.svelte

@@ -27,6 +27,10 @@ export let interactive;
 export let mirror_webcam;
 export let include_audio;
 export let loop = false;
+export let input_ready;
+let uploading = false;
+$:
+  input_ready = !uploading;
 let _video = null;
 let _subtitle = null;
 let active_source;
@@ -115,7 +119,7 @@ function handle_error({ detail }) {
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
+			upload={(...args) => gradio.client.upload(...args)}
 		/>
 	</Block>
 {:else}
@@ -146,6 +150,7 @@ function handle_error({ detail }) {
 			on:change={handle_change}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:error={handle_error}
+			bind:uploading
 			{label}
 			{show_label}
 			{show_download_button}
@@ -167,8 +172,8 @@ function handle_error({ detail }) {
 			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}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>

package/dist/Index.svelte.d.ts

@@ -43,6 +43,7 @@ declare const __propDef: {
         mirror_webcam: boolean;
         include_audio: boolean;
         loop?: boolean | undefined;
+        input_ready: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -153,5 +154,8 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get loop(): boolean | undefined;
     /**accessor*/
     set loop(_: boolean | undefined);
+    get input_ready(): boolean;
+    /**accessor*/
+    set input_ready(_: boolean);
 }
 export {};

package/dist/shared/InteractiveVideo.svelte

@@ -24,6 +24,8 @@ export let max_file_size = null;
 export let upload;
 export let stream_handler;
 export let loop;
+export let uploading = false;
+let has_change_history = false;
 const dispatch = createEventDispatcher();
 function handle_load({ detail }) {
   value = detail;
@@ -36,6 +38,7 @@ function handle_clear() {
   dispatch("clear");
 }
 function handle_change(video) {
+  has_change_history = true;
   dispatch("change", video);
 }
 function handle_capture({
@@ -55,6 +58,7 @@ $:
 			{#if active_source === "upload"}
 				<Upload
 					bind:dragging
+					bind:uploading
 					filetype="video/x-m4v,video/*"
 					on:load={handle_load}
 					{max_file_size}
@@ -77,41 +81,41 @@ $:
 					on:stop_recording
 					{i18n}
 					{upload}
+					stream_every={1}
 				/>
 			{/if}
 		</div>
-	{:else}
-		<ModifyUpload
-			{i18n}
-			on:clear={handle_clear}
-			download={show_download_button ? value.url : null}
-		/>
-		{#if playable()}
-			{#key value?.url}
-				<Player
-					{upload}
-					{root}
-					interactive
-					{autoplay}
-					src={value.url}
-					subtitle={subtitle?.url}
-					on:play
-					on:pause
-					on:stop
-					on:end
-					mirror={mirror_webcam && active_source === "webcam"}
-					{label}
-					{handle_change}
-					{handle_reset_value}
-					{loop}
-				/>
-			{/key}
-		{:else if value.size}
-			<div class="file-name">{value.orig_name || value.url}</div>
-			<div class="file-size">
-				{prettyBytes(value.size)}
-			</div>
-		{/if}
+	{:else if playable()}
+		{#key value?.url}
+			<Player
+				{upload}
+				{root}
+				interactive
+				{autoplay}
+				src={value.url}
+				subtitle={subtitle?.url}
+				is_stream={false}
+				on:play
+				on:pause
+				on:stop
+				on:end
+				mirror={mirror_webcam && active_source === "webcam"}
+				{label}
+				{handle_change}
+				{handle_reset_value}
+				{loop}
+				{value}
+				{i18n}
+				{show_download_button}
+				{handle_clear}
+				{has_change_history}
+			/>
+		{/key}
+	{:else if value.size}
+		<div class="file-name">{value.orig_name || value.url}</div>
+		<div class="file-size">
+			{prettyBytes(value.size)}
+		</div>
 	{/if}
 
 	<SelectSource {sources} bind:active_source {handle_clear} />

package/dist/shared/InteractiveVideo.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         loop: boolean;
+        uploading?: boolean | undefined;
     };
     events: {
         error: CustomEvent<any>;

package/dist/shared/Player.svelte

@@ -17,6 +17,13 @@ export let handle_change = () => {
 export let handle_reset_value = () => {
 };
 export let upload;
+export let is_stream;
+export let i18n;
+export let show_download_button = false;
+export let value = null;
+export let handle_clear = () => {
+};
+export let has_change_history = false;
 const dispatch = createEventDispatcher();
 let time = 0;
 let duration;
@@ -56,8 +63,8 @@ function handle_end() {
 const handle_trim_video = async (videoBlob) => {
   let _video_blob = new File([videoBlob], "video.mp4");
   const val = await prepare_files([_video_blob]);
-  let value = ((await upload(val, root))?.filter(Boolean))[0];
-  handle_change(value);
+  let value2 = ((await upload(val, root))?.filter(Boolean))[0];
+  handle_change(value2);
 };
 function open_full_screen() {
   video.requestFullscreen();
@@ -71,6 +78,7 @@ function open_full_screen() {
 			preload="auto"
 			{autoplay}
 			{loop}
+			{is_stream}
 			on:click={play_pause}
 			on:play
 			on:pause
@@ -138,6 +146,11 @@ function open_full_screen() {
 		{handle_trim_video}
 		{handle_reset_value}
 		bind:processingVideo
+		{value}
+		{i18n}
+		{show_download_button}
+		{handle_clear}
+		{has_change_history}
 	/>
 {/if}
 

package/dist/shared/Player.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { FileData, Client } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
         root?: string | undefined;
@@ -13,6 +14,12 @@ declare const __propDef: {
         handle_change?: ((video: FileData) => void) | undefined;
         handle_reset_value?: (() => void) | undefined;
         upload: Client["upload"];
+        is_stream: boolean | undefined;
+        i18n: I18nFormatter;
+        show_download_button?: boolean | undefined;
+        value?: (FileData | null) | undefined;
+        handle_clear?: (() => void) | undefined;
+        has_change_history?: boolean | undefined;
     };
     events: {
         play: CustomEvent<any>;
@@ -20,6 +27,7 @@ declare const __propDef: {
         load: Event;
         stop: CustomEvent<undefined>;
         end: CustomEvent<undefined>;
+        clear: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/Video.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import { loaded } from "./utils";
 import { resolve_wasm_src } from "@gradio/wasm/svelte";
+import Hls from "hls.js";
 export let src = void 0;
 export let muted = void 0;
 export let playsinline = void 0;
@@ -12,8 +13,10 @@ export let duration = void 0;
 export let paused = void 0;
 export let node = void 0;
 export let loop;
+export let is_stream;
 export let processingVideo = false;
 let resolved_src;
+let stream_active = false;
 let latest_src;
 $: {
   resolved_src = src;
@@ -26,6 +29,53 @@ $: {
   });
 }
 const dispatch = createEventDispatcher();
+function load_stream(src2, is_stream2, node2) {
+  if (!src2 || !is_stream2)
+    return;
+  if (!node2)
+    return;
+  if (Hls.isSupported() && !stream_active) {
+    const hls = new Hls({
+      maxBufferLength: 1,
+      // 0.5 seconds (500 ms)
+      maxMaxBufferLength: 1,
+      // Maximum max buffer length in seconds
+      lowLatencyMode: true
+      // Enable low latency mode
+    });
+    hls.loadSource(src2);
+    hls.attachMedia(node2);
+    hls.on(Hls.Events.MANIFEST_PARSED, function() {
+      node2.play();
+    });
+    hls.on(Hls.Events.ERROR, function(event, data) {
+      console.error("HLS error:", event, data);
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            console.error(
+              "Fatal network error encountered, trying to recover"
+            );
+            hls.startLoad();
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            console.error("Fatal media error encountered, trying to recover");
+            hls.recoverMediaError();
+            break;
+          default:
+            console.error("Fatal error, cannot recover");
+            hls.destroy();
+            break;
+        }
+      }
+    });
+    stream_active = true;
+  }
+}
+$:
+  src, stream_active = false;
+$:
+  load_stream(src, is_stream, node);
 </script>
 
 <!--

package/dist/shared/Video.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         paused?: boolean | undefined;
         node?: HTMLVideoElement | undefined;
         loop: boolean;
+        is_stream: any;
         processingVideo?: boolean | undefined;
     };
     events: {

package/dist/shared/VideoControls.svelte

@@ -1,10 +1,12 @@
-<script>import { Undo, Trim } from "@gradio/icons";
+<script>import { Undo, Trim, Clear } from "@gradio/icons";
 import VideoTimeline from "./VideoTimeline.svelte";
 import { trimVideo } from "./utils";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import loadFfmpeg from "./utils";
 import { onMount } from "svelte";
 import { format_time } from "@gradio/utils";
+import { IconButton } from "@gradio/atoms";
+import { ModifyUpload } from "@gradio/upload";
 export let videoElement;
 export let showRedo = false;
 export let interactive = true;
@@ -12,6 +14,12 @@ export let mode = "";
 export let handle_reset_value;
 export let handle_trim_video;
 export let processingVideo = false;
+export let i18n;
+export let value = null;
+export let show_download_button = false;
+export let handle_clear = () => {
+};
+export let has_change_history = false;
 let ffmpeg;
 onMount(async () => {
   ffmpeg = await loadFfmpeg();
@@ -33,7 +41,7 @@ const toggleTrimmingMode = () => {
 };
 </script>
 
-<div class="container">
+<div class="container" class:hidden={mode !== "edit"}>
 	{#if mode === "edit"}
 		<div class="timeline-wrapper">
 			<VideoTimeline
@@ -52,62 +60,61 @@ const toggleTrimmingMode = () => {
 				aria-label="duration of selected region in seconds"
 				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
-		{:else}
-			<div />
-		{/if}
-
-		<div class="settings-wrapper">
-			{#if showRedo && mode === ""}
+			<div class="edit-buttons">
 				<button
-					class="action icon"
-					disabled={processingVideo}
-					aria-label="Reset video to initial value"
+					class:hidden={loadingTimeline}
+					class="text-button"
 					on:click={() => {
-						handle_reset_value();
 						mode = "";
-					}}
+						processingVideo = true;
+						trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
+							.then((videoBlob) => {
+								handle_trim_video(videoBlob);
+							})
+							.then(() => {
+								processingVideo = false;
+							});
+					}}>Trim</button
 				>
-					<Undo />
-				</button>
-			{/if}
-
-			{#if interactive}
-				{#if mode === ""}
-					<button
-						disabled={processingVideo}
-						class="action icon"
-						aria-label="Trim video to selection"
-						on:click={toggleTrimmingMode}
-					>
-						<Trim />
-					</button>
-				{:else}
-					<button
-						class:hidden={loadingTimeline}
-						class="text-button"
-						on:click={() => {
-							mode = "";
-							processingVideo = true;
-							trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
-								.then((videoBlob) => {
-									handle_trim_video(videoBlob);
-								})
-								.then(() => {
-									processingVideo = false;
-								});
-						}}>Trim</button
-					>
-					<button
-						class="text-button"
-						class:hidden={loadingTimeline}
-						on:click={toggleTrimmingMode}>Cancel</button
-					>
-				{/if}
-			{/if}
-		</div>
+				<button
+					class="text-button"
+					class:hidden={loadingTimeline}
+					on:click={toggleTrimmingMode}>Cancel</button
+				>
+			</div>
+		{:else}
+			<div />
+		{/if}
 	</div>
 </div>
 
+<ModifyUpload
+	{i18n}
+	on:clear={() => handle_clear()}
+	download={show_download_button ? value?.url : null}
+>
+	{#if showRedo && mode === ""}
+		<IconButton
+			Icon={Undo}
+			label="Reset video to initial value"
+			disabled={processingVideo || !has_change_history}
+			on:click={() => {
+				handle_reset_value();
+				mode = "";
+			}}
+		/>
+	{/if}
+
+	{#if interactive && mode === ""}
+		<IconButton
+			Icon={Trim}
+			label="Trim video to selection"
+			disabled={processingVideo}
+			on:click={toggleTrimmingMode}
+		/>
+	{/if}
+</ModifyUpload>
+
 <style>
 	.container {
 		width: 100%;
@@ -124,10 +131,7 @@ const toggleTrimmingMode = () => {
 		justify-content: center;
 		width: 100%;
 	}
-	.settings-wrapper {
-		display: flex;
-		justify-self: self-end;
-	}
+
 	.text-button {
 		border: 1px solid var(--neutral-400);
 		border-radius: var(--radius-sm);
@@ -140,9 +144,6 @@ const toggleTrimmingMode = () => {
 		padding: 0 5px;
 		margin-left: 5px;
 	}
-	.hidden {
-		display: none;
-	}
 
 	.text-button:hover,
 	.text-button:focus {
@@ -151,17 +152,26 @@ const toggleTrimmingMode = () => {
 	}
 
 	.controls {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		margin: var(--spacing-lg);
 		overflow: hidden;
-		text-align: left;
+	}
+
+	.edit-buttons {
+		display: flex;
+		gap: var(--spacing-sm);
 	}
 
 	@media (max-width: 320px) {
 		.controls {
-			display: flex;
-			flex-wrap: wrap;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.edit-buttons {
+			margin-top: var(--spacing-sm);
 		}
 
 		.controls * {
@@ -172,29 +182,13 @@ const toggleTrimmingMode = () => {
 			margin-left: 0;
 		}
 	}
-	.action {
-		width: var(--size-5);
-		width: var(--size-5);
-		color: var(--neutral-400);
-		margin-left: var(--spacing-md);
-	}
-
-	.action:disabled {
-		cursor: not-allowed;
-		color: var(--border-color-accent-subdued);
-	}
-
-	.action:disabled:hover {
-		color: var(--border-color-accent-subdued);
-	}
-
-	.icon:hover,
-	.icon:focus {
-		color: var(--color-accent);
-	}
 
 	.container {
 		display: flex;
 		flex-direction: column;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/dist/shared/VideoControls.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
         videoElement: HTMLVideoElement;
@@ -8,6 +9,11 @@ declare const __propDef: {
         handle_reset_value: () => void;
         handle_trim_video: (videoBlob: Blob) => void;
         processingVideo?: boolean | undefined;
+        i18n: (key: string) => string;
+        value?: (FileData | null) | undefined;
+        show_download_button?: boolean | undefined;
+        handle_clear?: (() => void) | undefined;
+        has_change_history?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/shared/VideoPreview.svelte

@@ -1,5 +1,11 @@
 <script>import { createEventDispatcher, afterUpdate, tick } from "svelte";
-import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+import {
+  BlockLabel,
+  Empty,
+  IconButton,
+  ShareButton,
+  IconButtonWrapper
+} from "@gradio/atoms";
 import { Video, Download } from "@gradio/icons";
 import { uploadToHuggingFace } from "@gradio/utils";
 import { DownloadLink } from "@gradio/wasm/svelte";
@@ -32,13 +38,14 @@ afterUpdate(async () => {
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
-{#if value === null || value.url === undefined}
+{#if !value || value.url === undefined}
 	<Empty unpadded_box={true} size="large"><Video /></Empty>
 {:else}
 	{#key value.url}
 		<Player
 			src={value.url}
 			subtitle={subtitle?.url}
+			is_stream={value.is_stream}
 			{autoplay}
 			on:play
 			on:pause
@@ -50,36 +57,34 @@ afterUpdate(async () => {
 			{loop}
 			interactive={false}
 			{upload}
+			{i18n}
 		/>
 	{/key}
-	<div class="icon-buttons" data-testid="download-div">
-		{#if show_download_button}
-			<DownloadLink href={value.url} download={value.orig_name || value.path}>
-				<IconButton Icon={Download} label="Download" />
-			</DownloadLink>
-		{/if}
-		{#if show_share_button}
-			<ShareButton
-				{i18n}
-				on:error
-				on:share
-				{value}
-				formatter={async (value) => {
-					if (!value) return "";
-					let url = await uploadToHuggingFace(value.data, "url");
-					return url;
-				}}
-			/>
-		{/if}
+	<div data-testid="download-div">
+		<IconButtonWrapper>
+			{#if show_download_button}
+				<DownloadLink
+					href={value.is_stream
+						? value.url?.replace("playlist.m3u8", "playlist-file")
+						: value.url}
+					download={value.orig_name || value.path}
+				>
+					<IconButton Icon={Download} label="Download" />
+				</DownloadLink>
+			{/if}
+			{#if show_share_button}
+				<ShareButton
+					{i18n}
+					on:error
+					on:share
+					{value}
+					formatter={async (value) => {
+						if (!value) return "";
+						let url = await uploadToHuggingFace(value.data, "url");
+						return url;
+					}}
+				/>
+			{/if}
+		</IconButtonWrapper>
 	</div>
 {/if}
-
-<style>
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.10.4",
+  "version": "0.11.0-beta.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -9,15 +9,16 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
+    "hls.js": "^1.5.13",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.8.1",
-    "@gradio/icons": "^0.7.2",
-    "@gradio/image": "^0.15.1",
-    "@gradio/client": "^1.5.2",
-    "@gradio/statustracker": "^0.7.6",
-    "@gradio/utils": "^0.6.1",
-    "@gradio/upload": "^0.12.4",
-    "@gradio/wasm": "^0.13.1"
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.2",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/image": "^0.16.0-beta.2",
+    "@gradio/upload": "^0.13.0-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/wasm": "^0.14.0-beta.2"
   },
   "devDependencies": {
     "@gradio/preview": "^0.11.1"

package/shared/InteractiveVideo.svelte

@@ -32,6 +32,9 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let loop: boolean;
+	export let uploading = false;
+
+	let has_change_history = false;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData | null;
@@ -59,6 +62,7 @@
 	}
 
 	function handle_change(video: FileData): void {
+		has_change_history = true;
 		dispatch("change", video);
 	}
 
@@ -79,6 +83,7 @@
 			{#if active_source === "upload"}
 				<Upload
 					bind:dragging
+					bind:uploading
 					filetype="video/x-m4v,video/*"
 					on:load={handle_load}
 					{max_file_size}
@@ -101,41 +106,41 @@
 					on:stop_recording
 					{i18n}
 					{upload}
+					stream_every={1}
 				/>
 			{/if}
 		</div>
-	{:else}
-		<ModifyUpload
-			{i18n}
-			on:clear={handle_clear}
-			download={show_download_button ? value.url : null}
-		/>
-		{#if playable()}
-			{#key value?.url}
-				<Player
-					{upload}
-					{root}
-					interactive
-					{autoplay}
-					src={value.url}
-					subtitle={subtitle?.url}
-					on:play
-					on:pause
-					on:stop
-					on:end
-					mirror={mirror_webcam && active_source === "webcam"}
-					{label}
-					{handle_change}
-					{handle_reset_value}
-					{loop}
-				/>
-			{/key}
-		{:else if value.size}
-			<div class="file-name">{value.orig_name || value.url}</div>
-			<div class="file-size">
-				{prettyBytes(value.size)}
-			</div>
-		{/if}
+	{:else if playable()}
+		{#key value?.url}
+			<Player
+				{upload}
+				{root}
+				interactive
+				{autoplay}
+				src={value.url}
+				subtitle={subtitle?.url}
+				is_stream={false}
+				on:play
+				on:pause
+				on:stop
+				on:end
+				mirror={mirror_webcam && active_source === "webcam"}
+				{label}
+				{handle_change}
+				{handle_reset_value}
+				{loop}
+				{value}
+				{i18n}
+				{show_download_button}
+				{handle_clear}
+				{has_change_history}
+			/>
+		{/key}
+	{:else if value.size}
+		<div class="file-name">{value.orig_name || value.url}</div>
+		<div class="file-size">
+			{prettyBytes(value.size)}
+		</div>
 	{/if}
 
 	<SelectSource {sources} bind:active_source {handle_clear} />

package/shared/Player.svelte

@@ -6,6 +6,7 @@
 	import type { FileData, Client } from "@gradio/client";
 	import { prepare_files } from "@gradio/client";
 	import { format_time } from "@gradio/utils";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	export let root = "";
 	export let src: string;
@@ -18,12 +19,19 @@
 	export let handle_change: (video: FileData) => void = () => {};
 	export let handle_reset_value: () => void = () => {};
 	export let upload: Client["upload"];
+	export let is_stream: boolean | undefined;
+	export let i18n: I18nFormatter;
+	export let show_download_button = false;
+	export let value: FileData | null = null;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
 		pause: undefined;
 		stop: undefined;
 		end: undefined;
+		clear: undefined;
 	}>();
 
 	let time = 0;
@@ -98,6 +106,7 @@
 			preload="auto"
 			{autoplay}
 			{loop}
+			{is_stream}
 			on:click={play_pause}
 			on:play
 			on:pause
@@ -165,6 +174,11 @@
 		{handle_trim_video}
 		{handle_reset_value}
 		bind:processingVideo
+		{value}
+		{i18n}
+		{show_download_button}
+		{handle_clear}
+		{has_change_history}
 	/>
 {/if}
 

package/shared/Video.svelte

@@ -5,6 +5,8 @@
 
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
+	import Hls from "hls.js";
+
 	export let src: HTMLVideoAttributes["src"] = undefined;
 
 	export let muted: HTMLVideoAttributes["muted"] = undefined;
@@ -19,10 +21,12 @@
 
 	export let node: HTMLVideoElement | undefined = undefined;
 	export let loop: boolean;
+	export let is_stream;
 
 	export let processingVideo = false;
 
 	let resolved_src: typeof src;
+	let stream_active = false;
 
 	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
 	// In such a case, the resolved value for the old `src` has to be discarded,
@@ -46,6 +50,53 @@
 	}
 
 	const dispatch = createEventDispatcher();
+
+	function load_stream(
+		src: string | null | undefined,
+		is_stream: boolean,
+		node: HTMLVideoElement | undefined
+	): void {
+		if (!src || !is_stream) return;
+		if (!node) return;
+		if (Hls.isSupported() && !stream_active) {
+			const hls = new Hls({
+				maxBufferLength: 1, // 0.5 seconds (500 ms)
+				maxMaxBufferLength: 1, // Maximum max buffer length in seconds
+				lowLatencyMode: true // Enable low latency mode
+			});
+			hls.loadSource(src);
+			hls.attachMedia(node);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				(node as HTMLVideoElement).play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				console.error("HLS error:", event, data);
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							console.error(
+								"Fatal network error encountered, trying to recover"
+							);
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							console.error("Fatal media error encountered, trying to recover");
+							hls.recoverMediaError();
+							break;
+						default:
+							console.error("Fatal error, cannot recover");
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		}
+	}
+
+	$: src, (stream_active = false);
+
+	$: load_stream(src, is_stream, node);
 </script>
 
 <!--

package/shared/VideoControls.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import { Undo, Trim } from "@gradio/icons";
+	import { Undo, Trim, Clear } from "@gradio/icons";
 	import VideoTimeline from "./VideoTimeline.svelte";
 	import { trimVideo } from "./utils";
 	import { FFmpeg } from "@ffmpeg/ffmpeg";
 	import loadFfmpeg from "./utils";
 	import { onMount } from "svelte";
 	import { format_time } from "@gradio/utils";
+	import { IconButton } from "@gradio/atoms";
+	import { ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 
 	export let videoElement: HTMLVideoElement;
 
@@ -15,6 +18,11 @@
 	export let handle_reset_value: () => void;
 	export let handle_trim_video: (videoBlob: Blob) => void;
 	export let processingVideo = false;
+	export let i18n: (key: string) => string;
+	export let value: FileData | null = null;
+	export let show_download_button = false;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
 
 	let ffmpeg: FFmpeg;
 
@@ -41,7 +49,7 @@
 	};
 </script>
 
-<div class="container">
+<div class="container" class:hidden={mode !== "edit"}>
 	{#if mode === "edit"}
 		<div class="timeline-wrapper">
 			<VideoTimeline
@@ -60,62 +68,61 @@
 				aria-label="duration of selected region in seconds"
 				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
-		{:else}
-			<div />
-		{/if}
-
-		<div class="settings-wrapper">
-			{#if showRedo && mode === ""}
+			<div class="edit-buttons">
 				<button
-					class="action icon"
-					disabled={processingVideo}
-					aria-label="Reset video to initial value"
+					class:hidden={loadingTimeline}
+					class="text-button"
 					on:click={() => {
-						handle_reset_value();
 						mode = "";
-					}}
+						processingVideo = true;
+						trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
+							.then((videoBlob) => {
+								handle_trim_video(videoBlob);
+							})
+							.then(() => {
+								processingVideo = false;
+							});
+					}}>Trim</button
 				>
-					<Undo />
-				</button>
-			{/if}
-
-			{#if interactive}
-				{#if mode === ""}
-					<button
-						disabled={processingVideo}
-						class="action icon"
-						aria-label="Trim video to selection"
-						on:click={toggleTrimmingMode}
-					>
-						<Trim />
-					</button>
-				{:else}
-					<button
-						class:hidden={loadingTimeline}
-						class="text-button"
-						on:click={() => {
-							mode = "";
-							processingVideo = true;
-							trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
-								.then((videoBlob) => {
-									handle_trim_video(videoBlob);
-								})
-								.then(() => {
-									processingVideo = false;
-								});
-						}}>Trim</button
-					>
-					<button
-						class="text-button"
-						class:hidden={loadingTimeline}
-						on:click={toggleTrimmingMode}>Cancel</button
-					>
-				{/if}
-			{/if}
-		</div>
+				<button
+					class="text-button"
+					class:hidden={loadingTimeline}
+					on:click={toggleTrimmingMode}>Cancel</button
+				>
+			</div>
+		{:else}
+			<div />
+		{/if}
 	</div>
 </div>
 
+<ModifyUpload
+	{i18n}
+	on:clear={() => handle_clear()}
+	download={show_download_button ? value?.url : null}
+>
+	{#if showRedo && mode === ""}
+		<IconButton
+			Icon={Undo}
+			label="Reset video to initial value"
+			disabled={processingVideo || !has_change_history}
+			on:click={() => {
+				handle_reset_value();
+				mode = "";
+			}}
+		/>
+	{/if}
+
+	{#if interactive && mode === ""}
+		<IconButton
+			Icon={Trim}
+			label="Trim video to selection"
+			disabled={processingVideo}
+			on:click={toggleTrimmingMode}
+		/>
+	{/if}
+</ModifyUpload>
+
 <style>
 	.container {
 		width: 100%;
@@ -132,10 +139,7 @@
 		justify-content: center;
 		width: 100%;
 	}
-	.settings-wrapper {
-		display: flex;
-		justify-self: self-end;
-	}
+
 	.text-button {
 		border: 1px solid var(--neutral-400);
 		border-radius: var(--radius-sm);
@@ -148,9 +152,6 @@
 		padding: 0 5px;
 		margin-left: 5px;
 	}
-	.hidden {
-		display: none;
-	}
 
 	.text-button:hover,
 	.text-button:focus {
@@ -159,17 +160,26 @@
 	}
 
 	.controls {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		margin: var(--spacing-lg);
 		overflow: hidden;
-		text-align: left;
+	}
+
+	.edit-buttons {
+		display: flex;
+		gap: var(--spacing-sm);
 	}
 
 	@media (max-width: 320px) {
 		.controls {
-			display: flex;
-			flex-wrap: wrap;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.edit-buttons {
+			margin-top: var(--spacing-sm);
 		}
 
 		.controls * {
@@ -180,29 +190,13 @@
 			margin-left: 0;
 		}
 	}
-	.action {
-		width: var(--size-5);
-		width: var(--size-5);
-		color: var(--neutral-400);
-		margin-left: var(--spacing-md);
-	}
-
-	.action:disabled {
-		cursor: not-allowed;
-		color: var(--border-color-accent-subdued);
-	}
-
-	.action:disabled:hover {
-		color: var(--border-color-accent-subdued);
-	}
-
-	.icon:hover,
-	.icon:focus {
-		color: var(--color-accent);
-	}
 
 	.container {
 		display: flex;
 		flex-direction: column;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/shared/VideoPreview.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher, afterUpdate, tick } from "svelte";
-	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import type { FileData, Client } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
@@ -51,13 +57,14 @@
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
-{#if value === null || value.url === undefined}
+{#if !value || value.url === undefined}
 	<Empty unpadded_box={true} size="large"><Video /></Empty>
 {:else}
 	{#key value.url}
 		<Player
 			src={value.url}
 			subtitle={subtitle?.url}
+			is_stream={value.is_stream}
 			{autoplay}
 			on:play
 			on:pause
@@ -69,36 +76,34 @@
 			{loop}
 			interactive={false}
 			{upload}
+			{i18n}
 		/>
 	{/key}
-	<div class="icon-buttons" data-testid="download-div">
-		{#if show_download_button}
-			<DownloadLink href={value.url} download={value.orig_name || value.path}>
-				<IconButton Icon={Download} label="Download" />
-			</DownloadLink>
-		{/if}
-		{#if show_share_button}
-			<ShareButton
-				{i18n}
-				on:error
-				on:share
-				{value}
-				formatter={async (value) => {
-					if (!value) return "";
-					let url = await uploadToHuggingFace(value.data, "url");
-					return url;
-				}}
-			/>
-		{/if}
+	<div data-testid="download-div">
+		<IconButtonWrapper>
+			{#if show_download_button}
+				<DownloadLink
+					href={value.is_stream
+						? value.url?.replace("playlist.m3u8", "playlist-file")
+						: value.url}
+					download={value.orig_name || value.path}
+				>
+					<IconButton Icon={Download} label="Download" />
+				</DownloadLink>
+			{/if}
+			{#if show_share_button}
+				<ShareButton
+					{i18n}
+					on:error
+					on:share
+					{value}
+					formatter={async (value) => {
+						if (!value) return "";
+						let url = await uploadToHuggingFace(value.data, "url");
+						return url;
+					}}
+				/>
+			{/if}
+		</IconButtonWrapper>
 	</div>
 {/if}
-
-<style>
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>