Remove the styles from the Image/Video primitive components and Fix t…

…he 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>
gradio-app · Dec 11, 2023 · 21cfb0a · 21cfb0a
1 parent a1b966e
commit 21cfb0a
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 20 deletions.
diff --git a/.changeset/legal-geese-agree.md 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
@@ -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
@@ -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
@@ -43,17 +43,23 @@
 <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 {
 		border-color: var(--border-color-accent);
 	}
 	.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
@@ -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
@@ -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>