Add fullscreen player view (#27)

* Add store controls for fullscreen player

* Normalize styles for playback config

* Add fullscreen player component

* Add option component

* Update player controls to use option/popover components

* Add esc hotkey to close player

* Add usePlayerData hook
This commit is contained in:
Jeff 2023-03-28 14:19:23 -07:00 committed by GitHub
parent 6cfdb8ff84
commit e47fcfc62e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 780 additions and 62 deletions

View file

@ -13,6 +13,7 @@ import {
useAppStoreActions,
useCurrentSong,
useDefaultQueue,
usePlayerControls,
usePreviousSong,
useQueueControls,
} from '/@/renderer/store';
@ -53,6 +54,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
const tableConfig = useTableSettings(type);
const [gridApi, setGridApi] = useState<AgGridReactType | undefined>();
const playerType = usePlayerType();
const { play } = usePlayerControls();
useEffect(() => {
if (tableRef.current) {
@ -79,6 +81,8 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
if (playerType === PlaybackType.LOCAL) {
mpvPlayer.setQueue(playerData);
}
play();
};
const handleDragStart = () => {
@ -160,7 +164,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
}
};
const rowClassRules = useMemo<RowClassRules>(() => {
const rowClassRules = useMemo<RowClassRules | undefined>(() => {
return {
'current-song': (params) => {
return params.data.uniqueId === currentSong?.uniqueId;
@ -205,11 +209,13 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
rowDragMultiRow
autoFitColumns={tableConfig.autoFit}
columnDefs={columnDefs}
deselectOnClickOutside={type === 'fullScreen'}
getRowId={(data) => data.data.uniqueId}
rowBuffer={50}
rowClassRules={rowClassRules}
rowData={queue}
rowHeight={tableConfig.rowHeight || 40}
suppressCellFocus={type === 'fullScreen'}
onCellContextMenu={handleContextMenu}
onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange}