feat: Album-Cover-Anzeige in Titelliste mit Tooltip hinzugefügt
- Neue Spalte 'Cover' in der Curator-Titelliste zeigt an, ob ein Album-Cover vorhanden ist - Tooltip zeigt das Cover-Bild beim Hovern über die Cover-Spalte - Übersetzungen für DE und EN hinzugefügt
This commit is contained in:
@@ -22,6 +22,7 @@ interface Song {
|
|||||||
filename: string;
|
filename: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
releaseYear: number | null;
|
releaseYear: number | null;
|
||||||
|
coverImage: string | null;
|
||||||
activations?: number;
|
activations?: number;
|
||||||
puzzles?: any[];
|
puzzles?: any[];
|
||||||
genres: Genre[];
|
genres: Genre[];
|
||||||
@@ -128,6 +129,7 @@ export default function CuratorPageClient() {
|
|||||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||||
const [playingSongId, setPlayingSongId] = useState<number | null>(null);
|
const [playingSongId, setPlayingSongId] = useState<number | null>(null);
|
||||||
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
|
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
|
||||||
|
const [hoveredCoverSongId, setHoveredCoverSongId] = useState<number | null>(null);
|
||||||
|
|
||||||
// Comments state
|
// Comments state
|
||||||
const [comments, setComments] = useState<CuratorComment[]>([]);
|
const [comments, setComments] = useState<CuratorComment[]>([]);
|
||||||
@@ -1663,6 +1665,7 @@ export default function CuratorPageClient() {
|
|||||||
>
|
>
|
||||||
{t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
|
{t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||||
</th>
|
</th>
|
||||||
|
<th style={{ padding: '0.5rem' }}>{t('columnCover')}</th>
|
||||||
<th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
|
<th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
|
||||||
<th
|
<th
|
||||||
style={{ padding: '0.5rem', cursor: 'pointer' }}
|
style={{ padding: '0.5rem', cursor: 'pointer' }}
|
||||||
@@ -1778,6 +1781,48 @@ export default function CuratorPageClient() {
|
|||||||
'-'
|
'-'
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem',
|
||||||
|
textAlign: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
cursor: song.coverImage ? 'pointer' : 'default'
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => song.coverImage && setHoveredCoverSongId(song.id)}
|
||||||
|
onMouseLeave={() => setHoveredCoverSongId(null)}
|
||||||
|
>
|
||||||
|
{song.coverImage ? '✓' : '-'}
|
||||||
|
{hoveredCoverSongId === song.id && song.coverImage && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '100%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
marginTop: '0.5rem',
|
||||||
|
zIndex: 1000,
|
||||||
|
padding: '0.5rem',
|
||||||
|
background: 'white',
|
||||||
|
border: '1px solid #d1d5db',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`/uploads/covers/${song.coverImage}`}
|
||||||
|
alt={`Cover für ${song.title}`}
|
||||||
|
style={{
|
||||||
|
width: '200px',
|
||||||
|
height: '200px',
|
||||||
|
objectFit: 'cover',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
display: 'block',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
<td style={{ padding: '0.5rem' }}>
|
<td style={{ padding: '0.5rem' }}>
|
||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
||||||
|
|||||||
@@ -231,6 +231,7 @@
|
|||||||
"columnTitle": "Titel",
|
"columnTitle": "Titel",
|
||||||
"columnArtist": "Artist",
|
"columnArtist": "Artist",
|
||||||
"columnYear": "Jahr",
|
"columnYear": "Jahr",
|
||||||
|
"columnCover": "Cover",
|
||||||
"columnGenresSpecials": "Genres / Specials",
|
"columnGenresSpecials": "Genres / Specials",
|
||||||
"columnAdded": "Hinzugefügt",
|
"columnAdded": "Hinzugefügt",
|
||||||
"columnActivations": "Aktivierungen",
|
"columnActivations": "Aktivierungen",
|
||||||
|
|||||||
@@ -231,6 +231,7 @@
|
|||||||
"columnTitle": "Title",
|
"columnTitle": "Title",
|
||||||
"columnArtist": "Artist",
|
"columnArtist": "Artist",
|
||||||
"columnYear": "Year",
|
"columnYear": "Year",
|
||||||
|
"columnCover": "Cover",
|
||||||
"columnGenresSpecials": "Genres / Specials",
|
"columnGenresSpecials": "Genres / Specials",
|
||||||
"columnAdded": "Added",
|
"columnAdded": "Added",
|
||||||
"columnActivations": "Activations",
|
"columnActivations": "Activations",
|
||||||
|
|||||||
Reference in New Issue
Block a user