now playing banner on mobile devices

components/Lanyard.tsx

@@ -3,41 +3,63 @@ import { useLanyard } from "use-lanyard";
 import styles from "styles/Lanyard.module.sass";
 import Image from "next/image";
 import { useTheme } from 'next-themes'
-
+import useWindowSize from "utils/shared/hooks/useWindowSize";
+import Icon from "./Icon";
 
 const Lanyard = () => {
   const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
   const lanyard = useLanyard(id).data;
   const { resolvedTheme: theme } = useTheme()
+  const windowSize = useWindowSize()
 
   if (!lanyard?.listening_to_spotify) return;
+
+
+
   let artists;
+
   if (lanyard.spotify.artist.split(";").length > 2) {
     artists = [
       lanyard.spotify.artist.split(";")[0],
       lanyard.spotify.artist.split(";")[1],
     ].join(",");
   } else {
-    artists = lanyard.spotify.artist.split(";").join(",");
+    artists = lanyard.spotify.artist.split(";").join(" &");
+
   }
 
 
-  console.log("lanyard", theme)
 
   return (
     <>
-      <div data-theme={theme} className={[styles.container, styles.badge].join(" ")}>
+      {(windowSize.width <= 550 || windowSize.height <= 800) ?
-        <Image
+        (<>
-          className={styles.albumart}
+          <div data-theme={theme} className={styles.np_mobile}>
-          src={lanyard.spotify.album_art_url}
+
-          width={100}
+            <div className={styles.np_text}>
-          height={100}
+              <p>
-        />
+                <Icon className={styles.np_icon} icon="asterisk" />
-        <div className={styles.artist_song}>
+                {lanyard.spotify.song} by {artists}
-          <p className={styles.song}>{lanyard.spotify.song}</p>
+              </p>
-          <p className={styles.artist}>{artists}</p>
+            </div>
-        </div>
+          </div>
-      </div>
+        </>)
+        :
+        (<>
+          <div data-theme={theme} className={[styles.container, styles.badge].join(" ")}>
+            <Image
+              className={styles.albumart}
+              src={lanyard.spotify.album_art_url}
+              width={100}
+              height={100}
+            />
+            <div className={styles.artist_song}>
+              <p className={styles.song}>{lanyard.spotify.song}</p>
+              <p className={styles.artist}>{artists}</p>
+            </div>
+          </div>
+        </>
+        )}
     </>
   );
 };

styles/Lanyard.module.sass

@@ -1,6 +1,5 @@
 @import "./_variables"
 
-    
 .container
     position: absolute
     bottom: 0
@@ -15,7 +14,6 @@
         background: $background-light-lanyard
         color: $text-light-lanyard
 
-
 .albumart
     border-radius: 20px
     padding: 10px !important
@@ -28,20 +26,20 @@
         font-size: .8rem
 
 .badge:after
-        content: ''
+    content: ''
-        position: absolute
+    position: absolute
-        top: -5px
+    top: -5px
-        right: -5px
+    right: -5px
-        font-size: .7em
+    font-size: .7em
-        background: #8cff96b4
+    background: #8cff96b4
-        color: white
+    color: white
-        width: 18px
+    width: 18px
-        height: 18px
+    height: 18px
-        text-align: center
+    text-align: center
-        line-height: 18px
+    line-height: 18px
-        border-radius: 50%
+    border-radius: 50%
         // box-shadow: 0 0 1px #333
-        animation: pulse 4s linear infinite alternate
+    animation: pulse 4s linear infinite alternate
 
 @keyframes pulse
     0%
@@ -57,3 +55,27 @@
 
     100%
         background-color: #222
+
+.np_mobile
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    text-align: center
+    background: $background-dark-lanyard
+    color: $text-dark-lanyard
+    &[data-theme="light"]
+        background: $background-light-lanyard
+        color: $text-light-lanyard
+
+.np_icon
+    align-content: center
+    translate: trans
+    transform-origin: center center
+    animation: load 5s infinite cubic-bezier(0.81,-0.73, 0.32, 1.28)
+
+@keyframes load
+    0%
+        rotate: 0deg
+    100%
+        rotate: 360deg

utils/shared/hooks/useWindowSize.ts

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useState } from "react";
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
+    const handleSize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight })
+    useLayoutEffect(() => {
+        handleSize()
+        window.addEventListener("resize", handleSize);
+        return () => window.removeEventListener("resize", handleSize);
+    }, [])
+    return windowSize
+}
+
+
+export default useWindowSize