// JahMah Admin Page var MEDIA_MANAGER_ID = 'BfNwcahy3DtD3oJva'; var YOUTUBE_API_KEY = 'AIzaSyBc6gP_yazGLgPfTi0_Gr3Og2dTVilFP3A'; var editingTrackId = null; var editingArtistId = null; var editingTrackCues = []; var fetchedYouTubeVideos = []; var selectedVideoIds = []; var tracksPagination = { page: 1, perPage: 15, total: 0, allTracks: [] }; function el(tag, className, text) { var element = document.createElement(tag); if (className) { element.className = className; } if (typeof text === 'string') { element.textContent = text; } return element; } function clearNode(node) { if (!node) return; while (node.firstChild) node.removeChild(node.firstChild); } function jahmahAdminNav(sectionId) { var navItems = document.querySelectorAll('.jm-admin-nav-item'); for (var i = 0; i < navItems.length; i++) { var item = navItems[i]; if (item.dataset.adminSection === sectionId) { item.classList.add('jm-admin-nav-item--active'); } else { item.classList.remove('jm-admin-nav-item--active'); } } var sections = document.querySelectorAll('.jm-admin-section'); for (var j = 0; j < sections.length; j++) { var section = sections[j]; if (section.dataset.adminContent === sectionId) { section.classList.remove('hidden'); } else { section.classList.add('hidden'); } } jahmahAdminCloseSidebar(); } function jahmahAdminToggleSidebar() { var sidebar = document.getElementById('admin-sidebar'); var overlay = document.querySelector('.jm-admin-sidebar-overlay'); if (sidebar && overlay) { sidebar.classList.toggle('jm-admin-sidebar--open'); overlay.classList.toggle('jm-admin-sidebar-overlay--visible'); } } function jahmahAdminCloseSidebar() { var sidebar = document.getElementById('admin-sidebar'); var overlay = document.querySelector('.jm-admin-sidebar-overlay'); if (sidebar && overlay) { sidebar.classList.remove('jm-admin-sidebar--open'); overlay.classList.remove('jm-admin-sidebar-overlay--visible'); } } var editingGenreId = null; function initAdminPage() { loadAdminTracks(); loadAdminArtists(); loadAdminGenres(); loadSuggestions(); } initAdminPage(); function loadSuggestions() { phoros.processor(MEDIA_MANAGER_ID, { type: 'listArtists' }, function(err, res) { if (!err && res && res.success && res.data.artists) { populateDatalist('artist-suggestions', res.data.artists.map(function(a) { return a.name; })); } }); phoros.processor(MEDIA_MANAGER_ID, { type: 'listGenres' }, function(err, res) { if (!err && res && res.success && res.data.genres) { populateDatalist('genre-suggestions', res.data.genres.map(function(g) { return g.name; })); } }); phoros.processor(MEDIA_MANAGER_ID, { type: 'list' }, function(err, res) { if (!err && res && res.success && res.data.media) { var allTags = []; res.data.media.forEach(function(m) { if (m.tag && m.tag.length > 0) { m.tag.forEach(function(t) { if (t && allTags.indexOf(t) === -1) allTags.push(t); }); } }); allTags.sort(); populateDatalist('tag-suggestions', allTags); } }); } function populateDatalist(id, values) { var dl = document.getElementById(id); if (!dl) return; while (dl.firstChild) dl.removeChild(dl.firstChild); values.forEach(function(v) { if (v) { var opt = document.createElement('option'); opt.value = v; dl.appendChild(opt); } }); } function showAdminEmptyState(tbody, message, colspan) { clearNode(tbody); var row = el('tr'); var cell = el('td'); cell.setAttribute('colspan', colspan || '5'); var wrapper = el('div', 'empty-state'); var text = el('p', 'empty-state-text', message); wrapper.appendChild(text); cell.appendChild(wrapper); row.appendChild(cell); tbody.appendChild(row); } function loadAdminTracks() { phoros.processor(MEDIA_MANAGER_ID, { type: 'list' }, function(err, res) { var c = document.getElementById('admin-tracks-tbody'); if (!c) return; if (err || !res || !res.success || !res.data.media || res.data.media.length === 0) { showAdminEmptyState(c, 'No tracks yet. Add your first track above!', '5'); return; } tracksPagination.allTracks = res.data.media; tracksPagination.total = res.data.media.length; tracksPagination.page = 1; renderPaginatedTracks(); }); } function renderPaginatedTracks() { var start = (tracksPagination.page - 1) * tracksPagination.perPage; var end = start + tracksPagination.perPage; var pageTracks = tracksPagination.allTracks.slice(start, end); renderAdminTracks(pageTracks); renderTracksPagination(); } function renderTracksPagination() { var container = document.getElementById('tracks-pagination'); if (!container) return; clearNode(container); var total = tracksPagination.total; var perPage = tracksPagination.perPage; var currentPage = tracksPagination.page; var totalPages = Math.ceil(total / perPage); if (totalPages <= 1) { container.style.display = 'none'; return; } container.style.display = 'flex'; var info = el('div', 'jm-admin-pagination-info'); var startItem = (currentPage - 1) * perPage + 1; var endItem = Math.min(currentPage * perPage, total); info.textContent = 'Showing ' + startItem + '-' + endItem + ' of ' + total + ' tracks'; container.appendChild(info); var controls = el('div', 'jm-admin-pagination-controls'); var prevBtn = el('button', 'jm-admin-pagination-btn', '← Prev'); prevBtn.disabled = currentPage <= 1; prevBtn.onclick = function() { if (tracksPagination.page > 1) { tracksPagination.page--; renderPaginatedTracks(); } }; controls.appendChild(prevBtn); var pages = el('div', 'jm-admin-pagination-pages'); for (var i = 1; i <= totalPages; i++) { if (totalPages > 7 && i > 2 && i < totalPages - 1 && Math.abs(i - currentPage) > 1) { if (i === 3 || i === totalPages - 2) { var dots = el('span', 'jm-admin-pagination-page', '...'); dots.style.cursor = 'default'; pages.appendChild(dots); } continue; } var pageBtn = el('button', 'jm-admin-pagination-page', String(i)); if (i === currentPage) pageBtn.classList.add('active'); (function(pageNum) { pageBtn.onclick = function() { tracksPagination.page = pageNum; renderPaginatedTracks(); }; })(i); pages.appendChild(pageBtn); } controls.appendChild(pages); var nextBtn = el('button', 'jm-admin-pagination-btn', 'Next →'); nextBtn.disabled = currentPage >= totalPages; nextBtn.onclick = function() { if (tracksPagination.page < totalPages) { tracksPagination.page++; renderPaginatedTracks(); } }; controls.appendChild(nextBtn); container.appendChild(controls); } function renderAdminTracks(tracks) { var tbody = document.getElementById('admin-tracks-tbody'); if (!tbody) return; clearNode(tbody); tracks.forEach(function(t) { var row = el('tr'); var defaultImg = t.sourceType === 'youtube' && t.youtubeId ? 'https://img.youtube.com/vi/' + t.youtubeId + '/mqdefault.jpg' : 'https://via.placeholder.com/48?text=♪'; var trackCell = el('td'); var titleDiv = el('div', 'jm-admin-table-title'); var img = document.createElement('img'); img.className = 'jm-admin-table-thumb'; img.src = t.imageUrl || defaultImg; img.alt = t.name || 'Track'; img.onerror = function() { this.src = 'https://via.placeholder.com/48?text=♪'; }; titleDiv.appendChild(img); var infoDiv = el('div'); var trackName = el('div'); trackName.textContent = t.name || 'Unknown Track'; infoDiv.appendChild(trackName); titleDiv.appendChild(infoDiv); trackCell.appendChild(titleDiv); row.appendChild(trackCell); var artistCell = el('td', '', t.artist && t.artist.length > 0 ? t.artist.join(', ') : 'Unknown Artist'); row.appendChild(artistCell); var sourceCell = el('td'); if (t.sourceType === 'youtube') { var ytBadge = el('span', 'status-badge youtube', 'YouTube'); sourceCell.appendChild(ytBadge); } else { sourceCell.textContent = 'MP3'; } row.appendChild(sourceCell); var statusCell = el('td'); var statusDiv = el('div'); statusDiv.style.display = 'flex'; statusDiv.style.gap = '8px'; if (t.published) { var pubBadge = el('span', 'status-badge published', 'Published'); statusDiv.appendChild(pubBadge); } if (t.promoted) { var featBadge = el('span', 'status-badge featured', 'Featured'); statusDiv.appendChild(featBadge); } statusCell.appendChild(statusDiv); row.appendChild(statusCell); var actionsCell = el('td'); var actionsDiv = el('div', 'jm-admin-actions'); var playBtn = document.createElement('button'); playBtn.setAttribute('onclick', 'handlePlayTrack("' + t._id + '")'); playBtn.setAttribute('title', 'Play'); var playSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); playSvg.setAttribute('width', '16'); playSvg.setAttribute('height', '16'); playSvg.setAttribute('viewBox', '0 0 24 24'); playSvg.setAttribute('fill', 'currentColor'); var playPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); playPath.setAttribute('d', 'M8 5v14l11-7z'); playSvg.appendChild(playPath); playBtn.appendChild(playSvg); actionsDiv.appendChild(playBtn); var editBtn = document.createElement('button'); editBtn.setAttribute('onclick', 'handleEditTrack("' + t._id + '")'); editBtn.setAttribute('title', 'Edit'); var editSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); editSvg.setAttribute('width', '16'); editSvg.setAttribute('height', '16'); editSvg.setAttribute('viewBox', '0 0 24 24'); editSvg.setAttribute('fill', 'currentColor'); var editPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); editPath.setAttribute('d', 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'); editSvg.appendChild(editPath); editBtn.appendChild(editSvg); actionsDiv.appendChild(editBtn); var delBtn = document.createElement('button'); delBtn.setAttribute('onclick', 'handleDeleteTrack("' + t._id + '")'); delBtn.setAttribute('title', 'Delete'); var delSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); delSvg.setAttribute('width', '16'); delSvg.setAttribute('height', '16'); delSvg.setAttribute('viewBox', '0 0 24 24'); delSvg.setAttribute('fill', 'currentColor'); var delPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); delPath.setAttribute('d', 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'); delSvg.appendChild(delPath); delBtn.appendChild(delSvg); actionsDiv.appendChild(delBtn); actionsCell.appendChild(actionsDiv); row.appendChild(actionsCell); tbody.appendChild(row); }); } function showAddTrackForm() { editingTrackId = null; editingTrackCues = []; var titleEl = document.querySelector('#add-track-modal .modal-header h2'); if (titleEl) titleEl.textContent = 'Add New Track'; var submitBtn = document.querySelector('#add-track-form button.primary[type="submit"]'); if (submitBtn) submitBtn.textContent = 'Add Track'; document.getElementById('add-track-modal').style.display = 'flex'; document.getElementById('track-source-type').value = 'youtube'; handleSourceTypeChange(document.getElementById('track-source-type')); hideCueEditor(); } function hideAddTrackForm() { editingTrackId = null; editingTrackCues = []; document.getElementById('add-track-modal').style.display = 'none'; document.getElementById('add-track-form').reset(); document.getElementById('mp3-source-fields').style.display = 'none'; document.getElementById('youtube-source-fields').style.display = 'block'; hideCueEditor(); } function handleEditTrack(id) { phoros.processor(MEDIA_MANAGER_ID, { type: 'detail', mediaId: id }, function(err, res) { if (err || !res || !res.success || !res.data.media) { alert('Failed to load track'); return; } var t = res.data.media; editingTrackId = t._id; document.getElementById('add-track-modal').style.display = 'flex'; var titleEl = document.querySelector('#add-track-modal .modal-header h2'); if (titleEl) titleEl.textContent = 'Edit Track'; var submitBtn = document.querySelector('#add-track-form button.primary[type="submit"]'); if (submitBtn) submitBtn.textContent = 'Save Changes'; var form = document.getElementById('add-track-form'); if (form) { var nameEl = form.querySelector('#track-name'); if (nameEl) nameEl.value = t.name || ''; var artistEl = form.querySelector('#track-artist'); if (artistEl) artistEl.value = (t.artist || []).join(', '); var genreEl = form.querySelector('#track-genre'); if (genreEl) genreEl.value = (t.genre || []).join(', '); var sourceTypeEl = form.querySelector('#track-source-type'); if (sourceTypeEl) { sourceTypeEl.value = t.sourceType || 'youtube'; handleSourceTypeChange(sourceTypeEl); } var youtubeUrlEl = form.querySelector('#track-youtube-url'); if (youtubeUrlEl) youtubeUrlEl.value = (t.sourceType === 'youtube' && t.youtubeId) ? t.youtubeId : ''; var audioUrlEl = form.querySelector('#track-audio-url'); if (audioUrlEl) audioUrlEl.value = t.audioFileUrl || ''; var imageUrlEl = form.querySelector('#track-image-url'); if (imageUrlEl) imageUrlEl.value = t.imageUrl || ''; var tagsEl = form.querySelector('#track-tags'); if (tagsEl) tagsEl.value = (t.tag || []).join(', '); var publishedEl = form.querySelector('#track-published'); if (publishedEl) publishedEl.checked = t.published || false; var promotedEl = form.querySelector('#track-promoted'); if (promotedEl) promotedEl.checked = t.promoted || false; } editingTrackCues = (t.cue || []).map(function(c) { return { type: c.type || 'fadeout', position: c.position || 0 }; }); showCueEditor(); }); } function handleSourceTypeChange(el) { var sourceType = el.value; document.getElementById('mp3-source-fields').style.display = sourceType === 'mp3' ? 'block' : 'none'; document.getElementById('youtube-source-fields').style.display = sourceType === 'youtube' ? 'block' : 'none'; } function extractYouTubeId(input) { if (!input) return null; input = input.trim(); var patterns = [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([a-zA-Z0-9_-]{11})/, /^([a-zA-Z0-9_-]{11})$/]; for (var i = 0; i < patterns.length; i++) { var match = input.match(patterns[i]); if (match) return match[1]; } return null; } function handleAddTrack(event) { event.preventDefault(); var person = phoros.person(true); if (!person) return false; var form = document.getElementById('add-track-form'); if (!form) return false; var name = (form.querySelector('#track-name') || {}).value || ''; name = name.trim(); var artistStr = (form.querySelector('#track-artist') || {}).value || ''; artistStr = artistStr.trim(); var genreStr = (form.querySelector('#track-genre') || {}).value || ''; genreStr = genreStr.trim(); var sourceTypeEl = form.querySelector('#track-source-type'); var sourceType = sourceTypeEl ? sourceTypeEl.value : 'mp3'; var audioUrlEl = form.querySelector('#track-audio-url'); var youtubeUrlEl = form.querySelector('#track-youtube-url'); var audioUrl = audioUrlEl ? audioUrlEl.value.trim() : ''; var youtubeInput = youtubeUrlEl ? youtubeUrlEl.value.trim() : ''; var imageUrlEl = form.querySelector('#track-image-url'); var imageUrl = imageUrlEl ? imageUrlEl.value.trim() : ''; var tagsEl = form.querySelector('#track-tags'); var tagsStr = tagsEl ? tagsEl.value.trim() : ''; var publishedEl = form.querySelector('#track-published'); var published = publishedEl ? publishedEl.checked : false; var promotedEl = form.querySelector('#track-promoted'); var promoted = promotedEl ? promotedEl.checked : false; var artist = artistStr ? artistStr.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : []; var genre = genreStr ? genreStr.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : []; var tag = tagsStr ? tagsStr.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : []; var youtubeId = null; if (sourceType === 'youtube') { youtubeId = extractYouTubeId(youtubeInput); if (!youtubeId) { alert('Please enter a valid YouTube URL or video ID'); return false; } if (!imageUrl) { imageUrl = 'https://img.youtube.com/vi/' + youtubeId + '/maxresdefault.jpg'; } } else if (sourceType === 'mp3' && !audioUrl) { alert('Please enter an audio file URL'); return false; } var procParams = { type: editingTrackId ? 'update' : 'create', name: name, artist: artist, genre: genre, tag: tag, sourceType: sourceType, audioFileUrl: sourceType === 'mp3' ? audioUrl : '', youtubeId: youtubeId, imageUrl: imageUrl, published: published, promoted: promoted, cue: editingTrackCues }; if (editingTrackId) procParams.mediaId = editingTrackId; phoros.processor(MEDIA_MANAGER_ID, procParams, function(err, res) { if (err || !res || !res.success) { alert('Failed to ' + (editingTrackId ? 'update' : 'add') + ' track: ' + ((res && res.error) || 'Unknown error')); return; } hideAddTrackForm(); loadAdminTracks(); loadSuggestions(); }); return false; } function handlePlayTrack(id) { if (id && window.jahmahPlayTrack) window.jahmahPlayTrack(id); } function handleDeleteTrack(id) { if (!confirm('Are you sure you want to delete this track?')) return; phoros.processor(MEDIA_MANAGER_ID, { type: 'delete', mediaId: id }, function(err, res) { if (err || !res || !res.success) { alert('Failed to delete track'); return; } loadAdminTracks(); }); } // ============ CUE EDITOR FUNCTIONS ============ var CUE_TYPES = ['fadein', 'fadeout', 'jumpin', 'jumpout', 'drop']; function showCueEditor() { var section = document.getElementById('cue-editor-section'); if (section) section.style.display = 'block'; renderCueTimeline(); renderCueList(); } function hideCueEditor() { var section = document.getElementById('cue-editor-section'); if (section) section.style.display = 'none'; editingTrackCues = []; } function renderCueTimeline() { var markers = document.getElementById('cue-markers'); if (!markers) return; clearNode(markers); editingTrackCues.forEach(function(cue, idx) { var marker = document.createElement('div'); marker.className = 'cue-marker ' + cue.type; marker.style.left = cue.position + '%'; marker.title = cue.type + ' at ' + cue.position.toFixed(1) + '%'; marker.setAttribute('onclick', 'handleCueMarkerClick(' + idx + ')'); markers.appendChild(marker); }); } function renderCueList() { var list = document.getElementById('cue-list'); if (!list) return; clearNode(list); if (editingTrackCues.length === 0) { var empty = el('div', 'cue-empty', 'No cue points. Click "+ Add Cue" to create transition markers.'); list.appendChild(empty); return; } editingTrackCues.forEach(function(cue, idx) { var item = el('div', 'cue-item'); var badge = el('span', 'cue-type-badge ' + cue.type, cue.type); item.appendChild(badge); var typeSelect = document.createElement('select'); typeSelect.style.cssText = 'background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px;'; CUE_TYPES.forEach(function(t) { var opt = document.createElement('option'); opt.value = t; opt.textContent = t; if (t === cue.type) opt.selected = true; typeSelect.appendChild(opt); }); typeSelect.onchange = function() { editingTrackCues[idx].type = this.value; renderCueTimeline(); renderCueList(); }; item.appendChild(typeSelect); var posDiv = el('div', 'cue-position'); var posInput = document.createElement('input'); posInput.type = 'number'; posInput.min = '0'; posInput.max = '100'; posInput.step = '0.1'; posInput.value = cue.position.toFixed(1); posInput.onchange = function() { var val = parseFloat(this.value); if (isNaN(val) || val < 0) val = 0; if (val > 100) val = 100; editingTrackCues[idx].position = val; renderCueTimeline(); }; posDiv.appendChild(posInput); posDiv.appendChild(document.createTextNode(' % of track')); item.appendChild(posDiv); var actions = el('div', 'cue-actions'); var delBtn = document.createElement('button'); delBtn.title = 'Delete cue'; delBtn.innerHTML = '×'; delBtn.onclick = function() { editingTrackCues.splice(idx, 1); renderCueTimeline(); renderCueList(); }; actions.appendChild(delBtn); item.appendChild(actions); list.appendChild(item); }); } function handleAddCue() { var newPos = 50; if (editingTrackCues.length > 0) { var positions = editingTrackCues.map(function(c) { return c.position; }).sort(function(a, b) { return a - b; }); var maxGap = 0; var gapStart = 0; for (var i = 0; i < positions.length; i++) { var prev = i === 0 ? 0 : positions[i - 1]; var gap = positions[i] - prev; if (gap > maxGap) { maxGap = gap; gapStart = prev; } } var lastGap = 100 - positions[positions.length - 1]; if (lastGap > maxGap) { newPos = positions[positions.length - 1] + lastGap / 2; } else { newPos = gapStart + maxGap / 2; } } editingTrackCues.push({ type: 'fadeout', position: Math.round(newPos * 10) / 10 }); renderCueTimeline(); renderCueList(); } function handleCueMarkerClick(idx) { var list = document.getElementById('cue-list'); if (list) { var items = list.querySelectorAll('.cue-item'); if (items[idx]) { items[idx].scrollIntoView({ behavior: 'smooth', block: 'center' }); items[idx].style.background = 'rgba(183, 148, 199, 0.3)'; setTimeout(function() { items[idx].style.background = ''; }, 1000); } } } function loadAdminArtists() { phoros.processor(MEDIA_MANAGER_ID, { type: 'listArtists' }, function(err, res) { var c = document.getElementById('admin-artists-tbody'); if (!c) return; if (err || !res || !res.success || !res.data.artists || res.data.artists.length === 0) { showAdminEmptyState(c, 'No artists yet. Add your first artist above!', '4'); return; } renderAdminArtists(res.data.artists); }); } function renderAdminArtists(artists) { var tbody = document.getElementById('admin-artists-tbody'); if (!tbody) return; clearNode(tbody); artists.forEach(function(a) { var row = el('tr'); row.style.cursor = 'pointer'; row.setAttribute('onclick', 'handleViewArtist("' + a._id + '")'); var artistCell = el('td'); var titleDiv = el('div', 'jm-admin-table-title'); var img = document.createElement('img'); img.className = 'jm-admin-table-thumb artist'; img.src = a.imageUrl || 'https://via.placeholder.com/48?text=🎤'; img.alt = a.name || 'Artist'; img.onerror = function() { this.src = 'https://via.placeholder.com/48?text=🎤'; }; titleDiv.appendChild(img); var infoDiv = el('div'); var artistName = el('div'); artistName.textContent = a.name || 'Unknown Artist'; infoDiv.appendChild(artistName); titleDiv.appendChild(infoDiv); artistCell.appendChild(titleDiv); row.appendChild(artistCell); var tracksCell = el('td', '', (a.trackCount || 0) + ' tracks'); row.appendChild(tracksCell); var statusCell = el('td'); var statusDiv = el('div'); statusDiv.style.display = 'flex'; statusDiv.style.gap = '8px'; if (a.promoted) { var featBadge = el('span', 'status-badge featured', 'Featured'); statusDiv.appendChild(featBadge); } if (a.unpublished) { var hidBadge = el('span', 'status-badge'); hidBadge.style.background = 'rgba(255,255,255,0.2)'; hidBadge.style.color = 'rgba(255,255,255,0.6)'; hidBadge.textContent = 'Hidden'; statusDiv.appendChild(hidBadge); } statusCell.appendChild(statusDiv); row.appendChild(statusCell); var actionsCell = el('td'); var actionsDiv = el('div', 'jm-admin-actions'); var editBtn = document.createElement('button'); editBtn.setAttribute('onclick', 'event.stopPropagation(); handleEditArtist("' + a._id + '")'); editBtn.setAttribute('title', 'Edit'); var editSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); editSvg.setAttribute('width', '16'); editSvg.setAttribute('height', '16'); editSvg.setAttribute('viewBox', '0 0 24 24'); editSvg.setAttribute('fill', 'currentColor'); var editPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); editPath.setAttribute('d', 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'); editSvg.appendChild(editPath); editBtn.appendChild(editSvg); actionsDiv.appendChild(editBtn); var delBtn = document.createElement('button'); delBtn.setAttribute('onclick', 'event.stopPropagation(); handleDeleteArtist("' + a._id + '")'); delBtn.setAttribute('title', 'Delete'); var delSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); delSvg.setAttribute('width', '16'); delSvg.setAttribute('height', '16'); delSvg.setAttribute('viewBox', '0 0 24 24'); delSvg.setAttribute('fill', 'currentColor'); var delPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); delPath.setAttribute('d', 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'); delSvg.appendChild(delPath); delBtn.appendChild(delSvg); actionsDiv.appendChild(delBtn); actionsCell.appendChild(actionsDiv); row.appendChild(actionsCell); tbody.appendChild(row); }); } function showAddArtistForm() { editingArtistId = null; var titleEl = document.querySelector('#add-artist-modal .modal-header h2'); if (titleEl) titleEl.textContent = 'Add New Artist'; var submitBtn = document.querySelector('#add-artist-form button.primary[type="submit"]'); if (submitBtn) submitBtn.textContent = 'Add Artist'; document.getElementById('add-artist-modal').style.display = 'flex'; resetYouTubeVideoList(); handleChannelIdChange(); } function hideAddArtistForm() { editingArtistId = null; document.getElementById('add-artist-modal').style.display = 'none'; document.getElementById('add-artist-form').reset(); resetYouTubeVideoList(); } function handleEditArtist(id) { phoros.processor(MEDIA_MANAGER_ID, { type: 'artistDetail', artistId: id }, function(err, res) { if (err || !res || !res.success || !res.data.artist) { alert('Failed to load artist'); return; } var a = res.data.artist; editingArtistId = a._id; resetYouTubeVideoList(); document.getElementById('add-artist-modal').style.display = 'flex'; var titleEl = document.querySelector('#add-artist-modal .modal-header h2'); if (titleEl) titleEl.textContent = 'Edit Artist'; var submitBtn = document.querySelector('#add-artist-form button.primary[type="submit"]'); if (submitBtn) submitBtn.textContent = 'Save Changes'; var form = document.getElementById('add-artist-form'); if (form) { var nameEl = form.querySelector('#artist-name'); if (nameEl) nameEl.value = a.name || ''; var bioEl = form.querySelector('#artist-bio'); if (bioEl) bioEl.value = a.bio || ''; var imageUrlEl = form.querySelector('#artist-image-url'); if (imageUrlEl) imageUrlEl.value = a.imageUrl || ''; var ytChannelEl = form.querySelector('#artist-youtube-channel'); if (ytChannelEl) ytChannelEl.value = a.youtubeChannelId || ''; var socialLinks = a.socialLinks || {}; var ytEl = form.querySelector('#artist-social-youtube'); if (ytEl) ytEl.value = socialLinks.youtube || ''; var igEl = form.querySelector('#artist-social-instagram'); if (igEl) igEl.value = socialLinks.instagram || ''; var twEl = form.querySelector('#artist-social-twitter'); if (twEl) twEl.value = socialLinks.twitter || ''; var spEl = form.querySelector('#artist-social-spotify'); if (spEl) spEl.value = socialLinks.spotify || ''; var webEl = form.querySelector('#artist-social-website'); if (webEl) webEl.value = socialLinks.website || ''; var promotedEl = form.querySelector('#artist-promoted'); if (promotedEl) promotedEl.checked = a.promoted || false; var unpubEl = form.querySelector('#artist-unpublished'); if (unpubEl) unpubEl.checked = a.unpublished || false; } handleChannelIdChange(); }); } function handleAddArtist(event) { event.preventDefault(); var person = phoros.person(true); if (!person) return false; var form = document.getElementById('add-artist-form'); if (!form) return false; var name = (form.querySelector('#artist-name') || {}).value || ''; name = name.trim(); if (!name) { alert('Artist name is required'); return false; } var bio = (form.querySelector('#artist-bio') || {}).value || ''; bio = bio.trim(); var imageUrl = (form.querySelector('#artist-image-url') || {}).value || ''; imageUrl = imageUrl.trim(); var ytChannel = (form.querySelector('#artist-youtube-channel') || {}).value || ''; ytChannel = ytChannel.trim(); var socialLinks = {}; var ytUrl = (form.querySelector('#artist-social-youtube') || {}).value || ''; if (ytUrl.trim()) socialLinks.youtube = ytUrl.trim(); var igUrl = (form.querySelector('#artist-social-instagram') || {}).value || ''; if (igUrl.trim()) socialLinks.instagram = igUrl.trim(); var twUrl = (form.querySelector('#artist-social-twitter') || {}).value || ''; if (twUrl.trim()) socialLinks.twitter = twUrl.trim(); var spUrl = (form.querySelector('#artist-social-spotify') || {}).value || ''; if (spUrl.trim()) socialLinks.spotify = spUrl.trim(); var webUrl = (form.querySelector('#artist-social-website') || {}).value || ''; if (webUrl.trim()) socialLinks.website = webUrl.trim(); var promoted = (form.querySelector('#artist-promoted') || {}).checked || false; var unpublished = (form.querySelector('#artist-unpublished') || {}).checked || false; var procParams = { type: editingArtistId ? 'updateArtist' : 'createArtist', name: name, bio: bio, imageUrl: imageUrl, youtubeChannelId: ytChannel, socialLinks: socialLinks, promoted: promoted, unpublished: unpublished }; if (editingArtistId) procParams.artistId = editingArtistId; phoros.processor(MEDIA_MANAGER_ID, procParams, function(err, res) { if (err || !res || !res.success) { alert('Failed to ' + (editingArtistId ? 'update' : 'add') + ' artist: ' + ((res && res.error) || 'Unknown error')); return; } hideAddArtistForm(); loadAdminArtists(); loadSuggestions(); }); return false; } function handleDeleteArtist(id) { if (!confirm('Are you sure you want to delete this artist?')) return; phoros.processor(MEDIA_MANAGER_ID, { type: 'deleteArtist', artistId: id }, function(err, res) { if (err || !res || !res.success) { alert('Failed to delete artist'); return; } loadAdminArtists(); loadSuggestions(); }); } function handleViewArtist(id) { phoros.page.change('artist', { id: id }); } function resetYouTubeVideoList() { fetchedYouTubeVideos = []; selectedVideoIds = []; var list = document.getElementById('youtube-video-list'); if (list) { while (list.firstChild) list.removeChild(list.firstChild); var empty = document.createElement('div'); empty.className = 'video-list-empty'; empty.textContent = 'Enter a YouTube Channel ID and click Sync to fetch videos'; list.appendChild(empty); } var actions = document.getElementById('import-actions'); if (actions) actions.style.display = 'none'; updateImportButton(); } function handleChannelIdChange() { var input = document.getElementById('artist-youtube-channel'); var btn = document.getElementById('sync-youtube-btn'); if (!input || !btn) return; var channelId = (input.value || '').trim(); btn.disabled = !channelId || channelId.length < 5; } function handleSyncYouTube() { var input = document.getElementById('artist-youtube-channel'); var channelId = input ? (input.value || '').trim() : ''; if (!channelId) { alert('Please enter a YouTube Channel ID'); return; } var btn = document.getElementById('sync-youtube-btn'); var btnSpan = btn ? btn.querySelector('span') : null; if (btn) { btn.disabled = true; if (btnSpan) btnSpan.textContent = 'Syncing...'; } var list = document.getElementById('youtube-video-list'); if (list) { while (list.firstChild) list.removeChild(list.firstChild); var spinner = document.createElement('div'); spinner.className = 'video-list-empty'; spinner.textContent = 'Fetching videos from YouTube...'; list.appendChild(spinner); } var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=' + encodeURIComponent(channelId) + '&maxResults=50&order=date&type=video&key=' + YOUTUBE_API_KEY; fetch(url).then(function(r) { return r.json(); }).then(function(data) { if (btn) { btn.disabled = false; if (btnSpan) btnSpan.textContent = 'Sync Channel'; } if (data.error) { showYouTubeError(data.error.message || 'Failed to fetch videos'); return; } if (!data.items || data.items.length === 0) { showYouTubeError('No videos found for this channel'); return; } fetchedYouTubeVideos = data.items.map(function(item) { return { videoId: item.id.videoId, title: item.snippet.title, thumbnail: item.snippet.thumbnails.medium ? item.snippet.thumbnails.medium.url : item.snippet.thumbnails.default.url, publishedAt: item.snippet.publishedAt }; }); selectedVideoIds = []; renderYouTubeVideos(); }).catch(function(err) { if (btn) { btn.disabled = false; if (btnSpan) btnSpan.textContent = 'Sync Channel'; } showYouTubeError('Failed to fetch videos: ' + err.message); }); } function showYouTubeError(msg) { var list = document.getElementById('youtube-video-list'); if (!list) return; while (list.firstChild) list.removeChild(list.firstChild); var err = document.createElement('div'); err.className = 'video-list-empty'; err.style.color = '#ff6b6b'; err.textContent = msg; list.appendChild(err); var actions = document.getElementById('import-actions'); if (actions) actions.style.display = 'none'; } function renderYouTubeVideos() { var list = document.getElementById('youtube-video-list'); if (!list) return; while (list.firstChild) list.removeChild(list.firstChild); if (fetchedYouTubeVideos.length === 0) { var empty = document.createElement('div'); empty.className = 'video-list-empty'; empty.textContent = 'No videos found'; list.appendChild(empty); var actions = document.getElementById('import-actions'); if (actions) actions.style.display = 'none'; return; } fetchedYouTubeVideos.forEach(function(v) { var item = document.createElement('div'); item.className = 'video-item'; item.setAttribute('data-video-id', v.videoId); if (selectedVideoIds.indexOf(v.videoId) !== -1) item.classList.add('selected'); item.setAttribute('onclick', 'handleVideoSelect("' + v.videoId + '")'); var checkbox = document.createElement('div'); checkbox.className = 'video-checkbox'; var input = document.createElement('input'); input.type = 'checkbox'; input.checked = selectedVideoIds.indexOf(v.videoId) !== -1; checkbox.appendChild(input); var thumb = document.createElement('img'); thumb.className = 'video-thumb'; thumb.src = v.thumbnail; thumb.alt = v.title; thumb.onerror = function() { this.src = 'https://via.placeholder.com/80x45?text=Video'; }; var info = document.createElement('div'); info.className = 'video-info'; var title = document.createElement('h4'); title.className = 'video-title'; title.textContent = v.title; title.title = v.title; var date = document.createElement('p'); date.className = 'video-date'; date.textContent = formatVideoDate(v.publishedAt); info.appendChild(title); info.appendChild(date); item.appendChild(checkbox); item.appendChild(thumb); item.appendChild(info); list.appendChild(item); }); var actions = document.getElementById('import-actions'); if (actions) actions.style.display = 'flex'; updateImportButton(); } function handleVideoSelect(videoId) { var idx = selectedVideoIds.indexOf(videoId); if (idx === -1) { selectedVideoIds.push(videoId); } else { selectedVideoIds.splice(idx, 1); } var item = document.querySelector('.video-item[data-video-id="' + videoId + '"]'); if (item) { var cb = item.querySelector('input[type="checkbox"]'); if (cb) cb.checked = idx === -1; if (idx === -1) { item.classList.add('selected'); } else { item.classList.remove('selected'); } } updateImportButton(); } function handleSelectAllVideos() { var allSelected = selectedVideoIds.length === fetchedYouTubeVideos.length; if (allSelected) { selectedVideoIds = []; } else { selectedVideoIds = fetchedYouTubeVideos.map(function(v) { return v.videoId; }); } document.querySelectorAll('.video-item').forEach(function(item) { var videoId = item.getAttribute('data-video-id'); var cb = item.querySelector('input[type="checkbox"]'); var isSelected = selectedVideoIds.indexOf(videoId) !== -1; if (cb) cb.checked = isSelected; if (isSelected) { item.classList.add('selected'); } else { item.classList.remove('selected'); } }); var selectBtn = document.querySelector('.select-all-btn'); if (selectBtn) selectBtn.textContent = allSelected ? 'Select All' : 'Deselect All'; updateImportButton(); } function updateImportButton() { var btn = document.getElementById('import-selected-btn'); if (!btn) return; var count = selectedVideoIds.length; btn.textContent = 'Import Selected (' + count + ')'; btn.disabled = count === 0; } function handleImportSelectedVideos() { if (selectedVideoIds.length === 0) return; var person = phoros.person(true); if (!person) return; var artistName = (document.getElementById('artist-name') || {}).value || ''; artistName = artistName.trim(); if (!artistName) { alert('Please enter an artist name first'); return; } var videosToImport = fetchedYouTubeVideos.filter(function(v) { return selectedVideoIds.indexOf(v.videoId) !== -1; }); var importBtn = document.getElementById('import-selected-btn'); if (importBtn) { importBtn.disabled = true; importBtn.textContent = 'Importing...'; } var imported = 0; var failed = 0; var total = videosToImport.length; function importNext(index) { if (index >= videosToImport.length) { if (importBtn) { importBtn.disabled = false; importBtn.textContent = 'Import Selected (' + selectedVideoIds.length + ')'; } alert('Import complete! ' + imported + ' tracks imported' + (failed > 0 ? ', ' + failed + ' failed' : '')); selectedVideoIds = []; renderYouTubeVideos(); loadAdminTracks(); loadSuggestions(); return; } var v = videosToImport[index]; phoros.processor(MEDIA_MANAGER_ID, { type: 'create', name: v.title, artist: [artistName], genre: [], tag: [], sourceType: 'youtube', youtubeId: v.videoId, imageUrl: 'https://img.youtube.com/vi/' + v.videoId + '/maxresdefault.jpg', published: false, promoted: false }, function(err, res) { if (err || !res || !res.success) { failed++; } else { imported++; } if (importBtn) importBtn.textContent = 'Importing... (' + (imported + failed) + '/' + total + ')'; importNext(index + 1); }); } importNext(0); } function formatVideoDate(dateStr) { if (!dateStr) return ''; var d = new Date(dateStr); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear(); } function loadAdminGenres() { phoros.processor(MEDIA_MANAGER_ID, { type: 'listGenres' }, function(err, res) { var c = document.getElementById('admin-genres-grid'); if (!c) return; clearNode(c); if (err || !res || !res.success || !res.data.genres || res.data.genres.length === 0) { var empty = el('div', 'empty-state'); var text = el('p', 'empty-state-text', 'No genres yet. Add your first genre above!'); empty.appendChild(text); c.appendChild(empty); return; } renderAdminGenres(res.data.genres); }); } function renderAdminGenres(genres) { var grid = document.getElementById('admin-genres-grid'); if (!grid) return; clearNode(grid); genres.forEach(function(g) { var card = el('div', 'jm-admin-genre-card'); var header = el('div', 'jm-admin-genre-header'); var name = el('h3', 'jm-admin-genre-name', g.name || 'Unknown Genre'); header.appendChild(name); var actions = el('div', 'jm-admin-genre-actions'); var editBtn = document.createElement('button'); editBtn.title = 'Edit'; editBtn.setAttribute('onclick', 'handleEditGenre("' + g._id + '")'); editBtn.textContent = 'Edit'; actions.appendChild(editBtn); var delBtn = document.createElement('button'); delBtn.title = 'Delete'; delBtn.setAttribute('onclick', 'handleDeleteGenre("' + g._id + '", "' + (g.name || '').replace(/"/g, '') + '")'); delBtn.textContent = 'Del'; actions.appendChild(delBtn); header.appendChild(actions); card.appendChild(header); if (g.description) { var desc = el('p', 'jm-admin-genre-desc', g.description); card.appendChild(desc); } var stats = el('div', 'jm-admin-genre-stats'); var trackStat = el('div', 'jm-admin-genre-stat'); var strong = document.createElement('strong'); strong.textContent = (g.trackCount || 0); trackStat.appendChild(strong); trackStat.appendChild(document.createTextNode(' tracks')); stats.appendChild(trackStat); card.appendChild(stats); card.style.cursor = 'pointer'; grid.appendChild(card); }); } function showAddGenreForm() { editingGenreId = null; document.getElementById('add-genre-modal').style.display = 'flex'; } function hideAddGenreForm() { editingGenreId = null; document.getElementById('add-genre-modal').style.display = 'none'; document.getElementById('add-genre-form').reset(); } function handleEditGenre(id) { phoros.processor(MEDIA_MANAGER_ID, { type: 'genreDetail', genreId: id }, function(err, res) { if (err || !res || !res.success || !res.data.genre) { alert('Failed to load genre'); return; } var g = res.data.genre; editingGenreId = g._id; document.getElementById('add-genre-modal').style.display = 'flex'; document.getElementById('genre-name').value = g.name || ''; document.getElementById('genre-description').value = g.description || ''; document.getElementById('genre-image-url').value = g.imageUrl || ''; }); } function handleAddGenre(event) { event.preventDefault(); var person = phoros.person(true); if (!person) return false; var name = document.getElementById('genre-name').value.trim(); if (!name) { alert('Genre name is required'); return false; } var description = document.getElementById('genre-description').value.trim(); var imageUrl = document.getElementById('genre-image-url').value.trim(); var procParams = { type: editingGenreId ? 'updateGenre' : 'createGenre', name: name, description: description, imageUrl: imageUrl }; if (editingGenreId) procParams.genreId = editingGenreId; phoros.processor(MEDIA_MANAGER_ID, procParams, function(err, res) { if (err || !res || !res.success) { alert('Failed to save genre'); return; } hideAddGenreForm(); loadAdminGenres(); loadSuggestions(); }); return false; } function handleDeleteGenre(id, name) { if (!confirm('Delete genre ' + name + '?')) return; phoros.processor(MEDIA_MANAGER_ID, { type: 'deleteGenre', genreId: id }, function(err, res) { if (err || !res || !res.success) { alert('Failed to delete genre'); return; } loadAdminGenres(); loadSuggestions(); }); }

Vibe Management

Add New Track

Cue Points

Add New Genre

Add New Artist

YouTube Videos