feat: Add favicon files and enhance PillControlBar styles for dark mode

- Introduced new favicon.ico and favicon.png files for improved branding.
- Updated the PillControlBar component to adjust text color based on dark mode, ensuring better visibility and user experience.
- Refactored styles in the MiniPlayer and StandardPlayer components to enhance layout and responsiveness.
- Added new hooks and logic for the StandardPlayer mobile and web components to streamline functionality and improve maintainability.

Author: drumnation

public/favicon.ico

@@ -79,7 +79,7 @@ export const PillControlBar = ({
                     onClick={onToggleNarration}
                     aria-label="Toggle Narration"
                     variant="transparent"
-                    style={{ color: isNarrationEnabled ? theme.black : theme.colors.gray[6] }}
+                    style={{ color: isNarrationEnabled ? (isDark ? theme.white : theme.black) : theme.colors.gray[6] }}
                     size="sm"
                 >
                     <LuHeadphones size={16} />
@@ -107,7 +107,7 @@ export const PillControlBar = ({
                     onClick={onToggleMusic}
                     aria-label="Toggle Music"
                     variant="transparent"
-                    style={{ color: isMusicEnabled ? theme.black : theme.colors.gray[6] }}
+                    style={{ color: isMusicEnabled ? (isDark ? theme.white : theme.black) : theme.colors.gray[6] }}
                     size="sm"
                 >
                     <LuMusic size={16} />
@@ -130,7 +130,7 @@ export const PillControlBar = ({
                     borderRight: `1px solid ${dividerColor}`,
                 }}
             >
-                <ActionIcon variant="transparent" onClick={onPlaylistClick} aria-label="Playlist" style={{ color: theme.black }}>
+                <ActionIcon variant="transparent" onClick={onPlaylistClick} aria-label="Playlist" style={{ color: isDark ? theme.white : theme.black }}>
                     <LuListMusic size={18} />
                 </ActionIcon>
             </Box>
@@ -142,7 +142,7 @@ export const PillControlBar = ({
                     borderRadius: '0 9999px 9999px 0',
                 }}
             >
-                <ActionIcon variant="transparent" onClick={onMinimizeClick} aria-label="Minimize" style={{ color: theme.black }}>
+                <ActionIcon variant="transparent" onClick={onMinimizeClick} aria-label="Minimize" style={{ color: isDark ? theme.white : theme.black }}>
                     <LuChevronDown size={18} />
                 </ActionIcon>
             </Box>

public/favicon.png

@@ -4,9 +4,10 @@ import { rem } from '@mantine/core';
 export const MiniPlayerContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
   justify-content: center;
   width: 100%;
+  background-color: ${({ theme }) => theme.colors.dark[8]};
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 `;
 
 export const MiniPlayerTopRow = styled.div`
@@ -15,12 +16,14 @@ export const MiniPlayerTopRow = styled.div`
   justify-content: space-between;
   width: 100%;
   padding-top: ${rem(8)};
+  min-height: 0;
 
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding-top: ${rem(8)};
+    min-height: 0;
   }
 `;
 
@@ -48,12 +51,14 @@ export const MiniPlayerProgressBar = styled.div`
   margin-top: ${rem(4)};
   display: flex;
   align-items: center;
+  min-height: 0;
 
   @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
     margin-top: 0;
     margin-left: ${rem(16)};
     width: auto;
     flex: 1 1 0%;
     max-width: none;
+    min-height: 0;
   }
 `; 

src/shared-components/molecules/PillControlBar.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+import { useMantineTheme } from '@mantine/core';
+import { StandardPlayerProps } from './StandardPlayer.types';
+
+export function useStandardPlayerMobile(props: StandardPlayerProps) {
+    const progressBarContainerRef = useRef<HTMLDivElement>(null);
+    const theme = useMantineTheme();
+    const [controlMode, setControlMode] = useState<'music' | 'narration'>(props.isMusicEnabled ? 'music' : 'narration');
+
+    useEffect(() => {
+        if (props.isMusicEnabled && props.isNarrationEnabled) return;
+        if (props.isMusicEnabled) setControlMode('music');
+        else if (props.isNarrationEnabled) setControlMode('narration');
+    }, [props.isMusicEnabled, props.isNarrationEnabled]);
+
+    const showToggle = props.isMusicEnabled && props.isNarrationEnabled;
+    const toggleControlMode = () => {
+        setControlMode((prev) => (prev === 'narration' ? 'music' : 'narration'));
+    };
+
+    // Always allow arrows if there is a music track
+    const isMusicTrackAvailable = !!props.currentTrack;
+    const isEffectivelyPlaying = props.isMusicPlaying || props.isVoicePlaying;
+    const isNarrationActive = controlMode === 'narration';
+    const displayControlTrack = controlMode === 'music' ? props.currentTrack : props.activeVoiceTrack;
+    const displayCurrentTime = controlMode === 'music' ? props.currentTime : props.voiceCurrentTime;
+    const displayDuration = controlMode === 'music' ? props.duration : props.voiceDuration;
+    const displayTrackAvailable = !!displayControlTrack;
+
+    const handlePlayPause = () => {
+        props.startUserInteraction?.();
+        if (props.isMusicEnabled && props.isNarrationEnabled) {
+            props.onPlayToggle();
+            props.onPlayToggle();
+        } else {
+            props.onPlayToggle();
+        }
+    };
+
+    const handleProgressBarClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        if (!progressBarContainerRef.current || displayDuration <= 0) return;
+        props.startUserInteraction?.();
+        const rect = progressBarContainerRef.current.getBoundingClientRect();
+        const clickX = event.clientX - rect.left;
+        const containerWidth = rect.width;
+        const newProgress = (clickX / containerWidth) * 100;
+        if (controlMode === 'music') {
+            props.onSeekMusic(Math.max(0, Math.min(100, newProgress)));
+        } else if (controlMode === 'narration') {
+            props.onSeekNarration(Math.max(0, Math.min(100, newProgress)));
+        }
+    }, [displayDuration, props.onSeekMusic, props.onSeekNarration, controlMode, props.startUserInteraction]);
+
+    // Always use music playlist navigation for arrows
+    const handlePrevTrack = () => {
+        props.startUserInteraction?.();
+        props.onPrevTrack();
+    };
+    const handleNextTrack = () => {
+        props.startUserInteraction?.();
+        props.onNextTrack();
+    };
+
+    return {
+        theme,
+        progressBarContainerRef,
+        controlMode,
+        setControlMode,
+        showToggle,
+        toggleControlMode,
+        isEffectivelyPlaying,
+        isNarrationActive,
+        displayControlTrack,
+        displayCurrentTime,
+        displayDuration,
+        displayTrackAvailable,
+        handlePlayPause,
+        handleProgressBarClick,
+        handlePrevTrack,
+        handleNextTrack,
+        isMusicTrackAvailable,
+    };
+} 

src/shared-components/organisms/Footer/components/MiniPlayer/MiniPlayer.styles.ts

@@ -0,0 +1,23 @@
+import { StandardPlayerProps } from './StandardPlayer.types';
+
+export function getDisplayTitle(controlMode: 'music' | 'narration', isMusicEnabled: boolean, isNarrationEnabled: boolean, activeMusicTrack: any, activeVoiceTrack: any) {
+    if (controlMode === 'narration') {
+        if (isMusicEnabled && isNarrationEnabled && activeMusicTrack?.title) {
+            return `Narration + ${activeMusicTrack.title}`;
+        } else {
+            return 'Narration';
+        }
+    } else if (controlMode === 'music' && activeMusicTrack?.title) {
+        return activeMusicTrack.title;
+    } else {
+        return 'Audio Player';
+    }
+}
+
+export function getDisplayArtist(isMusicEnabled: boolean, isNarrationEnabled: boolean, activeMusicTrack: any, activeVoiceTrack: any) {
+    return isMusicEnabled && isNarrationEnabled && activeVoiceTrack && activeMusicTrack
+        ? 'Narration and Music by David Mieloch'
+        : isNarrationEnabled && activeVoiceTrack
+            ? 'Narration by David Mieloch'
+            : activeMusicTrack?.artist || 'Music by David Mieloch';
+} 

src/shared-components/organisms/Footer/components/StandardPlayer/StandardPlayer.mobile.hook.ts

@@ -0,0 +1,64 @@
+import { MantineTheme } from '@mantine/core';
+import { CSSProperties } from 'react';
+
+export const getPlayerContainerStyle = (): CSSProperties => ({
+    height: 'auto',
+    minHeight: '110px',
+    width: '100%',
+    padding: '8px 12px',
+});
+
+export const getArtworkBoxStyle = (artworkSize: number): CSSProperties => ({
+    height: 'auto',
+    width: `${artworkSize + 10}px`,
+    flexShrink: 0,
+});
+
+export const getToggleButtonBoxStyle = (): CSSProperties => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    margin: '8px 0',
+});
+
+export const getMetaTextStyle = (color: string): CSSProperties => ({
+    color,
+});
+
+export const getProgressBarBoxStyle = (): CSSProperties => ({
+    width: '100%',
+    padding: '0 8px',
+});
+
+export const getProgressBarContainerStyle = (): CSSProperties => ({
+    flexGrow: 1,
+    cursor: 'pointer',
+    padding: '8px 0',
+    margin: '-8px 0',
+});
+
+export const getTimeTextStyle = (align: 'right' | 'left'): CSSProperties => ({
+    whiteSpace: 'nowrap',
+    width: 35,
+    textAlign: align,
+});
+
+export const getEmptyBarStyle = (colors: any): CSSProperties => ({
+    width: '100%',
+    height: '4px',
+    backgroundColor: colors.progressBackground,
+    borderRadius: '2px',
+    marginTop: '4px',
+});
+
+export const getButtonStyles = (): CSSProperties => ({
+    border: '1px solid black',
+    backgroundColor: 'white',
+    color: 'black',
+    borderRadius: '20px',
+});
+
+export const getBottomRowStyle = (): CSSProperties => ({
+    width: '100%',
+    marginTop: '8px',
+});