From 1f5a82afbab25b1aa6cc2aef69cdb45906715799 Mon Sep 17 00:00:00 2001 From: Keenan Yafiq Date: Sun, 3 May 2026 21:02:39 +0700 Subject: [PATCH] feat: see others submissions --- app.js | 97 +++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 32 deletions(-) diff --git a/app.js b/app.js index 1745fbd..96afee6 100644 --- a/app.js +++ b/app.js @@ -18,6 +18,7 @@ const DEFAULT_IDENTITY = { const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJmb290cWxxem13YnBxdm9oaXF1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUyNTgyMjYsImV4cCI6MjA5MDgzNDIyNn0.yYwJ_YWhlMHGDVTQvbwAfVEPO9cJVo5QIlrllGDobSI"; const FEEDBACK_API_URL = "https://rfootqlqzmwbpqvohiqu.supabase.co/functions/v1/submit-feedback"; const USERS_API_URL = "https://rfootqlqzmwbpqvohiqu.supabase.co/functions/v1/hyper-action"; +const BETTER_LYRICS_LOGO = "https://better-lyrics.boidu.dev/icons/logo.svg"; let ytPlayer = null; window.parsedLines = []; @@ -88,11 +89,12 @@ async function signPayload(privateKeyJwk, payloadObj) { async function apiFetch(endpoint, options = {}) { const res = await fetch(`${API_BASE_URL}${endpoint}`, options); const isJson = res.headers.get("content-type")?.includes("application/json"); + const json = await res.json() if (!res.ok) { - const errorText = isJson ? (await res.json()).message || (await res.json()).error : await res.text(); + const errorText = isJson ? json.message || json.error : await res.text(); throw new Error(errorText || `Error ${res.status}`); } - return isJson ? res.json() : res.text(); + return isJson ? json : res.text(); } async function apiSignedAction(endpoint, payloadData) { @@ -260,16 +262,27 @@ async function initSearchPage() { } async function initSubmissionsPage() { + const user = JSON.parse(localStorage.getItem('unisonIdentity')); + const urlParams = new URLSearchParams(window.location.search); + const name = urlParams.get('name'); + const parsedName = name ? `${name}'${name.toLowerCase().endsWith('s') ? '' : 's'}` : "Their" + const id = urlParams.get('id') || user.keyId; + + const same = id === user.keyId + + const header = document.getElementById('search-header'); + header.innerText = `${same ? 'My' : parsedName} Submissions` + document.querySelector("title").innerText = `${same ? 'My' : parsedName} Submissions | Unison` + const resultsDiv = document.getElementById('search-results'); - resultsDiv.innerHTML = `
Loading your submissions...
`; + resultsDiv.innerHTML = `
Loading ${same ? 'your' : 'their'} submissions...
`; try { - const user = JSON.parse(localStorage.getItem('unisonIdentity')); - const res = await apiFetch(`/mine?limit=50`, { headers: { "x-key-id": user.keyId } }); + const res = await apiFetch(`/mine?limit=50`, { headers: { "x-key-id": id } }); const items = res.data ||[]; if (!items.length) { - resultsDiv.innerHTML = `
You haven't submitted any lyrics yet.
`; + resultsDiv.innerHTML = `
${same ? "You" : "They"} haven't submitted any lyrics yet.
`; return; } @@ -281,6 +294,7 @@ async function initSubmissionsPage() {
${(item.format || 'LRC').toUpperCase()} ${item.syncType ? `${item.syncType.toUpperCase()}` : ''} + ${item.confidence ? `${item.confidence.toUpperCase()} CONFIDENCE` : ''}
@@ -410,19 +424,15 @@ function initAccountPage() { const avatarPreview = document.getElementById('acc-avatar-preview'); const savedAvatar = localStorage.getItem('unisonAvatar'); - if (user.keyId === DEFAULT_IDENTITY.keyId) { - - avatarPreview.src = 'https://better-lyrics.boidu.dev/icons/logo.svg'; + avatarPreview.src = BETTER_LYRICS_LOGO; document.getElementById('avatar-settings-block').style.display = 'none'; } else { - if (savedAvatar) { avatarPreview.src = savedAvatar; } } - const privateDetails = document.getElementById('private-details'); if (user.keyId === DEFAULT_IDENTITY.keyId) { @@ -590,7 +600,7 @@ async fetchYouTubeMetadata(id) { setDefaultCover(title) { document.getElementById('player-title').innerText = title || "Local Audio"; document.getElementById('player-artist').innerText = "Unknown Artist"; - document.getElementById('player-cover').src = 'https://better-lyrics.boidu.dev/icons/logo.svg'; + document.getElementById('player-cover').src = BETTER_LYRICS_LOGO; document.getElementById('player-bg').style.backgroundImage = 'none'; document.getElementById('player-bg').style.backgroundColor = '#111'; }, @@ -1300,7 +1310,6 @@ function handleAvatarUpload(event) { localStorage.setItem('unisonAvatar', base64Data); const preview = document.getElementById('acc-avatar-preview'); if (preview) preview.src = base64Data; - showToast("Avatar updated successfully!", "success"); logCurrentUser(); @@ -1326,7 +1335,7 @@ async function logCurrentUser() { body: JSON.stringify({ username: user.displayName || 'Unknown User', keyId: user.keyId, - avatarData: avatarData || null + avatarData: avatarData || BETTER_LYRICS_LOGO }) }); } catch(e) { @@ -1354,29 +1363,53 @@ async function loadActiveUsers() { return; } - list.innerHTML = users.map((u, index) => { - const delay = index * 0.05; + list.innerHTML = ''; + users.forEach((u, index) => { + const delay = index * 0.05; const isDefaultUser = u.key_id === DEFAULT_IDENTITY.keyId; const imgSrc = isDefaultUser - ? 'https://better-lyrics.boidu.dev/icons/logo.svg' - : u.avatar_data || 'https://better-lyrics.boidu.dev/icons/logo.svg'; + ? BETTER_LYRICS_LOGO + : u.avatar_data || BETTER_LYRICS_LOGO; - return ` -
-
- ${u.username} -
- -
- `; - }).join(''); + const userCard = document.createElement("div"); + userCard.className = "user-card animate-fade-up"; + userCard.style.animationDelay = `${delay}s;`; + + const userAvatar = document.createElement("div"); + userAvatar.className = "user-avatar"; + + const userAvatarImg = document.createElement("img"); + userAvatarImg.src = imgSrc; + userAvatarImg.alt = u.username; + + userAvatar.appendChild(userAvatarImg); + userCard.appendChild(userAvatar); + const userInfo = document.createElement("div"); + userInfo.className = "user-info"; + + const userName = document.createElement("div"); + userName.className = "user-name"; + userName.innerText = u.username || "Anonymous"; + userInfo.appendChild(userName); + + const userStatus = document.createElement("div"); + userStatus.className = "user-status" + + const userStatusDot = document.createElement("div") + userStatusDot.className = "status-dot" + + userStatus.appendChild(userStatusDot); + userStatus.innerHTML += "Active" + + userInfo.appendChild(userStatus); + userCard.appendChild(userInfo); + userCard.addEventListener("click", () => { + window.location.href = `submissions.html?id=${u.key_id}&name=${u.username}` + }); + list.appendChild(userCard); + }); } catch(err) { list.innerHTML = `
Failed to load community members.
`; }