From 09eb685f92b85ef6e90ca073a159257e32b44002 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Mon, 24 Nov 2025 07:21:21 +0100
Subject: [PATCH] Move inline podcast styles into CSS

---
 src/ui/PodcastView/EpisodePlayer.svelte | 43 +++++++++++++++----------
 src/ui/PodcastView/PodcastView.svelte   | 18 ++++-------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/ui/PodcastView/EpisodePlayer.svelte b/src/ui/PodcastView/EpisodePlayer.svelte
index 82432b7..0ce8dec 100644
--- a/src/ui/PodcastView/EpisodePlayer.svelte
+++ b/src/ui/PodcastView/EpisodePlayer.svelte
@@ -218,9 +218,7 @@
 			{:else}
 				<div
 					class="podcast-artwork-overlay"
-					style={`display: ${
-						isHoveringArtwork || $isPaused ? "block" : "none"
-					}`}
+					class:visible={isHoveringArtwork || $isPaused}
 				>
 					<Icon icon={$isPaused ? "play" : "pause"} clickable={false} />
 				</div>
@@ -251,9 +249,6 @@
 			on:click={onClickProgressbar}
 			value={$currentTime}
 			max={$duration}
-			style={{
-				"height": "2rem",
-			}}
 		/>
 		<span>{formatSeconds($duration - $currentTime, "HH:mm:ss")}</span>
 	</div>
@@ -263,21 +258,15 @@
 			icon="skip-back"
 			tooltip="Skip backward"
 			on:click={$plugin.api.skipBackward.bind($plugin.api)}
-			style={{
-				margin: "0",
-				cursor: "pointer",
-			}}
+			class="player-control-button"
 		/>
 		<Button
 			icon="skip-forward"
 			tooltip="Skip forward"
 			on:click={$plugin.api.skipForward.bind($plugin.api)}
-			style={{
-				margin: "0",
-			cursor: "pointer",
-		}}
-	/>
-</div>
+			class="player-control-button"
+		/>
+	</div>
 
 	<div class="slider-stack">
 		<div class="volume-container">
@@ -371,11 +360,22 @@
 
 	:global(.podcast-artwork-overlay) {
 		position: absolute;
+		inset: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.podcast-artwork-overlay.visible) {
+		display: flex;
 	}
 
 	:global(.podcast-artwork-isloading-overlay) {
 		position: absolute;
-		display: block;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	:global(.podcast-artwork-overlay:hover) {
@@ -400,6 +400,10 @@
 		justify-content: space-around;
 	}
 
+	:global(.episode-player .status-container .progress) {
+		height: var(--episode-player-progress-height, 2rem);
+	}
+
 	:global(.controls-container) {
 		display: flex;
 		align-items: center;
@@ -409,6 +413,11 @@
 		margin-right: 25%;
 	}
 
+	:global(.player-control-button) {
+		margin: 0;
+		cursor: pointer;
+	}
+
 	:global(.slider-stack) {
 		display: flex;
 		flex-direction: column;
diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte
index 64c1c22..583bb9b 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -234,10 +234,6 @@ onMount(() => {
 					>
 						<Icon
 							icon={"arrow-left"}
-							style={{
-								display: "flex",
-								"align-items": "center",
-							}}
 							size={20}
 							clickable={false}
 						/> Latest Episodes
@@ -258,17 +254,11 @@ onMount(() => {
 					>
 						<Icon
 							icon={"arrow-left"}
-							style={{
-								display: "flex",
-								"align-items": "center",
-							}}
 							size={20}
 							clickable={false}
 						/> Latest Episodes
 					</button>
-					<div
-						style="display: flex; align-items: center; justify-content: center;"
-					>
+					<div class="playlist-header-icon">
 						<Icon
 							icon={selectedPlaylist.icon}
 							size={40}
@@ -314,4 +304,10 @@ onMount(() => {
 	.go-back:hover {
 		opacity: 1;
 	}
+
+	.playlist-header-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>