Merge pull request #76 from mbaraa/dev

release v0.1.3
mbaraa · Jun 12, 2024 · f26b281 · f26b281
2 parents a8b563b + d9a872e
commit f26b281
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 186 deletions.
diff --git a/app/cmd/server/server.go b/app/cmd/server/server.go
@@ -119,5 +119,5 @@ func StartServer(staticFS embed.FS) error {
 	applicationHandler.Handle("/api/", http.StripPrefix("/api", apisHandler))
 
 	log.Info("Starting http server at port " + config.Env().Port)
-	return http.ListenAndServe(":"+config.Env().Port, applicationHandler)
+	return http.ListenAndServe(":"+config.Env().Port, m.Middleware(applicationHandler))
 }
diff --git a/app/static/css/themes/black.css b/app/static/css/themes/black.css
@@ -9,12 +9,8 @@
   --secondary-color-30: #ffffff4c;
   --secondary-color-69: #ffffffb0;
 
-  --accent-color: #d3fcbf;
-  --accent-color-20: #d3fcbf33;
-  --accent-color-30: #d3fcbf4c;
-  --accent-color-69: #d3fcbfb0;
-}
-
-body {
-  background-color: #131313;
+  --accent-color: #236104;
+  --accent-color-20: #23610433;
+  --accent-color-30: #2361044c;
+  --accent-color-69: #236104b0;
 }
diff --git a/app/static/css/themes/dank.css b/app/static/css/themes/dank.css
@@ -14,7 +14,3 @@
   --accent-color-30: #0000004c;
   --accent-color-69: #000000b0;
 }
-
-body {
-  background-color: #305922;
-}
diff --git a/app/static/css/themes/white.css b/app/static/css/themes/white.css
@@ -14,7 +14,3 @@
   --accent-color-30: #d5ffc14c;
   --accent-color-69: #d5ffc1b0;
 }
-
-body {
-  background-color: #dedede;
-}
diff --git a/app/static/js/utils.js b/app/static/js/utils.js
@@ -53,22 +53,6 @@ function copyTextToClipboard(text) {
   textArea.hidden = true;
 }
 
