Album: Englische Edition (7 Songs) + DE/EN-Umschalter im Album-Modal (v1301)
- 7 englische Suno-Pro-Songs als *-en.mp3 in static/sounds/ (MD5-geprüft, eigene Generierungen, alle != deutsche Tracks) - worlds.js _anthem: SONGS_DE/SONGS_EN, _lang-State (localStorage by_album_lang), DE/EN-Segmented-Control (_fillAlbum/_setLang), EN_READY=true, Modal-Chrome zweisprachig - components.css: .album-lang / .album-lang-btn - UX: DE bleibt Default, keine Auto-Vorwahl, User schaltet selbst, beides anhörbar, Wahl gemerkt - LIVE auf Prod + Staging v1301
This commit is contained in:
parent
6dc944eeb8
commit
aea489aa5a
14 changed files with 98 additions and 48 deletions
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '1300'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '1301'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
|
||||
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
|
||||
window.APP_VERSION = APP_VERSION;
|
||||
|
|
|
|||
|
|
@ -1941,7 +1941,11 @@ window.Worlds = (() => {
|
|||
// zentral in index.html → übersteht Re-Renders & Welt-Wechsel.
|
||||
const _anthem = (() => {
|
||||
const KEY = 'by_anthem_heard';
|
||||
const SONGS = [
|
||||
const LANG_KEY = 'by_album_lang';
|
||||
// EN-Album erst sichtbar, wenn die 7 *-en.mp3 in static/sounds/ liegen.
|
||||
// Aktivieren: Dateien ablegen → EN_READY = true → make bump → deploy.
|
||||
const EN_READY = true; // 2026-06-16: 7 *-en.mp3 liegen in static/sounds/
|
||||
const SONGS_DE = [
|
||||
{ title: 'Ban Yaro Blues', sub: 'Die Hymne', file: '/sounds/ban-yaro-blues.mp3?v=2' },
|
||||
{ title: 'Ban Yaro Mobil', sub: 'Erste Fahrt im Anhänger', file: '/sounds/ban-yaro-mobil.mp3' },
|
||||
{ title: 'Amy', sub: 'Eine Liebesromanze', file: '/sounds/amy.mp3' },
|
||||
|
|
@ -1950,6 +1954,19 @@ window.Worlds = (() => {
|
|||
{ title: 'Platsch!', sub: 'Ab ins kühle Nass', file: '/sounds/platsch.mp3' },
|
||||
{ title: 'Bester Freund', sub: 'Du und ich', file: '/sounds/bester-freund.mp3' },
|
||||
];
|
||||
const SONGS_EN = [
|
||||
{ title: 'Ban Yaro Blues', sub: 'The anthem', file: '/sounds/ban-yaro-blues-en.mp3' },
|
||||
{ title: 'Ban Yaro Mobile', sub: 'First ride in the trailer', file: '/sounds/ban-yaro-mobil-en.mp3' },
|
||||
{ title: 'Amy', sub: 'A love duet', file: '/sounds/amy-en.mp3' },
|
||||
{ title: "At the Groomer's", sub: 'Half the fur, all the energy', file: '/sounds/at-the-groomers-en.mp3' },
|
||||
{ title: 'Treat Paradise', sub: 'Full bowl, full heart', file: '/sounds/treat-paradise-en.mp3' },
|
||||
{ title: 'Splash!', sub: 'Into the cool water', file: '/sounds/splash-en.mp3' },
|
||||
{ title: 'Best Friend', sub: 'You and me', file: '/sounds/best-friend-en.mp3' },
|
||||
];
|
||||
let _lang = (() => {
|
||||
try { return (EN_READY && localStorage.getItem(LANG_KEY) === 'en') ? 'en' : 'de'; } catch (_) { return 'de'; }
|
||||
})();
|
||||
const _songs = () => (_lang === 'en' && EN_READY) ? SONGS_EN : SONGS_DE;
|
||||
let _bound = false, _curIdx = -1;
|
||||
const _audio = () => document.getElementById('anthem-audio');
|
||||
// Entdeckt? Server-Flag (geräteübergreifend, deploy-fest) ODER lokal (sofort/offline).
|
||||
|
|
@ -1988,17 +2005,18 @@ window.Worlds = (() => {
|
|||
a.addEventListener('play', _sync);
|
||||
a.addEventListener('pause', _sync);
|
||||
a.addEventListener('ended', () => { // automatisch zum nächsten Song
|
||||
if (_curIdx >= 0 && _curIdx < SONGS.length - 1) _play(_curIdx + 1);
|
||||
if (_curIdx >= 0 && _curIdx < _songs().length - 1) _play(_curIdx + 1);
|
||||
else { _curIdx = -1; _sync(); }
|
||||
});
|
||||
}
|
||||
|
||||
function _play(i) {
|
||||
const a = _audio();
|
||||
if (!a || !SONGS[i]) return;
|
||||
const songs = _songs();
|
||||
if (!a || !songs[i]) return;
|
||||
if (i === _curIdx && !a.paused) { a.pause(); return; } // aktiven Song pausieren
|
||||
_curIdx = i;
|
||||
a.src = SONGS[i].file;
|
||||
a.src = songs[i].file;
|
||||
a.play().catch(() => {});
|
||||
_markHeard();
|
||||
_sync();
|
||||
|
|
@ -2006,39 +2024,67 @@ window.Worlds = (() => {
|
|||
|
||||
function _closeAlbum() { document.getElementById('album-modal')?.remove(); }
|
||||
|
||||
// Sprache wechseln: aktuelle Wiedergabe stoppen (andere Datei) und Liste neu zeichnen.
|
||||
function _setLang(l) {
|
||||
if (l === _lang || !EN_READY) return;
|
||||
_lang = l;
|
||||
try { localStorage.setItem(LANG_KEY, l); } catch (_) {}
|
||||
const a = _audio(); if (a) a.pause();
|
||||
_curIdx = -1;
|
||||
_fillAlbum();
|
||||
_sync();
|
||||
}
|
||||
|
||||
// Inhalt des Sheets (neu) rendern + innere Controls binden — auch bei Sprachwechsel.
|
||||
function _fillAlbum() {
|
||||
const sheet = document.querySelector('#album-modal .album-sheet');
|
||||
if (!sheet) return;
|
||||
const songs = _songs();
|
||||
const en = _lang === 'en';
|
||||
sheet.innerHTML = `
|
||||
<div class="album-head">
|
||||
<div>
|
||||
<div class="album-title">${en ? 'Ban Yaro — The Album' : 'Ban Yaro — das Album'}</div>
|
||||
<div class="album-subtitle">${songs.length} ${en ? 'songs · homemade' : 'Songs · selbst gemacht'} 🎸</div>
|
||||
</div>
|
||||
<div class="album-head-actions">
|
||||
${EN_READY ? `
|
||||
<div class="album-lang" role="group" aria-label="Sprache / Language">
|
||||
<button class="album-lang-btn ${en ? '' : 'is-active'}" data-lang="de" type="button">DE</button>
|
||||
<button class="album-lang-btn ${en ? 'is-active' : ''}" data-lang="en" type="button">EN</button>
|
||||
</div>` : ''}
|
||||
<button class="album-close" aria-label="${en ? 'Close' : 'Schließen'}">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-list">
|
||||
${songs.map((s, i) => `
|
||||
<div class="album-song" data-i="${i}" role="button" tabindex="0">
|
||||
<span class="album-song-play"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#play"></use></svg></span>
|
||||
<span class="album-song-meta">
|
||||
<span class="album-song-title">${_esc(s.title)}</span>
|
||||
<span class="album-song-sub">${_esc(s.sub)}</span>
|
||||
</span>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
sheet.querySelector('.album-close').addEventListener('click', _closeAlbum);
|
||||
sheet.querySelectorAll('.album-lang-btn').forEach(b =>
|
||||
b.addEventListener('click', () => _setLang(b.dataset.lang)));
|
||||
sheet.querySelectorAll('.album-song').forEach(row => {
|
||||
const i = parseInt(row.dataset.i, 10);
|
||||
row.addEventListener('click', () => _play(i));
|
||||
row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _play(i); } });
|
||||
});
|
||||
}
|
||||
|
||||
function openAlbum() {
|
||||
_markHeard();
|
||||
if (document.getElementById('album-modal')) return;
|
||||
const ov = document.createElement('div');
|
||||
ov.id = 'album-modal';
|
||||
ov.innerHTML = `
|
||||
<div class="album-sheet">
|
||||
<div class="album-head">
|
||||
<div>
|
||||
<div class="album-title">Ban Yaro — das Album</div>
|
||||
<div class="album-subtitle">${SONGS.length} Songs · selbst gemacht 🎸</div>
|
||||
</div>
|
||||
<button class="album-close" aria-label="Schließen">×</button>
|
||||
</div>
|
||||
<div class="album-list">
|
||||
${SONGS.map((s, i) => `
|
||||
<div class="album-song" data-i="${i}" role="button" tabindex="0">
|
||||
<span class="album-song-play"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#play"></use></svg></span>
|
||||
<span class="album-song-meta">
|
||||
<span class="album-song-title">${_esc(s.title)}</span>
|
||||
<span class="album-song-sub">${_esc(s.sub)}</span>
|
||||
</span>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
ov.innerHTML = `<div class="album-sheet"></div>`;
|
||||
document.body.appendChild(ov);
|
||||
ov.addEventListener('click', e => { if (e.target === ov) _closeAlbum(); });
|
||||
ov.querySelector('.album-close').addEventListener('click', _closeAlbum);
|
||||
ov.querySelectorAll('.album-song').forEach(row => {
|
||||
const i = parseInt(row.dataset.i, 10);
|
||||
row.addEventListener('click', () => _play(i));
|
||||
row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _play(i); } });
|
||||
});
|
||||
_fillAlbum();
|
||||
_sync();
|
||||
}
|
||||
|
||||
|
|
@ -2061,7 +2107,7 @@ window.Worlds = (() => {
|
|||
updateButton();
|
||||
}
|
||||
|
||||
return { heard, toggle: openAlbum, updateButton, initWelt, count: SONGS.length };
|
||||
return { heard, toggle: openAlbum, updateButton, initWelt, count: SONGS_DE.length };
|
||||
})();
|
||||
|
||||
function _renderWelt() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue