Fix cropped videos CSS bug (#4946)

* add width/height to video wrap

* add comment on progress

* add video story

* upload utils linting

* fix a11y violations

* chlog

* add width/height args

* remove on changes chromatic flag

* test

* remove test

CHANGELOG.md

@@ -2608,6 +2608,7 @@ with gr.Blocks() as demo:
   Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)
 - Prevent invalid targets of events from crashing the whole application. [@pngwn](https://github.com/pngwn) in [PR 2534](https://github.com/gradio-app/gradio/pull/2534)
 - Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540)
+- Fixes videos being cropped due to height/width params not being used [@hannahblair](https://github.com/hannahblair) in [PR 4946](https://github.com/gradio-app/gradio/pull/4946)
 
 ## Documentation Changes:
 

js/app/src/components/Video/Video.stories.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Video from "./Video.svelte";
+</script>
+
+<Meta
+	title="Components/Video"
+	component={Video}
+	argTypes={{
+		 video: {
+            control: "text",
+            description: "A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.",
+			name: "value",
+        },
+        autoplay: {
+            control: [true, false],
+            description: "Whether to autoplay the video on load",
+			name: "autoplay",
+			value: true
+        }
+     }}
+/>
+
+<Template let:args>
+	<Video {...args} />
+</Template>
+
+<Story name="Primary" args={{ value:["https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4"], format:"mp4", label:"world video", show_label:true, interactive:true, autoplay: true, height: 400, width: 400 }} />
+

js/upload/src/utils.ts

@@ -7,22 +7,22 @@ export function normalise_file(
 ): FileData | null;
 
 export function normalise_file(
-	file: Array<FileData> | null,
+	file: FileData[] | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | null;
+): FileData[] | null;
 
 export function normalise_file(
-	file: Array<FileData> | FileData | null,
+	file: FileData[] | FileData | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | FileData | null;
+): FileData[] | FileData | null;
 
 export function normalise_file(
-	file: Array<FileData> | FileData | string | null,
+	file: FileData[] | FileData | string | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | FileData | null {
+): FileData[] | FileData | null {
 	if (file == null) return null;
 	if (typeof file === "string") {
 		return {
@@ -30,7 +30,7 @@ export function normalise_file(
 			data: file
 		};
 	} else if (Array.isArray(file)) {
-		const normalized_file: Array<FileData | null> = [];
+		const normalized_file: (FileData | null)[] = [];
 
 		for (const x of file) {
 			if (x === null) {
@@ -40,7 +40,7 @@ export function normalise_file(
 			}
 		}
 
-		return normalized_file as Array<FileData>;
+		return normalized_file as FileData[];
 	} else if (file.is_file) {
 		if (root_url == null) {
 			file.data = root + "/file=" + file.name;
@@ -55,7 +55,7 @@ export const blobToBase64 = (blob: File): Promise<string> => {
 	const reader = new FileReader();
 	reader.readAsDataURL(blob);
 	return new Promise((resolve) => {
-		reader.onloadend = () => {
+		reader.onloadend = (): void => {
 			resolve(reader.result as string);
 		};
 	});

js/video/src/Player.svelte

@@ -76,6 +76,11 @@
 		dispatch("stop");
 		dispatch("end");
 	}
+
+	function open_full_screen(): void {
+		video.requestFullscreen()
+	}
+
 </script>
 
 <div class="wrap">
@@ -99,7 +104,7 @@
 
 	<div class="controls">
 		<div class="inner">
-			<span class="icon" on:click={play_pause}>
+			<span role="button" tabindex="0" class="icon" aria-label="play-pause-replay-button" on:click={play_pause} on:keydown={play_pause}>
 				{#if time === duration}
 					<Undo />
 				{:else if paused}
@@ -110,6 +115,8 @@
 			</span>
 
 			<span class="time">{format(time)} / {format(duration)}</span>
+
+			<!-- TODO: implement accessible video timeline for 4.0 --> 
 			<progress
 				value={time / duration || 0}
 				on:mousemove={handleMove}
@@ -117,7 +124,7 @@
 				on:click|stopPropagation|preventDefault={handle_click}
 			/>
 
-			<div class="icon" on:click={() => video.requestFullscreen()}>
+			<div role="button" tabindex="0" class="icon" aria-label="full-screen" on:click={open_full_screen} on:keypress={open_full_screen}>
 				<Maximise />
 			</div>
 		</div>
@@ -203,5 +210,7 @@
 	.wrap {
 		position: relative;
 		background-color: var(--background-fill-secondary);
+		height: var(--size-full);
+		width: var(--size-full);
 	}
 </style>

package.json

@@ -27,7 +27,7 @@
 		"ci:version": "changeset version && pnpm i --lockfile-only",
 		"storybook": "storybook dev -p 6006 --config-dir js/storybook",
 		"build-storybook": "storybook build --config-dir js/storybook",
-		"chromatic": "chromatic --exit-zero-on-changes",
+		"chromatic": "chromatic",
 		"test:ct": "playwright test -c ./.config/playwright-ct.config.ts"
 	},
 	"type": "module",