-let isMobile = window.innerWidth < 768;
-
-/**
- * @param {EventTarget<Window>} e
- */
-window.addEventListener("resize", (e) => {
-  if (e.target.innerWidth < 768 && !isMobile) {
-    isMobile = true;
-    window.location.reload();
-  }
-  if (e.target.innerWidth > 768 && isMobile) {
-    isMobile = false;
-    window.location.reload();
-  }
-});
-
 window.Utils = {
   showLoading,
   hideLoading,

diff --git a/app/views/components/header/header.templ b/app/views/components/header/header.templ
@@ -26,7 +26,7 @@ templ Header() {
 		class={
 			"bg-primary", "p-[15px]", "md:p-[10px]", "text-secondary", "w-full",
 			"flex", "flex-col", "md:flex-row", "justify-between", "items-center",
-			"gap-y-5",
+			"gap-y-5", "border-b", "border-b-secondary",
 		}
 	>
 		<div class={ "w-full", "md:w-fit" }>

diff --git a/app/views/components/mobilenav/mobilenav.templ b/app/views/components/mobilenav/mobilenav.templ
@@ -5,10 +5,13 @@ import "dankmuzikk/views/icons"
 
 templ MobileNav() {
 	<div
-		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full" }
+		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full", }
 	>
 		<nav
-			class={ "bg-primary",  "h-[55px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
+			class={
+				"bg-primary", "h-[55px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center",
+				"items-center", "shadow-sm", "shadow-secondary",
+			}
 		>
 			<ul class={ "w-full", "m-0", "p-5", "px-14", "list-none", "flex", "justify-between" }>
 				<li>

diff --git a/...ws/components/player/desktop_player.templ → .../components/player/collapsed_player.templ b/...ws/components/player/desktop_player.templ → .../components/player/collapsed_player.templ
@@ -1,64 +1,82 @@
 package player
 
-templ desktopPlayer() {
+templ collapsedPlayer() {
 	<div
-		class={
-			"fixed", "bottom-0", "w-screen", "h-[90px]", "rounded-t-3xl", "text-secondary",
-			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-4", "p-[20px]",
-			"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-t-md", "shadow-t-accent",
-		}
+		class={ "h-full", "flex", "justify-between", "items-center", "gap-x-2", "md:gap-x-5", }
 	>
-		<!-- details -->
-		<div class={ "flex", "gap-x-4", "w-[350px]" }>
+		<!-- details and seeker -->
+		<div
+			class={
+				"w-full",
+				"flex", "justify-between", "items-center", "flex-col-reverse", "md:flex-row", "gap-x-5",
+			}
+		>
+			<!-- details -->
+			<div class={ "w-full", "flex", "gap-x-4", "w-fit", "md:w-[350px]" }>
+				<div
+					id="song-image"
+					class={
+						"w-[35px]", "h-[35px]", "rounded-[3px]",
+						"md:w-[60px]", "md:h-[60px]", "md:rounded-md", "bg-primary",
+						"bg-repeat", "bg-cover", "bg-center",
+					}
+				>
+					<div
+						class={ "loader", "!h-[25px]", "!w-[25px]", "!md:h-[50px]", "!md:w-[50px]", }
+					></div>
+				</div>
+				<div
+					class={
+						"flex", "flex-col", "justify-center",
+						"min-w-[100px]", "max-w-[250px]", "md:max-w-[275px]",
+					}
+				>
+					<p class={ "w-full" }>
+						<span id="song-name">Loading...</span>
+					</p>
+					<p class={ "hidden", "md:inline-block", "w-full" }>
+						<span id="artist-name"></span>
+					</p>
+				</div>
+			</div>
+			<!-- seeker, time, and volume -->
 			<div
-				id="song-image"
 				class={
-					"w-[60px]", "h-[60px]", "rounded-md", "bg-primary",
-					"bg-repeat", "bg-cover", "bg-center",
+					"w-full", "lg:w-[400px]", "2xl:w-[600px]",
+					"flex", "flex-row-reverse", "md:flex-col", "gap-x-2",
 				}
 			>
-				<div class="loader !h-[50px] !w-[50px]"></div>
-			</div>
-			<div class={ "flex", "flex-col", "justify-center", "w-[275px]" }>
-				<p class={ "font-Ubuntu", "w-full" }>
-					<span id="song-name">Loading...</span>
-				</p>
-				<p class={ "font-Ubuntu", "w-full" }>
-					<span id="artist-name"></span>
-				</p>
-			</div>
-		</div>
-		<!-- seeker, time, and volume -->
-		<div class={ "w-[200px]", "lg:w-[400px]", "2xl:w-[600px]", "flex", "flex-col" }>
-			<div class={ "flex", "justify-between", "w-full", "items-center" }>
-				<div class={ "w-1/3", "flex", "items-center", "gap-x-3" }>
-					<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<path d="M15.0408 7.0289C15.6748 7.87954 16.0505 8.9369 16.0505 10.0827C16.0505 11.2284 15.6748 12.2858 15.0408 13.1364M17.0606 3.25413C18.9204 4.93162 20.0909 7.3694 20.0909 10.0827C20.0909 12.7959 18.9204 15.2336 17.0606 16.9112M3.52522 7.0289H4.43552C4.99202 7.0289 5.27026 7.0289 5.5281 6.95899C5.75656 6.89705 5.97244 6.79516 6.16592 6.65794C6.38428 6.50309 6.5624 6.28767 6.91866 5.85686L9.57108 2.64929C10.0112 2.11711 10.2312 1.85101 10.4234 1.82331C10.5899 1.79933 10.7572 1.86041 10.8699 1.98621C11 2.13149 11 2.47787 11 3.17062V16.9946C11 17.6874 11 18.0338 10.8699 18.1791C10.7572 18.3049 10.5899 18.366 10.4234 18.342C10.2313 18.3143 10.0112 18.0482 9.57108 17.516L6.91866 14.3085C6.5624 13.8777 6.38428 13.6622 6.16592 13.5074C5.97244 13.3701 5.75656 13.2682 5.5281 13.2064C5.27026 13.1364 4.99202 13.1364 4.43552 13.1364H3.52522C2.95951 13.1364 2.67665 13.1364 2.46058 13.0255C2.27052 12.9279 2.116 12.7721 2.01915 12.5806C1.90906 12.3629 1.90906 12.0778 1.90906 11.5078V8.65758C1.90906 8.08745 1.90906 7.80244 2.01915 7.58469C2.116 7.39315 2.27052 7.23743 2.46058 7.13985C2.67665 7.0289 2.95951 7.0289 3.52522 7.0289Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-					</svg>
-					<input
-						id="volume-seek-bar"
-						type="range"
-						min="0"
-						max="100"
-						value="100"
-						class={ "my-1", "w-full" }
-					/>
-				</div>
-				<div>
-					<span id="song-current-time">00:00</span> / <span id="song-duration">00:00</span>
+				<div class={ "flex", "justify-between", "w-fit", "md:w-full", "items-center" }>
+					<div class={ "w-3/5", "hidden", "md:flex", "items-center", "gap-x-3" }>
+						<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M15.0408 7.0289C15.6748 7.87954 16.0505 8.9369 16.0505 10.0827C16.0505 11.2284 15.6748 12.2858 15.0408 13.1364M17.0606 3.25413C18.9204 4.93162 20.0909 7.3694 20.0909 10.0827C20.0909 12.7959 18.9204 15.2336 17.0606 16.9112M3.52522 7.0289H4.43552C4.99202 7.0289 5.27026 7.0289 5.5281 6.95899C5.75656 6.89705 5.97244 6.79516 6.16592 6.65794C6.38428 6.50309 6.5624 6.28767 6.91866 5.85686L9.57108 2.64929C10.0112 2.11711 10.2312 1.85101 10.4234 1.82331C10.5899 1.79933 10.7572 1.86041 10.8699 1.98621C11 2.13149 11 2.47787 11 3.17062V16.9946C11 17.6874 11 18.0338 10.8699 18.1791C10.7572 18.3049 10.5899 18.366 10.4234 18.342C10.2313 18.3143 10.0112 18.0482 9.57108 17.516L6.91866 14.3085C6.5624 13.8777 6.38428 13.6622 6.16592 13.5074C5.97244 13.3701 5.75656 13.2682 5.5281 13.2064C5.27026 13.1364 4.99202 13.1364 4.43552 13.1364H3.52522C2.95951 13.1364 2.67665 13.1364 2.46058 13.0255C2.27052 12.9279 2.116 12.7721 2.01915 12.5806C1.90906 12.3629 1.90906 12.0778 1.90906 11.5078V8.65758C1.90906 8.08745 1.90906 7.80244 2.01915 7.58469C2.116 7.39315 2.27052 7.23743 2.46058 7.13985C2.67665 7.0289 2.95951 7.0289 3.52522 7.0289Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+						</svg>
+						<input
+							id="volume-seek-bar"
+							type="range"
+							min="0"
+							max="100"
+							value="100"
+							class={ "my-1", "w-full" }
+						/>
+					</div>
+					<div>
+						<span id="song-current-time">00:00</span><span class={ "hidden", "md:inline-block" }>/ </span><span id="song-duration" class={ "hidden", "md:inline-block" }>00:00</span>
+					</div>
 				</div>
+				<input
+					id="song-seek-bar"
+					type="range"
+					min="0"
+					value="0"
+					class={ "my-2", "w-full", "md:w-fit" }
+				/>
 			</div>
-			<input
-				id="song-seek-bar"
-				type="range"
-				min="0"
-				value="0"
-				class={ "my-2" }
-			/>
+			<div></div>
 		</div>
-		<!-- player controls -->
-		<div class={ "float-right", "flex", "items-center", "gap-x-0" }>
-			<button id="shuffle" type="button" title="Shuffle" disabled>
+		<!-- controls -->
+		<div class={ "flex", "items-center", "gap-x-0" }>
+			<button id="shuffle" class={ "hidden", "md:inline-block" } type="button" title="Shuffle" disabled>
 				<svg class={ "w-[30px]" } width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<g clip-path="url(#clip0_170_535)">
 						<path d="M22.863 7.72233C22.327 8.25834 22.327 9.12732 22.863 9.66339C23.399 10.1994 24.2679 10.1994 24.804 9.66339L22.863 7.72233ZM28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217C27.9281 3.52616 27.0592 3.52616 26.5232 4.06217L28.4642 6.00326ZM26.5232 6.00326C27.0592 6.53928 27.9281 6.53928 28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217L26.5232 6.00326ZM24.804 0.402009C24.2679 -0.134003 23.399 -0.134003 22.863 0.402009C22.327 0.938018 22.327 1.80709 22.863 2.3431L24.804 0.402009ZM27.4937 6.40528C28.2517 6.40528 28.8663 5.79075 28.8663 5.03271C28.8663 4.27468 28.2517 3.66015 27.4937 3.66015V6.40528ZM12.3798 11.5987C11.9632 12.2319 12.1387 13.083 12.7721 13.4997C13.4054 13.9163 14.2565 13.7408 14.6732 13.1074L12.3798 11.5987ZM14.6732 13.1074C15.0897 12.4742 14.9143 11.623 14.2809 11.2063C13.6477 10.7898 12.7965 10.9653 12.3798 11.5987L14.6732 13.1074ZM1.87256 18.3008C1.11452 18.3008 0.5 18.9154 0.5 19.6734C0.5 20.4313 1.11452 21.0459 1.87256 21.0459V18.3008ZM14.6732 11.5987C14.2565 10.9653 13.4054 10.7898 12.7721 11.2063C12.1387 11.623 11.9632 12.4742 12.3798 13.1074L14.6732 11.5987ZM27.4937 21.0459C28.2517 21.0459 28.8663 20.4313 28.8663 19.6734C28.8663 18.9154 28.2517 18.3008 27.4937 18.3008V21.0459ZM12.3798 13.1074C12.7965 13.7408 13.6477 13.9163 14.2809 13.4997C14.9143 13.083 15.0897 12.2319 14.6732 11.5987L12.3798 13.1074ZM1.87256 3.66015C1.11452 3.66015 0.5 4.27468 0.5 5.03271C0.5 5.79075 1.11452 6.40528 1.87256 6.40528V3.66015ZM24.804 15.0427C24.2679 14.5067 23.399 14.5067 22.863 15.0427C22.327 15.5788 22.327 16.4477 22.863 16.9837L24.804 15.0427ZM26.5232 20.6438C27.0592 21.1799 27.9281 21.1799 28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029L26.5232 20.6438ZM28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029C27.9281 18.1669 27.0592 18.1669 26.5232 18.7029L28.4642 20.6438ZM22.863 22.363C22.327 22.899 22.327 23.7679 22.863 24.304C23.399 24.84 24.2679 24.84 24.804 24.304L22.863 22.363ZM24.804 9.66339L28.4642 6.00326L26.5232 4.06217L22.863 7.72233L24.804 9.66339ZM28.4642 4.06217L24.804 0.402009L22.863 2.3431L26.5232 6.00326L28.4642 4.06217ZM27.4937 3.66015H23.2845L23.2832 6.40528H27.4937V3.66015ZM23.2845 3.66015C19.7398 3.65671 16.4327 5.43824 14.4844 8.3997L16.7779 9.90839C18.2178 7.71951 20.6631 6.40273 23.2832 6.40528L23.2845 3.66015ZM14.4844 8.3997L12.3798 11.5987L14.6732 13.1074L16.7779 9.90839L14.4844 8.3997ZM12.3798 11.5987L10.2753 14.7977L12.5687 16.3063L14.6732 13.1074L12.3798 11.5987ZM10.2753 14.7977C8.83678 16.9842 6.39496 18.3008 3.77763 18.3008L3.77767 21.0459C7.31877 21.0457 10.6224 19.2647 12.5687 16.3063L10.2753 14.7977ZM3.77763 18.3008H1.87256V21.0459H3.77767L3.77763 18.3008ZM12.3798 13.1074L14.4844 16.3063L16.7779 14.7977L14.6732 11.5987L12.3798 13.1074ZM14.4844 16.3063C16.4327 19.2678 19.7411 21.0494 23.2858 21.0459L23.2845 18.3008C20.6644 18.3034 18.2178 16.9866 16.7779 14.7977L14.4844 16.3063ZM23.2858 21.0459H27.4937V18.3008H23.2845L23.2858 21.0459ZM14.6732 11.5987L12.5687 8.39968L10.2753 9.90839L12.3798 13.1074L14.6732 11.5987ZM12.5687 8.39968C10.6224 5.44136 7.3188 3.66025 3.77771 3.66015L3.77763 6.40528C6.39496 6.40535 8.83676 7.72181 10.2753 9.90839L12.5687 8.39968ZM3.77771 3.66015H1.87256V6.40528H3.77763L3.77771 3.66015ZM22.863 16.9837L26.5232 20.6438L28.4642 18.7029L24.804 15.0427L22.863 16.9837ZM26.5232 18.7029L22.863 22.363L24.804 24.304L28.4642 20.6438L26.5232 18.7029Z" fill="var(--secondary-color)"></path>
@@ -71,7 +89,7 @@ templ desktopPlayer() {
 					</defs>
 				</svg>
 			</button>
-			<button id="prev" type="button" title="Previous song" disabled>
+			<button id="prev" class={ "hidden", "md:inline-block" } type="button" title="Previous song" disabled>
 				<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1119 10.8769L16.3915 18.2226C15.7561 18.6753 15.3789 19.4072 15.3789 20.1872C15.3789 20.9674 15.7561 21.6992 16.3915 22.1518L26.1119 30.181C26.9332 30.8376 28.0483 30.9912 29.0165 30.581C29.9847 30.171 30.6502 29.2632 30.75 28.2164V12.8414C30.6502 11.7947 29.9847 10.8869 29.0165 10.4768C28.0483 10.0667 26.9332 10.2203 26.1119 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
 					<path d="M10.25 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
@@ -80,13 +98,13 @@ templ desktopPlayer() {
 			<button id="play" type="button" title="Play/Pause" disabled>
 				<div class="loader !h-10 !w-10"></div>
 			</button>
-			<button id="next" type="button" title="Next song" disabled>
+			<button id="next" class={ "hidden", "md:inline-block" } type="button" title="Next song" disabled>
 				<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8881 10.8769L24.6085 18.2226C25.2439 18.6753 25.6211 19.4072 25.6211 20.1872C25.6211 20.9674 25.2439 21.6992 24.6085 22.1518L14.8881 30.181C14.0668 30.8376 12.9517 30.9912 11.9835 30.581C11.0153 30.171 10.3498 29.2632 10.25 28.2164V12.8414C10.3498 11.7947 11.0153 10.8869 11.9835 10.4768C12.9517 10.0667 14.0668 10.2203 14.8881 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
 					<path d="M30.75 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
 				</svg>
 			</button>
-			<button id="loop" type="button" title="Loop" disabled>
+			<button id="loop" class={ "hidden", "md:inline-block" } type="button" title="Loop" disabled>
 				<svg class={ "w-[30px]" } width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<g clip-path="url(#clip0_170_513)">
 						<mask id="mask0_170_513" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="25">

diff --git a/...ews/components/player/mobile_player.templ → ...nents/player/expanded_mobile_player.templ b/...ews/components/player/mobile_player.templ → ...nents/player/expanded_mobile_player.templ
@@ -1,82 +1,5 @@
 package player
 
-templ mobilePlayer() {
-	<div
-		class={ "fixed", "z-20", "bottom-[65px]", "left-0", "h-auto", "w-full" }
-		onClick={ expand() }
-	>
-		<div
-			id="ze-player"
-			class={
-				"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-sm", "shadow-accent",
-				"mx-[5px]", "rounded-[15px]", "text-secondary", "collapsed",
-			}
-		>
-			<div class={ "contents" } id="ze-collapsed-mobile-player">
-				@collapsedMobilePlayer()
-			</div>
-			<div class={ "contents", "hidden" } id="ze-expanded-mobile-player">
-				@expandedMobilePlayer()
-			</div>
-		</div>
-	</div>
-	<style>
-        .collapsed {
-            height: 90px;
-            max-height: 90px;
-        }
-        .exapnded {
-            height: 550px;
-            max-height: 550px;
-        }
-    </style>
-}
-
-templ collapsedMobilePlayer() {
-	<div
-		class={ "flex", "justify-between", "items-center", "gap-x-1", "p-[10px]", }
-	>
-		<div class={ "flex", "flex-col", "w-11/12" }>
-			<!-- seeker and time -->
-			<div class={ "w-full", "flex", "items-center", "gap-x-2" }>
-				<input
-					id="song-seek-bar"
-					type="range"
-					min="0"
-					value="0"
-					class={ "my-2", "w-full" }
-				/>
-				<span id="song-current-time">00:00</span>
-			</div>
-			<div class={ "flex", "items-center", "justify-between", "min-w-[250px]", "w-full", }>
-				<div class={ "flex", "items-center", "gap-x-2" }>
-					<div
-						id="song-image"
-						class={
-							"w-[35px]", "h-[35px]", "rounded-[3px]", "bg-primary",
-							"bg-repeat", "bg-cover", "bg-center",
-						}
-					>
-						<div class="loader !h-[25px] !w-[25px]"></div>
-					</div>
-					<!-- details -->
-					<div class={ "flex", "flex-col", "justify-center", "min-w-[100px]", "max-w-[250px]" }>
-						<p class={ "font-Ubuntu", "w-full" }>
-							<span id="song-name">Loading...</span>
-						</p>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- player controls -->
-		<div class={ "flex", "items-center", "gap-x-1", "" }>
-			<button id="play" type="button" title="Play/Pause" disabled>
-				<div id="loading" class="loader !h-10 !w-10"></div>
-			</button>
-		</div>
-	</div>
-}
-
 templ expandedMobilePlayer() {
 	<div class={ "flex", "flex-col", "justify-center", "gap-y-[20px]", "p-[20px]" }>
 		<!-- collapse button -->
@@ -190,7 +113,3 @@ templ expandedMobilePlayer() {
 		</div>
 	</div>
 }
-
-script expand() {
-    Player.expand();
-}
diff --git a/app/views/components/player/player.templ b/app/views/components/player/player.templ
@@ -2,11 +2,32 @@ package player
 
 templ PlayerSticky() {
 	<div id="muzikk" class="hidden">
-		if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
-			@mobilePlayer()
-		} else {
-			@desktopPlayer()
-		}
+		<div
+			if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
+				onClick={ expand() }
+			}
+			class={
+				"w-full", "md:w-screen", "h-auto", "md:h-[90px]",
+				"fixed", "z-20", "bottom-[65px]", "md:bottom-0", "left-0",
+			}
+		>
+			<div
+				id="ze-player"
+				class={
+					"h-full", "collapsed",
+					"text-secondary", "bg-secondary-trans-20", "backdrop-blur-lg", "shadow-sm", "shadow-secondary",
+					"rounded-t-[15px]", "rounded-b-[15px]", "md:rounded-b-[0px]", "md:rounded-t-3xl",
+					"mx-[5px]", "md:mx-0", "p-[10px]", "md:p-[20px]",
+				}
+			>
+				<div class={ "contents" } id="ze-collapsed-mobile-player">
+					@collapsedPlayer()
+				</div>
+				<div class={ "contents", "hidden" } id="ze-expanded-mobile-player">
+					@expandedMobilePlayer()
+				</div>
+			</div>
+		</div>
 	</div>
 	<div class="hidden">
 		<audio
@@ -15,8 +36,23 @@ templ PlayerSticky() {
 			preload="none"
 		></audio>
 	</div>
+	///
+	<style>
+        .collapsed {
+            height: 90px;
+            max-height: 90px;
+        }
+        .exapnded {
+            height: 550px;
+            max-height: 550px;
+        }
+    </style>
 	///
 	<script src="/static/js/player.js" lang="javascript"></script>
 	<script defer src="/static/js/player_icons.js" lang="javascript"></script>
 	<script defer src="/static/js/player_shortcuts.js" lang="javascript"></script>
 }
+
+script expand() {
+    Player.expand();
+}