Compare commits
21 Commits
v0.1.6.16
...
2e1f1e599b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2e1f1e599b | ||
|
|
71c4e2509f | ||
|
|
9cef1c78d3 | ||
|
|
6741eeb7fa | ||
|
|
71b8e98f23 | ||
|
|
bc2c0bad59 | ||
|
|
812d6ff10d | ||
|
|
aed300b1bb | ||
|
|
e93b3b9096 | ||
|
|
cdd2ff15d5 | ||
|
|
adcfbfa811 | ||
|
|
0cdfe90476 | ||
|
|
1715ca02ed | ||
|
|
ece3991d37 | ||
|
|
fa3b64f490 | ||
|
|
fa6f1097dd | ||
|
|
d2ec0119ce | ||
|
|
8914c552cd | ||
|
|
d816422419 | ||
|
|
da777ffcf3 | ||
|
|
0d806daf66 |
@@ -15,6 +15,7 @@ interface Special {
|
|||||||
launchDate?: string;
|
launchDate?: string;
|
||||||
endDate?: string;
|
endDate?: string;
|
||||||
curator?: string;
|
curator?: string;
|
||||||
|
hidden?: boolean;
|
||||||
_count?: {
|
_count?: {
|
||||||
songs: number;
|
songs: number;
|
||||||
};
|
};
|
||||||
@@ -115,18 +116,22 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
|
const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
|
||||||
const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
|
const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
|
||||||
const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
|
const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
|
||||||
|
const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
|
||||||
const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
|
const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
|
||||||
const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
|
const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
|
||||||
const [newSpecialCurator, setNewSpecialCurator] = useState('');
|
const [newSpecialCurator, setNewSpecialCurator] = useState('');
|
||||||
|
const [newSpecialHidden, setNewSpecialHidden] = useState(false);
|
||||||
|
|
||||||
const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
|
const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
|
||||||
const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
|
const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
|
||||||
const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
|
const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
|
||||||
const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
|
const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
|
||||||
const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
|
const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
|
||||||
|
const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
|
||||||
const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
|
const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
|
||||||
const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
|
const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
|
||||||
const [editSpecialCurator, setEditSpecialCurator] = useState('');
|
const [editSpecialCurator, setEditSpecialCurator] = useState('');
|
||||||
|
const [editSpecialHidden, setEditSpecialHidden] = useState(false);
|
||||||
|
|
||||||
// News state
|
// News state
|
||||||
const [news, setNews] = useState<News[]>([]);
|
const [news, setNews] = useState<News[]>([]);
|
||||||
@@ -239,6 +244,25 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Validate JSON for unlock steps
|
||||||
|
const validateUnlockSteps = (value: string): string | null => {
|
||||||
|
if (!value.trim()) {
|
||||||
|
return t('unlockStepsRequired');
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(value);
|
||||||
|
if (!Array.isArray(parsed)) {
|
||||||
|
return t('unlockStepsMustBeArray');
|
||||||
|
}
|
||||||
|
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
|
||||||
|
return t('unlockStepsMustBePositiveNumbers');
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch (e) {
|
||||||
|
return t('unlockStepsInvalidJson');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
localStorage.removeItem('hoerdle_admin_auth');
|
localStorage.removeItem('hoerdle_admin_auth');
|
||||||
setIsAuthenticated(false);
|
setIsAuthenticated(false);
|
||||||
@@ -352,6 +376,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
const handleCreateSpecial = async (e: React.FormEvent) => {
|
const handleCreateSpecial = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
|
if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
|
||||||
|
|
||||||
|
// Validate unlock steps
|
||||||
|
const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
|
||||||
|
if (unlockStepsError) {
|
||||||
|
setNewSpecialUnlockStepsError(unlockStepsError);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setNewSpecialUnlockStepsError(null);
|
||||||
|
|
||||||
const res = await fetch('/api/specials', {
|
const res = await fetch('/api/specials', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: getAuthHeaders(),
|
headers: getAuthHeaders(),
|
||||||
@@ -363,6 +396,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
launchDate: newSpecialLaunchDate || null,
|
launchDate: newSpecialLaunchDate || null,
|
||||||
endDate: newSpecialEndDate || null,
|
endDate: newSpecialEndDate || null,
|
||||||
curator: newSpecialCurator || null,
|
curator: newSpecialCurator || null,
|
||||||
|
hidden: newSpecialHidden,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
@@ -370,12 +404,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
setNewSpecialSubtitle({ de: '', en: '' });
|
setNewSpecialSubtitle({ de: '', en: '' });
|
||||||
setNewSpecialMaxAttempts(7);
|
setNewSpecialMaxAttempts(7);
|
||||||
setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
|
setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
|
||||||
|
setNewSpecialUnlockStepsError(null);
|
||||||
setNewSpecialLaunchDate('');
|
setNewSpecialLaunchDate('');
|
||||||
setNewSpecialEndDate('');
|
setNewSpecialEndDate('');
|
||||||
setNewSpecialCurator('');
|
setNewSpecialCurator('');
|
||||||
|
setNewSpecialHidden(false);
|
||||||
fetchSpecials();
|
fetchSpecials();
|
||||||
} else {
|
} else {
|
||||||
alert('Failed to create special');
|
const errorData = await res.json().catch(() => ({}));
|
||||||
|
alert(errorData.error || 'Failed to create special');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -455,13 +492,24 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
|
setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
|
||||||
setEditSpecialMaxAttempts(special.maxAttempts);
|
setEditSpecialMaxAttempts(special.maxAttempts);
|
||||||
setEditSpecialUnlockSteps(special.unlockSteps);
|
setEditSpecialUnlockSteps(special.unlockSteps);
|
||||||
|
setEditSpecialUnlockStepsError(null);
|
||||||
setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
|
setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
|
||||||
setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
|
setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
|
||||||
setEditSpecialCurator(special.curator || '');
|
setEditSpecialCurator(special.curator || '');
|
||||||
|
setEditSpecialHidden(special.hidden || false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveEditedSpecial = async () => {
|
const saveEditedSpecial = async () => {
|
||||||
if (editingSpecialId === null) return;
|
if (editingSpecialId === null) return;
|
||||||
|
|
||||||
|
// Validate unlock steps
|
||||||
|
const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
|
||||||
|
if (unlockStepsError) {
|
||||||
|
setEditSpecialUnlockStepsError(unlockStepsError);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setEditSpecialUnlockStepsError(null);
|
||||||
|
|
||||||
const res = await fetch('/api/specials', {
|
const res = await fetch('/api/specials', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: getAuthHeaders(),
|
headers: getAuthHeaders(),
|
||||||
@@ -474,13 +522,16 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
launchDate: editSpecialLaunchDate || null,
|
launchDate: editSpecialLaunchDate || null,
|
||||||
endDate: editSpecialEndDate || null,
|
endDate: editSpecialEndDate || null,
|
||||||
curator: editSpecialCurator || null,
|
curator: editSpecialCurator || null,
|
||||||
|
hidden: editSpecialHidden,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setEditingSpecialId(null);
|
setEditingSpecialId(null);
|
||||||
|
setEditSpecialUnlockStepsError(null);
|
||||||
fetchSpecials();
|
fetchSpecials();
|
||||||
} else {
|
} else {
|
||||||
alert('Failed to update special');
|
const errorData = await res.json().catch(() => ({}));
|
||||||
|
alert(errorData.error || 'Failed to update special');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1300,8 +1351,38 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
<input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
|
<input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
||||||
<input type="text" placeholder={t('unlockSteps')} value={newSpecialUnlockSteps} onChange={e => setNewSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
|
{t('unlockSteps')}
|
||||||
|
{newSpecialUnlockStepsError && (
|
||||||
|
<span
|
||||||
|
title={newSpecialUnlockStepsError}
|
||||||
|
style={{
|
||||||
|
color: '#ef4444',
|
||||||
|
cursor: 'help',
|
||||||
|
fontSize: '0.875rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
⚠️
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={t('unlockSteps')}
|
||||||
|
value={newSpecialUnlockSteps}
|
||||||
|
onChange={e => {
|
||||||
|
const value = e.target.value;
|
||||||
|
setNewSpecialUnlockSteps(value);
|
||||||
|
const error = validateUnlockSteps(value);
|
||||||
|
setNewSpecialUnlockStepsError(error);
|
||||||
|
}}
|
||||||
|
className="form-input"
|
||||||
|
title={newSpecialUnlockStepsError || undefined}
|
||||||
|
style={{
|
||||||
|
width: '200px',
|
||||||
|
borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
|
||||||
@@ -1315,7 +1396,30 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
|
||||||
<input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
|
<input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" className="btn-primary" style={{ height: '38px' }}>{t('addSpecial')}</button>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
|
||||||
|
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={newSpecialHidden}
|
||||||
|
onChange={e => setNewSpecialHidden(e.target.checked)}
|
||||||
|
style={{ width: '1rem', height: '1rem' }}
|
||||||
|
/>
|
||||||
|
Hidden
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn-primary"
|
||||||
|
style={{
|
||||||
|
height: '38px',
|
||||||
|
opacity: newSpecialUnlockStepsError ? 0.5 : 1,
|
||||||
|
cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
|
||||||
|
}}
|
||||||
|
disabled={!!newSpecialUnlockStepsError}
|
||||||
|
>
|
||||||
|
{t('addSpecial')}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
|
||||||
@@ -1333,7 +1437,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
|
{special.hidden && <span title="Hidden from navigation">👁️🗨️</span>} {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
|
||||||
</span>
|
</span>
|
||||||
{special.subtitle && (
|
{special.subtitle && (
|
||||||
<span
|
<span
|
||||||
@@ -1379,8 +1483,37 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
<input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
|
<input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
||||||
<input type="text" value={editSpecialUnlockSteps} onChange={e => setEditSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
|
{t('unlockSteps')}
|
||||||
|
{editSpecialUnlockStepsError && (
|
||||||
|
<span
|
||||||
|
title={editSpecialUnlockStepsError}
|
||||||
|
style={{
|
||||||
|
color: '#ef4444',
|
||||||
|
cursor: 'help',
|
||||||
|
fontSize: '0.875rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
⚠️
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editSpecialUnlockSteps}
|
||||||
|
onChange={e => {
|
||||||
|
const value = e.target.value;
|
||||||
|
setEditSpecialUnlockSteps(value);
|
||||||
|
const error = validateUnlockSteps(value);
|
||||||
|
setEditSpecialUnlockStepsError(error);
|
||||||
|
}}
|
||||||
|
className="form-input"
|
||||||
|
title={editSpecialUnlockStepsError || undefined}
|
||||||
|
style={{
|
||||||
|
width: '200px',
|
||||||
|
borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
|
||||||
@@ -1394,7 +1527,30 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
|
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
|
||||||
<input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
|
<input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
|
||||||
</div>
|
</div>
|
||||||
<button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>{t('save')}</button>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
|
||||||
|
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={editSpecialHidden}
|
||||||
|
onChange={e => setEditSpecialHidden(e.target.checked)}
|
||||||
|
style={{ width: '1rem', height: '1rem' }}
|
||||||
|
/>
|
||||||
|
Hidden
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={saveEditedSpecial}
|
||||||
|
className="btn-primary"
|
||||||
|
style={{
|
||||||
|
height: '38px',
|
||||||
|
opacity: editSpecialUnlockStepsError ? 0.5 : 1,
|
||||||
|
cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
|
||||||
|
}}
|
||||||
|
disabled={!!editSpecialUnlockStepsError}
|
||||||
|
>
|
||||||
|
{t('save')}
|
||||||
|
</button>
|
||||||
<button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
|
<button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2172,6 +2328,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
<p style={{ marginBottom: '1rem', color: '#666' }}>
|
<p style={{ marginBottom: '1rem', color: '#666' }}>
|
||||||
These actions are destructive and cannot be undone.
|
These actions are destructive and cannot be undone.
|
||||||
</p>
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
||||||
<button
|
<button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
if (window.confirm('⚠️ WARNING: This will delete ALL data from the database (Songs, Genres, Specials, Puzzles) and re-import songs from the uploads folder.\n\nExisting genres and specials will be LOST and must be recreated manually.\n\nAre you sure you want to proceed?')) {
|
if (window.confirm('⚠️ WARNING: This will delete ALL data from the database (Songs, Genres, Specials, Puzzles) and re-import songs from the uploads folder.\n\nExisting genres and specials will be LOST and must be recreated manually.\n\nAre you sure you want to proceed?')) {
|
||||||
@@ -2205,7 +2362,83 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
☢️ Rebuild Database
|
☢️ Rebuild Database
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
if (window.confirm('⚠️ WARNING: This will reset ALL user ratings for all songs to 0.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
|
||||||
|
try {
|
||||||
|
setMessage('Resetting all ratings...');
|
||||||
|
const res = await fetch('/api/admin/reset-ratings', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getAuthHeaders()
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
alert(data.message);
|
||||||
|
fetchSongs();
|
||||||
|
setMessage('');
|
||||||
|
} else {
|
||||||
|
alert('Failed to reset ratings. Check server logs.');
|
||||||
|
setMessage('Reset failed.');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
alert('Reset failed due to network error.');
|
||||||
|
setMessage('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#f59e0b',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
🔄 Reset All User Ratings
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
if (window.confirm('⚠️ WARNING: This will delete ALL daily puzzles (activations) from the database.\n\nThis means all songs will show 0 activations.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
|
||||||
|
try {
|
||||||
|
setMessage('Resetting all activations...');
|
||||||
|
const res = await fetch('/api/admin/reset-activations', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getAuthHeaders()
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
alert(data.message);
|
||||||
|
fetchSongs();
|
||||||
|
fetchDailyPuzzles();
|
||||||
|
setMessage('');
|
||||||
|
} else {
|
||||||
|
alert('Failed to reset activations. Check server logs.');
|
||||||
|
setMessage('Reset failed.');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
alert('Reset failed due to network error.');
|
||||||
|
setMessage('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#f59e0b',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
🔄 Reset All Activations
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -43,7 +43,9 @@ export default async function Home({
|
|||||||
const genres = await prisma.genre.findMany({
|
const genres = await prisma.genre.findMany({
|
||||||
where: { active: true },
|
where: { active: true },
|
||||||
});
|
});
|
||||||
const specials = await prisma.special.findMany();
|
const specials = await prisma.special.findMany({
|
||||||
|
where: { hidden: false },
|
||||||
|
});
|
||||||
|
|
||||||
// Sort in memory
|
// Sort in memory
|
||||||
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
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)));
|
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
||||||
|
|
||||||
const activeSpecials = specials.filter(s => {
|
const activeSpecials = specials.filter(s => {
|
||||||
|
if (s.hidden) return false;
|
||||||
const sStarted = !s.launchDate || s.launchDate <= now;
|
const sStarted = !s.launchDate || s.launchDate <= now;
|
||||||
const sEnded = s.endDate && s.endDate < now;
|
const sEnded = s.endDate && s.endDate < now;
|
||||||
return sStarted && !sEnded;
|
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
@@ -1,81 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useParams, useRouter, usePathname } from 'next/navigation';
|
|
||||||
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
|
|
||||||
|
|
||||||
export default function SpecialEditorPage() {
|
|
||||||
const params = useParams();
|
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const specialId = params.id as string;
|
|
||||||
|
|
||||||
// Locale aus dem Pfad ableiten (/en/..., /de/...)
|
|
||||||
const localeFromPath = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
|
||||||
const locale: 'de' | 'en' = localeFromPath === 'de' || localeFromPath === 'en' ? localeFromPath : 'en';
|
|
||||||
|
|
||||||
const [special, setSpecial] = useState<CurateSpecial | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchSpecial = async () => {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/specials/${specialId}`);
|
|
||||||
if (res.ok) {
|
|
||||||
const data = await res.json();
|
|
||||||
setSpecial(data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching special:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchSpecial();
|
|
||||||
}, [specialId]);
|
|
||||||
|
|
||||||
const handleSaveStartTime = async (songId: number, startTime: number) => {
|
|
||||||
const res = await fetch(`/api/specials/${specialId}/songs`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ songId, startTime }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const errorText = await res.text().catch(() => res.statusText || 'Unknown error');
|
|
||||||
console.error('Error updating special song (admin):', res.status, errorText);
|
|
||||||
throw new Error(`Failed to save start time: ${errorText}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!special) {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
||||||
<p>Special not found</p>
|
|
||||||
<button onClick={() => router.push('/admin')}>Back to Admin</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CurateSpecialEditor
|
|
||||||
special={special}
|
|
||||||
locale={locale}
|
|
||||||
onBack={() => router.push('/admin')}
|
|
||||||
onSaveStartTime={handleSaveStartTime}
|
|
||||||
backLabel="← Back to Admin"
|
|
||||||
headerPrefix="Edit Special:"
|
|
||||||
noSongsSubHint="Go back to the admin dashboard to add songs to this special."
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
try {
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
const specialId = parseInt(id);
|
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({
|
const special = await prisma.special.update({
|
||||||
where: { id: specialId },
|
where: { id: specialId },
|
||||||
data: {
|
data: updateData
|
||||||
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,
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return NextResponse.json(special);
|
return NextResponse.json(special);
|
||||||
|
|||||||
@@ -35,11 +35,26 @@ export async function POST(request: Request) {
|
|||||||
const authError = await requireAdminAuth(request as any);
|
const authError = await requireAdminAuth(request as any);
|
||||||
if (authError) return authError;
|
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) {
|
if (!name) {
|
||||||
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
|
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate unlockSteps JSON
|
||||||
|
if (unlockSteps) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(unlockSteps);
|
||||||
|
if (!Array.isArray(parsed)) {
|
||||||
|
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
|
||||||
|
}
|
||||||
|
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
|
||||||
|
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Ensure name is stored as JSON
|
// Ensure name is stored as JSON
|
||||||
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
|
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
|
||||||
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
|
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
|
||||||
@@ -53,6 +68,7 @@ export async function POST(request: Request) {
|
|||||||
launchDate: launchDate ? new Date(launchDate) : null,
|
launchDate: launchDate ? new Date(launchDate) : null,
|
||||||
endDate: endDate ? new Date(endDate) : null,
|
endDate: endDate ? new Date(endDate) : null,
|
||||||
curator: curator || null,
|
curator: curator || null,
|
||||||
|
hidden: Boolean(hidden),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return NextResponse.json(special);
|
return NextResponse.json(special);
|
||||||
@@ -76,11 +92,26 @@ export async function PUT(request: Request) {
|
|||||||
const authError = await requireAdminAuth(request as any);
|
const authError = await requireAdminAuth(request as any);
|
||||||
if (authError) return authError;
|
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) {
|
if (!id) {
|
||||||
return NextResponse.json({ error: 'ID required' }, { status: 400 });
|
return NextResponse.json({ error: 'ID required' }, { status: 400 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate unlockSteps JSON if provided
|
||||||
|
if (unlockSteps !== undefined) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(unlockSteps);
|
||||||
|
if (!Array.isArray(parsed)) {
|
||||||
|
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
|
||||||
|
}
|
||||||
|
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
|
||||||
|
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const updateData: any = {};
|
const updateData: any = {};
|
||||||
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
|
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
|
||||||
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
|
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
|
||||||
@@ -89,6 +120,7 @@ export async function PUT(request: Request) {
|
|||||||
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
|
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
|
||||||
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
|
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
|
||||||
if (curator !== undefined) updateData.curator = curator || null;
|
if (curator !== undefined) updateData.curator = curator || null;
|
||||||
|
if (hidden !== undefined) updateData.hidden = Boolean(hidden);
|
||||||
|
|
||||||
const updated = await prisma.special.update({
|
const updated = await prisma.special.update({
|
||||||
where: { id: Number(id) },
|
where: { id: Number(id) },
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,171 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useTranslations, useLocale } from 'next-intl';
|
|
||||||
import { Link } from '@/lib/navigation';
|
|
||||||
|
|
||||||
export default function CuratorHelpClient() {
|
|
||||||
const t = useTranslations('CuratorHelp');
|
|
||||||
const locale = useLocale();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
|
||||||
<header style={{ marginBottom: '2rem' }}>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
||||||
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>{t('title')}</h1>
|
|
||||||
<Link
|
|
||||||
href="/curator"
|
|
||||||
style={{
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
background: '#6b7280',
|
|
||||||
color: 'white',
|
|
||||||
textDecoration: 'none',
|
|
||||||
borderRadius: '0.375rem',
|
|
||||||
fontSize: '0.9rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToDashboard')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
|
||||||
{/* Einführung */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('introductionTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
|
|
||||||
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
|
|
||||||
</ul>
|
|
||||||
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
|
||||||
<strong>{t('note')}:</strong> {t('permissionNote')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Song-Upload */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('uploadTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
|
|
||||||
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
|
|
||||||
</ol>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
|
|
||||||
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
|
|
||||||
</ul>
|
|
||||||
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
|
|
||||||
<strong>{t('tip')}:</strong> {t('uploadTip')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Song-Bearbeitung */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('editingTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
|
|
||||||
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
|
|
||||||
</ul>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Specials kuratieren */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('curateSpecialsHelpTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
|
|
||||||
{t('curateSpecialsHelpStepsTitle')}
|
|
||||||
</h3>
|
|
||||||
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
|
|
||||||
</ol>
|
|
||||||
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
|
||||||
<strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Kommentar-Verwaltung */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('commentsTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
|
|
||||||
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Best Practices */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('bestPracticesTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
||||||
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
|
|
||||||
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
|
|
||||||
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
|
|
||||||
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
|
|
||||||
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Troubleshooting */}
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
||||||
{t('troubleshootingTitle')}
|
|
||||||
</h2>
|
|
||||||
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
|
|
||||||
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
|
|
||||||
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
import CuratorHelpClient from './CuratorHelpClient';
|
|
||||||
|
|
||||||
export default function CuratorHelpPage() {
|
|
||||||
return <CuratorHelpClient />;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
// Server-Wrapper für die Kuratoren-Seite.
|
|
||||||
// Markiert die Route als dynamisch und rendert die eigentliche Client-Komponente.
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
import CuratorPageClient from './CuratorPageClient';
|
|
||||||
|
|
||||||
export default function CuratorPage() {
|
|
||||||
return <CuratorPageClient />;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useRouter, usePathname } from 'next/navigation';
|
|
||||||
import { useLocale, useTranslations } from 'next-intl';
|
|
||||||
import { Link } from '@/lib/navigation';
|
|
||||||
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
|
|
||||||
import { getLocalizedValue } from '@/lib/i18n';
|
|
||||||
|
|
||||||
interface CuratorSpecial {
|
|
||||||
id: number;
|
|
||||||
name: string | { de?: string; en?: string };
|
|
||||||
songCount: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CuratorSpecialsClient() {
|
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
|
||||||
const intlLocale = useLocale() as 'de' | 'en';
|
|
||||||
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
|
|
||||||
const t = useTranslations('Curator');
|
|
||||||
|
|
||||||
const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchSpecials = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const res = await fetch('/api/curator/specials', {
|
|
||||||
headers: getCuratorAuthHeaders(),
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
if (res.status === 403) {
|
|
||||||
setError(t('specialForbidden'));
|
|
||||||
} else {
|
|
||||||
setError('Failed to load specials');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = await res.json();
|
|
||||||
setSpecials(data);
|
|
||||||
} catch (e) {
|
|
||||||
setError('Failed to load specials');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchSpecials();
|
|
||||||
}, [t]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
|
||||||
<p>{t('loading')}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
|
||||||
<p style={{ color: 'red' }}>{error}</p>
|
|
||||||
<Link
|
|
||||||
href="/curator"
|
|
||||||
style={{
|
|
||||||
display: 'inline-block',
|
|
||||||
marginTop: '1rem',
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
background: '#6b7280',
|
|
||||||
color: 'white',
|
|
||||||
textDecoration: 'none',
|
|
||||||
borderRadius: '0.375rem',
|
|
||||||
fontSize: '0.9rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToDashboard') || 'Back to Dashboard'}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
|
||||||
<header style={{ marginBottom: '2rem' }}>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
||||||
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
|
|
||||||
{t('curateSpecialsTitle') || 'Curate Specials'}
|
|
||||||
</h1>
|
|
||||||
<Link
|
|
||||||
href="/curator"
|
|
||||||
style={{
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
background: '#6b7280',
|
|
||||||
color: 'white',
|
|
||||||
textDecoration: 'none',
|
|
||||||
borderRadius: '0.375rem',
|
|
||||||
fontSize: '0.9rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToDashboard') || 'Back to Dashboard'}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{specials.length === 0 ? (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
|
|
||||||
<p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
||||||
{specials.map((special) => (
|
|
||||||
<Link
|
|
||||||
key={special.id}
|
|
||||||
href={`/curator/specials/${special.id}`}
|
|
||||||
style={{
|
|
||||||
display: 'block',
|
|
||||||
padding: '1.5rem',
|
|
||||||
background: '#f9fafb',
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '0.5rem',
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: 'inherit',
|
|
||||||
transition: 'all 0.2s',
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => {
|
|
||||||
e.currentTarget.style.background = '#f3f4f6';
|
|
||||||
e.currentTarget.style.borderColor = '#d1d5db';
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.background = '#f9fafb';
|
|
||||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
||||||
<div>
|
|
||||||
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
|
|
||||||
{getLocalizedValue(special.name, locale)}
|
|
||||||
</h2>
|
|
||||||
<p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
|
|
||||||
{special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: '1.5rem', color: '#10b981' }}>→</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,170 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useParams, useRouter, usePathname } from 'next/navigation';
|
|
||||||
import { useLocale, useTranslations } from 'next-intl';
|
|
||||||
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
|
|
||||||
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
|
|
||||||
import HelpTooltip from '@/components/HelpTooltip';
|
|
||||||
|
|
||||||
export default function CuratorSpecialEditorPage() {
|
|
||||||
const params = useParams();
|
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
|
||||||
const intlLocale = useLocale() as 'de' | 'en';
|
|
||||||
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
|
|
||||||
const t = useTranslations('Curator');
|
|
||||||
const tHelp = useTranslations('CuratorHelp');
|
|
||||||
|
|
||||||
const specialId = params?.id as string;
|
|
||||||
|
|
||||||
const [special, setSpecial] = useState<CurateSpecial | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchSpecial = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const res = await fetch(`/api/curator/specials/${specialId}`, {
|
|
||||||
headers: getCuratorAuthHeaders(),
|
|
||||||
});
|
|
||||||
if (res.status === 403) {
|
|
||||||
setError(t('specialForbidden'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!res.ok) {
|
|
||||||
setError('Failed to load special');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = await res.json();
|
|
||||||
setSpecial(data);
|
|
||||||
} catch (e) {
|
|
||||||
setError('Failed to load special');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (specialId) {
|
|
||||||
fetchSpecial();
|
|
||||||
}
|
|
||||||
}, [specialId, t]);
|
|
||||||
|
|
||||||
const handleSaveStartTime = async (songId: number, startTime: number) => {
|
|
||||||
const res = await fetch(`/api/curator/specials/${specialId}/songs`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: {
|
|
||||||
...getCuratorAuthHeaders(),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ songId, startTime }),
|
|
||||||
});
|
|
||||||
if (res.status === 403) {
|
|
||||||
setError(t('specialForbidden'));
|
|
||||||
} else if (!res.ok) {
|
|
||||||
setError('Failed to save changes');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
||||||
<p>{t('loadingData')}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
||||||
<p>{error}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push(`/${locale}/curator`)}
|
|
||||||
style={{
|
|
||||||
marginTop: '1rem',
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
borderRadius: '0.5rem',
|
|
||||||
border: 'none',
|
|
||||||
background: '#e5e7eb',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToDashboard')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!special) {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
||||||
<p>{t('specialNotFound')}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push(`/${locale}/curator`)}
|
|
||||||
style={{
|
|
||||||
marginTop: '1rem',
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
borderRadius: '0.5rem',
|
|
||||||
border: 'none',
|
|
||||||
background: '#e5e7eb',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToDashboard')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
||||||
<h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
|
|
||||||
{t('curateSpecialHeaderPrefix')}
|
|
||||||
</h1>
|
|
||||||
<HelpTooltip
|
|
||||||
shortText={tHelp('tooltipCurateSpecialEditorShort')}
|
|
||||||
longText={tHelp('tooltipCurateSpecialEditorLong')}
|
|
||||||
position="bottom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => router.push(`/${locale}/curator/specials`)}
|
|
||||||
style={{
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
background: '#e5e7eb',
|
|
||||||
borderRadius: '0.5rem',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '0.9rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('backToCuratorSpecials')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CurateSpecialEditor
|
|
||||||
special={special}
|
|
||||||
locale={locale}
|
|
||||||
onBack={() => router.push(`/${locale}/curator/specials`)}
|
|
||||||
onSaveStartTime={handleSaveStartTime}
|
|
||||||
backLabel={t('backToCuratorSpecials')}
|
|
||||||
headerPrefix={t('curateSpecialHeaderPrefix')}
|
|
||||||
noSongsHint={t('curateSpecialNoSongs')}
|
|
||||||
noSongsSubHint={t('curateSpecialNoSongsSub')}
|
|
||||||
instructionsText={t('curateSpecialInstructions')}
|
|
||||||
savingLabel={t('saving')}
|
|
||||||
saveChangesLabel={t('saveChanges')}
|
|
||||||
savedLabel={t('saved')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
// Root /curator/specials route without locale:
|
|
||||||
// redirect users to the default English locale version.
|
|
||||||
|
|
||||||
import { redirect } from 'next/navigation';
|
|
||||||
|
|
||||||
export default function CuratorSpecialsPage() {
|
|
||||||
redirect('/en/curator/specials');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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 (
|
return (
|
||||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
<div style={{ marginBottom: '2rem' }}>
|
<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' }}>
|
<h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
|
||||||
{headerPrefix} {specialName}
|
{headerPrefix} {specialName}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@@ -12,10 +12,14 @@ interface WaveformEditorProps {
|
|||||||
|
|
||||||
export default function WaveformEditor({ audioUrl, startTime, duration, unlockSteps, onStartTimeChange }: WaveformEditorProps) {
|
export default function WaveformEditor({ audioUrl, startTime, duration, unlockSteps, onStartTimeChange }: WaveformEditorProps) {
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
const timelineRef = useRef<HTMLCanvasElement>(null);
|
||||||
const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
|
const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
|
||||||
const [audioDuration, setAudioDuration] = useState(0);
|
const [audioDuration, setAudioDuration] = useState(0);
|
||||||
const [isPlaying, setIsPlaying] = useState(false);
|
const [isPlaying, setIsPlaying] = useState(false);
|
||||||
const [playingSegment, setPlayingSegment] = useState<number | null>(null);
|
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 [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
|
||||||
const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
|
const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
|
||||||
const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
|
const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
|
||||||
@@ -55,6 +59,80 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
};
|
};
|
||||||
}, [audioUrl]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
if (!audioBuffer || !canvasRef.current) return;
|
if (!audioBuffer || !canvasRef.current) return;
|
||||||
|
|
||||||
@@ -133,6 +211,24 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
|
|
||||||
cumulativeTime = step;
|
cumulativeTime = step;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Draw end marker for the last segment (at startTime + duration)
|
||||||
|
const endTime = startTime + duration;
|
||||||
|
const endPx = ((endTime - visibleStart) / visibleDuration) * width;
|
||||||
|
if (endPx >= 0 && endPx <= width) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(endPx, 0);
|
||||||
|
ctx.lineTo(endPx, height);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Draw "End" label
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
ctx.fillStyle = '#ef4444';
|
||||||
|
ctx.font = 'bold 12px sans-serif';
|
||||||
|
ctx.fillText('End', endPx + 3, 15);
|
||||||
|
ctx.setLineDash([5, 5]);
|
||||||
|
}
|
||||||
|
|
||||||
ctx.setLineDash([]);
|
ctx.setLineDash([]);
|
||||||
|
|
||||||
// Draw hover preview (semi-transparent)
|
// Draw hover preview (semi-transparent)
|
||||||
@@ -215,11 +311,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
setHoverPreviewTime(null);
|
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();
|
sourceRef.current?.stop();
|
||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
setPlayingSegment(null);
|
setPlayingSegment(null);
|
||||||
setPlaybackPosition(null);
|
setIsPlayingFullTitle(false);
|
||||||
if (animationFrameRef.current) {
|
if (animationFrameRef.current) {
|
||||||
cancelAnimationFrame(animationFrameRef.current);
|
cancelAnimationFrame(animationFrameRef.current);
|
||||||
animationFrameRef.current = null;
|
animationFrameRef.current = null;
|
||||||
@@ -287,30 +393,119 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
const handlePlayFull = () => {
|
const handlePlayFull = () => {
|
||||||
if (!audioBuffer || !audioContextRef.current) return;
|
if (!audioBuffer || !audioContextRef.current) return;
|
||||||
|
|
||||||
if (isPlaying) {
|
// If full selection playback is already playing, pause it
|
||||||
|
if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
|
||||||
|
stopPlayback(true); // Save position
|
||||||
|
setPausedType('selection');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stop any current playback (segment, full selection, or full title)
|
||||||
stopPlayback();
|
stopPlayback();
|
||||||
} else {
|
|
||||||
|
// 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();
|
const source = audioContextRef.current.createBufferSource();
|
||||||
source.buffer = audioBuffer;
|
source.buffer = audioBuffer;
|
||||||
source.connect(audioContextRef.current.destination);
|
source.connect(audioContextRef.current.destination);
|
||||||
|
|
||||||
playbackStartTimeRef.current = audioContextRef.current.currentTime;
|
playbackStartTimeRef.current = audioContextRef.current.currentTime;
|
||||||
playbackOffsetRef.current = startTime;
|
playbackOffsetRef.current = resumePosition;
|
||||||
|
|
||||||
source.start(0, startTime, duration);
|
source.start(0, resumePosition, remainingDuration);
|
||||||
sourceRef.current = source;
|
sourceRef.current = source;
|
||||||
setIsPlaying(true);
|
setIsPlaying(true);
|
||||||
setPlaybackPosition(startTime);
|
setPlayingSegment(null);
|
||||||
|
setIsPlayingFullTitle(false);
|
||||||
|
setPausedPosition(null);
|
||||||
|
setPausedType(null);
|
||||||
|
setPlaybackPosition(resumePosition);
|
||||||
|
|
||||||
source.onended = () => {
|
source.onended = () => {
|
||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
|
setPlayingSegment(null);
|
||||||
|
setIsPlayingFullTitle(false);
|
||||||
setPlaybackPosition(null);
|
setPlaybackPosition(null);
|
||||||
|
setPausedPosition(null);
|
||||||
|
setPausedType(null);
|
||||||
if (animationFrameRef.current) {
|
if (animationFrameRef.current) {
|
||||||
cancelAnimationFrame(animationFrameRef.current);
|
cancelAnimationFrame(animationFrameRef.current);
|
||||||
animationFrameRef.current = null;
|
animationFrameRef.current = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePlayFullTitle = () => {
|
||||||
|
if (!audioBuffer || !audioContextRef.current) return;
|
||||||
|
|
||||||
|
// If full title playback is already playing, pause it
|
||||||
|
if (isPlaying && isPlayingFullTitle) {
|
||||||
|
stopPlayback(true); // Save position
|
||||||
|
setPausedType('title');
|
||||||
|
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 === '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 = resumePosition;
|
||||||
|
|
||||||
|
source.start(0, resumePosition, remainingDuration);
|
||||||
|
sourceRef.current = source;
|
||||||
|
setIsPlaying(true);
|
||||||
|
setPlayingSegment(null);
|
||||||
|
setIsPlayingFullTitle(true);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));
|
const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));
|
||||||
@@ -371,6 +566,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
<canvas
|
<canvas
|
||||||
ref={canvasRef}
|
ref={canvasRef}
|
||||||
width={800}
|
width={800}
|
||||||
@@ -383,9 +579,25 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
height: 'auto',
|
height: 'auto',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
border: '1px solid #e5e7eb',
|
border: '1px solid #e5e7eb',
|
||||||
borderRadius: '0.5rem'
|
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 */}
|
{/* Playback Controls */}
|
||||||
<div style={{ marginTop: '1rem', display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
<div style={{ marginTop: '1rem', display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||||
@@ -401,7 +613,29 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
|
|||||||
fontWeight: 'bold'
|
fontWeight: 'bold'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isPlaying && playingSegment === null ? '⏸ Pause' : '▶ Play Full Selection'}
|
{isPlaying && playingSegment === null && !isPlayingFullTitle
|
||||||
|
? '⏸ Pause'
|
||||||
|
: (pausedType === 'selection' && pausedPosition !== null
|
||||||
|
? '▶ Resume'
|
||||||
|
: '▶ Play Full Selection')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handlePlayFullTitle}
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#10b981',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isPlaying && isPlayingFullTitle
|
||||||
|
? '⏸ Pause'
|
||||||
|
: (pausedType === 'title' && pausedPosition !== null
|
||||||
|
? '▶ Resume'
|
||||||
|
: '▶ Play Full Title')}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div style={{ fontSize: '0.875rem', color: '#666' }}>
|
<div style={{ fontSize: '0.875rem', color: '#666' }}>
|
||||||
|
|||||||
@@ -149,6 +149,10 @@
|
|||||||
"subtitle": "Untertitel",
|
"subtitle": "Untertitel",
|
||||||
"maxAttempts": "Max. Versuche",
|
"maxAttempts": "Max. Versuche",
|
||||||
"unlockSteps": "Freischalt-Schritte",
|
"unlockSteps": "Freischalt-Schritte",
|
||||||
|
"unlockStepsRequired": "Freischalt-Schritte sind erforderlich",
|
||||||
|
"unlockStepsInvalidJson": "Ungültiges JSON-Format. Bitte verwende ein Array von Zahlen, z.B. [2,4,7,11,16,30,60]",
|
||||||
|
"unlockStepsMustBeArray": "Freischalt-Schritte müssen ein Array sein",
|
||||||
|
"unlockStepsMustBePositiveNumbers": "Alle Werte müssen positive Zahlen sein",
|
||||||
"launchDate": "Startdatum",
|
"launchDate": "Startdatum",
|
||||||
"endDate": "Enddatum",
|
"endDate": "Enddatum",
|
||||||
"curator": "Kurator",
|
"curator": "Kurator",
|
||||||
@@ -227,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",
|
||||||
|
|||||||
@@ -149,6 +149,10 @@
|
|||||||
"subtitle": "Subtitle",
|
"subtitle": "Subtitle",
|
||||||
"maxAttempts": "Max Attempts",
|
"maxAttempts": "Max Attempts",
|
||||||
"unlockSteps": "Unlock Steps",
|
"unlockSteps": "Unlock Steps",
|
||||||
|
"unlockStepsRequired": "Unlock steps are required",
|
||||||
|
"unlockStepsInvalidJson": "Invalid JSON format. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]",
|
||||||
|
"unlockStepsMustBeArray": "Unlock steps must be an array",
|
||||||
|
"unlockStepsMustBePositiveNumbers": "All values must be positive numbers",
|
||||||
"launchDate": "Launch Date",
|
"launchDate": "Launch Date",
|
||||||
"endDate": "End Date",
|
"endDate": "End Date",
|
||||||
"curator": "Curator",
|
"curator": "Curator",
|
||||||
@@ -227,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",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.16",
|
"version": "0.1.6.26",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
@@ -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?
|
launchDate DateTime?
|
||||||
endDate DateTime?
|
endDate DateTime?
|
||||||
curator String?
|
curator String?
|
||||||
|
hidden Boolean @default(false)
|
||||||
songs SpecialSong[]
|
songs SpecialSong[]
|
||||||
puzzles DailyPuzzle[]
|
puzzles DailyPuzzle[]
|
||||||
news News[]
|
news News[]
|
||||||
|
|||||||
Reference in New Issue
Block a user