laantungir/client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate music playlists to Gruuv a-tag hydration and add optional lazy FRIENDS loading

Browse Source
This commit is contained in:
Laan Tungir
2026-06-09 15:15:08 -04:00
parent 8998c5664d
commit eed00f67cf
9 changed files with 7094 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/MUSIC_URL_STRUCTURE.md
View File

@@ -51,7 +51,7 @@ Routes are parsed by splitting the hash on `/`:
```
#/playlist/abc123/ep-42 → { page: 'playlist', parts: ['abc123', 'ep-42'] }
#/search/bob marley → { page: 'search', parts: ['bob marley'] }
#/track/98765 → { page: 'track', parts: ['98765'] }
#/track/36787:pubkey:dTag → { page: 'track', parts: ['36787:pubkey:dTag'] }
```
## URL Examples
@@ -73,8 +73,8 @@ vj.html?npub=npub1abc123...&show=saturday-reggae&episode=ep-1744382400
### Direct track link (works on either page)
```
music.html#/track/12345678
vj.html#/track/12345678
music.html#/track/36787:aaaaaaaa...:my-track-dtag
vj.html#/track/36787:aaaaaaaa...:my-track-dtag
```
### Search link
@@ -95,7 +95,7 @@ music.html#/album/album-id-here
| Select/create episode | `?episode={id}` added/updated | `replaceState` |
| Search for music | `#/search/{query}` | hash assignment |
| Click album/artist | `#/album/{id}` or `#/artist/{id}` | hash assignment |
| Play track from link | `#/track/{id}` | hash assignment |
| Play track from link | `#/track/{id}` (`id` is now typically `36787:pubkey:dTag`) | hash assignment |
| Select playlist | `#/playlist/{id}` | hash assignment |
| Login / auth change | `?npub={npub}` added | `replaceState` |
| Load external user | `?npub={npub}` or `?pubkey={hex}` | page navigation |

8
docs/music.md
View File

