Lint all files

src/renderer/features/player/components/right-controls.tsx

@@ -3,20 +3,20 @@ import { Flex, Group } from '@mantine/core';
 import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
-  RiVolumeUpFill,
-  RiVolumeDownFill,
-  RiVolumeMuteFill,
-  RiHeartLine,
-  RiHeartFill,
+    RiVolumeUpFill,
+    RiVolumeDownFill,
+    RiVolumeMuteFill,
+    RiHeartLine,
+    RiHeartFill,
 } from 'react-icons/ri';
 import {
-  useAppStoreActions,
-  useCurrentServer,
-  useCurrentSong,
-  useHotkeySettings,
-  useMuted,
-  useSidebarStore,
-  useVolume,
+    useAppStoreActions,
+    useCurrentServer,
+    useCurrentSong,
+    useHotkeySettings,
+    useMuted,
+    useSidebarStore,
+    useVolume,
 } from '/@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
@@ -26,178 +26,180 @@ import { Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 export const RightControls = () => {
-  const isMinWidth = useMediaQuery('(max-width: 480px)');
-  const volume = useVolume();
-  const muted = useMuted();
-  const server = useCurrentServer();
-  const currentSong = useCurrentSong();
-  const { setSideBar } = useAppStoreActions();
-  const { rightExpanded: isQueueExpanded } = useSidebarStore();
-  const { bindings } = useHotkeySettings();
-  const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
-    useRightControls();
+    const isMinWidth = useMediaQuery('(max-width: 480px)');
+    const volume = useVolume();
+    const muted = useMuted();
+    const server = useCurrentServer();
+    const currentSong = useCurrentSong();
+    const { setSideBar } = useAppStoreActions();
+    const { rightExpanded: isQueueExpanded } = useSidebarStore();
+    const { bindings } = useHotkeySettings();
+    const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
+        useRightControls();
 
-  const updateRatingMutation = useSetRating({});
-  const addToFavoritesMutation = useCreateFavorite({});
-  const removeFromFavoritesMutation = useDeleteFavorite({});
+    const updateRatingMutation = useSetRating({});
+    const addToFavoritesMutation = useCreateFavorite({});
+    const removeFromFavoritesMutation = useDeleteFavorite({});
 
-  const handleAddToFavorites = () => {
-    if (!currentSong) return;
+    const handleAddToFavorites = () => {
+        if (!currentSong) return;
 
-    addToFavoritesMutation.mutate({
-      query: {
-        id: [currentSong.id],
-        type: LibraryItem.SONG,
-      },
-      serverId: currentSong?.serverId,
-    });
-  };
-
-  const handleUpdateRating = (rating: number) => {
-    if (!currentSong) return;
-
-    updateRatingMutation.mutate({
-      query: {
-        item: [currentSong],
-        rating,
-      },
-      serverId: currentSong?.serverId,
-    });
-  };
-
-  const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
-    if (!currentSong || !rating) return;
-
-    updateRatingMutation.mutate({
-      query: {
-        item: [currentSong],
-        rating: 0,
-      },
-      serverId: currentSong?.serverId,
-    });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!currentSong) return;
-
-    removeFromFavoritesMutation.mutate({
-      query: {
-        id: [currentSong.id],
-        type: LibraryItem.SONG,
-      },
-      serverId: currentSong?.serverId,
-    });
-  };
-
-  const handleToggleFavorite = () => {
-    if (!currentSong) return;
-
-    if (currentSong.userFavorite) {
-      handleRemoveFromFavorites();
-    } else {
-      handleAddToFavorites();
-    }
-  };
-
-  const handleToggleQueue = () => {
-    setSideBar({ rightExpanded: !isQueueExpanded });
-  };
-
-  const isSongDefined = Boolean(currentSong?.id);
-  const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
-
-  useHotkeys([
-    [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
-    [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
-    [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
-    [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
-  ]);
-
-  return (
-    <Flex
-      align="flex-end"
-      direction="column"
-      h="100%"
-      px="1rem"
-      py="0.5rem"
-    >
-      <Group h="calc(100% / 3)">
-        {showRating && (
-          <Rating
-            size="sm"
-            value={currentSong?.userRating || 0}
-            onChange={handleUpdateRating}
-            onClick={handleClearRating}
-          />
-        )}
-      </Group>
-      <Group
-        noWrap
-        align="center"
-        spacing="xs"
-      >
-        <PlayerButton
-          icon={
-            currentSong?.userFavorite ? (
-              <RiHeartFill
-                color="var(--primary-color)"
-                size="1.1rem"
-              />
-            ) : (
-              <RiHeartLine size="1.1rem" />
-            )
-          }
-          sx={{
-            svg: {
-              fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
+        addToFavoritesMutation.mutate({
+            query: {
+                id: [currentSong.id],
+                type: LibraryItem.SONG,
             },
-          }}
-          tooltip={{
-            label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
-            openDelay: 500,
-          }}
-          variant="secondary"
-          onClick={handleToggleFavorite}
-        />
-        <PlayerButton
-          icon={<HiOutlineQueueList size="1.1rem" />}
-          tooltip={{ label: 'View queue', openDelay: 500 }}
-          variant="secondary"
-          onClick={handleToggleQueue}
-        />
-        <Group
-          noWrap
-          spacing="xs"
+            serverId: currentSong?.serverId,
+        });
+    };
+
+    const handleUpdateRating = (rating: number) => {
+        if (!currentSong) return;
+
+        updateRatingMutation.mutate({
+            query: {
+                item: [currentSong],
+                rating,
+            },
+            serverId: currentSong?.serverId,
+        });
+    };
+
+    const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
+        if (!currentSong || !rating) return;
+
+        updateRatingMutation.mutate({
+            query: {
+                item: [currentSong],
+                rating: 0,
+            },
+            serverId: currentSong?.serverId,
+        });
+    };
+
+    const handleRemoveFromFavorites = () => {
+        if (!currentSong) return;
+
+        removeFromFavoritesMutation.mutate({
+            query: {
+                id: [currentSong.id],
+                type: LibraryItem.SONG,
+            },
+            serverId: currentSong?.serverId,
+        });
+    };
+
+    const handleToggleFavorite = () => {
+        if (!currentSong) return;
+
+        if (currentSong.userFavorite) {
+            handleRemoveFromFavorites();
+        } else {
+            handleAddToFavorites();
+        }
+    };
+
+    const handleToggleQueue = () => {
+        setSideBar({ rightExpanded: !isQueueExpanded });
+    };
+
+    const isSongDefined = Boolean(currentSong?.id);
+    const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
+
+    useHotkeys([
+        [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
+        [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
+        [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
+        [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
+    ]);
+
+    return (
+        <Flex
+            align="flex-end"
+            direction="column"
+            h="100%"
+            px="1rem"
+            py="0.5rem"
         >
-          <PlayerButton
-            icon={
-              muted ? (
-                <RiVolumeMuteFill size="1.2rem" />
-              ) : volume > 50 ? (
-                <RiVolumeUpFill size="1.2rem" />
-              ) : (
-                <RiVolumeDownFill size="1.2rem" />
-              )
-            }
-            tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
-            variant="secondary"
-            onClick={handleMute}
-            onWheel={handleVolumeWheel}
-          />
-          {!isMinWidth ? (
-            <PlayerbarSlider
-              max={100}
-              min={0}
-              size={6}
-              value={volume}
-              w="60px"
-              onChange={handleVolumeSlider}
-              onWheel={handleVolumeWheel}
-            />
-          ) : null}
-        </Group>
-      </Group>
-      <Group h="calc(100% / 3)" />
-    </Flex>
-  );
+            <Group h="calc(100% / 3)">
+                {showRating && (
+                    <Rating
+                        size="sm"
+                        value={currentSong?.userRating || 0}
+                        onChange={handleUpdateRating}
+                        onClick={handleClearRating}
+                    />
+                )}
+            </Group>
+            <Group
+                noWrap
+                align="center"
+                spacing="xs"
+            >
+                <PlayerButton
+                    icon={
+                        currentSong?.userFavorite ? (
+                            <RiHeartFill
+                                color="var(--primary-color)"
+                                size="1.1rem"
+                            />
+                        ) : (
+                            <RiHeartLine size="1.1rem" />
+                        )
+                    }
+                    sx={{
+                        svg: {
+                            fill: !currentSong?.userFavorite
+                                ? undefined
+                                : 'var(--primary-color) !important',
+                        },
+                    }}
+                    tooltip={{
+                        label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
+                        openDelay: 500,
+                    }}
+                    variant="secondary"
+                    onClick={handleToggleFavorite}
+                />
+                <PlayerButton
+                    icon={<HiOutlineQueueList size="1.1rem" />}
+                    tooltip={{ label: 'View queue', openDelay: 500 }}
+                    variant="secondary"
+                    onClick={handleToggleQueue}
+                />
+                <Group
+                    noWrap
+                    spacing="xs"
+                >
+                    <PlayerButton
+                        icon={
+                            muted ? (
+                                <RiVolumeMuteFill size="1.2rem" />
+                            ) : volume > 50 ? (
+                                <RiVolumeUpFill size="1.2rem" />
+                            ) : (
+                                <RiVolumeDownFill size="1.2rem" />
+                            )
+                        }
+                        tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
+                        variant="secondary"
+                        onClick={handleMute}
+                        onWheel={handleVolumeWheel}
+                    />
+                    {!isMinWidth ? (
+                        <PlayerbarSlider
+                            max={100}
+                            min={0}
+                            size={6}
+                            value={volume}
+                            w="60px"
+                            onChange={handleVolumeSlider}
+                            onWheel={handleVolumeWheel}
+                        />
+                    ) : null}
+                </Group>
+            </Group>
+            <Group h="calc(100% / 3)" />
+        </Flex>
+    );
 };