Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>
This commit is contained in:
parent
0b7c75d3ab
commit
b4c7a06b2c
BIN
docs/design/02a-menu.jpeg
Normal file
BIN
docs/design/02a-menu.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
docs/design/02b-menu.png
Normal file
BIN
docs/design/02b-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
docs/design/02c-menu.jpeg
Normal file
BIN
docs/design/02c-menu.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
@ -1,7 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonIcon } from '@ionic/react';
|
||||
import { list, search, heart, add, mic, documentText, time, trophy, people } from 'ionicons/icons';
|
||||
import { timeOutline, settingsOutline, listOutline, musicalNotesOutline, peopleOutline, peopleCircleOutline, heartOutline, searchOutline, starOutline } from 'ionicons/icons';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { PlayerControls } from '../common';
|
||||
|
||||
const Navigation: React.FC = () => {
|
||||
const location = useLocation();
|
||||
@ -9,15 +10,16 @@ const Navigation: React.FC = () => {
|
||||
const [isLargeScreen, setIsLargeScreen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ path: '/queue', label: 'Queue', icon: list },
|
||||
{ path: '/search', label: 'Search', icon: search },
|
||||
{ path: '/favorites', label: 'Favorites', icon: heart },
|
||||
{ path: '/new-songs', label: 'New Songs', icon: add },
|
||||
{ path: '/artists', label: 'Artists', icon: mic },
|
||||
{ path: '/song-lists', label: 'Song Lists', icon: documentText },
|
||||
{ path: '/history', label: 'History', icon: time },
|
||||
{ path: '/top-played', label: 'Top 100', icon: trophy },
|
||||
{ path: '/singers', label: 'Singers', icon: people },
|
||||
{ path: '/search', label: 'Search', icon: searchOutline },
|
||||
{ path: '/queue', label: 'Queue', icon: musicalNotesOutline },
|
||||
{ path: '/singers', label: 'Singers', icon: peopleCircleOutline },
|
||||
{ path: '/artists', label: 'Artists', icon: peopleOutline },
|
||||
{ path: '/top-played', label: 'Top 100 Played', icon: starOutline },
|
||||
{ path: '/favorites', label: 'Favorites', icon: heartOutline },
|
||||
{ path: '/history', label: 'History', icon: timeOutline },
|
||||
{ path: '/new-songs', label: 'New Songs', icon: listOutline },
|
||||
{ path: '/song-lists', label: 'Song Lists', icon: listOutline },
|
||||
{ path: '/settings', label: 'Settings', icon: settingsOutline },
|
||||
];
|
||||
|
||||
// Check screen size for responsive menu behavior
|
||||
@ -103,6 +105,11 @@ const Navigation: React.FC = () => {
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Player Controls */}
|
||||
<div style={{ marginTop: 'auto', padding: '16px' }}>
|
||||
<PlayerControls variant="dark" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -138,6 +145,11 @@ const Navigation: React.FC = () => {
|
||||
</IonItem>
|
||||
))}
|
||||
</IonList>
|
||||
|
||||
{/* Player Controls for Mobile */}
|
||||
<div style={{ padding: '16px' }}>
|
||||
<PlayerControls variant="dark" />
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonMenu>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { IonCard, IonCardContent, IonChip, IonIcon } from '@ionic/react';
|
||||
import { play, pause, stop } from 'ionicons/icons';
|
||||
import { playOutline, pauseOutline, stopOutline, play, pause, stop } from 'ionicons/icons';
|
||||
import ActionButton from './ActionButton';
|
||||
import { useAppSelector } from '../../redux';
|
||||
import { selectPlayerState, selectIsAdmin, selectQueue } from '../../redux';
|
||||
@ -11,9 +11,10 @@ import { PlayerState } from '../../types';
|
||||
|
||||
interface PlayerControlsProps {
|
||||
className?: string;
|
||||
variant?: 'light' | 'dark';
|
||||
}
|
||||
|
||||
const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
|
||||
const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant = 'light' }) => {
|
||||
const playerState = useAppSelector(selectPlayerState);
|
||||
const isAdmin = useAppSelector(selectIsAdmin);
|
||||
const controllerName = useAppSelector(selectControllerName);
|
||||
@ -83,6 +84,88 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = () => {
|
||||
switch (currentState) {
|
||||
case PlayerState.playing:
|
||||
return 'Currently Playing';
|
||||
case PlayerState.paused:
|
||||
return 'Currently Paused';
|
||||
default:
|
||||
return 'Currently Stopped';
|
||||
}
|
||||
};
|
||||
|
||||
// Dark mode variant
|
||||
if (variant === 'dark') {
|
||||
return (
|
||||
<div className={`bg-black text-white ${className}`}>
|
||||
{/* Status Text */}
|
||||
<div style={{ padding: '0px 0px' }}>
|
||||
<h3 className="text-lg font-bold">{getStatusText()}</h3>
|
||||
</div>
|
||||
|
||||
{/* Control Buttons */}
|
||||
<div>
|
||||
{currentState === PlayerState.playing ? (
|
||||
<div
|
||||
className="flex items-center cursor-pointer hover:bg-gray-800"
|
||||
style={{ padding: '12px 0px' }}
|
||||
onClick={handlePause}
|
||||
>
|
||||
<IonIcon
|
||||
icon={pauseOutline}
|
||||
style={{
|
||||
marginRight: '12px',
|
||||
fontSize: '24px'
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontWeight: '500' }}>Pause</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex items-center cursor-pointer hover:bg-gray-800"
|
||||
style={{ padding: '12px 0px' }}
|
||||
onClick={handlePlay}
|
||||
>
|
||||
<IonIcon
|
||||
icon={playOutline}
|
||||
style={{
|
||||
marginRight: '12px',
|
||||
fontSize: '24px'
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontWeight: '500' }}>Play</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentState !== PlayerState.stopped && (
|
||||
<div
|
||||
className="flex items-center cursor-pointer hover:bg-gray-800"
|
||||
style={{ padding: '12px 0px' }}
|
||||
onClick={handleStop}
|
||||
>
|
||||
<IonIcon
|
||||
icon={stopOutline}
|
||||
style={{
|
||||
marginRight: '12px',
|
||||
fontSize: '24px'
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontWeight: '500' }}>Stop</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!hasSongsInQueue && (
|
||||
<div style={{ padding: '12px 0px' }} className="text-xs text-gray-400">
|
||||
Add songs to queue to enable playback controls
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Light mode variant (original)
|
||||
return (
|
||||
<IonCard className={className}>
|
||||
<IonCardContent>
|
||||
@ -100,20 +183,18 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
|
||||
<ActionButton
|
||||
onClick={handlePause}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
size="sm"
|
||||
>
|
||||
<IonIcon icon={pause} slot="start" />
|
||||
Pause
|
||||
<IonIcon icon={pause} slot="icon-only" />
|
||||
</ActionButton>
|
||||
) : (
|
||||
<ActionButton
|
||||
onClick={handlePlay}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
size="sm"
|
||||
disabled={!hasSongsInQueue}
|
||||
>
|
||||
<IonIcon icon={play} slot="start" />
|
||||
Play
|
||||
<IonIcon icon={play} slot="icon-only" />
|
||||
</ActionButton>
|
||||
)}
|
||||
|
||||
@ -123,8 +204,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
|
||||
variant="danger"
|
||||
size="sm"
|
||||
>
|
||||
<IonIcon icon={stop} slot="start" />
|
||||
Stop
|
||||
<IonIcon icon={stop} slot="icon-only" />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -108,12 +108,14 @@ const Queue: React.FC = () => {
|
||||
subtitle={`${queueStats.totalSongs} song${queueStats.totalSongs !== 1 ? 's' : ''} in queue`}
|
||||
/>
|
||||
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
{/* Player Controls - Only visible to admin users */}
|
||||
<div className="mb-6">
|
||||
<PlayerControls />
|
||||
{/* Player Controls - Only visible to admin users */}
|
||||
<div className="max-w-4xl mx-auto p-6 mb-6">
|
||||
<div style={{ paddingLeft: '16px' }}>
|
||||
<PlayerControls variant="dark" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
{/* Queue List */}
|
||||
<InfiniteScrollList<QueueItem>
|
||||
items={queueItems}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user