@@ -4,6 +4,12 @@
The music page ([`www/music.html`](www/music.html:1)) uses a **single unified queue** (`musicQueue[]`) as the source of truth for all playback. The audio engine ([`SimplePlayer`](www/js/greyscale-player.mjs:8)) is a pure playback component — it plays whatever stream URL it receives and fires callbacks when tracks end.
As of the Gruuv migration, track discovery/playback is relay-native:
- Track metadata is read from Nostr events (`kind 36787`, `t=gruuv`) via [`GruuvAPI`](www/js/gruuv-api.mjs:333)
- Playlist events are published/read as `kind 34139` via [`gruuv-playlists.mjs`](www/js/gruuv-playlists.mjs:1)
- Track IDs in queue/URLs are now addressable coordinates (`36787:pubkey:dTag`), not numeric Tidal IDs
- Uploads use Blossom + `kind 24242` auth and publish `kind 36787` via [`uploadGruuvTrack()`](www/js/gruuv-upload.mjs:139)
---
## Architecture
@@ -72,7 +78,7 @@ Persisted to localStorage under key `music-queue:{pubkey}`:
{
"currentIndex": 2,
"items": [
{ "id": 123, "title": "...", "artist": "...", "duration": 240, "cover": "...", "albumTitle": "..." }
{ "id": "36787:<pubkey>:<dTag>", "title": "...", "artist": "...", "duration": 240, "cover": "...", "albumTitle": "..." }
]
}
```

187
plans/music-greyscale-to-gruuv-migration.md Normal file
View File

@@ -0,0 +1,187 @@
# Music: Greyscale → Gruuv API Migration Plan
## Goal
Fully replace the Greyscale (Tidal-proxy) music backend used by [`www/music.html`](../www/music.html) with the **Gruuv** Nostr-native protocol. This includes search, browse, streaming, playlists, and a new track upload capability. Greyscale code is removed once the gruuv path is verified.
A backup of the original page is preserved as [`www/music-greyscale.html`](../www/music-greyscale.html).
---
## Background: Why this is an architecture shift, not a swap
The two backends are fundamentally different in nature.
| Aspect | Greyscale (current) | Gruuv (target) |
|---|---|---|
| Catalog source | Tidal proxy REST API over HTTP instance pool | Nostr relays: `kind 36787` track events tagged `t=gruuv` |
| Search | Server endpoint `/search/?s=` | Relay query + client-side text filter on title/artist/album |
| Streaming | DASH/MP3 manifest decoded from instance | Direct Blossom blob URL (the `url` tag) |
| Track ID | Numeric Tidal ID | Addressable coordinate `36787:pubkey:dTag` |
| Album | Rich `/album/?id=` endpoint | Derived by grouping track events on the `album` tag |
| Artist | Rich `/artist/?id=` endpoint | Derived by grouping track events on the `artist` tag |
| Cover art | `resources.tidal.com/images/...` | The `image` tag on the track event |
| Playlists | `kind 30004`, `i` tags `tidal:track:ID` | `kind 34139`, `a` tags `36787:pubkey:dTag`, `t=gruuv` |
| Upload | N/A (read-only Tidal) | Blossom `PUT /upload` + publish `kind 36787` |
### What already exists in the project (reused, not rebuilt)
- [`www/js/init-ndk.mjs`](../www/js/init-ndk.mjs) — provides `subscribe()`, `publishEvent()`, `publishRawEvent()`, `getPubkey()`. The page already wires NDK, relay status UI, and the `ndkEvent` window-event stream.
- [`www/js/blossom-api.mjs`](../www/js/blossom-api.mjs) — provides `calculateSHA256()` and `createBlossomAuth()`, which already builds the **`kind 24242`** authorization event that Gruuv's upload spec requires (see [`gruuv/README.md`](../gruuv/README.md)).
- [`www/js/blossom-ui.mjs`](../www/js/blossom-ui.mjs) — provides `getBlossomServers()` for the active Blossom target.
- [`SimplePlayer`](../www/js/greyscale-player.mjs) — its direct-URL playback path already handles plain audio URLs (Blossom URLs are plain `https`), so playback needs no DASH logic for gruuv.
### Gruuv protocol reference (from `gruuv/`)
`kind 36787` track event tags (per [`gruuv/upload_gruuv.sh`](../gruuv/upload_gruuv.sh) and [`gruuv/README.md`](../gruuv/README.md)):
```
d stable track id / dTag
url blossom file url
title song title
artist artist name
album album name
duration seconds (string)
size bytes (string)
alt "Song: <title> - <artist>"
format mp3 | flac | ...
m audio mime (audio/mpeg, audio/flac, ...)
x sha256 hex
t music
t gruuv
image (optional) cover art url
genre (optional) + t=<genre-lowercase>
released (optional) date-like
track_number (optional) plain numeric string
disc_number (optional, omit when disc 1)
```
`kind 34139` playlist event tags:
```
d playlist id / dTag
title
description
alt "Playlist: <title>"
t gruuv
image (optional)
a 36787:<pubkey>:<dTag> (repeated, one per track)
```
Default relays observed: `wss://relay.primal.net`, `wss://nos.lol`, `wss://relay.damus.io`. Default Blossom: `https://blossom.primal.net`. (The page's own NDK relay config / Blossom server selection should be used in practice.)
---
## Design strategy: drop-in module replacement
To keep [`www/music.html`](../www/music.html) changes minimal and low-risk, the new gruuv modules will expose the **same method names and return shapes** as the current greyscale modules. Then the migration in `music.html` is mostly an import swap plus targeted fixes for the few places where the data model genuinely differs (IDs, derived albums/artists, upload UI).
```mermaid
graph LR
subgraph page [music.html UI - mostly unchanged]
Search[Search box]
Browse[Album / Artist views]
Player[SimplePlayer audio]
Playlists[Playlist panel]
Upload[NEW Upload panel]
end
subgraph mods [New gruuv modules]
API[gruuv-api.mjs]
PL[gruuv-playlists.mjs]
UP[gruuv-upload.mjs]
end
subgraph infra [Existing project infra]
NDK[init-ndk.mjs subscribe publishEvent]
BLOB[blossom-api.mjs sha256 kind 24242 auth]
BUI[blossom-ui.mjs getBlossomServers]
end
Search --> API
Browse --> API
Player --> API
Playlists --> PL
Upload --> UP
API --> NDK
PL --> NDK
UP --> BLOB
UP --> BUI
UP --> NDK
```
---
## Data model mapping (gruuv track event → music.html track shape)
The UI expects the normalized shape produced by [`GreyscaleAPI.prepareTrack()`](../www/js/greyscale-api.mjs:186):
`{ id, title, artist, duration, cover, albumTitle, raw }`.
Mapping from a `kind 36787` event:
| UI field | Source |
|---|---|
| `id` | addressable coordinate `36787:<pubkey>:<d-tag>` (fallback to event id) |
| `title` | `title` tag |
| `artist` | `artist` tag (fallback "Unknown artist") |
| `duration` | `duration` tag parsed to number |
| `cover` | `image` tag (no Tidal URL transform) |
| `albumTitle` | `album` tag |
| `streamUrl` | `url` tag (used by `getTrackStream`) |
| `raw` | full event for later reference |
`getCoverUrl()` / `getArtistPictureUrl()` become pass-through helpers (return the URL as-is) so existing render code keeps working.
---
## Implementation steps
### Phase 0 — Safety
1. Confirm [`www/music-greyscale.html`](../www/music-greyscale.html) is a faithful backup of the original greyscale page so it can be referenced/restored.
### Phase 1 — Read path (search, browse, stream)
2. Create [`www/js/gruuv-api.mjs`](../www/js/gruuv-api.mjs) exposing the same surface as `GreyscaleAPI`:
`searchTracks`, `searchAlbums`, `searchArtists`, `getAlbum`, `getArtist`, `getTrackStream`, `getCoverUrl`, `getArtistPictureUrl`, `prepareTrack`.
3. Implement search by subscribing to `kind 36787` with `#t: ['gruuv']`, collecting events until EOSE (with a timeout), then client-side filtering on title/artist/album. Provide a small in-memory cache of fetched track events to back album/artist derivation.
4. Implement `getAlbum` / `getArtist` by grouping the cached/fetched track events on the `album` and `artist` tags respectively (gruuv has no album/artist DB). `getAlbum(id)` returns `{ album, tracks }`; `getArtist(id)` returns `{ ...artist, albums, eps, tracks }` to match existing render expectations.
5. Implement `getTrackStream` to return `{ streamUrl: <url tag>, isDash: false }`. Cover/artwork helpers return the `image` URL directly.
### Phase 2 — Playlists
6. Create [`www/js/gruuv-playlists.mjs`](../www/js/gruuv-playlists.mjs) mirroring the exports of [`greyscale-playlists.mjs`](../www/js/greyscale-playlists.mjs):
`PLAYLIST_KIND` (now `34139`), `buildPlaylistEvent`, `parsePlaylistEvent`, `isMusicPlaylistEvent`, `createPlaylistIdentifier`, `playlistEventAddress`, and any helper the page imports.
- Track references use `a` tags of form `36787:<pubkey>:<dTag>` instead of `i`/`tidal:track:` tags.
- Topic tag becomes `t=gruuv` (keep `t=music` for discoverability if useful).
- Keep a content JSON cache of track metadata (title/artist/cover/duration) like the greyscale version so playlists render before track events resolve.
### Phase 3 — Upload (new capability)
7. Create [`www/js/gruuv-upload.mjs`](../www/js/gruuv-upload.mjs):
- `calculateSHA256()` (reuse from blossom-api).
- Build `kind 24242` auth via `createBlossomAuth('upload', sha256, 'Upload <filename>')`.
- `PUT <activeBlossomServer>/upload` with the `Authorization: Nostr <base64>` header; fall back to `<server>/<sha256>` for the URL if the response lacks one.
- Optionally read duration via an `<audio>`/`AudioContext` decode client-side; allow manual title/artist/album entry.
- Publish `kind 36787` via `publishEvent()` with the full tag set (including `t=music`, `t=gruuv`, `x`, `m`, `format`, `size`, `alt`).
### Phase 4 — Wire into music.html
8. Swap imports: replace [`GreyscaleAPI`](../www/music.html:1371), the greyscale playlists import block ([lines ~1375–1380](../www/music.html:1375)) with gruuv modules. Keep `SimplePlayer` (it works with direct URLs); the DASH branch simply goes unused.
9. Update search handlers ([~3117](../www/music.html:3117), combined search [~4516](../www/music.html:4516)) and detail loaders ([~3837](../www/music.html:3837)–[~3963](../www/music.html:3963)) for the gruuv id format and the grouped album/artist results.
10. Update playlist subscription filter and event handling ([`subscribeAllPlaylists`](../www/music.html:3288), [`handleMusicNdkEvent`](../www/music.html:3299), [`hydratePlaylistFromEvent`](../www/music.html:3245)) to `kind 34139` with `t=gruuv` and `a`-tag track refs.
11. Add an **Upload Track** UI section (file input, metadata fields, progress/status), gated behind authentication (`promptLoginIfNeeded`), wired to `gruuv-upload.mjs`.
12. Update the download ([`fetchDownloadBlobForTrack`](../www/music.html:4342)) and share flows to use the direct Blossom URL instead of Tidal stream manifests.
### Phase 5 — Cleanup & verification
13. Remove greyscale modules ([`greyscale-api.mjs`](../www/js/greyscale-api.mjs), [`greyscale-playlists.mjs`](../www/js/greyscale-playlists.mjs), and [`greyscale-player.mjs`](../www/js/greyscale-player.mjs) if no longer referenced) and any greyscale-only code paths — only after the gruuv path is verified. (Player may be retained/renamed if still used for playback.)
14. Run the build inline-check ([`build/.music-inline-check.mjs`](../build/.music-inline-check.mjs)) and do a relay smoke test (cross-check against [`gruuv/list_gruuv_tracks.sh`](../gruuv/list_gruuv_tracks.sh) output). Verify an upload round-trips: publish `36787`, then it appears in search.
15. Update docs: [`docs/music.md`](../docs/music.md) and [`docs/MUSIC_URL_STRUCTURE.md`](../docs/MUSIC_URL_STRUCTURE.md) to reflect gruuv kinds/IDs and the new upload feature.
---
## Risks & decisions
- **Relay-native search has no ranking/pagination like a server endpoint.** Mitigation: fetch with a sensible `limit`, cache events, filter client-side, debounce queries. Result completeness depends on relay coverage.
- **Albums/artists are derived, not authoritative.** Grouping by free-text `album`/`artist` tags can produce duplicates/variants. Mitigation: normalize/trim, dedupe like the existing `deduplicateAlbums`.
- **Track addressing change** (`36787:pubkey:dTag` vs numeric ID) affects deep links and URL structure — covered by the `MUSIC_URL_STRUCTURE.md` update.
- **Upload duration/metadata** extraction is best-effort in the browser (no ffprobe); manual fields are the reliable fallback.
- **Default relay/Blossom set**: plan uses the page's existing NDK relays and `getBlossomServers()`; gruuv defaults are documented as fallback. Confirm if a specific relay/Blossom set is required.
## Open question for confirmation
- Should the deep-link/URL scheme keep numeric-style IDs (with a translation layer) or move fully to `36787:pubkey:dTag` coordinates?

542
www/js/gruuv-api.mjs Normal file
View File

