feat: Added display for currently playing song
This commit is contained in:
parent
7e60f8aad1
commit
43d76e2ff6
@ -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 } })
|
||||
}
|
||||
/>
|
||||
<PlayIcon
|
||||
className="play-icon "
|
||||
onClick={() =>
|
||||
dispatch({ type: 'SET_CURRENT_SONG', song: { url: blob.data.url, id3: blob.data.id3 } })
|
||||
}
|
||||
></PlayIcon>
|
||||
{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">
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -47,7 +47,7 @@ export const Layout = () => {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>{' '}
|
||||
<ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-[11em]">
|
||||
<ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-[11em]">
|
||||
{navItems}
|
||||
</ul>
|
||||
</div>
|
||||
@ -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">
|
||||
|
@ -54,16 +54,18 @@ function Home() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<ServerList
|
||||
servers={Object.values(serverInfo).sort()}
|
||||
selectedServer={selectedServer}
|
||||
setSelectedServer={setSelectedServer}
|
||||
onTransfer={() => navigate('/transfer/' + selectedServer)}
|
||||
onCheck={() => navigate('/check/' + selectedServer)}
|
||||
title={<>Servers</>}
|
||||
manageServers={true}
|
||||
withVirtualServers={true}
|
||||
></ServerList>
|
||||
{Object.values(serverInfo).length > 1 && (
|
||||
<ServerList
|
||||
servers={Object.values(serverInfo).sort()}
|
||||
selectedServer={selectedServer}
|
||||
setSelectedServer={setSelectedServer}
|
||||
onTransfer={() => navigate('/transfer/' + selectedServer)}
|
||||
onCheck={() => navigate('/check/' + selectedServer)}
|
||||
title={<>Servers</>}
|
||||
manageServers={true}
|
||||
withVirtualServers={true}
|
||||
></ServerList>
|
||||
)}
|
||||
|
||||
{selectedServer && serverInfo[selectedServer] && selectedServerBlobs && (
|
||||
<BlobList
|
||||
|
Loading…
Reference in New Issue
Block a user