redo settings page

fucksophie · Jun 1, 2023 · 48b90df · 48b90df
1 parent 17a286e
commit 48b90df
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 100 deletions.
diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
@@ -1,6 +1,6 @@
 export default function Bar() {
   return (
-    <div className="w-full text-textColor bg-innerInnerBackground h-10 flex gap-2 p-2 items-center">
+    <div className="w-full text-textColor bg-background h-10 flex gap-2 p-2 items-center">
       <div>
         <a className="mr-2" href="/">
           musicplayer

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,15 +1,26 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import { useState, useRef, useEffect } from 'react';
-import { toast } from 'react-hot-toast';
 import Bar from './Bar';
+
+import {
+  faPalette,
+  faCogs
+} from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {useState, useRef, useEffect} from "react";
+import { toast } from 'react-hot-toast';
 import {
   getUserInfo,
   generateToken,
   lastFmApiKey,
   getSession,
 } from '../lib/LastFM';
 
+
 export default function Settings() {
+  let fai = "fa-4x w-9 h-9 rounded border-2 rounded-xl border-innerBorder hover:border-hoverInnerBorder transition p-6 bg-innerInnerBackground";
+  let buttonClass = "rounded-xl border-2 border-innerBorder bg-innerInnerBackground hover:border-hoverInnerBorder transition p-2"
+
   const [lUser, setlUser] = useState<any>();
   const phase = useRef(0);
 
@@ -22,7 +33,7 @@ export default function Settings() {
   const [lastfmScrobbling, setLastfmScrobbling] = useState(
     localStorage.lastfmScrobbling === 'true'
   );
-
+  
   useEffect(() => {
     async function fetchData() {
       if (localStorage.lastfmSession && !lUser) {
@@ -32,113 +43,120 @@ export default function Settings() {
     fetchData();
   }, [lUser, setlUser]);
 
+
   return (
     <div className="text-textColor h-screen bg-innerBackground">
       <Bar />
-      <table className="w-full">
-        <thead className="border-t-2 border-containerBorder">
-          <th className="border-r-2 border-b-2 border-containerBorder">appearance</th>
-          <th className=" border-b-2 border-containerBorder">integrations</th>
-        </thead>
-        <tr className="h-full">
-          <td className="border-r-2 border-containerBorder p-1">
-            <span>themes:</span>
-            <br/>
-            <label>
-              enable dark theme:{' '}
-              <input
-                id="serverScrobbling"
-                type="checkbox"
-                defaultChecked={localStorage.dark == "dark"}
-                onChange={() => {
-                  localStorage.dark = localStorage.dark == "dark" ? "" : "dark"; 
-                  setDarkTheme((prev: string) => prev == "dark" ? "" : "dark");
-                  setTimeout(() => location.reload(),100);
-                }}
-              />
-            </label>
-          </td>
-          <td className="border-r-2 border-containerBorder p-1">
-            <div>lastfm</div>
-            <button
-              type="button"
-              className="mb-2 p-1 rounded bg-innerBackground border-innerBorder hover:border-hoverInnerBorder transition border-2"
-              onClick={async (e) => {
-                // TODO: signing out is not yet implemented
-                /*if (localStorage.lastfmSession) {
-                  toast.error('You are already signed in!');
-                  return;
-                }*/
+      <div className="flex h-full">
 
-                if (phase.current === 0) {
-                  const token = await generateToken();
-                  localStorage.temporaryToken = token;
-                  //@ts-ignore-start
+        <div className="h-full w-24 bg-background p-1">
+          <FontAwesomeIcon 
+            icon={faCogs}
+            className={fai}
+          />
+          <FontAwesomeIcon 
+            icon={faPalette}
+            className={fai+" mt-2"}
+          />
+        </div>
+        <div className="m-2">
+          <h1 className='text-4xl'>integrations</h1>
+          <h2 className='text-2xl'>lastfm</h2>
+          <button
+            className={buttonClass}
+            onClick={async (e) => {
+              if (phase.current === 0) {
+                const token = await generateToken();
+                localStorage.temporaryToken = token;
+                if(window.__TAURI__) {
+                  //@ts-expect-error
                   window.__TAURI__.shell.open(`https://last.fm/api/auth/?api_key=${lastFmApiKey}&token=${token}`);
-                  //@ts-ignore-end
-                  phase.current = 1;
-
-                  (e.target as HTMLElement).innerText = 'have you authenicated? click again';
-                  return;
+                } else {
+                  window.open(`https://last.fm/api/auth/?api_key=${lastFmApiKey}&token=${token}`, "_blank")
                 }
+                phase.current = 1;
+
+                (e.target as HTMLElement).innerText = 'have you authenicated? click again';
+                return;
+              }
 
-                if (phase.current === 1) {
-                  const session = await getSession(localStorage.temporaryToken);
+              if (phase.current === 1) {
+                const session = await getSession(localStorage.temporaryToken);
 
-                  localStorage.lastfmSession = session.key;
-                  localStorage.removeItem('temporaryToken');
-                  toast.success('Sucesfully signed in to last.fm!');
-                  setTimeout(() => {
-                    window.location.reload();
-                  }, 1000);
-                  (e.target as HTMLElement).innerText = 'sign in';
-                  phase.current = 0;
-                }
-              }}
-            >
-              sign in
-            </button>
-            {(() => {
-              if (lUser) {
-                return (
+                localStorage.lastfmSession = session.key;
+                localStorage.removeItem('temporaryToken');
+                toast.success('Sucesfully signed in to last.fm!');
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1000);
+                (e.target as HTMLElement).innerText = 'sign in';
+                phase.current = 0;
+              }
+            }}>sign in</button>
+
+          {(() => {
+            if (lUser) {
+              return (
+                <>
                   <div>
-                    Signed in as {lUser.user.name}, with playcount{' '}
-                    {lUser.user.playcount}
+                    signed in as <strong>{lUser.user.name}</strong>, with playcount <strong>{lUser.user.playcount}</strong>
                   </div>
-                );
-              }
-              return <br />;
-            })()}
-            <label>
-              enable server scrobbling:{' '}
-              <input
-                id="serverScrobbling"
-                type="checkbox"
-                defaultChecked={serverScrobbling}
-                onChange={() => {
-                  localStorage.serverScrobbling =
-                    localStorage.serverScrobbling !== 'true';
-                  setServerScrobbling((prev) => !prev);
-                }}
-              />
-            </label>
-            <br />
-            <label>
-              enable lastfm scrobbling:{' '}
+                  <div>
+                    ({lUser.user.playcount > 1000 ? lUser.user.playcount > 10000 ? "wow, that's a lot of plays!" : "nice! a bunch of plays" : "awhh, that's not that many plays"})
+                  </div>
+                </>
+              );
+            }
+            return <br />;
+          })()}
+
+          <div className="mt-2">
+            scrobble through lastfm natively: <input 
+            type="checkbox"
+            defaultChecked={lastfmScrobbling}
+            onChange={() => {
+              localStorage.lastfmScrobbling =
+                localStorage.lastfmScrobbling !== 'true';
+              setLastfmScrobbling((prev) => !prev);
+            }}/>
+          </div>
+          <div>
+            scrobble through subsonic:{" "}
+            <input 
+              type="checkbox"
+              defaultChecked={serverScrobbling}
+              onChange={() => {
+                localStorage.serverScrobbling =
+                  localStorage.serverScrobbling !== 'true';
+                setServerScrobbling((prev) => !prev);
+              }}
+            />
+          </div>
+          <div>
+              enable dark theme (temporary button): {' '}
               <input
-                id="lastfmScrobbling"
                 type="checkbox"
-                defaultChecked={lastfmScrobbling}
+                defaultChecked={localStorage.dark == "dark"}
                 onChange={() => {
-                  localStorage.lastfmScrobbling =
-                    localStorage.lastfmScrobbling !== 'true';
-                  setLastfmScrobbling((prev) => !prev);
+                  localStorage.dark = localStorage.dark == "dark" ? "" : "dark"; 
+                  setDarkTheme((prev: string) => prev == "dark" ? "" : "dark");
+                  setTimeout(() => location.reload(),100);
                 }}
               />
-            </label>
-          </td>
-        </tr>
-      </table>
+          </div>
+          {
+            (() => {
+              //@ts-expect-error
+              if(window.__TAURI__) {
+                return <>
+                  <h2 className='text-2xl'>discordRPC</h2>
+                  <div>Unfinished</div>
+                </>
+              }
+            })()
+          }
+        </div>  
+      </div>
     </div>
   );
 }
diff --git a/src/components/Songs.tsx b/src/components/Songs.tsx
@@ -120,12 +120,12 @@ export default function Songs() {
         flexDirection: 'column',
         height: '110vh',
       }}
-      className="bg-innerBackground text-textColor"
+      className="bg-background text-textColor"
     >
       <style>{tableStyle}</style>
       <Bar />
       <input
-        className="w-full bg-innerInnerBackground text-textColor p-2"
+        className="w-full bg-innerBackground text-textColor p-2"
         onChange={() => updateSongList('title', false)}
         ref={inputRef}
         placeholder="search for a song"

diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
@@ -138,7 +138,7 @@ function AudioPlayer({
   };
 
   return (
-    <div className="left-0 bottom-0 absolute bg-innerBorder flex h-20 w-full relative">
+    <div className="left-0 bottom-0 absolute bg-innerInnerBackground flex h-20 w-full relative">
       <Controls
         {...{
           audioRef,