@@ -0,0 +1,542 @@
import { ndkFetchEvents, queryCache } from './init-ndk.mjs';
const TRACK_KIND = 36787;
const GRUUV_TOPIC = 'gruuv';
const MUSIC_TOPIC = 'music';
const DEFAULT_LIMIT = 600;
function normalizeText(value = '') {
return String(value || '').trim();
}
function normalizeLower(value = '') {
return normalizeText(value).toLowerCase();
}
function safeNumber(value, fallback = 0) {
const n = Number(value);
return Number.isFinite(n) ? n : fallback;
}
function getTagValues(tags, key) {
if (!Array.isArray(tags)) return [];
return tags
.filter((t) => Array.isArray(t) && t[0] === key && typeof t[1] === 'string')
.map((t) => t[1]);
}
function getTagValue(tags, key) {
const values = getTagValues(tags, key);
return values[0] || '';
}
function normalizeSlug(value = '') {
return String(value || '')
.trim()
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 96);
}
function parseTrackCoordinate(id = '') {
const raw = String(id || '').trim();
if (!raw.startsWith(`${TRACK_KIND}:`)) return null;
const parts = raw.split(':');
if (parts.length < 3) return null;
const kind = Number(parts[0]);
const pubkey = String(parts[1] || '').trim().toLowerCase();
const dTag = parts.slice(2).join(':').trim();
if (kind !== TRACK_KIND) return null;
if (!/^[a-f0-9]{64}$/i.test(pubkey) || !dTag) return null;
return { kind, pubkey, dTag };
}
function isHexEventId(value = '') {
return /^[a-f0-9]{64}$/i.test(String(value || '').trim());
}
function inferFormatFromMime(mime = '') {
const m = String(mime || '').toLowerCase();
if (m.includes('flac')) return 'flac';
if (m.includes('mpeg') || m.includes('mp3')) return 'mp3';
if (m.includes('aac')) return 'aac';
if (m.includes('ogg')) return 'ogg';
if (m.includes('wav')) return 'wav';
return '';
}
function hasTopic(tags, topic) {
const lower = normalizeLower(topic);
return getTagValues(tags, 't').some((v) => normalizeLower(v) === lower);
}
function buildTrackIdFromEvent(event) {
const pubkey = normalizeLower(event?.pubkey || '');
const dTag = normalizeText(getTagValue(event?.tags, 'd'));
if (pubkey && dTag) return `${TRACK_KIND}:${pubkey}:${dTag}`;
return normalizeText(event?.id || '');
}
function parseReleasedYear(released = '') {
const match = String(released || '').match(/(\d{4})/);
return match ? Number(match[1]) : 0;
}
function sortByRecent(a, b) {
return safeNumber(b?.created_at, 0) - safeNumber(a?.created_at, 0);
}
function dedupeEvents(events, { requireTopic = true } = {}) {
const byAddress = new Map();
const byEventId = new Map();
for (const event of events || []) {
if (!event || typeof event !== 'object') continue;
if (event.kind !== TRACK_KIND || !Array.isArray(event.tags)) continue;
if (requireTopic && !(hasTopic(event.tags, GRUUV_TOPIC) || hasTopic(event.tags, MUSIC_TOPIC))) continue;
const eventId = normalizeLower(event.id || '');
if (eventId && byEventId.has(eventId)) continue;
const address = buildTrackIdFromEvent(event);
const existing = byAddress.get(address);
if (!existing || safeNumber(event.created_at, 0) >= safeNumber(existing.created_at, 0)) {
byAddress.set(address, event);
if (eventId) byEventId.set(eventId, event);
}
}
return [...byAddress.values()].sort(sortByRecent);
}
function eventToNormalizedTrack(event) {
const tags = Array.isArray(event?.tags) ? event.tags : [];
const id = buildTrackIdFromEvent(event);
const title = normalizeText(getTagValue(tags, 'title')) || 'Unknown title';
const artist = normalizeText(getTagValue(tags, 'artist')) || 'Unknown artist';
const albumTitle = normalizeText(getTagValue(tags, 'album'));
const duration = safeNumber(getTagValue(tags, 'duration'), 0);
const cover = normalizeText(getTagValue(tags, 'image'));
const streamUrl = normalizeText(getTagValue(tags, 'url'));
const format = normalizeText(getTagValue(tags, 'format')) || inferFormatFromMime(getTagValue(tags, 'm'));
const mime = normalizeText(getTagValue(tags, 'm'));
const sha256 = normalizeText(getTagValue(tags, 'x'));
const released = normalizeText(getTagValue(tags, 'released'));
const trackNumber = normalizeText(getTagValue(tags, 'track_number') || getTagValue(tags, 'track'));
const discNumber = normalizeText(getTagValue(tags, 'disc_number') || getTagValue(tags, 'disc'));
const genre = normalizeText(getTagValue(tags, 'genre'));
const albumId = albumTitle ? `album:${normalizeSlug(`${artist} ${albumTitle}`)}` : '';
const artistId = artist ? `artist:${normalizeSlug(artist)}` : '';
return {
id,
eventId: normalizeText(event?.id || ''),
pubkey: normalizeText(event?.pubkey || ''),
dTag: normalizeText(getTagValue(tags, 'd')),
title,
artist,
artistId,
duration,
cover,
albumTitle,
albumId,
streamUrl,
format,
mime,
sha256,
size: safeNumber(getTagValue(tags, 'size'), 0),
released,
releaseYear: parseReleasedYear(released),
genre,
trackNumber,
discNumber,
createdAt: safeNumber(event?.created_at, 0),
raw: event,
};
}
function shapeSearchResponse(items) {
const rows = Array.isArray(items) ? items : [];
return {
items: rows,
limit: rows.length,
offset: 0,
totalNumberOfItems: rows.length,
};
}
function trackMatchesQuery(track, query) {
const q = normalizeLower(query);
if (!q) return true;
const haystacks = [
track?.title,
track?.artist,
track?.albumTitle,
track?.id,
track?.eventId,
track?.dTag,
track?.genre,
]
.map((v) => normalizeLower(v))
.filter(Boolean);
return haystacks.some((v) => v.includes(q));
}
function groupTracksByAlbum(tracks) {
const byAlbum = new Map();
for (const track of tracks || []) {
const title = normalizeText(track?.albumTitle);
if (!title) continue;
const artist = normalizeText(track?.artist || 'Unknown artist');
const key = `${normalizeLower(artist)}::${normalizeLower(title)}`;
if (!byAlbum.has(key)) {
byAlbum.set(key, {
id: track.albumId || `album:${normalizeSlug(`${artist} ${title}`)}`,
title,
cover: normalizeText(track?.cover || ''),
artist: { name: artist, id: track.artistId || `artist:${normalizeSlug(artist)}` },
artistName: artist,
releaseDate: track.released || '',
numberOfTracks: 0,
explicit: false,
type: 'ALBUM',
tracks: [],
});
}
const album = byAlbum.get(key);
album.tracks.push(track);
album.numberOfTracks = album.tracks.length;
if (!album.cover && track.cover) album.cover = track.cover;
if (!album.releaseDate && track.released) album.releaseDate = track.released;
}
return [...byAlbum.values()].sort((a, b) => {
const yearDiff = parseReleasedYear(b.releaseDate) - parseReleasedYear(a.releaseDate);
if (yearDiff !== 0) return yearDiff;
return a.title.localeCompare(b.title);
});
}
function groupTracksByArtist(tracks) {
const byArtist = new Map();
for (const track of tracks || []) {
const name = normalizeText(track?.artist);
if (!name) continue;
const key = normalizeLower(name);
if (!byArtist.has(key)) {
byArtist.set(key, {
id: track.artistId || `artist:${normalizeSlug(name)}`,
name,
picture: normalizeText(track?.cover || ''),
tracks: [],
});
}
const artist = byArtist.get(key);
artist.tracks.push(track);
if (!artist.picture && track.cover) artist.picture = track.cover;
}
return [...byArtist.values()].sort((a, b) => a.name.localeCompare(b.name));
}
async function safeFetchWithFilter(filters, options = {}) {
const [cacheResult, relayResult] = await Promise.allSettled([
queryCache(filters),
ndkFetchEvents(filters),
]);
const cacheEvents = cacheResult.status === 'fulfilled' && Array.isArray(cacheResult.value)
? cacheResult.value
: [];
const relayEvents = relayResult.status === 'fulfilled' && Array.isArray(relayResult.value)
? relayResult.value
: [];
return dedupeEvents([...cacheEvents, ...relayEvents], options);
}
export class GruuvAPI {
constructor(options = {}) {
this.options = {
limit: Number.isFinite(options.limit) ? Number(options.limit) : DEFAULT_LIMIT,
...options,
};
this.trackCache = new Map();
this.lastTrackSnapshot = [];
}
async initInstances() {
return {
api: ['nostr:kind36787'],
streaming: ['blossom:url-tag'],
};
}
cacheTracks(tracks) {
const rows = Array.isArray(tracks) ? tracks : [];
for (const track of rows) {
if (!track?.id) continue;
this.trackCache.set(String(track.id), track);
if (track.eventId) this.trackCache.set(String(track.eventId), track);
}
this.lastTrackSnapshot = rows;
}
async fetchTrackEvents(filters = {}) {
const mergedFilter = {
kinds: [TRACK_KIND],
'#t': [GRUUV_TOPIC],
limit: this.options.limit,
...filters,
};
const events = await safeFetchWithFilter(mergedFilter);
const tracks = events.map(eventToNormalizedTrack).filter((track) => track.streamUrl);
this.cacheTracks(tracks);
return tracks;
}
prepareTrack(track) {
if (!track || typeof track !== 'object') return null;
if (track.raw && Array.isArray(track.raw.tags)) {
return eventToNormalizedTrack(track.raw);
}
const normalized = {
id: normalizeText(track.id || ''),
title: normalizeText(track.title || '') || 'Unknown title',
artist: normalizeText(track.artist || '') || 'Unknown artist',
duration: safeNumber(track.duration, 0),
cover: normalizeText(track.cover || ''),
albumTitle: normalizeText(track.albumTitle || ''),
raw: track.raw || track,
};
if (!normalized.id && track.raw?.pubkey && Array.isArray(track.raw?.tags)) {
normalized.id = buildTrackIdFromEvent(track.raw);
}
return normalized;
}
getCoverUrl(coverId) {
return normalizeText(coverId);
}
getArtistPictureUrl(id) {
return normalizeText(id);
}
async searchTracks(query) {
const q = normalizeText(query);
if (!q) return shapeSearchResponse([]);
const asCoordinate = parseTrackCoordinate(q);
if (asCoordinate) {
const tracks = await this.fetchTrackEvents({
authors: [asCoordinate.pubkey],
'#d': [asCoordinate.dTag],
limit: 20,
});
return shapeSearchResponse(tracks.filter((t) => String(t.id) === q));
}
const tracks = await this.fetchTrackEvents();
const filtered = tracks.filter((track) => trackMatchesQuery(track, q));
return shapeSearchResponse(filtered);
}
async searchAlbums(query) {
const q = normalizeText(query);
if (!q) return shapeSearchResponse([]);
const tracks = await this.fetchTrackEvents();
const albums = groupTracksByAlbum(tracks).filter((album) => {
const haystack = `${album.title} ${album.artistName}`.toLowerCase();
return haystack.includes(normalizeLower(q));
});
return shapeSearchResponse(albums);
}
async searchArtists(query) {
const q = normalizeText(query);
if (!q) return shapeSearchResponse([]);
const tracks = await this.fetchTrackEvents();
const artists = groupTracksByArtist(tracks).filter((artist) => {
const haystack = `${artist.name}`.toLowerCase();
return haystack.includes(normalizeLower(q));
});
return shapeSearchResponse(artists);
}
async getAlbum(id) {
const albumId = normalizeText(id);
if (!albumId) throw new Error('Album id is required');
const tracks = await this.fetchTrackEvents();
const albums = groupTracksByAlbum(tracks);
const album = albums.find((a) => String(a.id) === albumId);
if (!album) throw new Error('Album not found');
const sortedTracks = [...album.tracks].sort((a, b) => {
const aDisc = safeNumber(a.discNumber, 1);
const bDisc = safeNumber(b.discNumber, 1);
if (aDisc !== bDisc) return aDisc - bDisc;
const aTrack = safeNumber(a.trackNumber, Number.MAX_SAFE_INTEGER);
const bTrack = safeNumber(b.trackNumber, Number.MAX_SAFE_INTEGER);
if (aTrack !== bTrack) return aTrack - bTrack;
return a.title.localeCompare(b.title);
});
return { album: { ...album, tracks: undefined }, tracks: sortedTracks };
}
async getArtist(artistId) {
const id = normalizeText(artistId);
if (!id) throw new Error('Artist id is required');
const tracks = await this.fetchTrackEvents();
const artists = groupTracksByArtist(tracks);
const artist = artists.find((a) => String(a.id) === id);
if (!artist) throw new Error('Artist not found');
const artistTracks = [...artist.tracks].sort((a, b) => {
const yearDiff = safeNumber(b.releaseYear, 0) - safeNumber(a.releaseYear, 0);
if (yearDiff !== 0) return yearDiff;
return a.title.localeCompare(b.title);
});
const albums = groupTracksByAlbum(artistTracks)
.map((album) => ({ ...album, tracks: undefined }))
.filter((album) => normalizeLower(album.artistName) === normalizeLower(artist.name));
return {
id: artist.id,
name: artist.name,
picture: artist.picture,
albums,
eps: [],
tracks: artistTracks.slice(0, 20),
};
}
async getTracksByAddresses(addresses = []) {
const input = Array.isArray(addresses) ? addresses : [];
const normalizedAddresses = [...new Set(
input
.map((value) => parseTrackCoordinate(value))
.filter(Boolean)
.map((coord) => `${TRACK_KIND}:${coord.pubkey}:${coord.dTag}`)
)];
console.log('[gruuv-api] getTracksByAddresses:start', {
requested: input.length,
normalized: normalizedAddresses.length,
normalizedAddresses,
});
const byAddress = new Map();
const unresolvedByAuthor = new Map();
for (const address of normalizedAddresses) {
const cached = this.trackCache.get(address);
if (cached?.streamUrl) {
byAddress.set(address, cached);
continue;
}
const coord = parseTrackCoordinate(address);
if (!coord) continue;
const set = unresolvedByAuthor.get(coord.pubkey) || new Set();
set.add(coord.dTag);
unresolvedByAuthor.set(coord.pubkey, set);
}
console.log('[gruuv-api] getTracksByAddresses:cache', {
cacheHits: byAddress.size,
unresolvedAuthors: unresolvedByAuthor.size,
});
for (const [author, dTagsSet] of unresolvedByAuthor.entries()) {
const dTags = [...dTagsSet].filter(Boolean);
if (!dTags.length) continue;
const filter = {
kinds: [TRACK_KIND],
authors: [author],
'#d': dTags,
limit: Math.max(120, dTags.length * 3),
};
console.log('[gruuv-api] getTracksByAddresses:fetch', {
author,
dTags,
filter,
});
const events = await safeFetchWithFilter(filter, { requireTopic: false });
console.log('[gruuv-api] getTracksByAddresses:events', {
author,
dTagsRequested: dTags.length,
eventsFetched: events.length,
eventIds: events.map((event) => event?.id).filter(Boolean),
});
const tracks = events
.map(eventToNormalizedTrack)
.filter((track) => track.streamUrl);
this.cacheTracks(tracks);
for (const track of tracks) {
if (!track?.id) continue;
byAddress.set(String(track.id), track);
}
}
console.log('[gruuv-api] getTracksByAddresses:done', {
resolved: byAddress.size,
resolvedIds: [...byAddress.keys()],
});
return byAddress;
}
async getTrackStream(id) {
const target = normalizeText(id);
if (!target) throw new Error('Track id is required');
let track = this.trackCache.get(target) || null;
if (!track && parseTrackCoordinate(target)) {
const lookup = await this.searchTracks(target);
const items = Array.isArray(lookup?.items) ? lookup.items : [];
track = items.find((item) => String(item?.id) === target) || items[0] || null;
}
if (!track && isHexEventId(target)) {
const tracks = await this.fetchTrackEvents({ ids: [target], limit: 20 });
track = tracks.find((item) => String(item.eventId) === target) || null;
}
if (!track) throw new Error('Track not found');
if (!track.streamUrl) throw new Error('Track has no stream URL');
return { streamUrl: track.streamUrl, isDash: false };
}
}

