quentintaranpino/bouquet
1
0
Fork 0
forked from florian/bouquet
Code Pull Requests Activity

feat: Added display for currently playing song

Browse Source
This commit is contained in:
florian 2024-05-25 21:16:08 +02:00
parent 7e60f8aad1
commit 43d76e2ff6
6 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

9
src/components/AudioBlobList/AudioBlobList.tsx
View File

@ -1,9 +1,10 @@
import { formatFileSize, formatDate } from '../../utils/utils';
import { ClipboardDocumentIcon, TrashIcon, PlayIcon } from '@heroicons/react/24/outline';
import { ClipboardDocumentIcon, TrashIcon } from '@heroicons/react/24/outline';
import { BlobDescriptor } from 'blossom-client-sdk';
import { fetchId3Tag } from '../../utils/id3';
import { useQueries } from '@tanstack/react-query';
import { useGlobalContext } from '../../GlobalState';
import { PauseIcon, PlayIcon } from '@heroicons/react/24/solid';
type AudioBlobListProps = {
audioFiles: BlobDescriptor[];
@ -11,7 +12,7 @@ type AudioBlobListProps = {
};
const AudioBlobList = ({ audioFiles, onDelete }: AudioBlobListProps) => {
const { dispatch } = useGlobalContext();
const { dispatch, state } = useGlobalContext();
const audioFilesWithId3 = useQueries({
queries: audioFiles.map(af => ({
@ -43,12 +44,16 @@ const AudioBlobList = ({ audioFiles, onDelete }: AudioBlobListProps) => {
dispatch({ type: 'SET_CURRENT_SONG', song: { url: blob.data.url, id3: blob.data.id3 } })
}
/>
{state.currentSong?.url == blob.data.url ? (
<PauseIcon className="pause-icon"></PauseIcon>
) : (
<PlayIcon
className="play-icon"
onClick={() =>
dispatch({ type: 'SET_CURRENT_SONG', song: { url: blob.data.url, id3: blob.data.id3 } })
}
></PlayIcon>
)}
</div>
{blob.data.id3 && (
<div className="flex flex-col pb-4 flex-grow">

2
src/components/AudioPlayer.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import { useGlobalContext } from '../GlobalState';
import { PauseIcon, PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { PauseIcon, PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon, XMarkIcon } from '@heroicons/react/24/solid';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';

4
src/components/BlobList/BlobList.css
View File

@ -29,3 +29,7 @@
.blob-list .cover-image .play-icon {
@apply opacity-0 absolute text-white top-8 left-8 w-16 h-16 rounded-full bg-[rgba(0,0,0,.4)] p-2 cursor-pointer;
}
.blob-list .cover-image .pause-icon {
@apply absolute text-white top-8 left-8 w-16 h-16 rounded-full bg-[rgba(0,0,0,.4)] p-2 cursor-pointer;
}

2
src/components/Layout/Layout.tsx
View File

@ -59,7 +59,7 @@ export const Layout = () => {
<span>bouquet</span>
</button>
</div>
<div className="navbar-center hidden md:block">{navItems}</div>
<div className="navbar-center hidden md:flex gap-2">{navItems}</div>
<div className="navbar-end">
<ThemeSwitcher />
<div className="avatar px-4">

2
src/pages/Home.tsx
View File

@ -54,6 +54,7 @@ function Home() {
return (
<>
{Object.values(serverInfo).length > 1 && (
<ServerList
servers={Object.values(serverInfo).sort()}
selectedServer={selectedServer}
@ -64,6 +65,7 @@ function Home() {
manageServers={true}
withVirtualServers={true}
></ServerList>
)}
{selectedServer && serverInfo[selectedServer] && selectedServerBlobs && (
<BlobList