From c7f61599ba6ec429a0e1273516a3df6115ec857b Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Wed, 19 Apr 2023 13:12:54 -0700
Subject: [PATCH] Fix video not working in tab (#3891)

* fix

* fixes

* change

* Update CHANGELOG.md

* format
---
 CHANGELOG.md               |  2 +-
 js/video/src/Player.svelte | 17 +++--------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ee73a028e..070374acc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@
 No changes to highlight.
 
 ## Bug Fixes:
-
+- Fix issue where `gr.Video()` would not work inside a `gr.Tab()` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3891](https://github.com/gradio-app/gradio/pull/3891)
 - Fixed issue with old_value check in File. by [@tomchang25](https://github.com/tomchang25) in [PR 3859](https://github.com/gradio-app/gradio/pull/3859).
 - Fixed bug where all bokeh plots appeared in the same div by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3896](https://github.com/gradio-app/gradio/pull/3896)
 - Fix issue in `gr.Gallery()` where setting height causes aspect ratio of images to collapse by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3830](https://github.com/gradio-app/gradio/pull/3830)
diff --git a/js/video/src/Player.svelte b/js/video/src/Player.svelte
index 36b2da530f..9bda736103 100644
--- a/js/video/src/Player.svelte
+++ b/js/video/src/Player.svelte
@@ -77,9 +77,6 @@
 		await tick();
 
 		var b = setInterval(async () => {
-			if (video.readyState >= 1) {
-				height = (video.videoHeight / video.videoWidth) * width;
-			}
 			if (video.readyState >= 3) {
 				video.currentTime = 9999;
 				paused = true;
@@ -99,23 +96,15 @@
 		checkforVideo();
 	}
 
-	$: src && _load();
-
-	let height: number;
-	let width: number;
 	let opacity: number = 0;
 	let wrap_opacity: number = 0;
 	let transition: string = "0.5s";
+
+	$: src && _load();
 </script>
 
-<div
-	style:opacity={wrap_opacity}
-	class="wrap"
-	style:height={`${src && height}px` || `auto`}
->
+<div style:opacity={wrap_opacity} class="wrap">
 	<video
-		bind:clientHeight={height}
-		bind:clientWidth={width}
 		{src}
 		preload="auto"
 		on:mousemove={video_move}