199
www/js/gruuv-playlists.mjs Normal file
View File

@@ -0,0 +1,199 @@
const PLAYLIST_KIND = 34139;
const TRACK_KIND = 36787;
function getTagValue(tags, key) {
if (!Array.isArray(tags)) return '';
const tag = tags.find((t) => Array.isArray(t) && t[0] === key && typeof t[1] === 'string');
return tag?.[1] || '';
}
function getTagValues(tags, key) {
if (!Array.isArray(tags)) return [];
return tags
.filter((t) => Array.isArray(t) && t[0] === key && typeof t[1] === 'string')
.map((t) => t[1]);
}
function normalizeSlug(value) {
return String(value || '')
.trim()
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 64);
}
function safeJsonParse(value, fallback) {
try {
return JSON.parse(value);
} catch {
return fallback;
}
}
function parseTrackAddress(address = '') {
const raw = String(address || '').trim();
const parts = raw.split(':');
if (parts.length < 3) return null;
if (Number(parts[0]) !== TRACK_KIND) return null;
const pubkey = String(parts[1] || '').trim().toLowerCase();
const dTag = parts.slice(2).join(':').trim();
if (!/^[a-f0-9]{64}$/i.test(pubkey) || !dTag) return null;
return {
kind: TRACK_KIND,
pubkey,
dTag,
address: `${TRACK_KIND}:${pubkey}:${dTag}`,
};
}
function buildTrackTag(track) {
const id = String(track?.id || '').trim();
const parsed = parseTrackAddress(id);
if (parsed) return ['a', parsed.address];
const rawPubkey = String(track?.raw?.pubkey || track?.pubkey || '').trim().toLowerCase();
const dTag = String(
track?.dTag
|| getTagValue(track?.raw?.tags, 'd')
|| track?.identifier
|| ''
).trim();
if (/^[a-f0-9]{64}$/i.test(rawPubkey) && dTag) {
return ['a', `${TRACK_KIND}:${rawPubkey}:${dTag}`];
}
return null;
}
function buildTrackCache(track) {
const id = String(track?.id || '').trim();
if (!id) return null;
return {
id,
title: typeof track?.title === 'string' ? track.title : '',
artist: typeof track?.artist === 'string' ? track.artist : '',
duration: Number.isFinite(track?.duration) ? Number(track.duration) : 0,
cover: typeof track?.cover === 'string' ? track.cover : '',
albumTitle: typeof track?.albumTitle === 'string' ? track.albumTitle : '',
streamUrl: typeof track?.streamUrl === 'string' ? track.streamUrl : '',
};
}
export function createPlaylistIdentifier(title = '') {
const slug = normalizeSlug(title);
if (!slug) return `${Date.now()}`;
return `${slug}-${Date.now()}`;
}
export function isMusicPlaylistEvent(event) {
if (!event || event.kind !== PLAYLIST_KIND || !Array.isArray(event.tags)) return false;
const topics = getTagValues(event.tags, 't').map((t) => t.toLowerCase());
if (topics.includes('gruuv') || topics.includes('music') || topics.includes('playlist')) {
return true;
}
const hasIdentifier = Boolean(getTagValue(event.tags, 'd'));
const hasTitle = Boolean(getTagValue(event.tags, 'title'));
const hasTrackRefs = getTagValues(event.tags, 'a').some((value) => Boolean(parseTrackAddress(value)));
return hasIdentifier && (hasTitle || hasTrackRefs);
}
export function buildPlaylistEvent(playlist, createdAt = Math.floor(Date.now() / 1000)) {
const identifier = playlist?.identifier || playlist?.id || createPlaylistIdentifier(playlist?.title || '');
const title = typeof playlist?.title === 'string' ? playlist.title.trim() : '';
const description = typeof playlist?.description === 'string' ? playlist.description.trim() : '';
const image = typeof playlist?.image === 'string' ? playlist.image.trim() : '';
const banner = typeof playlist?.banner === 'string' ? playlist.banner.trim() : '';
const inputTracks = Array.isArray(playlist?.tracks) ? playlist.tracks : [];
const cacheTracks = inputTracks.map(buildTrackCache).filter(Boolean);
const seen = new Set();
const trackTags = [];
for (const track of inputTracks) {
const tag = buildTrackTag(track);
if (!tag) continue;
const value = tag[1];
if (seen.has(value)) continue;
seen.add(value);
trackTags.push(tag);
}
const tags = [
['d', identifier],
['title', title || 'Untitled playlist'],
['alt', `Playlist: ${title || 'Untitled playlist'}`],
['t', 'gruuv'],
['t', 'music'],
['t', 'playlist'],
];
if (description) tags.push(['description', description]);
if (image) tags.push(['image', image]);
if (banner) tags.push(['banner', banner]);
tags.push(...trackTags);
return {
created_at: createdAt,
kind: PLAYLIST_KIND,
tags,
content: JSON.stringify({ tracks: cacheTracks }),
};
}
export function parsePlaylistEvent(event) {
if (!event || event.kind !== PLAYLIST_KIND) return null;
if (!Array.isArray(event.tags)) return null;
const identifier = getTagValue(event.tags, 'd') || '';
const title = getTagValue(event.tags, 'title') || 'Untitled playlist';
const description = getTagValue(event.tags, 'description') || '';
const image = getTagValue(event.tags, 'image') || '';
const banner = getTagValue(event.tags, 'banner') || '';
const aValues = getTagValues(event.tags, 'a');
const trackIdsFromTags = aValues
.map((v) => parseTrackAddress(v)?.address || '')
.filter(Boolean);
const parsedContent = safeJsonParse(event.content || '', {});
const cacheTracks = Array.isArray(parsedContent?.tracks)
? parsedContent.tracks.map(buildTrackCache).filter(Boolean)
: [];
const cachedById = new Map(cacheTracks.map((t) => [String(t.id), t]));
const trackIds = [...new Set(trackIdsFromTags)];
const tracks = trackIds.map((id) => {
const cached = cachedById.get(id);
if (cached) return cached;
return { id, title: '', artist: '', duration: 0, cover: '', albumTitle: '', streamUrl: '' };
});
return {
eventId: event.id || '',
pubkey: event.pubkey || '',
createdAt: Number(event.created_at) || 0,
identifier,
title,
description,
image,
banner,
tracks,
trackIds,
raw: event,
};
}
export function playlistEventAddress(pubkey, identifier) {
if (!pubkey || !identifier) return '';
return `${PLAYLIST_KIND}:${pubkey}:${identifier}`;
}
export { PLAYLIST_KIND, parseTrackAddress, buildTrackTag };

