Merge pull request #77 from mbaraa/dev

shush, silent prod merge

app/static/browserconfig.xml

@@ -3,7 +3,7 @@
   <msapplication>
     <tile>
       <square150x150logo src="/static/mstile-150x150.png"/>
-      <TileColor>#4C8C36</TileColor>
+      <TileColor>#3E732C</TileColor>
     </tile>
   </msapplication>
 </browserconfig>

app/static/css/themes/dank.css

@@ -1,8 +1,8 @@
 :root {
-  --primary-color: #4c8c36;
-  --primary-color-20: #4c8c3633;
-  --primary-color-30: #4c8c364c;
-  --primary-color-69: #4c8c36b0;
+  --primary-color: #3e732c;
+  --primary-color-20: #3e732c33;
+  --primary-color-30: #3e732c4c;
+  --primary-color-69: #3e732cb0;
 
   --secondary-color: #ffffff;
   --secondary-color-20: #ffffff33;

app/static/css/themes/white.css

@@ -4,10 +4,10 @@
   --primary-color-30: #ffffff4c;
   --primary-color-69: #ffffffb0;
 
-  --secondary-color: #4c8c36;
-  --secondary-color-20: #4c8c3633;
-  --secondary-color-30: #4c8c364c;
-  --secondary-color-69: #4c8c36b0;
+  --secondary-color: #3e732c;
+  --secondary-color-20: #3e732c33;
+  --secondary-color-30: #3e732c4c;
+  --secondary-color-69: #3e732cb0;
 
   --accent-color: #d5ffc1;
   --accent-color-20: #d5ffc133;

app/static/js/player.js

@@ -20,6 +20,10 @@ const playPauseToggleEl = document.getElementById("play"),
 
 // expanded player's elements
 const playPauseToggleExapndedEl = document.getElementById("play-expand"),
+  shuffleExpandEl = document.getElementById("shuffle-expand"),
+  nextExpandEl = document.getElementById("next-expand"),
+  prevExpandEl = document.getElementById("prev-expand"),
+  loopExpandEl = document.getElementById("loop-expand"),
   songNameExpandedEl = document.getElementById("song-name-expanded"),
   artistNameExpandedEl = document.getElementById("artist-name-expanded"),
   songSeekBarExpandedEl = document.getElementById("song-seek-bar-expanded"),
@@ -103,7 +107,7 @@ function looper() {
     } else {
       currentLoopIdx = (currentLoopIdx + 1) % loopModes.length;
     }
-    loopEl.innerHTML =
+    const icon =
       Player.icons[
         loopModes[currentLoopIdx] === LOOP_MODES.ALL
           ? "loop"
@@ -113,6 +117,8 @@ function looper() {
               ? "loopOff"
               : "loopOff"
       ];
+    setPlayerButtonIcon(loopEl, icon);
+    setPlayerButtonIcon(loopExpandEl, icon);
   };
 
   const __handle = () => {
@@ -305,6 +311,10 @@ function shuffler(state) {
       shuffleEl,
       state.shuffled ? Player.icons.shuffle : Player.icons.shuffleOff,
     );
+    setPlayerButtonIcon(
+      shuffleExpandEl,
+      state.shuffled ? Player.icons.shuffle : Player.icons.shuffleOff,
+    );
   };
 
   return [__shuffle, __toggleShuffle];
@@ -875,14 +885,13 @@ playPauseToggleExapndedEl?.addEventListener("click", (event) => {
 });
 
 nextEl?.addEventListener("click", nextMuzikk);
+nextExpandEl?.addEventListener("click", nextMuzikk);
 prevEl?.addEventListener("click", previousMuzikk);
+prevExpandEl?.addEventListener("click", previousMuzikk);
 shuffleEl?.addEventListener("click", toggleShuffle);
-
-loopEl?.addEventListener("click", (event) => {
-  event.stopImmediatePropagation();
-  event.preventDefault();
-  toggleLoop();
-});
+shuffleExpandEl?.addEventListener("click", toggleShuffle);
+loopEl?.addEventListener("click", toggleLoop);
+loopExpandEl?.addEventListener("click", toggleLoop);
 
 (() => {
   const __handler = (e) => {
@@ -916,9 +925,21 @@ audioPlayerEl.addEventListener("loadeddata", (event) => {
     playPauseToggleExapndedEl.disabled = null;
   }
   shuffleEl.disabled = null;
+  if (!!shuffleExpandEl) {
+    shuffleExpandEl.disabled = null;
+  }
   nextEl.disabled = null;
+  if (!!nextExpandEl) {
+    nextExpandEl.disabled = null;
+  }
   prevEl.disabled = null;
+  if (!!prevExpandEl) {
+    prevExpandEl.disabled = null;
+  }
   loopEl.disabled = null;
+  if (!!loopExpandEl) {
+    loopExpandEl.disabled = null;
+  }
 
   // set duration AAA
   {

app/static/site.webmanifest

@@ -15,8 +15,8 @@
       "purpose": "any"
     }
   ],
-  "theme_color": "#4C8C36",
-  "background_color": "#4C8C36",
+  "theme_color": "#3E732C",
+  "background_color": "#3E732C",
   "start_url": "/",
   "scope": "https://dankmuzikk.com",
   "display": "standalone",

app/views/components/header/header.templ

@@ -42,11 +42,11 @@ templ Header() {
 					}
 				>
 					<img
-						width="50"
-						height="50"
+						width="55"
+						height="55"
 						src="/static/images/logo.webp"
 						alt="DankMuzikk Logo"
-						class={ "w-[50px]", "rounded-md" }
+						class={ "w-[55px]", "rounded-md" }
 					/>
 					<h1 class={ "text-3xl", }>DankMuzikk</h1>
 				</div>

app/views/components/player/expanded_mobile_player.templ

@@ -37,7 +37,7 @@ templ expandedMobilePlayer() {
 		</div>
 		<!-- controls -->
 		<div class={ "flex", "justify-center", "items-center", "w-full" }>
-			<button id="shuffle" type="button" title="Shuffle" disabled>
+			<button id="shuffle-expand" 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>
@@ -50,7 +50,7 @@ templ expandedMobilePlayer() {
 					</defs>
 				</svg>
 			</button>
-			<button id="prev" type="button" title="Previous song" disabled>
+			<button id="prev-expand" 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>
@@ -59,13 +59,13 @@ templ expandedMobilePlayer() {
 			<button id="play-expand" type="button" title="Play/Pause" disabled>
 				<div id="loading" class="loader !h-10 !w-10"></div>
 			</button>
-			<button id="next" type="button" title="Next song" disabled>
+			<button id="next-expand" 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-expand" 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">

app/views/components/search/search.templ

@@ -37,6 +37,7 @@ templ Search() {
 					type="submit"
 					id="search-icon"
 					class={ "rounded-r-[8px]", "px-[10px]", "bg-secondary" }
+					aria-label="Search"
 				>
 					@icons.Search()
 				</button>

app/views/components/themeswitch/themeswitch.templ

@@ -54,10 +54,10 @@ script changeTheme(themeName string) {
 
     const themes = {
         dank: {
-            primary: "#4c8c36",
-            primary20: "#4c8c3633",
-            primary30: "#4c8c364c",
-            primary69: "#4c8c36b0",
+            primary: "#3E732C",
+            primary20: "#3E732C33",
+            primary30: "#3E732C4c",
+            primary69: "#3E732Cb0",
             secondary: "#ffffff",
             secondary20: "#ffffff33",
             secondary30: "#ffffff4c",
@@ -86,10 +86,10 @@ script changeTheme(themeName string) {
             primary20: "#ffffff33",
             primary30: "#ffffff4c",
             primary69: "#ffffffb0",
-            secondary: "#4c8c36",
-            secondary20: "#4c8c3633",
-            secondary30: "#4c8c364c",
-            secondary69: "#4c8c36b0",
+            secondary: "#3E732C",
+            secondary20: "#3E732C33",
+            secondary30: "#3E732C4c",
+            secondary69: "#3E732Cb0",
             accent: "#d5ffc1",
             accent20: "#d5ffc133",
             accent30: "#d5ffc14c",

app/views/layouts/default.templ

@@ -19,11 +19,16 @@ templ Default(title string, children ...templ.Component) {
 			<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
 			<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
 			<link rel="manifest" href="/static/site.webmanifest"/>
-			<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#4C8C36"/>
-			<meta name="msapplication-TileColor" content="#4C8C36"/>
-			<meta name="theme-color" content="#4C8C36"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+			<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#3E732C"/>
+			<meta name="msapplication-TileColor" content="#3E732C"/>
+			<meta name="theme-color" content="#3E732C"/>
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
+			/>
 			<meta name="description" content="Create, Share and Play Music Playlists."/>
+			<meta name="og:description" content="Create, Share and Play Music Playlists."/>
+			<meta name="og:title" content="DankMuzikk"/>
 			<meta
 				name="keywords"
 				content="dankmuzikk,dank,dank music,music,music playlist,share playlist,group playlist"

app/views/layouts/raw.templ

@@ -15,15 +15,16 @@ templ Raw(title string, children ...templ.Component) {
 			<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
 			<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
 			<link rel="manifest" href="/static/site.webmanifest"/>
-			<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#4C8C36"/>
-			<meta name="msapplication-TileColor" content="#4C8C36"/>
-			<meta name="theme-color" content="#4C8C36"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
-			<meta name="description" content="Create, Share and Play Music Playlists."/>
+			<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#3E732C"/>
+			<meta name="msapplication-TileColor" content="#3E732C"/>
+			<meta name="theme-color" content="#3E732C"/>
 			<meta
-				name="keywords"
-				content="dankmuzikk,dank,dank music,music,music playlist,share playlist,group playlist"
+				name="viewport"
+				content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
 			/>
+			<meta name="description" content="Create, Share and Play Music Playlists."/>
+			<meta name="og:description" content="Create, Share and Play Music Playlists."/>
+			<meta name="og:title" content="DankMuzikk"/>
 			<link
 				defer
 				rel="stylesheet"