@gradio/video 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @gradio/video
 
+## 0.5.1
+
+### Features
+
+- [#7274](https://github.com/gradio-app/gradio/pull/7274) [`fdd1521`](https://github.com/gradio-app/gradio/commit/fdd15213c24b9cbc58bbc1b6beb4af7c18f48557) - chore: Change time format (thanks @jjshoots for the independent contribution).  Thanks [@arian81](https://github.com/arian81)!
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
 ## 0.5.0
 
 ### Features

package/Example.svelte

@@ -20,25 +20,27 @@
 	}
 </script>
 
-{#if playable()}
-	<div
-		class="container"
-		class:table={type === "table"}
-		class:gallery={type === "gallery"}
-		class:selected
-	>
-		<Video
-			muted
-			playsinline
-			bind:node={video}
-			on:loadeddata={init}
-			on:mouseover={video.play.bind(video)}
-			on:mouseout={video.pause.bind(video)}
-			src={samples_dir + value?.video.path}
-		/>
-	</div>
-{:else}
-	<div>{value}</div>
+{#if value}
+	{#if playable()}
+		<div
+			class="container"
+			class:table={type === "table"}
+			class:gallery={type === "gallery"}
+			class:selected
+		>
+			<Video
+				muted
+				playsinline
+				bind:node={video}
+				on:loadeddata={init}
+				on:mouseover={video.play.bind(video)}
+				on:mouseout={video.pause.bind(video)}
+				src={samples_dir + value?.video.path}
+			/>
+		</div>
+	{:else}
+		<div>{value}</div>
+	{/if}
 {/if}
 
 <style>

package/Video.stories.svelte

@@ -1,12 +1,24 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script context="module">
+	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import Video from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
 	import { userEvent, within } from "@storybook/testing-library";
-</script>
+	import { allModes } from "../storybook/modes";
 
-<Meta title="Components/Video" component={Video} />
+	export const meta = {
+		title: "Components/Video",
+		component: Video,
+		parameters: {
+			chromatic: {
+				modes: {
+					desktop: allModes["desktop"],
+					mobile: allModes["mobile"]
+				}
+			}
+		}
+	};
+</script>
 
 <div>
 	<Template let:args>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,14 @@
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.5.0",
-    "@gradio/client": "^0.10.1",
+    "@gradio/client": "^0.11.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/image": "^0.7.1",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/utils": "^0.2.1",
-    "@gradio/wasm": "^0.5.1",
-    "@gradio/upload": "^0.7.0"
+    "@gradio/image": "^0.8.0",
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/upload": "^0.7.1",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/atoms": "^0.5.1"
   },
   "exports": {
     ".": "./index.ts",

package/shared/Player.svelte

@@ -5,6 +5,7 @@
 	import VideoControls from "./VideoControls.svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, upload } from "@gradio/client";
+	import { format_time } from "@gradio/utils";
 
 	export let root = "";
 	export let src: string;
@@ -70,16 +71,6 @@
 		time = (duration * (e.clientX - left)) / (right - left);
 	}
 
-	function format(seconds: number): string {
-		if (isNaN(seconds) || !isFinite(seconds)) return "...";
-
-		const minutes = Math.floor(seconds / 60);
-		let _seconds: number | string = Math.floor(seconds % 60);
-		if (_seconds < 10) _seconds = `0${_seconds}`;
-
-		return `${minutes}:${_seconds}`;
-	}
-
 	function handle_end(): void {
 		dispatch("stop");
 		dispatch("end");
@@ -138,7 +129,7 @@
 				{/if}
 			</span>
 
-			<span class="time">{format(time)} / {format(duration)}</span>
+			<span class="time">{format_time(time)} / {format_time(duration)}</span>
 
 			<!-- TODO: implement accessible video timeline for 4.0 -->
 			<!-- svelte-ignore a11y-click-events-have-key-events -->

package/shared/VideoControls.svelte

@@ -5,6 +5,7 @@
 	import { FFmpeg } from "@ffmpeg/ffmpeg";
 	import loadFfmpeg from "./utils";
 	import { onMount } from "svelte";
+	import { format_time } from "@gradio/utils";
 
 	export let videoElement: HTMLVideoElement;
 
@@ -24,18 +25,6 @@
 	$: if (mode === "edit" && trimmedDuration === null && videoElement)
 		trimmedDuration = videoElement.duration;
 
-	const formatTime = (seconds: number): string => {
-		const minutes = Math.floor(seconds / 60);
-		const secondsRemainder = Math.round(seconds) % 60;
-		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-
-		if (Number.isNaN(minutes) || Number.isNaN(secondsRemainder)) {
-			return "00:00";
-		}
-
-		return `${minutes}:${paddedSeconds}`;
-	};
-
 	let trimmedDuration: number | null = null;
 	let dragStart = 0;
 	let dragEnd = 0;
@@ -69,7 +58,7 @@
 		{#if mode === "edit" && trimmedDuration !== null}
 			<time
 				aria-label="duration of selected region in seconds"
-				class:hidden={loadingTimeline}>{formatTime(trimmedDuration)}</time
+				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
 		{:else}
 			<div />