Merge pull request #70 from jbwharris/web-scrobbler

Web Scrobbler classes to add
RelistenNet · Dec 6, 2023 · 69e0560 · 69e0560
2 parents 8234fb7 + 6748daf
commit 69e0560
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx
@@ -19,9 +19,10 @@ export default async function NavBar() {
   );
 
   return (
-    <div className="relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] lg:grid">
+    <div className="navigation relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] lg:grid">
       <MainNavHeader artistSlugsToName={artistSlugsToName} />
-      <div className="min-w-[60%] flex-1 text-center lg:min-w-[44vw] xl:min-w-[38vw]">
+      <div className="player min-w-[60%] flex-1 text-center lg:min-w-[44vw] xl:min-w-[38vw]">
+
         <Player artistSlugsToName={artistSlugsToName} />
       </div>
       <SimplePopover content={<Menu />}>

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -62,7 +62,7 @@ const Player = ({ artistSlugsToName }: Props) => {
   };
 
   return (
-    <Flex className="relative h-[50px] flex-1">
+    <Flex className="content relative h-[50px] flex-1">
       {false && activeTrack && (
         <Head>
           <title>
@@ -77,18 +77,18 @@ const Player = ({ artistSlugsToName }: Props) => {
       )}
       {activeTrack && (
         <Flex
-          className="cursor-pointer items-center justify-center text-gray-600 active:text-gray-800 lg:w-[50px]"
+          className="playpause cursor-pointer items-center justify-center text-gray-600 active:text-gray-800 lg:w-[50px]"
           onClick={() => player.togglePlayPause()}
         >
           <i
-            className={`fa cursor-pointer fa-${playback.activeTrack.isPaused ? 'play' : 'pause'}`}
+            className={`fas fa cursor-pointer fa-${playback.activeTrack.isPaused ? 'play' : 'pause'}`}
           />
         </Flex>
       )}
       {typeof window === 'undefined' || !activeTrack ? null : (
         <div className="relative h-full flex-1" ref={playerRef}>
-          <Flex className="h-full justify-center transition-all duration-[1s] ease-in-out">
-            <div className="absolute left-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-left text-[0.8em] text-gray-600">
+          <Flex className="info h-full justify-center transition-all duration-[1s] ease-in-out">
+            <div className="timing absolute left-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-left text-[0.8em] text-gray-600">
               <div>
                 <i
                   className="fa fa-backward cursor-pointer"
@@ -98,7 +98,7 @@ const Player = ({ artistSlugsToName }: Props) => {
               <div>{durationToHHMMSS(playback.activeTrack.currentTime)}</div>
             </div>
             <Flex column className="justify-around py-2">
-              <div className="relative text-[1em] text-gray-900">
+              <div className="song-title relative text-[1em] text-gray-900">
                 {activeTrack.title}
                 {false && (
                   <Flex className="absolute left-full top-[2px] ml-2 w-full items-center text-[0.8em] text-gray-600">
@@ -113,12 +113,12 @@ const Player = ({ artistSlugsToName }: Props) => {
                 as={`/${artistSlug}/${year}/${month}/${day}?source=${source}`}
                 legacyBehavior
               >
-                <a className="justify-center text-[0.8em] text-gray-600">
+                <a className="band-title justify-center text-[0.8em] text-gray-600">
                   {artistName} – {removeLeadingZero(month)}/{removeLeadingZero(day)}/{year.slice(2)}
                 </a>
               </Link>
             </Flex>
-            <div className="absolute right-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-right text-[0.8em] text-gray-600">
+            <div className="timing duration absolute right-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-right text-[0.8em] text-gray-600">
               <div>
                 <i className="fa fa-forward cursor-pointer" onClick={() => player.playNext()} />
               </div>