Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a4e61de53f | ||
|
|
73c1c1cf89 | ||
|
|
83e1281079 | ||
|
|
2e1f1e599b | ||
|
|
71c4e2509f | ||
|
|
9cef1c78d3 | ||
|
|
6741eeb7fa | ||
|
|
71b8e98f23 | ||
|
|
bc2c0bad59 | ||
|
|
812d6ff10d | ||
|
|
aed300b1bb | ||
|
|
e93b3b9096 | ||
|
|
cdd2ff15d5 | ||
|
|
adcfbfa811 | ||
|
|
0cdfe90476 | ||
|
|
1715ca02ed |
File diff suppressed because it is too large
Load Diff
@@ -43,7 +43,9 @@ export default async function Home({
|
||||
const genres = await prisma.genre.findMany({
|
||||
where: { active: true },
|
||||
});
|
||||
const specials = await prisma.special.findMany();
|
||||
const specials = await prisma.special.findMany({
|
||||
where: { hidden: false },
|
||||
});
|
||||
|
||||
// Sort in memory
|
||||
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
||||
|
||||
@@ -86,6 +86,7 @@ export default async function SpecialPage({ params }: PageProps) {
|
||||
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
||||
|
||||
const activeSpecials = specials.filter(s => {
|
||||
if (s.hidden) return false;
|
||||
const sStarted = !s.launchDate || s.launchDate <= now;
|
||||
const sEnded = s.endDate && s.endDate < now;
|
||||
return sStarted && !sEnded;
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hördle Admin Dashboard",
|
||||
description: "Admin dashboard for managing songs and daily puzzles",
|
||||
};
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
1160
app/admin/page.tsx
1160
app/admin/page.tsx
File diff suppressed because it is too large
Load Diff
23
app/api/admin/reset-activations/route.ts
Normal file
23
app/api/admin/reset-activations/route.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
// Delete all daily puzzles (activations)
|
||||
const result = await prisma.dailyPuzzle.deleteMany({});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `Successfully deleted ${result.count} daily puzzles (activations)`,
|
||||
count: result.count,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error resetting activations:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to reset activations' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
28
app/api/admin/reset-ratings/route.ts
Normal file
28
app/api/admin/reset-ratings/route.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
// Reset all song ratings to 0
|
||||
const result = await prisma.song.updateMany({
|
||||
data: {
|
||||
averageRating: 0,
|
||||
ratingCount: 0,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `Successfully reset ratings for ${result.count} songs`,
|
||||
count: result.count,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error resetting ratings:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to reset ratings' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -43,18 +43,20 @@ export async function PUT(
|
||||
try {
|
||||
const { id } = await params;
|
||||
const specialId = parseInt(id);
|
||||
const { name, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
|
||||
const { name, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
|
||||
|
||||
const updateData: any = {};
|
||||
if (name !== undefined) updateData.name = name;
|
||||
if (maxAttempts !== undefined) updateData.maxAttempts = maxAttempts;
|
||||
if (unlockSteps !== undefined) updateData.unlockSteps = typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps);
|
||||
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
|
||||
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
|
||||
if (curator !== undefined) updateData.curator = curator || null;
|
||||
if (hidden !== undefined) updateData.hidden = Boolean(hidden);
|
||||
|
||||
const special = await prisma.special.update({
|
||||
where: { id: specialId },
|
||||
data: {
|
||||
name,
|
||||
maxAttempts,
|
||||
unlockSteps: typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps),
|
||||
launchDate: launchDate ? new Date(launchDate) : null,
|
||||
endDate: endDate ? new Date(endDate) : null,
|
||||
curator: curator || null,
|
||||
}
|
||||
data: updateData
|
||||
});
|
||||
|
||||
return NextResponse.json(special);
|
||||
|
||||
@@ -35,7 +35,7 @@ export async function POST(request: Request) {
|
||||
const authError = await requireAdminAuth(request as any);
|
||||
if (authError) return authError;
|
||||
|
||||
const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator } = await request.json();
|
||||
const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator, hidden = false } = await request.json();
|
||||
if (!name) {
|
||||
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
|
||||
}
|
||||
@@ -68,6 +68,7 @@ export async function POST(request: Request) {
|
||||
launchDate: launchDate ? new Date(launchDate) : null,
|
||||
endDate: endDate ? new Date(endDate) : null,
|
||||
curator: curator || null,
|
||||
hidden: Boolean(hidden),
|
||||
},
|
||||
});
|
||||
return NextResponse.json(special);
|
||||
@@ -91,7 +92,7 @@ export async function PUT(request: Request) {
|
||||
const authError = await requireAdminAuth(request as any);
|
||||
if (authError) return authError;
|
||||
|
||||
const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
|
||||
const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: 'ID required' }, { status: 400 });
|
||||
}
|
||||
@@ -119,6 +120,7 @@ export async function PUT(request: Request) {
|
||||
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
|
||||
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
|
||||
if (curator !== undefined) updateData.curator = curator || null;
|
||||
if (hidden !== undefined) updateData.hidden = Boolean(hidden);
|
||||
|
||||
const updated = await prisma.special.update({
|
||||
where: { id: Number(id) },
|
||||
|
||||
@@ -22,6 +22,7 @@ interface Song {
|
||||
filename: string;
|
||||
createdAt: string;
|
||||
releaseYear: number | null;
|
||||
coverImage: string | null;
|
||||
activations?: number;
|
||||
puzzles?: any[];
|
||||
genres: Genre[];
|
||||
@@ -128,6 +129,7 @@ export default function CuratorPageClient() {
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
const [playingSongId, setPlayingSongId] = useState<number | null>(null);
|
||||
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
|
||||
const [hoveredCoverSongId, setHoveredCoverSongId] = useState<number | null>(null);
|
||||
|
||||
// Comments state
|
||||
const [comments, setComments] = useState<CuratorComment[]>([]);
|
||||
@@ -1663,6 +1665,7 @@ export default function CuratorPageClient() {
|
||||
>
|
||||
{t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th style={{ padding: '0.5rem' }}>{t('columnCover')}</th>
|
||||
<th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
|
||||
<th
|
||||
style={{ padding: '0.5rem', cursor: 'pointer' }}
|
||||
@@ -1778,6 +1781,48 @@ export default function CuratorPageClient() {
|
||||
'-'
|
||||
)}
|
||||
</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' }}>
|
||||
{isEditing ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
.page {
|
||||
--background: #fafafa;
|
||||
--foreground: #fff;
|
||||
|
||||
--text-primary: #000;
|
||||
--text-secondary: #666;
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
--button-secondary-border: #ebebeb;
|
||||
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-geist-sans);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: var(--foreground);
|
||||
padding: 120px 60px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
max-width: 320px;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
letter-spacing: -2.4px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.intro p {
|
||||
max-width: 440px;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctas {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 128px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--text-primary);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--button-secondary-border);
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -1.92px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.page {
|
||||
--background: #000;
|
||||
--foreground: #000;
|
||||
|
||||
--text-primary: #ededed;
|
||||
--text-secondary: #999;
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
--button-secondary-border: #1a1a1a;
|
||||
}
|
||||
}
|
||||
@@ -98,19 +98,6 @@ export default function CurateSpecialEditor({
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<button
|
||||
onClick={onBack}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
background: '#e5e7eb',
|
||||
border: 'none',
|
||||
borderRadius: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
marginBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
{backLabel}
|
||||
</button>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
|
||||
{headerPrefix} {specialName}
|
||||
</h1>
|
||||
|
||||
@@ -12,11 +12,14 @@ interface WaveformEditorProps {
|
||||
|
||||
export default function WaveformEditor({ audioUrl, startTime, duration, unlockSteps, onStartTimeChange }: WaveformEditorProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const timelineRef = useRef<HTMLCanvasElement>(null);
|
||||
const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
|
||||
const [audioDuration, setAudioDuration] = useState(0);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [playingSegment, setPlayingSegment] = useState<number | null>(null);
|
||||
const [isPlayingFullTitle, setIsPlayingFullTitle] = useState(false);
|
||||
const [pausedPosition, setPausedPosition] = useState<number | null>(null); // Position when paused
|
||||
const [pausedType, setPausedType] = useState<'selection' | 'title' | null>(null); // Type of playback that was paused
|
||||
const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
|
||||
const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
|
||||
const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
|
||||
@@ -56,6 +59,80 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
};
|
||||
}, [audioUrl]);
|
||||
|
||||
// Draw timeline
|
||||
useEffect(() => {
|
||||
if (!audioDuration || !timelineRef.current) return;
|
||||
|
||||
const timeline = timelineRef.current;
|
||||
const ctx = timeline.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const width = timeline.width;
|
||||
const height = timeline.height;
|
||||
|
||||
// Calculate visible range based on zoom and offset (same as waveform)
|
||||
const visibleDuration = audioDuration / zoom;
|
||||
const visibleStart = Math.max(0, Math.min(viewOffset, audioDuration - visibleDuration));
|
||||
const visibleEnd = Math.min(audioDuration, visibleStart + visibleDuration);
|
||||
|
||||
// Clear timeline
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// Draw border
|
||||
ctx.strokeStyle = '#e5e7eb';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(0, 0, width, height);
|
||||
|
||||
// Calculate appropriate time interval based on visible duration
|
||||
let timeInterval = 1; // Start with 1 second
|
||||
if (visibleDuration > 60) timeInterval = 10;
|
||||
else if (visibleDuration > 30) timeInterval = 5;
|
||||
else if (visibleDuration > 10) timeInterval = 2;
|
||||
else if (visibleDuration > 5) timeInterval = 1;
|
||||
else if (visibleDuration > 1) timeInterval = 0.5;
|
||||
else timeInterval = 0.1;
|
||||
|
||||
// Draw time markers
|
||||
ctx.strokeStyle = '#9ca3af';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.font = '10px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
const startTimeMarker = Math.floor(visibleStart / timeInterval) * timeInterval;
|
||||
for (let time = startTimeMarker; time <= visibleEnd; time += timeInterval) {
|
||||
const timePx = ((time - visibleStart) / visibleDuration) * width;
|
||||
|
||||
if (timePx >= 0 && timePx <= width) {
|
||||
// Draw tick mark
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(timePx, 0);
|
||||
ctx.lineTo(timePx, height);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw time label
|
||||
const timeLabel = time.toFixed(timeInterval < 1 ? 1 : 0);
|
||||
ctx.fillText(`${timeLabel}s`, timePx, 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw current playback position if playing
|
||||
if (playbackPosition !== null) {
|
||||
const playbackPx = ((playbackPosition - visibleStart) / visibleDuration) * width;
|
||||
if (playbackPx >= 0 && playbackPx <= width) {
|
||||
ctx.strokeStyle = '#10b981';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(playbackPx, 0);
|
||||
ctx.lineTo(playbackPx, height);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
}, [audioDuration, zoom, viewOffset, playbackPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!audioBuffer || !canvasRef.current) return;
|
||||
|
||||
@@ -234,12 +311,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
setHoverPreviewTime(null);
|
||||
};
|
||||
|
||||
const stopPlayback = () => {
|
||||
const stopPlayback = (savePosition = false) => {
|
||||
if (savePosition && playbackPosition !== null) {
|
||||
// Save current position for resume
|
||||
setPausedPosition(playbackPosition);
|
||||
// Keep playbackPosition visible (don't set to null) so cursor stays visible
|
||||
} else {
|
||||
// Clear paused position if stopping completely
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
setPlaybackPosition(null);
|
||||
}
|
||||
sourceRef.current?.stop();
|
||||
setIsPlaying(false);
|
||||
setPlayingSegment(null);
|
||||
setIsPlayingFullTitle(false);
|
||||
setPlaybackPosition(null);
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
animationFrameRef.current = null;
|
||||
@@ -307,35 +393,55 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
const handlePlayFull = () => {
|
||||
if (!audioBuffer || !audioContextRef.current) return;
|
||||
|
||||
// If full selection playback is already playing, stop it
|
||||
// If full selection playback is already playing, pause it
|
||||
if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
|
||||
stopPlayback();
|
||||
stopPlayback(true); // Save position
|
||||
setPausedType('selection');
|
||||
return;
|
||||
}
|
||||
|
||||
// Stop any current playback (segment, full selection, or full title)
|
||||
stopPlayback();
|
||||
|
||||
// Determine start position (resume from pause or start from beginning)
|
||||
const resumePosition = pausedType === 'selection' && pausedPosition !== null
|
||||
? pausedPosition
|
||||
: startTime;
|
||||
const remainingDuration = resumePosition >= startTime + duration
|
||||
? 0
|
||||
: (startTime + duration) - resumePosition;
|
||||
|
||||
if (remainingDuration <= 0) {
|
||||
// Already finished, reset
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Start full selection playback
|
||||
const source = audioContextRef.current.createBufferSource();
|
||||
source.buffer = audioBuffer;
|
||||
source.connect(audioContextRef.current.destination);
|
||||
|
||||
playbackStartTimeRef.current = audioContextRef.current.currentTime;
|
||||
playbackOffsetRef.current = startTime;
|
||||
playbackOffsetRef.current = resumePosition;
|
||||
|
||||
source.start(0, startTime, duration);
|
||||
source.start(0, resumePosition, remainingDuration);
|
||||
sourceRef.current = source;
|
||||
setIsPlaying(true);
|
||||
setPlayingSegment(null);
|
||||
setIsPlayingFullTitle(false);
|
||||
setPlaybackPosition(startTime);
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
setPlaybackPosition(resumePosition);
|
||||
|
||||
source.onended = () => {
|
||||
setIsPlaying(false);
|
||||
setPlayingSegment(null);
|
||||
setIsPlayingFullTitle(false);
|
||||
setPlaybackPosition(null);
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
animationFrameRef.current = null;
|
||||
@@ -346,35 +452,55 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
const handlePlayFullTitle = () => {
|
||||
if (!audioBuffer || !audioContextRef.current) return;
|
||||
|
||||
// If full title playback is already playing, stop it
|
||||
// If full title playback is already playing, pause it
|
||||
if (isPlaying && isPlayingFullTitle) {
|
||||
stopPlayback();
|
||||
stopPlayback(true); // Save position
|
||||
setPausedType('title');
|
||||
return;
|
||||
}
|
||||
|
||||
// Stop any current playback (segment, full selection, or full title)
|
||||
stopPlayback();
|
||||
|
||||
// Start full title playback (from 0 to audioDuration)
|
||||
// Determine start position (resume from pause or start from beginning)
|
||||
const resumePosition = pausedType === 'title' && pausedPosition !== null
|
||||
? pausedPosition
|
||||
: 0;
|
||||
const remainingDuration = resumePosition >= audioDuration
|
||||
? 0
|
||||
: audioDuration - resumePosition;
|
||||
|
||||
if (remainingDuration <= 0) {
|
||||
// Already finished, reset
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Start full title playback (from resumePosition to audioDuration)
|
||||
const source = audioContextRef.current.createBufferSource();
|
||||
source.buffer = audioBuffer;
|
||||
source.connect(audioContextRef.current.destination);
|
||||
|
||||
playbackStartTimeRef.current = audioContextRef.current.currentTime;
|
||||
playbackOffsetRef.current = 0;
|
||||
playbackOffsetRef.current = resumePosition;
|
||||
|
||||
source.start(0, 0, audioDuration);
|
||||
source.start(0, resumePosition, remainingDuration);
|
||||
sourceRef.current = source;
|
||||
setIsPlaying(true);
|
||||
setPlayingSegment(null);
|
||||
setIsPlayingFullTitle(true);
|
||||
setPlaybackPosition(0);
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
setPlaybackPosition(resumePosition);
|
||||
|
||||
source.onended = () => {
|
||||
setIsPlaying(false);
|
||||
setPlayingSegment(null);
|
||||
setIsPlayingFullTitle(false);
|
||||
setPlaybackPosition(null);
|
||||
setPausedPosition(null);
|
||||
setPausedType(null);
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
animationFrameRef.current = null;
|
||||
@@ -440,21 +566,38 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
)}
|
||||
</div>
|
||||
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={800}
|
||||
height={150}
|
||||
onClick={handleCanvasClick}
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseLeave={handleCanvasMouseLeave}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
cursor: 'pointer',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '0.5rem'
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={800}
|
||||
height={150}
|
||||
onClick={handleCanvasClick}
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseLeave={handleCanvasMouseLeave}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
cursor: 'pointer',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '0.5rem 0.5rem 0 0',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
<canvas
|
||||
ref={timelineRef}
|
||||
width={800}
|
||||
height={30}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30px',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderTop: 'none',
|
||||
borderRadius: '0 0 0.5rem 0.5rem',
|
||||
display: 'block',
|
||||
background: '#ffffff'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Playback Controls */}
|
||||
<div style={{ marginTop: '1rem', display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
@@ -470,7 +613,11 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{isPlaying && playingSegment === null && !isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Selection'}
|
||||
{isPlaying && playingSegment === null && !isPlayingFullTitle
|
||||
? '⏸ Pause'
|
||||
: (pausedType === 'selection' && pausedPosition !== null
|
||||
? '▶ Resume'
|
||||
: '▶ Play Full Selection')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePlayFullTitle}
|
||||
@@ -484,7 +631,11 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{isPlaying && isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Title'}
|
||||
{isPlaying && isPlayingFullTitle
|
||||
? '⏸ Pause'
|
||||
: (pausedType === 'title' && pausedPosition !== null
|
||||
? '▶ Resume'
|
||||
: '▶ Play Full Title')}
|
||||
</button>
|
||||
|
||||
<div style={{ fontSize: '0.875rem', color: '#666' }}>
|
||||
|
||||
@@ -231,6 +231,7 @@
|
||||
"columnTitle": "Titel",
|
||||
"columnArtist": "Artist",
|
||||
"columnYear": "Jahr",
|
||||
"columnCover": "Cover",
|
||||
"columnGenresSpecials": "Genres / Specials",
|
||||
"columnAdded": "Hinzugefügt",
|
||||
"columnActivations": "Aktivierungen",
|
||||
|
||||
@@ -231,6 +231,7 @@
|
||||
"columnTitle": "Title",
|
||||
"columnArtist": "Artist",
|
||||
"columnYear": "Year",
|
||||
"columnCover": "Cover",
|
||||
"columnGenresSpecials": "Genres / Specials",
|
||||
"columnAdded": "Added",
|
||||
"columnActivations": "Activations",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hoerdle",
|
||||
"version": "0.1.6.20",
|
||||
"version": "0.1.6.27",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -32,4 +32,4 @@
|
||||
"eslint-config-next": "^16.0.7",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
-- RedefineTables
|
||||
PRAGMA defer_foreign_keys=ON;
|
||||
PRAGMA foreign_keys=OFF;
|
||||
CREATE TABLE "new_Special" (
|
||||
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
|
||||
"name" JSONB NOT NULL,
|
||||
"subtitle" JSONB,
|
||||
"maxAttempts" INTEGER NOT NULL DEFAULT 7,
|
||||
"unlockSteps" TEXT NOT NULL,
|
||||
"createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"launchDate" DATETIME,
|
||||
"endDate" DATETIME,
|
||||
"curator" TEXT,
|
||||
"hidden" BOOLEAN NOT NULL DEFAULT false
|
||||
);
|
||||
INSERT INTO "new_Special" ("createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps") SELECT "createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps" FROM "Special";
|
||||
DROP TABLE "Special";
|
||||
ALTER TABLE "new_Special" RENAME TO "Special";
|
||||
PRAGMA foreign_keys=ON;
|
||||
PRAGMA defer_foreign_keys=OFF;
|
||||
@@ -47,6 +47,7 @@ model Special {
|
||||
launchDate DateTime?
|
||||
endDate DateTime?
|
||||
curator String?
|
||||
hidden Boolean @default(false)
|
||||
songs SpecialSong[]
|
||||
puzzles DailyPuzzle[]
|
||||
news News[]
|
||||
|
||||
Reference in New Issue
Block a user