jfork/octane-website
1
0
Fork 0
mirror of https://github.com/nfonteyne/octane-website.git synced 2026-09-03 23:24:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: listen setlist as youtube playlist

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-08 17:20:40 +02:00
parent 09b7b0bc10
commit 1b792eecfb
8 changed files with 65 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/js/history.js
View file

@ -32,10 +32,12 @@ function timelineSongRow(song) {
function timelineConcertBlock(concert) {
const main = concert.songs.filter((s) => !s.is_encore);
const encore = concert.songs.filter((s) => s.is_encore);
const playlistUrl = youtubePlaylistUrl(concert.songs.map((s) => s.youtube_url).filter(Boolean));
return `
<div class="card timeline-concert">
<div class="card-title">${escapeHtml(concert.name || 'Concert')}</div>
<div class="card-subtitle">${escapeHtml(concert.venue || '')} · ${formatDate(concert.concert_date)}</div>
${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" href="${playlistUrl}" target="_blank" rel="noopener">&#9658; Écouter la setlist sur YouTube</a></div>` : ''}
<div class="setlist-section">
<h3>Setlist</h3>

9
public/js/render.js
View file

@ -40,6 +40,15 @@ function youtubeThumbnailUrl(url) {
return videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : null;
}
// Builds a link that opens several videos back-to-back in YouTube's
// temporary "mix" player — no API call, no auth, just the video IDs we
// already have from each song's youtube_url. Returns null if none of the
// given URLs have a recognizable YouTube video ID.
function youtubePlaylistUrl(urls) {
const ids = urls.map(youtubeVideoId).filter(Boolean);
return ids.length ? `https://www.youtube.com/watch_videos?video_ids=${ids.join(',')}` : null;
}
function initials(name) {
return String(name || '?')
.trim()

17
public/js/repertoire.js
View file

@ -1,9 +1,16 @@
let me = null;
let instruments = [];
let songs = [];
let searchQuery = '';
const expanded = new Set();
const editing = new Set();
function matchesSearch(song, query) {
const q = query.trim().toLowerCase();
if (!q) return true;
return song.title.toLowerCase().includes(q) || song.artist.toLowerCase().includes(q);
}
async function loadInstruments() {
instruments = await api.get('/api/instruments');
}
@ -131,7 +138,11 @@ function tutorialCardTemplate(t) {
function renderSongs() {
const container = document.getElementById('songs-list');
renderList(container, songs, songCardTemplate, 'Aucun morceau au répertoire pour le moment.');
const visibleSongs = songs.filter((s) => matchesSearch(s, searchQuery));
const emptyMessage = searchQuery.trim()
? 'Aucun morceau ne correspond à la recherche.'
: 'Aucun morceau au répertoire pour le moment.';
renderList(container, visibleSongs, songCardTemplate, emptyMessage);
document.querySelectorAll('.toggle-tutorials').forEach((btn) => {
btn.addEventListener('click', () => onToggleTutorials(parseInt(btn.dataset.id, 10)));
@ -316,5 +327,9 @@ async function onSongCandidateSelected(candidate) {
dropdownId: 'song-title-dropdown',
onSelect: onSongCandidateSelected,
});
document.getElementById('song-search-input').addEventListener('input', (e) => {
searchQuery = e.target.value;
renderSongs();
});
await loadSongs();
})();

2
public/js/setlistEditor.js
View file

@ -32,10 +32,12 @@ function createSetlistEditor({
const main = setlist.songs.filter((s) => !s.is_encore);
const encore = setlist.songs.filter((s) => s.is_encore);
const rowHtml = (s) => `<li><span class="row-title">${escapeHtml(s.title)}</span> <span class="row-artist">— ${escapeHtml(s.artist)}</span>${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`;
const playlistUrl = youtubePlaylistUrl([...main, ...encore].map((s) => s.youtube_url).filter(Boolean));
return `
<div class="card">
<div class="card-title">${escapeHtml(setlist.name || 'Concert')}</div>
<div class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</div>
${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" href="${playlistUrl}" target="_blank" rel="noopener">&#9658; Écouter la setlist sur YouTube</a></div>` : ''}
</div>
<div class="setlist-section">
<h3>Setlist</h3>