Various fixes

src/renderer/app.tsx

@@ -7,7 +7,6 @@ import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from '@/renderer/components';
 import { useTheme } from '@/renderer/hooks';
-import { useDefaultSettings } from './features/settings';
 import { AppRouter } from './router/app-router';
 import './styles/global.scss';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -23,7 +22,6 @@ const SelectRouter = ({ children }: { children: ReactNode }) => {
 };
 
 export const App = () => {
-  useDefaultSettings();
   const theme = useTheme();
 
   return (

src/renderer/components/text/index.tsx

@@ -20,22 +20,22 @@ interface TextProps extends MantineTextDivProps {
   weight?: number;
 }
 
-const BaseText = styled(MantineText)<TextProps>`
+const StyledText = styled(MantineText)<TextProps>`
   color: ${(props) =>
     props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
-  font-family: ${(props) => props.font || 'var(--content-font-family)'};
+  font-family: ${(props) => props.font};
   cursor: ${(props) => (props.$link ? 'cursor' : 'default')};
+  transition: color 0.2s ease-in-out;
   user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
   ${(props) => props.overflow === 'hidden' && textEllipsis}
 
   &:hover {
+    color: ${(props) => props.$link && 'var(--main-fg)'};
     text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
   }
 `;
 
-const StyledText = styled(BaseText)<TextProps>``;
+const _Text = ({
-
-export const _Text = ({
   children,
   $secondary,
   overflow,

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

@@ -16,7 +16,6 @@ import styled from 'styled-components';
 import { Text } from '@/renderer/components';
 import { usePlayerStore } from '@/renderer/store';
 import { useSettingsStore } from '@/renderer/store/settings.store';
-import { Font } from '@/renderer/styles';
 import {
   PlaybackType,
   PlayerRepeat,
@@ -200,7 +199,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
       </ControlsContainer>
       <SliderContainer>
         <SliderValueWrapper position="left">
-          <Text $noSelect $secondary font={Font.POPPINS} size="xs" weight={600}>
+          <Text $noSelect $secondary size="xs" weight={600}>
             {formattedTime}
           </Text>
         </SliderValueWrapper>
@@ -218,7 +217,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
           />
         </SliderWrapper>
         <SliderValueWrapper position="right">
-          <Text $noSelect $secondary font={Font.POPPINS} size="xs" weight={600}>
+          <Text $noSelect $secondary size="xs" weight={600}>
             {duration}
           </Text>
         </SliderValueWrapper>

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

@@ -1,8 +1,9 @@
 import { Group } from '@mantine/core';
+import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
   RiVolumeUpFill,
+  RiVolumeDownFill,
   RiVolumeMuteFill,
-  RiPlayListFill,
 } from 'react-icons/ri';
 import styled from 'styled-components';
 import { usePlayerStore, useAppStore } from '@/renderer/store';
@@ -47,7 +48,7 @@ export const RightControls = () => {
     <RightControlsContainer>
       <Group>
         <PlayerButton
-          icon={<RiPlayListFill size={15} />}
+          icon={<HiOutlineQueueList />}
           tooltip={{ label: 'View queue', openDelay: 500 }}
           variant="secondary"
           onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
@@ -59,8 +60,10 @@ export const RightControls = () => {
             icon={
               muted ? (
                 <RiVolumeMuteFill size={15} />
-              ) : (
+              ) : volume > 50 ? (
                 <RiVolumeUpFill size={15} />
+              ) : (
+                <RiVolumeDownFill size={15} />
               )
             }
             tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}

src/renderer/features/player/hooks/use-center-controls.ts

@@ -39,10 +39,15 @@ export const useCenterControls = (args: { playersRef: any }) => {
   const nextPlayerRef = currentPlayer === 1 ? player2Ref : player1Ref;
 
   const resetPlayers = useCallback(() => {
-    player1Ref.getInternalPlayer().currentTime = 0;
+    if (player1Ref.getInternalPlayer()) {
-    player2Ref.getInternalPlayer().currentTime = 0;
+      player1Ref.getInternalPlayer().currentTime = 0;
-    player1Ref.getInternalPlayer().pause();
+      player1Ref.getInternalPlayer().pause();
-    player2Ref.getInternalPlayer().pause();
+    }
+
+    if (player2Ref.getInternalPlayer()) {
+      player2Ref.getInternalPlayer().currentTime = 0;
+      player2Ref.getInternalPlayer().pause();
+    }
   }, [player1Ref, player2Ref]);
 
   const resetNextPlayer = useCallback(() => {

src/renderer/features/servers/components/server-section.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Text } from '@/renderer/components';
-import { Font } from '@/renderer/styles';
 
 interface ServerSectionProps {
   children: React.ReactNode;
@@ -18,12 +17,7 @@ const Section = styled.div`
 export const ServerSection = ({ title, children }: ServerSectionProps) => {
   return (
     <Container>
-      {React.isValidElement(title) ? (
+      {React.isValidElement(title) ? title : <Text>{title}</Text>}
-        title
-      ) : (
-        <Text font={Font.EPILOGUE}>{title}</Text>
-      )}
-
       <Section>{children}</Section>
     </Container>
   );

src/renderer/features/settings/hooks/use-default-settings.ts

@@ -1,37 +0,0 @@
-import isElectron from 'is-electron';
-import {
-  CrossfadeStyle,
-  PlaybackStyle,
-  PlaybackType,
-  PlayerRepeat,
-} from '@/renderer/types';
-import { PlayerState } from '../../../store';
-
-export interface WebSettings {
-  player: PlayerSettings;
-}
-
-export type PlayerSettings = PlayerState['settings'];
-
-const DEFAULT_SETTINGS: WebSettings = {
-  player: {
-    crossfadeDuration: 5,
-    crossfadeStyle: CrossfadeStyle.EQUALPOWER,
-    muted: false,
-    repeat: PlayerRepeat.ALL,
-    shuffle: false,
-    style: PlaybackStyle.GAPLESS,
-    type: isElectron() ? PlaybackType.LOCAL : PlaybackType.WEB,
-    volume: 0.5,
-  },
-};
-
-export const useDefaultSettings = () => {
-  const currentSettings = localStorage.getItem('settings');
-
-  if (currentSettings) {
-    return JSON.parse(currentSettings);
-  }
-
-  return localStorage.setItem('settings', JSON.stringify(DEFAULT_SETTINGS));
-};

src/renderer/features/settings/index.ts

@@ -1,3 +1,2 @@
 export * from './components/settings';
-export * from './hooks/use-default-settings';
 export * from './utils/local-settings';

src/renderer/features/sidebar/components/sidebar.tsx

@@ -1,6 +1,7 @@
 import { Stack, Group, Grid, Accordion, Center } from '@mantine/core';
 import { SpotlightProvider } from '@mantine/spotlight';
 import { AnimatePresence, motion } from 'framer-motion';
+import { BsCollection } from 'react-icons/bs';
 import {
   RiAlbumLine,
   RiArrowDownSLine,
@@ -169,7 +170,7 @@ export const Sidebar = () => {
               <Accordion.Item value="collections">
                 <Accordion.Control disabled p="1rem">
                   <Group>
-                    <RiPlayListLine size={15} />
+                    <BsCollection size={15} />
                     Collections
                   </Group>
                 </Accordion.Control>

src/renderer/index.ejs

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="Content-Security-Policy" />
-  <title>Sonixd</title>
+  <title>Feishin</title>
 </head>
 
 <body>

src/renderer/preload.d.ts

@@ -47,6 +47,7 @@ declare global {
         ): void;
         SETTINGS_GET(data: { property: string }): any;
         SETTINGS_SET(data: { property: string; value: any }): void;
+        removeAllListeners(value: string): void;
         windowClose(): void;
         windowMaximize(): void;
         windowMinimize(): void;

src/renderer/themes/default.scss

@@ -68,7 +68,7 @@
   --btn-subtle-fg: rgb(150, 150, 150);
   --btn-subtle-fg-hover: rgb(240, 240, 240);
 
-  --input-bg: rgb(56, 56, 56);
+  --input-bg: rgb(35, 35, 35);
   --input-fg: rgb(193, 193, 193);
   --input-placeholder-fg: rgb(119, 126, 139);
   --input-active-fg: rgb(193, 193, 193);