fix: linters gonna lint

gloaysa · Mar 16, 2024 · 42d16d0 · 42d16d0
1 parent 9b59689
commit 42d16d0
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 103 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Route, Switch, useLocation } from "wouter";
-import { useLibraryStore, useMediaPlayerStore, useUserStore } from "./store/store";
+import { useUserStore } from "./store/store";
 import { Box } from "@mui/material";
 import { MediaPlayers } from "./views/MediaPlayers";
 import MusicLibrary from "./views/MusicLibrary";

diff --git a/src/components/AlbumCover.tsx b/src/components/AlbumCover.tsx
@@ -23,12 +23,7 @@ export const AlbumCover: FunctionComponent<IAlbumProps> = ({ mediaUrl }) => {
 
   return (
     <div>
-      <img
-        style={{ objectFit: "contain" }}
-        height={getHeight()}
-        src={getMediaUrl(mediaUrl)}
-        alt="album cover"
-      />
+      <img style={{ objectFit: "contain" }} height={getHeight()} src={getMediaUrl(mediaUrl)} alt="album cover" />
     </div>
   );
 };
diff --git a/src/components/ExtraMediaControls.tsx b/src/components/ExtraMediaControls.tsx
@@ -11,10 +11,7 @@ interface IMediaControlsProps {
 /**
  * Returns a component displaying the title, album, and artist of a media item
  */
-export const ExtraMediaControls: FunctionComponent<IMediaControlsProps> = ({
-  showAlbums,
-  showLyrics,
-}) => {
+export const ExtraMediaControls: FunctionComponent<IMediaControlsProps> = ({ showAlbums, showLyrics }) => {
   return (
     <Container>
       <Box
@@ -25,18 +22,10 @@ export const ExtraMediaControls: FunctionComponent<IMediaControlsProps> = ({
           justifyContent: "flex-end",
         }}
       >
-        <IconButton
-          color="primary"
-          aria-label="show lyrics"
-          onClick={() => showLyrics()}
-        >
+        <IconButton color="primary" aria-label="show lyrics" onClick={() => showLyrics()}>
           <LyricsIcon />
         </IconButton>
-        <IconButton
-          color="primary"
-          aria-label="show albums"
-          onClick={() => showAlbums()}
-        >
+        <IconButton color="primary" aria-label="show albums" onClick={() => showAlbums()}>
           <LibraryMusicIcon />
         </IconButton>
       </Box>

diff --git a/src/components/Lyrics.tsx b/src/components/Lyrics.tsx
@@ -7,10 +7,7 @@ interface LyricsDisplayProps {
   mediaPlayer: MediaPlayer;
 }
 
-const LyricsDisplay: React.FC<LyricsDisplayProps> = ({
-  lyrics,
-  mediaPlayer,
-}) => {
+const LyricsDisplay: React.FC<LyricsDisplayProps> = ({ lyrics, mediaPlayer }) => {
   const [currentLine, setCurrentLine] = useState("");
   const [previousLines, setPreviousLines] = useState<string[]>([]);
   const [upcomingLines, setUpcomingLines] = useState<string[]>([]);
@@ -23,18 +20,16 @@ const LyricsDisplay: React.FC<LyricsDisplayProps> = ({
     } else {
       setCurrentLine("...");
     }
-    const nextLines = lyrics.Line.slice(
-      currentIndex + 1,
-      currentIndex + 11,
-    ).map((line) => line.Span?.[0]?.text || "...");
+    const nextLines = lyrics.Line.slice(currentIndex + 1, currentIndex + 11).map(
+      (line) => line.Span?.[0]?.text || "...",
+    );
     setUpcomingLines(nextLines);
   };
 
   const setPreviousLinesFromIndex = (lyrics: Lyrics, currentIndex: number) => {
-    const prevLines = lyrics.Line.slice(
-      Math.max(0, currentIndex - 5),
-      currentIndex,
-    ).map((line) => line.Span?.[0]?.text || "...");
+    const prevLines = lyrics.Line.slice(Math.max(0, currentIndex - 5), currentIndex).map(
+      (line) => line.Span?.[0]?.text || "...",
+    );
     setPreviousLines(prevLines);
   };
 
@@ -48,8 +43,7 @@ const LyricsDisplay: React.FC<LyricsDisplayProps> = ({
     // Effect hook to update the current line and previous lines based on the current time of the media player
     const currentTime = Number(mediaPlayer.time) + 1000; // add a second to compensate for the delay
     const currentIndex = lyrics.Line.findIndex(
-      (line) =>
-        currentTime >= line.startOffset && currentTime <= line.endOffset,
+      (line) => currentTime >= line.startOffset && currentTime <= line.endOffset,
     );
     if (currentIndex !== -1) {
       setCurrentAndUpcomingLines(lyrics, currentIndex);

diff --git a/src/components/MediaControls.tsx b/src/components/MediaControls.tsx
@@ -1,13 +1,5 @@
 import { FunctionComponent } from "react";
-import {
-  Box,
-  CircularProgress,
-  Container,
-  IconButton,
-  LinearProgress,
-  Slider,
-  Typography,
-} from "@mui/material";
+import { Box, CircularProgress, Container, IconButton, LinearProgress, Slider, Typography } from "@mui/material";
 import { Pause, PlayArrow, SkipNext, SkipPrevious } from "@mui/icons-material";
 import { MediaPlayer } from "../store/media-player.type";
 import { useMediaPlayerStore } from "../store/store";
@@ -19,11 +11,8 @@ interface IMediaControlsProps {
 /**
  * Returns a component displaying the title, album, and artist of a media item
  */
-export const MediaControls: FunctionComponent<IMediaControlsProps> = ({
-  plexamp,
-}) => {
-  const { play, pause, nextTrack, previousTrack, setVolumeLevel } =
-    useMediaPlayerStore((state) => state);
+export const MediaControls: FunctionComponent<IMediaControlsProps> = ({ plexamp }) => {
+  const { play, pause, nextTrack, previousTrack, setVolumeLevel } = useMediaPlayerStore((state) => state);
 
   if (!plexamp) {
     return <CircularProgress />;
@@ -69,36 +58,20 @@ export const MediaControls: FunctionComponent<IMediaControlsProps> = ({
               justifyContent: "space-around",
             }}
           >
-            <IconButton
-              color="primary"
-              aria-label="previous"
-              onClick={() => previousTrack(plexamp)}
-            >
+            <IconButton color="primary" aria-label="previous" onClick={() => previousTrack(plexamp)}>
               <SkipPrevious />
             </IconButton>
             {plexamp.state === "playing" ? (
-              <IconButton
-                color="primary"
-                aria-label="pause"
-                onClick={() => pause(plexamp)}
-              >
+              <IconButton color="primary" aria-label="pause" onClick={() => pause(plexamp)}>
                 <Pause />
               </IconButton>
             ) : (
-              <IconButton
-                color="primary"
-                aria-label="play"
-                onClick={() => play(plexamp)}
-              >
+              <IconButton color="primary" aria-label="play" onClick={() => play(plexamp)}>
                 <PlayArrow />
               </IconButton>
             )}
 
-            <IconButton
-              color="primary"
-              aria-label="next"
-              onClick={() => nextTrack(plexamp)}
-            >
+            <IconButton color="primary" aria-label="next" onClick={() => nextTrack(plexamp)}>
               <SkipNext />
             </IconButton>
           </Box>
@@ -117,19 +90,14 @@ export const MediaControls: FunctionComponent<IMediaControlsProps> = ({
               value={plexamp.volume_level}
               min={0}
               max={100}
-              onChange={(event, value) =>
-                setVolumeLevel(plexamp, value as number)
-              }
+              onChange={(event, value) => setVolumeLevel(plexamp, value as number)}
             />
             <Typography variant="subtitle2">{plexamp.name}</Typography>
           </Box>
         </Box>
       </Box>
       <Box sx={{ width: "100%" }}>
-        <LinearProgress
-          variant="determinate"
-          value={(plexamp.time / plexamp.duration) * 100}
-        />
+        <LinearProgress variant="determinate" value={(plexamp.time / plexamp.duration) * 100} />
       </Box>
     </Container>
   );

diff --git a/src/components/MediaDisplay.tsx b/src/components/MediaDisplay.tsx
@@ -11,13 +11,8 @@ interface IMediaPlayerProps {
   plexamp: MediaPlayer;
   isSelected: boolean;
 }
-export const MediaDisplay: FunctionComponent<IMediaPlayerProps> = ({
-  plexamp,
-  isSelected,
-}) => {
-  const { update, getLyrics, setSelectMediaPlayer } = useMediaPlayerStore(
-    (state) => state,
-  );
+export const MediaDisplay: FunctionComponent<IMediaPlayerProps> = ({ plexamp, isSelected }) => {
+  const { update, getLyrics, setSelectMediaPlayer } = useMediaPlayerStore((state) => state);
   useEffect(() => {}, [isSelected, plexamp, update]);
   const [lyrics, setLyrics] = useState<Lyrics | undefined>();
   const [showLyrics, setShowLyrics] = useState(false);
@@ -53,15 +48,10 @@ export const MediaDisplay: FunctionComponent<IMediaPlayerProps> = ({
 
   return (
     <div>
-      {lyrics && showLyrics && (
-        <LyricsDisplay lyrics={lyrics} mediaPlayer={plexamp} />
-      )}
+      {lyrics && showLyrics && <LyricsDisplay lyrics={lyrics} mediaPlayer={plexamp} />}
       <AlbumCover mediaUrl={plexamp.metadata?.thumb} />
       <div className="legend">
-        <ExtraMediaControls
-          showLyrics={() => setShowLyrics(!showLyrics)}
-          showAlbums={() => setLocation("/albums")}
-        />
+        <ExtraMediaControls showLyrics={() => setShowLyrics(!showLyrics)} showAlbums={() => setLocation("/albums")} />
         <MediaControls plexamp={plexamp} />
       </div>
     </div>

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,9 +4,7 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
   <React.StrictMode>
     <App />

diff --git a/src/store/library.ts b/src/store/library.ts
@@ -2,18 +2,13 @@ import { Library, LibraryItem } from "./library.interface";
 import { mediaPlayerHeaders } from "./utils/getHeaders";
 import { MediaPlayer } from "./media-player.type";
 
-export const getLibrary = async (
-  player: MediaPlayer,
-  librariesToHide: string[],
-): Promise<LibraryItem[]> => {
+export const getLibrary = async (player: MediaPlayer, librariesToHide: string[]): Promise<LibraryItem[]> => {
   const response = await fetch(`${player.server.uri}/library/sections/`, {
     headers: mediaPlayerHeaders(player),
   });
 
   const library: Library = await response.json();
-  const musicLibrary = library.MediaContainer.Directory.filter(
-    (directory) => directory.type === "artist",
-  );
+  const musicLibrary = library.MediaContainer.Directory.filter((directory) => directory.type === "artist");
   return getAlbums(player, musicLibrary, librariesToHide);
 };
 

diff --git a/src/views/Configuration.tsx b/src/views/Configuration.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, FunctionComponent, FormEvent } from "react";
-import { TextField, Button, Box, Typography, Card, CardContent, Grid } from "@mui/material";
+import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
+import { Box, Button, Card, CardContent, Grid, TextField, Typography } from "@mui/material";
 
 export const Configuration: FunctionComponent = () => {
   const [plexToken, setPlexToken] = useState("");