204
www/js/gruuv-upload.mjs Normal file
View File

@@ -0,0 +1,204 @@
import { publishEvent, getPubkey } from './init-ndk.mjs';
import { calculateSHA256, createBlossomAuth } from './blossom-api.mjs';
import { getBlossomServers } from './blossom-ui.mjs';
const TRACK_KIND = 36787;
function normalizeText(value = '') {
return String(value || '').trim();
}
function extensionFromName(name = '') {
const base = String(name || '').trim();
const idx = base.lastIndexOf('.');
if (idx < 0) return '';
return base.slice(idx + 1).toLowerCase();
}
function inferFormat(file) {
const ext = extensionFromName(file?.name || '');
if (ext) return ext;
const mime = normalizeText(file?.type || '').toLowerCase();
if (mime.includes('flac')) return 'flac';
if (mime.includes('mpeg') || mime.includes('mp3')) return 'mp3';
if (mime.includes('aac')) return 'aac';
if (mime.includes('ogg')) return 'ogg';
if (mime.includes('wav')) return 'wav';
return 'bin';
}
function inferMime(file) {
const mime = normalizeText(file?.type || '');
if (mime) return mime;
const format = inferFormat(file);
if (format === 'mp3') return 'audio/mpeg';
if (format === 'flac') return 'audio/flac';
if (format === 'ogg') return 'audio/ogg';
if (format === 'aac') return 'audio/aac';
if (format === 'wav') return 'audio/wav';
return 'application/octet-stream';
}
function selectUploadServer() {
const servers = getBlossomServers();
const healthyUpload = servers.find((s) => s?.healthy && s?.upload);
if (healthyUpload?.url) return String(healthyUpload.url).trim().replace(/\/$/, '');
const anyUpload = servers.find((s) => s?.upload);
if (anyUpload?.url) return String(anyUpload.url).trim().replace(/\/$/, '');
const healthyAny = servers.find((s) => s?.healthy);
if (healthyAny?.url) return String(healthyAny.url).trim().replace(/\/$/, '');
if (servers[0]?.url) return String(servers[0].url).trim().replace(/\/$/, '');
return '';
}
async function getAudioDurationSeconds(file) {
if (!(file instanceof File || file instanceof Blob)) return 0;
const objectUrl = URL.createObjectURL(file);
try {
const duration = await new Promise((resolve) => {
const audio = document.createElement('audio');
const cleanup = () => {
audio.removeAttribute('src');
audio.load();
};
audio.preload = 'metadata';
audio.onloadedmetadata = () => {
const d = Number(audio.duration);
cleanup();
resolve(Number.isFinite(d) && d > 0 ? d : 0);
};
audio.onerror = () => {
cleanup();
resolve(0);
};
audio.src = objectUrl;
});
return Math.round(duration);
} finally {
URL.revokeObjectURL(objectUrl);
}
}
function makeDTag({ title, artist, sha256 }) {
const safeTitle = normalizeText(title)
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 48);
const safeArtist = normalizeText(artist)
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 32);
const prefix = [safeArtist, safeTitle].filter(Boolean).join('-') || 'track';
return `${prefix}-${String(sha256 || '').slice(0, 8)}-${Date.now()}`;
}
async function uploadFileToBlossom(file, serverUrl, sha256) {
const authToken = await createBlossomAuth('upload', sha256, `Upload ${file.name || 'audio'}`);
const res = await fetch(`${serverUrl}/upload`, {
method: 'PUT',
mode: 'cors',
cache: 'no-cache',
headers: {
'Content-Type': inferMime(file),
Authorization: `Nostr ${authToken}`,
},
body: file,
});
if (!res.ok) {
throw new Error(`Upload failed: ${res.status} ${res.statusText}`);
}
const payload = await res.json().catch(() => ({}));
const url = normalizeText(payload?.url || payload?.blob?.url || '');
return {
uploadUrl: url || `${serverUrl}/${sha256}`,
raw: payload,
};
}
export async function uploadGruuvTrack(file, metadata = {}, options = {}) {
if (!file) throw new Error('No file selected');
const pubkey = await getPubkey();
if (!pubkey) throw new Error('Not authenticated');
const serverUrl = normalizeText(options.serverUrl || selectUploadServer());
if (!serverUrl) throw new Error('No Blossom server available for upload');
const sha256 = await calculateSHA256(file);
const uploadResult = await uploadFileToBlossom(file, serverUrl, sha256);
const title = normalizeText(metadata.title || file.name?.replace(/\.[^.]+$/, '') || 'Untitled');
const artist = normalizeText(metadata.artist || 'Unknown artist');
const album = normalizeText(metadata.album || 'Uploads');
const image = normalizeText(metadata.image || '');
const genre = normalizeText(metadata.genre || '');
const released = normalizeText(metadata.released || '');
const trackNumber = normalizeText(metadata.trackNumber || '');
const discNumber = normalizeText(metadata.discNumber || '');
const duration = Number.isFinite(metadata.duration)
? Number(metadata.duration)
: await getAudioDurationSeconds(file);
const format = inferFormat(file);
const mime = inferMime(file);
const dTag = normalizeText(metadata.dTag || makeDTag({ title, artist, sha256 }));
const tags = [
['d', dTag],
['url', uploadResult.uploadUrl],
['title', title],
['artist', artist],
['album', album],
['duration', String(Math.max(0, Math.round(duration || 0)))],
['size', String(file.size || 0)],
['alt', `Song: ${title} - ${artist}`],
['format', format],
['m', mime],
['x', sha256],
['t', 'music'],
['t', 'gruuv'],
];
if (image) tags.push(['image', image]);
if (genre) {
tags.push(['genre', genre]);
tags.push(['t', genre.toLowerCase()]);
}
if (released) tags.push(['released', released]);
if (trackNumber) tags.push(['track_number', trackNumber]);
if (discNumber && discNumber !== '1') tags.push(['disc_number', discNumber]);
const event = {
created_at: Math.floor(Date.now() / 1000),
kind: TRACK_KIND,
tags,
content: `Listen to my song - ${title} by ${artist}`,
};
const publishResult = await publishEvent(event);
return {
file,
pubkey,
sha256,
url: uploadResult.uploadUrl,
dTag,
event,
publishResult,
};
}

