From 21cfb0acc309bb1a392f4d8a8e42f6be864c5978 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Mon, 11 Dec 2023 23:15:02 +0100
Subject: [PATCH] Remove the styles from the Image/Video primitive components
 and Fix the container styles (#6726)

* Remove the styles from the Image/Video primitive components and Fix the container styles

* add changeset

* Fix image example size styles

* Remove border from image/Example with type=gallery

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/legal-geese-agree.md |  7 +++++++
 js/image/Example.svelte         |  7 ++++++-
 js/image/shared/Image.svelte    |  8 --------
 js/video/Example.svelte         | 10 ++++++++--
 js/video/shared/Player.svelte   |  4 ++++
 js/video/shared/Video.svelte    |  9 ---------
 6 files changed, 25 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/legal-geese-agree.md

diff --git a/.changeset/legal-geese-agree.md b/.changeset/legal-geese-agree.md
new file mode 100644
index 000000000000..1b6c36628729
--- /dev/null
+++ b/.changeset/legal-geese-agree.md
@@ -0,0 +1,7 @@
+---
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Remove the styles from the Image/Video primitive components and Fix the container styles
diff --git a/js/image/Example.svelte b/js/image/Example.svelte
index fba0a58d8897..b082fe782972 100644
--- a/js/image/Example.svelte
+++ b/js/image/Example.svelte
@@ -17,6 +17,11 @@
 </div>
 
 <style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}
@@ -25,13 +30,13 @@
 		margin: 0 auto;
 		border: 2px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
+		overflow: hidden;
 		width: var(--size-20);
 		height: var(--size-20);
 		object-fit: cover;
 	}
 
 	.container.gallery {
-		border: 2px solid var(--border-color-primary);
 		height: var(--size-20);
 		max-height: var(--size-20);
 		object-fit: cover;
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index f8542172a42f..1354ea4aab24 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -13,11 +13,3 @@
 {:catch error}
 	<p style="color: red;">{error.message}</p>
 {/await}
-
-<style>
-	img {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--radius-lg);
-	}
-</style>
diff --git a/js/video/Example.svelte b/js/video/Example.svelte
index e04bbebce86a..b91b02b46819 100644
--- a/js/video/Example.svelte
+++ b/js/video/Example.svelte
@@ -43,10 +43,13 @@
 <style>
 	.container {
 		flex: none;
-		border: 2px solid var(--border-color-primary);
-		border-radius: var(--radius-lg);
 		max-width: none;
 	}
+	.container :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
 
 	.container:hover,
 	.container.selected {
@@ -54,6 +57,9 @@
 	}
 	.container.table {
 		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
 		width: var(--size-20);
 		height: var(--size-20);
 		object-fit: cover;
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
index b2c33824fbd0..a262df9715fe 100644
--- a/js/video/shared/Player.svelte
+++ b/js/video/shared/Player.svelte
@@ -254,4 +254,8 @@
 		width: var(--size-full);
 		border-radius: var(--radius-xl);
 	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
 </style>
diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
index bdb0e6e94d83..996b03c83051 100644
--- a/js/video/shared/Video.svelte
+++ b/js/video/shared/Video.svelte
@@ -121,13 +121,4 @@
 			background: #fff;
 		}
 	}
-
-	video {
-		position: inherit;
-		background-color: black;
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-		border-radius: var(--radius-xl);
-	}
 </style>