diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index 510e4480f..6885399f6 100644 --- a/src/renderer/app.tsx +++ b/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 ( diff --git a/src/renderer/components/text/index.tsx b/src/renderer/components/text/index.tsx index e9b5d005b..0a11b9b79 100644 --- a/src/renderer/components/text/index.tsx +++ b/src/renderer/components/text/index.tsx @@ -20,22 +20,22 @@ interface TextProps extends MantineTextDivProps { weight?: number; } -const BaseText = styled(MantineText)` +const StyledText = styled(MantineText)` 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)``; - -export const _Text = ({ +const _Text = ({ children, $secondary, overflow, diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx index 15316e8f1..d4501aaa4 100644 --- a/src/renderer/features/player/components/center-controls.tsx +++ b/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) => { - + {formattedTime} @@ -218,7 +217,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => { /> - + {duration} diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index a8f4ea18e..97b9bb93e 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/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 = () => { } + icon={} tooltip={{ label: 'View queue', openDelay: 500 }} variant="secondary" onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })} @@ -59,8 +60,10 @@ export const RightControls = () => { icon={ muted ? ( - ) : ( + ) : volume > 50 ? ( + ) : ( + ) } tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }} diff --git a/src/renderer/features/player/hooks/use-center-controls.ts b/src/renderer/features/player/hooks/use-center-controls.ts index f72f585b0..dc2640405 100644 --- a/src/renderer/features/player/hooks/use-center-controls.ts +++ b/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; - player2Ref.getInternalPlayer().currentTime = 0; - player1Ref.getInternalPlayer().pause(); - player2Ref.getInternalPlayer().pause(); + if (player1Ref.getInternalPlayer()) { + player1Ref.getInternalPlayer().currentTime = 0; + player1Ref.getInternalPlayer().pause(); + } + + if (player2Ref.getInternalPlayer()) { + player2Ref.getInternalPlayer().currentTime = 0; + player2Ref.getInternalPlayer().pause(); + } }, [player1Ref, player2Ref]); const resetNextPlayer = useCallback(() => { diff --git a/src/renderer/features/servers/components/server-section.tsx b/src/renderer/features/servers/components/server-section.tsx index f9d8025d5..8a245544f 100644 --- a/src/renderer/features/servers/components/server-section.tsx +++ b/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 ( - {React.isValidElement(title) ? ( - title - ) : ( - {title} - )} - + {React.isValidElement(title) ? title : {title}}
{children}
); diff --git a/src/renderer/features/settings/hooks/use-default-settings.ts b/src/renderer/features/settings/hooks/use-default-settings.ts deleted file mode 100644 index 034492322..000000000 --- a/src/renderer/features/settings/hooks/use-default-settings.ts +++ /dev/null @@ -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)); -}; diff --git a/src/renderer/features/settings/index.ts b/src/renderer/features/settings/index.ts index f90a728ed..dde61bf52 100644 --- a/src/renderer/features/settings/index.ts +++ b/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'; diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx index b66847d39..889128a14 100644 --- a/src/renderer/features/sidebar/components/sidebar.tsx +++ b/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 = () => { - + Collections diff --git a/src/renderer/index.ejs b/src/renderer/index.ejs index 74aa54491..f3599065c 100644 --- a/src/renderer/index.ejs +++ b/src/renderer/index.ejs @@ -4,7 +4,7 @@ - Sonixd + Feishin diff --git a/src/renderer/preload.d.ts b/src/renderer/preload.d.ts index 4c6e26d98..c4f710b3f 100644 --- a/src/renderer/preload.d.ts +++ b/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; diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss index 05a6739d0..13b8fda65 100644 --- a/src/renderer/themes/default.scss +++ b/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);