buzzert/QueueCube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds add to favorites button in SongRow

Browse Source
This commit is contained in:
James Magahern
2025-02-23 17:58:26 -08:00
parent 8ab927333b
commit d010d68056
8 changed files with 115 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
backend/src/FavoritesStore.ts
View File

@@ -61,49 +61,48 @@ export class FavoritesStore {
return this.favorites;
}
async addFavorite(item: PlaylistItem, fetchMetadata: boolean = true): Promise<void> {
async addFavorite(filename: string): Promise<void> {
// Check if the item already exists by filename
const exists = this.favorites.some(f => f.filename === item.filename);
const exists = this.favorites.some(f => f.filename === filename);
if (!exists) {
this.favorites.push({
...item,
filename: filename,
id: this.favorites.length // Generate new ID
});
await this.saveFavorites();
} else {
// Otherwise, update the item with the new metadata
const index = this.favorites.findIndex(f => f.filename === item.filename);
this.favorites[index] = {
...this.favorites[index],
...item,
};
await this.saveFavorites();
}
// If the item is missing metadata, fetch it
if (fetchMetadata && !item.metadata) {
await this.fetchMetadata(item);
// Fetch metadata for the new favorite
await this.fetchMetadata(filename);
}
}
private async fetchMetadata(item: PlaylistItem): Promise<void> {
console.log("Fetching metadata for " + item.filename);
const metadata = await getLinkPreview(item.filename);
private async fetchMetadata(filename: string): Promise<void> {
console.log("Fetching metadata for " + filename);
const metadata = await getLinkPreview(filename);
item.metadata = {
title: (metadata as any)?.title,
description: (metadata as any)?.description,
siteName: (metadata as any)?.siteName,
const item: PlaylistItem = {
filename: filename,
id: this.favorites.length,
metadata: {
title: (metadata as any)?.title,
description: (metadata as any)?.description,
siteName: (metadata as any)?.siteName,
},
};
console.log("Metadata fetched for " + item.filename);
console.log(item);
await this.addFavorite(item, false);
const index = this.favorites.findIndex(f => f.filename === filename);
if (index !== -1) {
this.favorites[index] = item;
await this.saveFavorites();
}
}
async removeFavorite(id: number): Promise<void> {
this.favorites = this.favorites.filter(f => f.id !== id);
async removeFavorite(filename: string): Promise<void> {
console.log("Removing favorite " + filename);
this.favorites = this.favorites.filter(f => f.filename !== filename);
await this.saveFavorites();
}

4
backend/src/MediaPlayer.ts
View File

@@ -176,8 +176,8 @@ export class MediaPlayer {
return this.favoritesStore.addFavorite(item);
}
public async removeFavorite(id: number) {
return this.favoritesStore.removeFavorite(id);
public async removeFavorite(filename: string) {
return this.favoritesStore.removeFavorite(filename);
}
public async clearFavorites() {

11
backend/src/server.ts
View File

@@ -140,14 +140,15 @@ apiRouter.get("/favorites", withErrorHandling(async (req, res) => {
}));
apiRouter.post("/favorites", withErrorHandling(async (req, res) => {
const item = req.body as PlaylistItem;
await mediaPlayer.addFavorite(item);
const { filename } = req.body as { filename: string };
console.log("Adding favorite: " + filename);
await mediaPlayer.addFavorite(filename);
res.send(JSON.stringify({ success: true }));
}));
apiRouter.delete("/favorites/:id", withErrorHandling(async (req, res) => {
const { id } = req.params;
await mediaPlayer.removeFavorite(parseInt(id));
apiRouter.delete("/favorites/:filename", withErrorHandling(async (req, res) => {
const { filename } = req.params as { filename: string };
await mediaPlayer.removeFavorite(filename);
res.send(JSON.stringify({ success: true }));
}));

18
frontend/src/api/player.tsx
View File

@@ -142,28 +142,18 @@ export const API = {
return response.json();
},
async addToFavorites(url: string): Promise<void> {
// Maybe a little weird to make an empty PlaylistItem here, but we do want to support adding
// known PlaylistItems to favorites in the future.
const playlistItem: PlaylistItem = {
filename: url,
title: null,
id: 0,
playing: null,
metadata: undefined,
};
async addToFavorites(filename: string): Promise<void> {
await fetch('/api/favorites', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(playlistItem),
body: JSON.stringify({ filename }),
});
},
async removeFromFavorites(id: number): Promise<void> {
await fetch(`/api/favorites/${id}`, { method: 'DELETE' });
async removeFromFavorites(filename: string): Promise<void> {
await fetch(`/api/favorites/${encodeURIComponent(filename)}`, { method: 'DELETE' });
},
async clearFavorites(): Promise<void> {

1
frontend/src/components/AddSongPanel.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState, KeyboardEvent, ChangeEvent } from 'react';
import { FaSearch } from 'react-icons/fa';
import InvidiousSearchModal from './InvidiousSearchModal';
import { USE_INVIDIOUS } from '../config';
interface AddSongPanelProps {
onAddURL: (url: string) => void;
}

72
frontend/src/components/App.tsx
View File

@@ -1,11 +1,12 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback, ReactNode } from 'react';
import SongTable from './SongTable';
import NowPlaying from './NowPlaying';
import AddSongPanel from './AddSongPanel';
import { TabView, Tab } from './TabView';
import { API, getDisplayTitle, PlaylistItem, ServerEvent } from '../api/player';
import { FaMusic, FaHeart } from 'react-icons/fa';
import { FaMusic, FaHeart, FaPlus } from 'react-icons/fa';
import useWebSocket from 'react-use-websocket';
import classNames from 'classnames';
enum Tabs {
Playlist = "playlist",
@@ -21,10 +22,11 @@ const EmptyContent: React.FC<{ label: string}> = ({label}) => (
interface SonglistContentProps {
songs: PlaylistItem[];
isPlaying: boolean;
auxControlProvider?: (song: PlaylistItem) => ReactNode;
onNeedsRefresh: () => void;
}
const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, auxControlProvider, onNeedsRefresh }) => {
const handleDelete = (index: number) => {
API.removeFromPlaylist(index);
onNeedsRefresh();
@@ -40,6 +42,7 @@ const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onN
<SongTable
songs={songs}
isPlaying={isPlaying}
auxControlProvider={auxControlProvider}
onDelete={handleDelete}
onSkipTo={handleSkipTo}
/>
@@ -49,9 +52,9 @@ const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onN
);
};
const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, auxControlProvider, onNeedsRefresh }) => {
const handleDelete = (index: number) => {
API.removeFromFavorites(index);
API.removeFromFavorites(songs[index].filename);
onNeedsRefresh();
};
@@ -66,6 +69,7 @@ const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, on
<SongTable
songs={songs}
isPlaying={isPlaying}
auxControlProvider={auxControlProvider}
onDelete={handleDelete}
onSkipTo={handleSkipTo}
/>
@@ -215,6 +219,62 @@ const App: React.FC = () => {
fetchFavorites();
}, [fetchPlaylist, fetchNowPlaying, fetchFavorites]);
const AuxButton: React.FC<{ children: ReactNode, className: string, title: string, onClick: () => void }> = (props) => (
<button
className={
classNames("hover:text-white transition-colors px-3 py-1 rounded", props.className)
}
title={props.title}
onClick={props.onClick}
>
{props.children}
</button>
);
const playlistAuxControlProvider = (song: PlaylistItem) => {
const isFavorite = favorites.some(f => f.filename === song.filename);
return (
<AuxButton
className={classNames({
"text-red-500": isFavorite,
"text-white/40": !isFavorite,
})}
title={isFavorite ? "Remove from favorites" : "Add to favorites"}
onClick={() => {
if (isFavorite) {
API.removeFromFavorites(song.filename);
} else {
API.addToFavorites(song.filename);
}
}}
>
<FaHeart />
</AuxButton>
);
};
const favoritesAuxControlProvider = (song: PlaylistItem) => {
const isInPlaylist = playlist.some(p => p.filename === song.filename);
return (
<AuxButton
className={classNames({
"text-white/40": isInPlaylist,
"text-white": !isInPlaylist,
})}
title={isInPlaylist ? "Remove from playlist" : "Add to playlist"}
onClick={() => {
if (isInPlaylist) {
API.removeFromPlaylist(playlist.findIndex(p => p.filename === song.filename));
} else {
API.addToPlaylist(song.filename);
}
}}
>
<FaPlus />
</AuxButton>
);
};
return (
<div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
<div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
@@ -238,6 +298,7 @@ const App: React.FC = () => {
songs={playlist}
isPlaying={isPlaying}
onNeedsRefresh={refreshContent}
auxControlProvider={playlistAuxControlProvider}
/>
</Tab>
<Tab label="Favorites" identifier={Tabs.Favorites} icon={<FaHeart />}>
@@ -245,6 +306,7 @@ const App: React.FC = () => {
songs={favorites.map(f => ({ ...f, playing: f.filename === nowPlayingFileName }))}
isPlaying={isPlaying}
onNeedsRefresh={refreshContent}
auxControlProvider={favoritesAuxControlProvider}
/>
</Tab>
</TabView>

9
frontend/src/components/SongRow.tsx
View File

@@ -1,6 +1,6 @@
import classNames from 'classnames';
import React, { useState, useRef, useEffect } from 'react';
import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
import React, { useState, useRef, useEffect, ReactNode } from 'react';
import { FaPlay, FaVolumeUp, FaVolumeOff, FaHeart } from 'react-icons/fa';
import { getDisplayTitle, PlaylistItem } from '../api/player';
export enum PlayState {
@@ -11,12 +11,13 @@ export enum PlayState {
export interface SongRowProps {
song: PlaylistItem;
auxControl?: ReactNode;
playState: PlayState;
onDelete: () => void;
onPlay: () => void;
}
const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay }) => {
const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete, onPlay }) => {
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const buttonRef = useRef<HTMLButtonElement>(null);
@@ -77,6 +78,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
</div>
<div className="flex flex-row gap-2">
{auxControl}
<button
ref={buttonRef}
className="text-red-100 px-3 py-1 bg-red-500/40 rounded"

8
frontend/src/components/SongTable.tsx
View File

@@ -1,15 +1,16 @@
import React, { useEffect, useRef } from "react";
import React, { useEffect, useRef, ReactNode } from "react";
import SongRow, { PlayState } from "./SongRow";
import { PlaylistItem } from "../api/player";
interface SongTableProps {
songs: PlaylistItem[];
isPlaying: boolean;
isPlaying: boolean
auxControlProvider?: (song: PlaylistItem) => ReactNode;
onDelete: (index: number) => void;
onSkipTo: (index: number) => void;
}
const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSkipTo }) => {
const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, auxControlProvider, onDelete, onSkipTo }) => {
const nowPlayingIndex = songs.findIndex(song => song.playing ?? false);
const songTableRef = useRef<HTMLDivElement>(null);
@@ -26,6 +27,7 @@ const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSki
<SongRow
key={index}
song={song}
auxControl={auxControlProvider ? auxControlProvider(song) : undefined}
playState={
(song.playing ?? false) ? (isPlaying ? PlayState.Playing : PlayState.Paused)
: PlayState.NotPlaying