6
www/js/version.json
View File

@@ -1,5 +1,5 @@
{
"VERSION": "v0.7.16",
"VERSION_NUMBER": "0.7.16",
"BUILD_DATE": "2026-05-29T14:58:32.174Z"
"VERSION": "v0.7.17",
"VERSION_NUMBER": "0.7.17",
"BUILD_DATE": "2026-06-09T19:15:08.620Z"
}

5600
www/music-greyscale.html Normal file
View File

File diff suppressed because it is too large Load Diff

396
www/music.html
View File

@@ -221,6 +221,38 @@
margin: 4px 0 2px;
}
#musicUploadSection {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(255, 255, 255, 0.02);
}
#musicUploadSection input,
#musicUploadSection button {
width: 100%;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 8px;
font-size: 12px;
background: var(--secondary-color);
color: var(--primary-color);
outline: none;
}
#musicUploadSection button {
cursor: pointer;
}
#musicUploadStatus {
font-size: 11px;
color: var(--muted-color);
min-height: 16px;
}
#musicPlaylistProfile {
border: var(--border);
border-radius: var(--border-radius);
@@ -1136,7 +1168,10 @@
<div class="musicSidebarTitle">MY PLAYLISTS</div>
<ul id="musicMyPlaylistsList" class="musicPlaylistList"></ul>
<div class="musicSidebarTitle">FRIENDS</div>
<div class="musicSidebarTitle" style="display:flex; align-items:center; justify-content:space-between; gap:8px;">
<span>FRIENDS</span>
<button id="musicLoadFriendsBtn" class="btn musicMiniBtn" type="button">Load</button>
</div>
<ul id="musicFriendPlaylistsList" class="musicPlaylistList"></ul>
<div class="musicSidebarTitle">AI IMPORT</div>
@@ -1152,6 +1187,16 @@
<div id="musicImportStatus"></div>
<div id="musicImportResults"></div>
</section>
<div class="musicSidebarTitle">UPLOAD TRACK</div>
<section id="musicUploadSection">
<input id="musicUploadFile" type="file" accept="audio/*" />
<input id="musicUploadTitle" type="text" placeholder="Title (optional)" />
<input id="musicUploadArtist" type="text" placeholder="Artist (optional)" />
<input id="musicUploadAlbum" type="text" placeholder="Album (optional)" />
<button id="musicUploadBtn" class="btn" type="button">Upload to Gruuv</button>
<div id="musicUploadStatus">Sign in to upload.</div>
</section>
</aside>
<div class="musicGutter resizableColumnsGutter" data-gutter-index="0" aria-hidden="true"></div>
@@ -1368,16 +1413,17 @@
import { initFooterRelayStatus, updateFooterRelayStatus, initSidenavRelaySection, updateSidenavRelaySection, setRelayActivityState } from './js/relay-ui.mjs';
import { initBlossomSection, updateBlossomSection } from './js/blossom-ui.mjs';
import { initAiSectionWithLocalConfig } from './js/ai-ui.mjs';
import { GreyscaleAPI } from './js/greyscale-api.mjs';
import { GruuvAPI } from './js/gruuv-api.mjs';
import { SimplePlayer } from './js/greyscale-player.mjs';
import { sendAiChatJson } from './js/ai-chat.mjs';
import { uploadGruuvTrack } from './js/gruuv-upload.mjs';
import {
PLAYLIST_KIND,
buildPlaylistEvent,
createPlaylistIdentifier,
parsePlaylistEvent,
isMusicPlaylistEvent,
} from './js/greyscale-playlists.mjs';
} from './js/gruuv-playlists.mjs';
import { mountDotMenu } from './js/dot-menu.mjs';
import { initResizableColumns } from './js/resizable-columns.mjs';
import {
@@ -1466,6 +1512,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
playlistDescriptionInput: document.getElementById('musicPlaylistDescriptionInput'),
myPlaylistsList: document.getElementById('musicMyPlaylistsList'),
friendPlaylistsList: document.getElementById('musicFriendPlaylistsList'),
loadFriendsBtn: document.getElementById('musicLoadFriendsBtn'),
importDropZone: document.getElementById('musicImportDropZone'),
importInput: document.getElementById('musicImportInput'),
importProcessing: document.getElementById('musicImportProcessing'),
@@ -1483,9 +1530,15 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
viewerPubkeyInput: document.getElementById('musicViewerPubkeyInput'),
viewerLoadBtn: document.getElementById('musicViewerLoadBtn'),
viewerInfo: document.getElementById('musicViewerInfo'),
uploadFileInput: document.getElementById('musicUploadFile'),
uploadTitleInput: document.getElementById('musicUploadTitle'),
uploadArtistInput: document.getElementById('musicUploadArtist'),
uploadAlbumInput: document.getElementById('musicUploadAlbum'),
uploadBtn: document.getElementById('musicUploadBtn'),
uploadStatus: document.getElementById('musicUploadStatus'),
};
const musicApi = new GreyscaleAPI();
const musicApi = new GruuvAPI();
const musicPlayer = new SimplePlayer({
audio: musicEls.audio,
progressEl: musicEls.progress,
@@ -1502,6 +1555,8 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
const myPlaylists = new Map();
const friendPlaylists = new Map();
let friendsFeedEnabled = false;
let playlistSubscription = null;
let musicQueue = [];
let queueCurrentIndex = -1;
let musicResultsMode = 'search';
@@ -1534,6 +1589,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
let pendingShareUrl = '';
let pendingShareArtUrl = '';
let pendingShareLabel = '';
let isGruuvUploadRunning = false;
const BLANK_IMAGE_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
const MUSIC_COLUMN_STORAGE_KEY = 'music-column-widths:v1';
@@ -1605,6 +1661,76 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
musicEls.status.dataset.type = type;
}
function setUploadStatus(text) {
if (!musicEls.uploadStatus) return;
musicEls.uploadStatus.textContent = String(text || '').trim();
}
function updateUploadUiState() {
const canUpload = Boolean(isAuthenticated && currentPubkey);
if (musicEls.uploadBtn) {
musicEls.uploadBtn.disabled = !canUpload || isGruuvUploadRunning;
}
if (musicEls.uploadFileInput) {
musicEls.uploadFileInput.disabled = isGruuvUploadRunning;
}
if (musicEls.uploadTitleInput) {
musicEls.uploadTitleInput.disabled = isGruuvUploadRunning;
}
if (musicEls.uploadArtistInput) {
musicEls.uploadArtistInput.disabled = isGruuvUploadRunning;
}
if (musicEls.uploadAlbumInput) {
musicEls.uploadAlbumInput.disabled = isGruuvUploadRunning;
}
if (!canUpload && !isGruuvUploadRunning) {
setUploadStatus('Sign in to upload.');
}
}
async function handleGruuvUploadClick() {
if (isGruuvUploadRunning) return;
try {
await promptLoginIfNeeded();
} catch (error) {
setUploadStatus(`Login required: ${error?.message || 'Unknown error'}`);
return;
}
const file = musicEls.uploadFileInput?.files?.[0];
if (!file) {
setUploadStatus('Choose an audio file first.');
return;
}
isGruuvUploadRunning = true;
updateUploadUiState();
setUploadStatus(`Uploading ${file.name}...`);
try {
const result = await uploadGruuvTrack(file, {
title: musicEls.uploadTitleInput?.value?.trim() || '',
artist: musicEls.uploadArtistInput?.value?.trim() || '',
album: musicEls.uploadAlbumInput?.value?.trim() || '',
});
const title = result?.event?.tags?.find((t) => t?.[0] === 'title')?.[1] || file.name;
setUploadStatus(`Uploaded: ${title}`);
setMusicStatus(`Uploaded track to Gruuv: ${title}`, 'ok');
if (musicEls.uploadFileInput) musicEls.uploadFileInput.value = '';
} catch (error) {
console.error('[music upload] upload failed', error);
setUploadStatus(`Upload failed: ${error?.message || 'Unknown error'}`);
setMusicStatus(`Upload failed: ${error?.message || 'Unknown error'}`, 'error');
} finally {
isGruuvUploadRunning = false;
updateUploadUiState();
}
}
function resolveAuthModeFromUrl() {
const explicitAuth = getExplicitAuthModeFromUrl();
if (explicitAuth) return explicitAuth;
@@ -1687,6 +1813,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
if (musicEls.playlistNameInput) {
musicEls.playlistNameInput.disabled = isReadOnlyTargetMode();
}
updateUploadUiState();
}
async function initializeAuthentication(mode) {
@@ -1743,6 +1870,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
await initializeAuthenticatedPageFeatures();
syncLoggedInNpubToUrl();
updateViewerControls();
updateUploadUiState();
return true;
}
@@ -1839,7 +1967,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
function normalizeQueueTrack(track) {
if (!track || typeof track !== 'object') return null;
return {
id: track.id,
id: String(track.id || ''),
title: track.title || 'Unknown title',
artist: track.artist || 'Unknown artist',
duration: track.duration || 0,
@@ -1847,6 +1975,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
albumTitle: track.albumTitle || '',
albumId: track.albumId || track.album?.id || track.raw?.album?.id || '',
artistId: track.artistId || track.artist?.id || track.raw?.artist?.id || track.raw?.artists?.[0]?.id || '',
streamUrl: track.streamUrl || track.raw?.streamUrl || '',
};
}
@@ -2405,6 +2534,14 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
}
function renderFriendPlaylists() {
if (!friendsFeedEnabled && !isExternalTargetMode()) {
destroyMountedMenuInstances(mountedMusicMenus.friendPlaylists);
if (musicEls.loadFriendsBtn) musicEls.loadFriendsBtn.textContent = 'Load';
musicEls.friendPlaylistsList.innerHTML = '<li class="musicPlaylistMeta">Friend playlists are paused. Click Load to fetch.</li>';
return;
}
if (musicEls.loadFriendsBtn) musicEls.loadFriendsBtn.textContent = 'Loaded';
const items = Array.from(friendPlaylists.values()).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
if (!items.length) {
destroyMountedMenuInstances(mountedMusicMenus.friendPlaylists);
@@ -2712,14 +2849,20 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
return false;
}
const exists = (playlist.tracks || []).some((item) => Number(item?.id) === Number(track?.id));
const trackId = String(track?.id || '').trim();
if (!trackId) {
if (!silent) setMusicStatus('Track is missing an id.', 'error');
return false;
}
const exists = (playlist.tracks || []).some((item) => String(item?.id || '').trim() === trackId);
if (exists) {
if (!silent) setMusicStatus('Track already in playlist.', 'neutral');
return false;
}
playlist.tracks.push({
id: track.id,
id: trackId,
title: track.title || '',
artist: track.artist || '',
duration: track.duration || 0,
@@ -3177,13 +3320,13 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
return;
}
const existingIds = new Set((playlist.tracks || []).map((track) => Number(track?.id)).filter((id) => Number.isFinite(id)));
const existingIds = new Set((playlist.tracks || []).map((track) => String(track?.id || '').trim()).filter(Boolean));
let added = 0;
let skipped = 0;
for (const track of importMatchedTracks) {
const id = Number(track?.id);
if (!Number.isFinite(id) || existingIds.has(id)) {
const id = String(track?.id || '').trim();
if (!id || existingIds.has(id)) {
skipped += 1;
continue;
}
@@ -3242,55 +3385,192 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
clearPlaylistDropIndicator();
}
function hydratePlaylistFromEvent(event, isFriend = false) {
async function resolveTracksByAddresses(addresses = []) {
const ids = Array.isArray(addresses) ? addresses.filter(Boolean) : [];
if (!ids.length) return new Map();
if (musicApi && typeof musicApi.getTracksByAddresses === 'function') {
return musicApi.getTracksByAddresses(ids);
}
console.warn('[music] Falling back to coordinate search: musicApi.getTracksByAddresses() unavailable');
const map = new Map();
for (const id of ids) {
try {
const result = await musicApi.searchTracks(id);
const items = Array.isArray(result?.items) ? result.items : [];
const match = items.find((item) => String(item?.id || '').trim() === id) || items[0] || null;
if (match) {
const prepared = musicApi.prepareTrack(match) || match;
map.set(id, prepared);
}
} catch (error) {
console.warn('[music] resolveTracksByAddresses fallback search failed', { id, error });
}
}
return map;
}
async function hydratePlaylistFromEvent(event, isFriend = false) {
const parsed = parsePlaylistEvent(event);
if (!parsed || !isMusicPlaylistEvent(event)) return;
if (isFriend) {
const key = getFriendPlaylistRouteKey(parsed);
if (key) friendPlaylists.set(key, parsed);
renderFriendPlaylists();
} else {
const existing = myPlaylists.get(parsed.identifier);
myPlaylists.set(parsed.identifier, {
identifier: parsed.identifier,
title: parsed.title,
description: parsed.description,
image: parsed.image,
banner: parsed.banner || '',
tracks: parsed.tracks,
pubkey: parsed.pubkey,
eventId: parsed.eventId,
createdAt: parsed.createdAt,
raw: parsed.raw,
...(existing || {}),
});
savePlaylistsLocal();
renderMyPlaylists();
}
const commitPlaylist = (playlist, expectedEventId = '') => {
const shouldSkipAsStale = (existing) => {
if (!existing) return false;
const existingCreatedAt = Number(existing?.createdAt || 0);
const incomingCreatedAt = Number(playlist?.createdAt || 0);
const existingEventId = String(existing?.eventId || '').trim();
const incomingEventId = String(playlist?.eventId || '').trim();
if (
expectedEventId
&& existingEventId
&& existingEventId !== expectedEventId
&& existingCreatedAt >= incomingCreatedAt
) {
return true;
}
if (
!expectedEventId
&& existingEventId
&& incomingEventId
&& existingEventId !== incomingEventId
&& existingCreatedAt > incomingCreatedAt
) {
return true;
}
return false;
};
const urlEpisode = String(getEpisodeFromUrl() || '').trim();
if (urlEpisode && parsed.identifier === urlEpisode && !selectedPlaylistId) {
if (isFriend) {
const key = getFriendPlaylistRouteKey(parsed);
if (key) openFriendPlaylistByKey(key);
const key = getFriendPlaylistRouteKey(playlist);
if (!key) return;
const existing = friendPlaylists.get(key) || null;
if (shouldSkipAsStale(existing)) return;
friendPlaylists.set(key, playlist);
renderFriendPlaylists();
} else {
openMyPlaylistByIdentifier(parsed.identifier);
}
}
const existing = myPlaylists.get(playlist.identifier) || null;
if (shouldSkipAsStale(existing)) return;
if (activePlaylistView?.scope && activePlaylistView?.playlist?.identifier === parsed.identifier) {
activePlaylistView = { ...activePlaylistView, playlist: parsed };
renderPlaylistProfileCard();
myPlaylists.set(playlist.identifier, {
...(existing || {}),
identifier: playlist.identifier,
title: playlist.title,
description: playlist.description,
image: playlist.image,
banner: playlist.banner || '',
tracks: playlist.tracks,
pubkey: playlist.pubkey,
eventId: playlist.eventId,
createdAt: playlist.createdAt,
raw: playlist.raw,
});
savePlaylistsLocal();
renderMyPlaylists();
}
const activeKey = getFriendPlaylistRouteKey(playlist);
const shouldRefreshVisibleResults = (
(musicResultsMode === 'my-playlist' && musicResultsPlaylistId === playlist.identifier)
|| (musicResultsMode === 'friend-playlist' && !!activeKey && musicResultsPlaylistId === activeKey)
);
if (shouldRefreshVisibleResults) {
musicTracks = Array.isArray(playlist.tracks) ? [...playlist.tracks] : [];
renderMusicResults(musicTracks);
}
const urlEpisode = String(getEpisodeFromUrl() || '').trim();
if (urlEpisode && playlist.identifier === urlEpisode && !selectedPlaylistId) {
if (isFriend) {
const key = getFriendPlaylistRouteKey(playlist);
if (key) openFriendPlaylistByKey(key);
} else {
openMyPlaylistByIdentifier(playlist.identifier);
}
}
if (activePlaylistView?.scope && activePlaylistView?.playlist?.identifier === playlist.identifier) {
activePlaylistView = { ...activePlaylistView, playlist };
renderPlaylistProfileCard();
}
};
commitPlaylist(parsed);
const trackIds = Array.isArray(parsed.trackIds) ? parsed.trackIds.filter(Boolean) : [];
console.log('[music] hydratePlaylistFromEvent parsed', {
identifier: parsed.identifier,
eventId: parsed.eventId,
createdAt: parsed.createdAt,
trackIdsCount: trackIds.length,
trackIds,
});
if (!trackIds.length) return;
try {
const resolvedByAddress = await resolveTracksByAddresses(trackIds);
console.log('[music] hydratePlaylistFromEvent resolved', {
identifier: parsed.identifier,
requested: trackIds.length,
resolved: resolvedByAddress?.size || 0,
});
const hydratedTracks = trackIds.map((id, index) => {
const base = parsed.tracks?.[index] || { id };
const resolved = resolvedByAddress?.get?.(id) || null;
if (resolved) {
const prepared = musicApi.prepareTrack(resolved) || resolved;
return {
...base,
...prepared,
id,
unavailable: false,
};
}
return {
...base,
id,
title: String(base?.title || '').trim() || 'Unavailable track',
artist: String(base?.artist || '').trim() || 'Unknown artist',
duration: Number(base?.duration) || 0,
cover: String(base?.cover || '').trim(),
albumTitle: String(base?.albumTitle || '').trim(),
streamUrl: String(base?.streamUrl || '').trim(),
unavailable: true,
};
});
commitPlaylist({
...parsed,
tracks: hydratedTracks,
}, parsed.eventId || '');
} catch (error) {
console.warn('[music] Failed to hydrate playlist tracks from a-tags', {
playlist: parsed.identifier,
error,
});
}
}
function subscribeAllPlaylists() {
const filter = { kinds: [PLAYLIST_KIND], '#t': ['music'], limit: 600 };
const filter = { kinds: [PLAYLIST_KIND], limit: 600 };
if (isExternalTargetMode()) {
filter.authors = [targetPubkey];
} else if (!friendsFeedEnabled && currentPubkey) {
filter.authors = [currentPubkey];
}
subscribe(
try {
playlistSubscription?.close?.();
} catch {
// ignore stale subscription handle errors
}
playlistSubscription = subscribe(
filter,
{ closeOnEose: false, cacheUsage: 'PARALLEL' }
);
@@ -3301,6 +3581,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
if (!evt || typeof evt !== 'object') return;
if (evt.kind !== PLAYLIST_KIND || !isMusicPlaylistEvent(evt)) return;
if (isExternalTargetMode() && evt.pubkey !== targetPubkey) return;
if (!friendsFeedEnabled && !isExternalTargetMode() && evt.pubkey !== currentPubkey) return;
const treatAsMine = Boolean(
currentPubkey
@@ -4347,14 +4628,14 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
title: track.title || '',
});
const qualityCandidates = ['HIGH', 'MP3_320', 'LOSSLESS'];
const qualityCandidates = ['DIRECT'];
let lastError = null;
for (const quality of qualityCandidates) {
try {
console.debug('[music][download] requesting stream', { trackId: track.id, quality });
const stream = await musicApi.getTrackStream(track.id, quality);
const stream = await musicApi.getTrackStream(track.id);
const streamUrl = stream?.streamUrl;
if (!streamUrl) {
lastError = new Error(`No stream URL for quality ${quality}`);
@@ -4583,6 +4864,7 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
installImageFallbacks();
initMusicResizableColumns();
updateUploadUiState();
musicPlayer.onTrackChanged = (track) => {
updateMusicPlayerMeta(track);
@@ -4606,6 +4888,10 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
applyTargetPubkeyFromInput();
});
musicEls.uploadBtn?.addEventListener('click', async () => {
await handleGruuvUploadClick();
});
musicEls.results.addEventListener('click', async (event) => {
const playAlbumNow = event.target.closest('[data-play-album-now]');
@@ -4832,6 +5118,15 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
navigate(`/playlist/${encodeURIComponent(pubkey)}/${encodeURIComponent(identifier)}`);
});
musicEls.loadFriendsBtn?.addEventListener('click', () => {
if (isExternalTargetMode()) return;
if (friendsFeedEnabled) return;
friendsFeedEnabled = true;
setMusicStatus('Loading friend playlists…', 'neutral');
renderFriendPlaylists();
subscribeAllPlaylists();
});
musicEls.playlistNameInput?.addEventListener('keydown', async (event) => {
if (event.key !== 'Enter') return;
event.preventDefault();
@@ -5125,11 +5420,16 @@ import { GreyscaleAPI } from './js/greyscale-api.mjs';
}
loadQueueLocal();
updateViewerControls();
friendsFeedEnabled = isExternalTargetMode();
if (musicEls.loadFriendsBtn) {
musicEls.loadFriendsBtn.disabled = isExternalTargetMode();
musicEls.loadFriendsBtn.textContent = isExternalTargetMode() ? 'Auto' : 'Load';
}
renderMyPlaylists();
renderFriendPlaylists();
renderQueue();
subscribeAllPlaylists();
window.addEventListener('ndkEvent', handleMusicNdkEvent);
subscribeAllPlaylists();
if (!window.location.hash) {
const episodeRoute = getEpisodeRouteFromUrlContext();