@gradio/video 0.14.24 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @gradio/video
 
+## 0.15.1
+
+### Dependency updates
+
+- @gradio/client@1.18.0
+- @gradio/icons@0.14.0
+- @gradio/atoms@0.17.0
+- @gradio/statustracker@0.11.0
+- @gradio/upload@0.16.17
+- @gradio/image@0.22.18
+
+## 0.15.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
+
+## 0.15.0
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
+## 0.15.0
+
+### Features
+
+- [#11721](https://github.com/gradio-app/gradio/pull/11721) [`58d9d9e`](https://github.com/gradio-app/gradio/commit/58d9d9e98194dada5267ac1599063cf21723cbde) - Remove dupe maximise/maximize icon.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.17
+- @gradio/atoms@0.16.5
+- @gradio/client@1.17.1
+- @gradio/icons@0.13.0
+- @gradio/upload@0.16.15
+- @gradio/image@0.22.17
+
 ## 0.14.24
 
 ### Dependency updates

package/dist/Example.svelte.d.ts

@@ -3,7 +3,7 @@ import { type FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
         type: "gallery" | "table";
-        selected?: boolean | undefined;
+        selected?: boolean;
         value: {
             video: FileData;
             subtitles: FileData | null;
@@ -14,6 +14,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ExampleProps = typeof __propDef.props;
 export type ExampleEvents = typeof __propDef.events;

package/dist/Index.svelte

@@ -29,26 +29,23 @@ export let include_audio;
 export let loop = false;
 export let input_ready;
 let uploading = false;
-$:
-  input_ready = !uploading;
+$: input_ready = !uploading;
 let _video = null;
 let _subtitle = null;
 let active_source;
 let initial_value = value;
-$:
-  if (value && initial_value === null) {
-    initial_value = value;
-  }
+$: if (value && initial_value === null) {
+  initial_value = value;
+}
 const handle_reset_value = () => {
   if (initial_value === null || value === initial_value) {
     return;
   }
   value = initial_value;
 };
-$:
-  if (sources && !active_source) {
-    active_source = sources[0];
-  }
+$: if (sources && !active_source) {
+  active_source = sources[0];
+}
 $: {
   if (value != null) {
     _video = value.video;

package/dist/Index.svelte.d.ts

@@ -5,13 +5,13 @@ import type { LoadingStatus } from "@gradio/statustracker";
 import type { WebcamOptions } from "./shared/utils";
 declare const __propDef: {
     props: {
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
-        visible?: boolean | undefined;
-        value?: ({
+        elem_id?: string;
+        elem_classes?: string[];
+        visible?: boolean;
+        value?: {
             video: FileData;
             subtitles: FileData | null;
-        } | null) | undefined;
+        } | null;
         label: string;
         sources: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
         root: string;
@@ -19,11 +19,11 @@ declare const __propDef: {
         loading_status: LoadingStatus;
         height: number | undefined;
         width: number | undefined;
-        container?: boolean | undefined;
-        scale?: (number | null) | undefined;
+        container?: boolean;
+        scale?: number | null;
         min_width?: number | undefined;
-        autoplay?: boolean | undefined;
-        show_share_button?: boolean | undefined;
+        autoplay?: boolean;
+        show_share_button?: boolean;
         show_download_button: boolean;
         gradio: Gradio<{
             change: never;
@@ -43,13 +43,15 @@ declare const __propDef: {
         interactive: boolean;
         webcam_options: WebcamOptions;
         include_audio: boolean;
-        loop?: boolean | undefined;
+        loop?: boolean;
         input_ready: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;

package/dist/shared/InteractiveVideo.svelte

@@ -47,8 +47,7 @@ function handle_capture({
   dispatch("change", detail);
 }
 let dragging = false;
-$:
-  dispatch("drag", dragging);
+$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />

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

@@ -4,24 +4,24 @@ import type { WebcamOptions } from "./utils";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        value?: (FileData | null) | undefined;
-        subtitle?: (FileData | null) | undefined;
-        sources?: (["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"]) | undefined;
+        value?: FileData | null;
+        subtitle?: FileData | null;
+        sources?: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
         label?: string | undefined;
-        show_download_button?: boolean | undefined;
-        show_label?: boolean | undefined;
+        show_download_button?: boolean;
+        show_label?: boolean;
         webcam_options: WebcamOptions;
         include_audio: boolean;
         autoplay: boolean;
         root: string;
         i18n: I18nFormatter;
-        active_source?: ("webcam" | "upload") | undefined;
-        handle_reset_value?: (() => void) | undefined;
-        max_file_size?: (number | null) | undefined;
+        active_source?: "webcam" | "upload";
+        handle_reset_value?: () => void;
+        max_file_size?: number | null;
         upload: Client["upload"];
         stream_handler: Client["stream"];
         loop: boolean;
-        uploading?: boolean | undefined;
+        uploading?: boolean;
     };
     events: {
         error: CustomEvent<any>;
@@ -41,6 +41,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InteractiveVideoProps = typeof __propDef.props;
 export type InteractiveVideoEvents = typeof __propDef.events;

package/dist/shared/Player.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher } from "svelte";
-import { Play, Pause, Maximise, Undo } from "@gradio/icons";
+import { Play, Pause, Maximize, Undo } from "@gradio/icons";
 import Video from "./Video.svelte";
 import VideoControls from "./VideoControls.svelte";
 import { prepare_files } from "@gradio/client";
@@ -31,14 +31,12 @@ let paused = true;
 let video;
 let processingVideo = false;
 function handleMove(e) {
-  if (!duration)
-    return;
+  if (!duration) return;
   if (e.type === "click") {
     handle_click(e);
     return;
   }
-  if (e.type !== "touchmove" && !(e.buttons & 1))
-    return;
+  if (e.type !== "touchmove" && !(e.buttons & 1)) return;
   const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
   const { left, right } = e.currentTarget.getBoundingClientRect();
   time = duration * (clientX - left) / (right - left);
@@ -48,8 +46,7 @@ async function play_pause() {
     const isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;
     if (!isPlaying) {
       await video.play();
-    } else
-      video.pause();
+    } else video.pause();
   }
 }
 function handle_click(e) {
@@ -69,10 +66,8 @@ const handle_trim_video = async (videoBlob) => {
 function open_full_screen() {
   video.requestFullscreen();
 }
-$:
-  time = time || 0;
-$:
-  duration = duration || 0;
+$: time = time || 0;
+$: duration = duration || 0;
 </script>
 
 <div class="wrap">
@@ -141,7 +136,7 @@ $:
 				on:click={open_full_screen}
 				on:keypress={open_full_screen}
 			>
-				<Maximise />
+				<Maximize />
 			</div>
 		</div>
 	</div>

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

@@ -3,23 +3,23 @@ import type { FileData, Client } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        root?: string | undefined;
+        root?: string;
         src: string;
-        subtitle?: (string | null) | undefined;
+        subtitle?: string | null;
         mirror: boolean;
         autoplay: boolean;
         loop: boolean;
-        label?: string | undefined;
-        interactive?: boolean | undefined;
-        handle_change?: ((video: FileData) => void) | undefined;
-        handle_reset_value?: (() => void) | undefined;
+        label?: string;
+        interactive?: boolean;
+        handle_change?: (video: FileData) => void;
+        handle_reset_value?: () => void;
         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;
+        show_download_button?: boolean;
+        value?: FileData | null;
+        handle_clear?: () => void;
+        has_change_history?: boolean;
     };
     events: {
         play: CustomEvent<any>;
@@ -35,6 +35,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PlayerProps = typeof __propDef.props;
 export type PlayerEvents = typeof __propDef.events;

package/dist/shared/Video.svelte

@@ -30,8 +30,7 @@ $: {
 }
 const dispatch = createEventDispatcher();
 function load_stream(src2, is_stream2, node2) {
-  if (!src2 || !is_stream2)
-    return;
+  if (!src2 || !is_stream2) return;
   if (Hls.isSupported() && !stream_active) {
     const hls = new Hls({
       maxBufferLength: 1,
@@ -70,12 +69,10 @@ function load_stream(src2, is_stream2, node2) {
     stream_active = true;
   }
 }
-$:
-  src, stream_active = false;
-$:
-  if (node && src && is_stream) {
-    load_stream(src, is_stream, node);
-  }
+$: src, stream_active = false;
+$: if (node && src && is_stream) {
+  load_stream(src, is_stream, node);
+}
 </script>
 
 <!--

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

@@ -27,6 +27,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type VideoProps = typeof __propDef.props;
 export type VideoEvents = typeof __propDef.events;

package/dist/shared/VideoControls.svelte

@@ -24,9 +24,8 @@ let ffmpeg;
 onMount(async () => {
   ffmpeg = await loadFfmpeg();
 });
-$:
-  if (mode === "edit" && trimmedDuration === null && videoElement)
-    trimmedDuration = videoElement.duration;
+$: if (mode === "edit" && trimmedDuration === null && videoElement)
+  trimmedDuration = videoElement.duration;
 let trimmedDuration = null;
 let dragStart = 0;
 let dragEnd = 0;

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

@@ -3,22 +3,24 @@ import type { FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
         videoElement: HTMLVideoElement;
-        showRedo?: boolean | undefined;
-        interactive?: boolean | undefined;
-        mode?: string | undefined;
+        showRedo?: boolean;
+        interactive?: boolean;
+        mode?: string;
         handle_reset_value: () => void;
         handle_trim_video: (videoBlob: Blob) => void;
-        processingVideo?: boolean | undefined;
+        processingVideo?: boolean;
         i18n: (key: string) => string;
-        value?: (FileData | null) | undefined;
-        show_download_button?: boolean | undefined;
-        handle_clear?: (() => void) | undefined;
-        has_change_history?: boolean | undefined;
+        value?: FileData | null;
+        show_download_button?: boolean;
+        handle_clear?: () => void;
+        has_change_history?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type VideoControlsProps = typeof __propDef.props;
 export type VideoControlsEvents = typeof __propDef.events;

package/dist/shared/VideoPreview.svelte

@@ -24,8 +24,7 @@ export let display_icon_button_wrapper_top_corner = false;
 let old_value = null;
 let old_subtitle = null;
 const dispatch = createEventDispatcher();
-$:
-  value && dispatch("change", value);
+$: value && dispatch("change", value);
 afterUpdate(async () => {
   if (value !== old_value && subtitle !== old_subtitle && old_subtitle !== null) {
     old_value = value;

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

@@ -3,17 +3,17 @@ import type { FileData, Client } from "@gradio/client";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 declare const __propDef: {
     props: {
-        value?: (FileData | null) | undefined;
-        subtitle?: (FileData | null) | undefined;
+        value?: FileData | null;
+        subtitle?: FileData | null;
         label?: string | undefined;
-        show_label?: boolean | undefined;
+        show_label?: boolean;
         autoplay: boolean;
-        show_share_button?: boolean | undefined;
-        show_download_button?: boolean | undefined;
+        show_share_button?: boolean;
+        show_download_button?: boolean;
         loop: boolean;
         i18n: I18nFormatter;
         upload: Client["upload"];
-        display_icon_button_wrapper_top_corner?: boolean | undefined;
+        display_icon_button_wrapper_top_corner?: boolean;
     };
     events: {
         play: CustomEvent<any>;
@@ -28,6 +28,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type VideoPreviewProps = typeof __propDef.props;
 export type VideoPreviewEvents = typeof __propDef.events;

package/dist/shared/VideoTimeline.svelte

@@ -14,16 +14,14 @@ let dragging = null;
 const startDragging = (side) => {
   dragging = side;
 };
-$:
-  loadingTimeline = thumbnails.length !== numberOfThumbnails;
+$: loadingTimeline = thumbnails.length !== numberOfThumbnails;
 const stopDragging = () => {
   dragging = null;
 };
 const drag = (event, distance) => {
   if (dragging) {
     const timeline = document.getElementById("timeline");
-    if (!timeline)
-      return;
+    if (!timeline) return;
     const rect = timeline.getBoundingClientRect();
     let newPercentage = (event.clientX - rect.left) / rect.width * 100;
     if (distance) {
@@ -63,8 +61,7 @@ const moveHandle = (e) => {
 const generateThumbnail = () => {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
-  if (!ctx)
-    return;
+  if (!ctx) return;
   canvas.width = videoElement.videoWidth;
   canvas.height = videoElement.videoHeight;
   ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

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

@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type VideoTimelineProps = typeof __propDef.props;
 export type VideoTimelineEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.14.24",
+  "version": "0.15.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,13 +11,13 @@
     "@ffmpeg/util": "^0.12.1",
     "hls.js": "^1.5.13",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.16.4",
-    "@gradio/statustracker": "^0.10.16",
-    "@gradio/upload": "^0.16.14",
-    "@gradio/icons": "^0.12.0",
+    "@gradio/icons": "^0.14.0",
+    "@gradio/client": "^1.18.0",
+    "@gradio/statustracker": "^0.11.0",
+    "@gradio/image": "^0.22.18",
+    "@gradio/atoms": "^0.17.0",
+    "@gradio/upload": "^0.16.17",
     "@gradio/utils": "^0.10.2",
-    "@gradio/image": "^0.22.16",
-    "@gradio/client": "^1.17.0",
     "@gradio/wasm": "^0.18.1"
   },
   "devDependencies": {

package/shared/Player.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
+	import { Play, Pause, Maximize, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
 	import type { FileData, Client } from "@gradio/client";
@@ -168,7 +168,7 @@
 				on:click={open_full_screen}
 				on:keypress={open_full_screen}
 			>
-				<Maximise />
+				<Maximize />
 			</div>
 		</div>
 	</div>