Use direct yt-dlp CLI with deterministic fallback handling
This commit is contained in:
Tor Wingalen
@@ -11,3 +11,16 @@ config
|
||||
.env.*
|
||||
README.md
|
||||
assets
|
||||
|
||||
# Local runtime/download artifacts
|
||||
test-downloads
|
||||
downloads
|
||||
config
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
*.db
|
||||
*.mp3
|
||||
*.m4a
|
||||
*.webm
|
||||
*.part
|
||||
spooty-config
|
||||
|
||||
@@ -6,3 +6,4 @@
|
||||
.netlify
|
||||
|
||||
test-downloads/
|
||||
spooty-config
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ RUN npm run build
|
||||
FROM node:20.20.0-alpine
|
||||
WORKDIR /spooty
|
||||
|
||||
RUN apk add --no-cache ffmpeg redis python3 py3-pip curl \
|
||||
RUN apk add --no-cache ffmpeg redis python3 py3-pip curl yt-dlp \
|
||||
&& addgroup -S spooty \
|
||||
&& adduser -S spooty -G spooty
|
||||
|
||||
|
||||
@@ -51,9 +51,12 @@ export class PlaylistService {
|
||||
async create(playlist: PlaylistEntity): Promise<void> {
|
||||
// Detect if URL is for a single track or a playlist and route accordingly
|
||||
const isTrack = this.spotifyService.isTrackUrl(playlist.spotifyUrl);
|
||||
const isArtist = this.spotifyService.isArtistUrl(playlist.spotifyUrl);
|
||||
|
||||
if (isTrack) {
|
||||
await this.createSingleTrack(playlist);
|
||||
} else if (isArtist) {
|
||||
await this.createArtistLibrary(playlist);
|
||||
} else {
|
||||
await this.createPlaylist(playlist);
|
||||
}
|
||||
@@ -105,6 +108,107 @@ export class PlaylistService {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private async createArtistLibrary(playlist: PlaylistEntity): Promise<void> {
|
||||
let detail: { tracks: any[]; name: string; image: string };
|
||||
let playlist2Save: PlaylistEntity;
|
||||
|
||||
try {
|
||||
detail = await this.spotifyService.getArtistLibrary(playlist.spotifyUrl);
|
||||
this.logger.debug(
|
||||
`Artist library retrieved with ${detail.tracks?.length || 0} tracks`,
|
||||
);
|
||||
|
||||
playlist2Save = {
|
||||
...playlist,
|
||||
name: detail.name,
|
||||
coverUrl: detail.image,
|
||||
active: false,
|
||||
};
|
||||
this.createPlaylistFolderStructure(playlist2Save.name);
|
||||
} catch (err) {
|
||||
this.logger.error(`Error getting artist library details: ${err}`);
|
||||
playlist2Save = {
|
||||
...playlist,
|
||||
name: 'Failed artist library import',
|
||||
error: toSafeErrorMessage(err),
|
||||
active: false,
|
||||
};
|
||||
}
|
||||
|
||||
const savedPlaylist = await this.save(playlist2Save);
|
||||
|
||||
if (detail?.tracks && detail.tracks.length > 0) {
|
||||
await this.createTracksForSavedPlaylist(detail.tracks, savedPlaylist);
|
||||
} else {
|
||||
this.logger.warn(`No tracks found for artist library ${savedPlaylist.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
private async createTracksForSavedPlaylist(
|
||||
tracks: any[],
|
||||
savedPlaylist: PlaylistEntity,
|
||||
): Promise<void> {
|
||||
this.logger.debug(
|
||||
`Starting to process ${tracks.length} tracks for ${savedPlaylist.name}`,
|
||||
);
|
||||
|
||||
let processedCount = 0;
|
||||
let skippedCount = 0;
|
||||
let errorCount = 0;
|
||||
|
||||
for (const track of tracks) {
|
||||
try {
|
||||
if (!track.artist || !track.name) {
|
||||
this.logger.warn(
|
||||
`Skipping track ${processedCount + skippedCount + 1}: Missing artist or name information`,
|
||||
);
|
||||
skippedCount++;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (track.unavailable === true) {
|
||||
this.logger.warn(
|
||||
`Skipping unavailable track ${processedCount + skippedCount + 1}: ${track.artist} - ${track.name}`,
|
||||
);
|
||||
skippedCount++;
|
||||
continue;
|
||||
}
|
||||
|
||||
await this.trackService.create(
|
||||
{
|
||||
artist: track.artist,
|
||||
name: track.name,
|
||||
spotifyUrl: track.previewUrl || null,
|
||||
coverUrl: track.coverUrl || savedPlaylist.coverUrl,
|
||||
durationMs: track.durationMs,
|
||||
},
|
||||
savedPlaylist,
|
||||
);
|
||||
|
||||
processedCount++;
|
||||
|
||||
if (processedCount % 100 === 0) {
|
||||
this.logger.debug(
|
||||
`Processed ${processedCount} tracks so far for ${savedPlaylist.name}`,
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
this.logger.error(
|
||||
`Error creating track "${
|
||||
track?.artist || 'Unknown'
|
||||
} - ${track?.name || 'Unknown'}": ${error.message}`,
|
||||
);
|
||||
errorCount++;
|
||||
}
|
||||
}
|
||||
|
||||
this.logger.debug(
|
||||
`Finished processing ${savedPlaylist.name}: ` +
|
||||
`${processedCount} tracks processed, ${skippedCount} skipped, ${errorCount} errors`,
|
||||
);
|
||||
}
|
||||
|
||||
private async createPlaylist(playlist: PlaylistEntity): Promise<void> {
|
||||
let detail: { tracks: any; name: any; image: any };
|
||||
let playlist2Save: PlaylistEntity;
|
||||
@@ -162,6 +266,7 @@ export class PlaylistService {
|
||||
name: track.name,
|
||||
spotifyUrl: track.previewUrl || null,
|
||||
coverUrl: track.coverUrl || savedPlaylist.coverUrl, // Use track's album art, fallback to playlist cover
|
||||
durationMs: track.durationMs,
|
||||
},
|
||||
savedPlaylist,
|
||||
);
|
||||
|
||||
@@ -60,6 +60,30 @@ export class SpotifyApiService {
|
||||
}
|
||||
}
|
||||
|
||||
isArtistUrl(url: string): boolean {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
return urlObj.pathname.includes('/artist/');
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
private getArtistId(url: string): string {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
const pathParts = urlObj.pathname.split('/');
|
||||
const artistIndex = pathParts.findIndex((part) => part === 'artist');
|
||||
if (artistIndex >= 0 && pathParts.length > artistIndex + 1) {
|
||||
return pathParts[artistIndex + 1].split('?')[0];
|
||||
}
|
||||
throw new Error('Invalid Spotify artist URL');
|
||||
} catch (error) {
|
||||
this.logger.error(`Failed to extract artist ID: ${error.message}`);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
private getClientId(): string {
|
||||
const clientId = process.env.SPOTIFY_CLIENT_ID;
|
||||
if (!clientId) {
|
||||
@@ -412,4 +436,196 @@ export class SpotifyApiService {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getArtistLibrary(
|
||||
spotifyUrl: string,
|
||||
): Promise<{ name: string; image: string; tracks: any[] }> {
|
||||
try {
|
||||
this.logger.debug(`Getting artist library for ${spotifyUrl}`);
|
||||
const artistId = this.getArtistId(spotifyUrl);
|
||||
const accessToken = await this.getUserAccessToken();
|
||||
|
||||
const artistResponse = await fetch(
|
||||
`https://api.spotify.com/v1/artists/${artistId}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!artistResponse.ok) {
|
||||
const errorText = await artistResponse.text();
|
||||
throw new Error(`Failed to fetch artist metadata: ${artistResponse.status} ${errorText}`);
|
||||
}
|
||||
|
||||
const artist = await artistResponse.json();
|
||||
const albums = await this.getAllArtistAlbums(artistId, accessToken);
|
||||
const tracks = await this.getTracksForAlbums(albums, accessToken, artist.name);
|
||||
|
||||
return {
|
||||
name: `Artist Library: ${artist.name}`,
|
||||
image: artist.images?.[0]?.url || '',
|
||||
tracks,
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error(`Failed to get artist library: ${error.message}`);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
private async getAllArtistAlbums(artistId: string, accessToken: string): Promise<any[]> {
|
||||
const includeGroups = process.env.SPOTIFY_ARTIST_INCLUDE_GROUPS || 'album,single';
|
||||
const albumByKey = new Map<string, any>();
|
||||
const artistAlbumPageLimit = 20;
|
||||
let offset = 0;
|
||||
let hasMoreAlbums = true;
|
||||
|
||||
while (hasMoreAlbums) {
|
||||
this.logger.debug(
|
||||
`Fetching artist albums from Spotify API with offset ${offset}`,
|
||||
);
|
||||
|
||||
const albumUrl = new URL(
|
||||
`https://api.spotify.com/v1/artists/${artistId}/albums`,
|
||||
);
|
||||
albumUrl.searchParams.set('include_groups', includeGroups);
|
||||
albumUrl.searchParams.set('offset', String(offset));
|
||||
|
||||
this.logger.debug(`Spotify artist albums URL: ${albumUrl.toString()}`);
|
||||
|
||||
const response = await fetch(albumUrl.toString(), {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`Failed to fetch artist albums: ${response.status} ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
for (const album of data.items || []) {
|
||||
const key = this.normalizeLibraryKey(`${album.name}|${album.release_date}|${album.total_tracks}`);
|
||||
if (!albumByKey.has(key)) {
|
||||
albumByKey.set(key, album);
|
||||
}
|
||||
}
|
||||
|
||||
if (!data.next) {
|
||||
hasMoreAlbums = false;
|
||||
} else {
|
||||
offset += artistAlbumPageLimit;
|
||||
}
|
||||
}
|
||||
|
||||
const albums = [...albumByKey.values()];
|
||||
this.logger.debug(`Retrieved ${albums.length} deduplicated artist albums/singles`);
|
||||
return albums;
|
||||
}
|
||||
|
||||
private async getTracksForAlbums(
|
||||
albums: any[],
|
||||
accessToken: string,
|
||||
artistName: string,
|
||||
): Promise<any[]> {
|
||||
const trackByKey = new Map<string, any>();
|
||||
const maxTracks = Number(process.env.SPOTIFY_ARTIST_LIBRARY_MAX_TRACKS || 1000);
|
||||
|
||||
for (const album of albums) {
|
||||
let offset = 0;
|
||||
let hasMoreTracks = true;
|
||||
|
||||
while (hasMoreTracks) {
|
||||
const response = await fetch(
|
||||
`https://api.spotify.com/v1/albums/${album.id}/tracks?limit=50&offset=${offset}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`Failed to fetch album tracks: ${response.status} ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
for (const item of data.items || []) {
|
||||
if (!item?.name || !item?.artists?.length) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const fullTrack = await this.getTrackById(item.id, accessToken);
|
||||
const isrc = fullTrack?.external_ids?.isrc;
|
||||
const durationMs = fullTrack?.duration_ms || item.duration_ms;
|
||||
const artist = item.artists.map((a) => a.name).join(', ');
|
||||
const key = isrc
|
||||
? `isrc:${isrc}`
|
||||
: this.normalizeLibraryKey(`${artist}|${item.name}|${Math.round((durationMs || 0) / 2000)}`);
|
||||
|
||||
if (!trackByKey.has(key)) {
|
||||
trackByKey.set(key, {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
artist,
|
||||
previewUrl: item.external_urls?.spotify || null,
|
||||
coverUrl: album.images?.[0]?.url || null,
|
||||
durationMs,
|
||||
albumName: album.name,
|
||||
primaryArtist: artistName,
|
||||
});
|
||||
}
|
||||
|
||||
if (trackByKey.size >= maxTracks) {
|
||||
this.logger.warn(`Artist library max track limit reached: ${maxTracks}`);
|
||||
return [...trackByKey.values()];
|
||||
}
|
||||
}
|
||||
|
||||
if (!data.next) {
|
||||
hasMoreTracks = false;
|
||||
} else {
|
||||
offset += 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tracks = [...trackByKey.values()];
|
||||
this.logger.debug(`Retrieved ${tracks.length} deduplicated artist library tracks`);
|
||||
return tracks;
|
||||
}
|
||||
|
||||
private async getTrackById(trackId: string, accessToken: string): Promise<any> {
|
||||
const response = await fetch(
|
||||
`https://api.spotify.com/v1/tracks/${trackId}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
private normalizeLibraryKey(value: string): string {
|
||||
return value
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/&/g, ' and ')
|
||||
.replace(/[^a-z0-9]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -16,6 +16,10 @@ export class SpotifyService {
|
||||
return this.spotifyApiService.isTrackUrl(url);
|
||||
}
|
||||
|
||||
isArtistUrl(url: string): boolean {
|
||||
return this.spotifyApiService.isArtistUrl(url);
|
||||
}
|
||||
|
||||
async getTrackDetail(
|
||||
spotifyUrl: string,
|
||||
): Promise<{ name: string; artist: string; image: string }> {
|
||||
@@ -61,6 +65,13 @@ export class SpotifyService {
|
||||
}
|
||||
}
|
||||
|
||||
async getArtistLibrary(
|
||||
spotifyUrl: string,
|
||||
): Promise<{ name: string; tracks: any[]; image: string }> {
|
||||
this.logger.debug(`Get artist library ${spotifyUrl} on Spotify`);
|
||||
return this.spotifyApiService.getArtistLibrary(spotifyUrl);
|
||||
}
|
||||
|
||||
async getPlaylistTracks(spotifyUrl: string): Promise<any[]> {
|
||||
this.logger.debug(`Get playlist ${spotifyUrl} on Spotify`);
|
||||
try {
|
||||
|
||||
@@ -3,9 +3,9 @@ import { TrackEntity } from '../track/track.entity';
|
||||
import { EnvironmentEnum } from '../environmentEnum';
|
||||
import { TrackService } from '../track/track.service';
|
||||
import { ConfigService } from '@nestjs/config';
|
||||
import { YtDlp } from 'ytdlp-nodejs';
|
||||
import * as yts from 'yt-search';
|
||||
import * as fs from 'fs';
|
||||
import { spawn } from 'child_process';
|
||||
const NodeID3 = require('node-id3');
|
||||
|
||||
const HEADERS = {
|
||||
@@ -73,13 +73,24 @@ export class YoutubeService {
|
||||
artist: string,
|
||||
name: string,
|
||||
durationMs?: number,
|
||||
excludedUrls: string[] = [],
|
||||
): Promise<YoutubeMatch> {
|
||||
const query = `${artist} - ${name}`;
|
||||
this.logger.debug(`Searching ${query} on YT`);
|
||||
|
||||
const result = await yts(query);
|
||||
const excludedVideoIds = new Set(
|
||||
excludedUrls
|
||||
.map((url) => this.getYoutubeVideoId(url))
|
||||
.filter((id): id is string => !!id),
|
||||
);
|
||||
|
||||
const candidates = (result.videos || [])
|
||||
.filter((video: any) => !!video?.url && !!video?.title)
|
||||
.filter((video: any) => {
|
||||
const videoId = this.getYoutubeVideoId(String(video.url));
|
||||
return !videoId || !excludedVideoIds.has(videoId);
|
||||
})
|
||||
.slice(0, 15)
|
||||
.map((video: any) => this.scoreCandidate(video, artist, name, durationMs))
|
||||
.filter((match: CandidateScore) => {
|
||||
@@ -106,7 +117,10 @@ export class YoutubeService {
|
||||
const accepted = candidates.find((candidate) => !candidate.rejected);
|
||||
|
||||
if (!accepted) {
|
||||
throw new Error(`No acceptable YouTube result found for: ${query}`);
|
||||
throw new Error(
|
||||
`No acceptable YouTube result found for: ${query}` +
|
||||
(excludedUrls.length ? ` after excluding ${excludedUrls.length} failed candidate(s)` : ''),
|
||||
);
|
||||
}
|
||||
|
||||
this.logger.debug(
|
||||
@@ -244,6 +258,20 @@ export class YoutubeService {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
private getYoutubeVideoId(url: string): string | null {
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
|
||||
if (parsed.hostname === 'youtu.be') {
|
||||
return parsed.pathname.replace(/^\//, '') || null;
|
||||
}
|
||||
|
||||
return parsed.searchParams.get('v');
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
assertValidYoutubeUrl(url: string): void {
|
||||
let parsed: URL;
|
||||
|
||||
@@ -262,25 +290,93 @@ export class YoutubeService {
|
||||
}
|
||||
}
|
||||
|
||||
private getCookiesOptions(): {
|
||||
cookiesFromBrowser?: string;
|
||||
cookies?: string;
|
||||
} {
|
||||
const cookiesBrowser = this.configService.get<string>(
|
||||
EnvironmentEnum.YT_COOKIES,
|
||||
);
|
||||
if (cookiesBrowser) {
|
||||
this.logger.debug(`Using cookies from browser: ${cookiesBrowser}`);
|
||||
return { cookiesFromBrowser: cookiesBrowser };
|
||||
}
|
||||
private getCookiesFile(): string | null {
|
||||
const cookiesFile = this.configService.get<string>(
|
||||
EnvironmentEnum.YT_COOKIES_FILE,
|
||||
);
|
||||
|
||||
if (cookiesFile && fs.existsSync(cookiesFile)) {
|
||||
this.logger.debug(`Using cookies file: ${cookiesFile}`);
|
||||
return { cookies: cookiesFile };
|
||||
return cookiesFile;
|
||||
}
|
||||
return {};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
private classifyYtDlpError(output: string): string {
|
||||
const text = output || '';
|
||||
|
||||
if (text.includes('Sign in to confirm your age')) {
|
||||
return 'YouTube age-gated: cookies required or invalid';
|
||||
}
|
||||
|
||||
if (text.includes('Only images are available')) {
|
||||
return 'YouTube unavailable: no downloadable audio/video formats';
|
||||
}
|
||||
|
||||
if (text.includes('Requested format is not available')) {
|
||||
return 'YouTube unavailable: requested audio format is not available';
|
||||
}
|
||||
|
||||
if (text.includes('Private video')) {
|
||||
return 'YouTube unavailable: private video';
|
||||
}
|
||||
|
||||
if (text.includes('Video unavailable')) {
|
||||
return 'YouTube unavailable';
|
||||
}
|
||||
|
||||
if (text.includes('Unable to download webpage')) {
|
||||
return 'YouTube unavailable: unable to download webpage';
|
||||
}
|
||||
|
||||
return text.trim().slice(0, 1200) || 'Unknown yt-dlp error';
|
||||
}
|
||||
|
||||
private prepareWritableCookiesFile(cookiesFile: string | null): string | null {
|
||||
if (!cookiesFile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tempCookiesFile = `/tmp/jarri-spooty-youtube-${process.pid}.cookies.txt`;
|
||||
fs.copyFileSync(cookiesFile, tempCookiesFile);
|
||||
return tempCookiesFile;
|
||||
}
|
||||
|
||||
private runYtDlp(args: string[]): Promise<void> {
|
||||
return new Promise((resolvePromise, rejectPromise) => {
|
||||
const child = spawn('yt-dlp', args, {
|
||||
stdio: ['ignore', 'pipe', 'pipe'],
|
||||
});
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
|
||||
child.stdout.on('data', (chunk) => {
|
||||
stdout += chunk.toString();
|
||||
});
|
||||
|
||||
child.stderr.on('data', (chunk) => {
|
||||
stderr += chunk.toString();
|
||||
});
|
||||
|
||||
child.on('error', (error) => {
|
||||
rejectPromise(new Error(`Failed to start yt-dlp: ${error.message}`));
|
||||
});
|
||||
|
||||
child.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
resolvePromise();
|
||||
return;
|
||||
}
|
||||
|
||||
rejectPromise(
|
||||
new Error(
|
||||
`yt-dlp exited with code ${code}: ${this.classifyYtDlpError(stderr || stdout)}`,
|
||||
),
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async downloadAndFormat(track: TrackEntity, output: string): Promise<void> {
|
||||
@@ -294,18 +390,32 @@ export class YoutubeService {
|
||||
|
||||
this.assertValidYoutubeUrl(track.youtubeUrl);
|
||||
|
||||
const ytdlp = new YtDlp();
|
||||
await ytdlp.downloadAudio(
|
||||
track.youtubeUrl,
|
||||
this.configService.get<'m4a'>(EnvironmentEnum.FORMAT),
|
||||
{
|
||||
output,
|
||||
...this.getCookiesOptions(),
|
||||
headers: HEADERS,
|
||||
jsRuntime: 'node',
|
||||
audioQuality: this.configService.get<string>('QUALITY'),
|
||||
},
|
||||
);
|
||||
const format = this.configService.get<string>(EnvironmentEnum.FORMAT) || 'mp3';
|
||||
const quality = this.configService.get<string>('QUALITY') || '0';
|
||||
const cookiesFile = this.prepareWritableCookiesFile(this.getCookiesFile());
|
||||
|
||||
const args = [
|
||||
'--no-playlist',
|
||||
'--no-cache-dir',
|
||||
'--no-cookies-from-browser',
|
||||
'--extract-audio',
|
||||
'--audio-format',
|
||||
format,
|
||||
'--audio-quality',
|
||||
quality,
|
||||
'--add-header',
|
||||
`User-Agent:${HEADERS['User-Agent']}`,
|
||||
'-o',
|
||||
output,
|
||||
];
|
||||
|
||||
if (cookiesFile) {
|
||||
args.push('--cookies', cookiesFile);
|
||||
}
|
||||
|
||||
args.push(track.youtubeUrl);
|
||||
|
||||
await this.runYtDlp(args);
|
||||
|
||||
this.logger.debug(
|
||||
`Downloaded ${track.artist} - ${track.name} to ${output}`,
|
||||
|
||||
@@ -27,6 +27,12 @@ export class TrackEntity {
|
||||
@Column({ nullable: true })
|
||||
youtubeUrl?: string;
|
||||
|
||||
@Column({ nullable: true, type: 'text' })
|
||||
rejectedYoutubeUrls?: string;
|
||||
|
||||
@Column({ default: 0 })
|
||||
downloadAttemptCount?: number;
|
||||
|
||||
@Column({ default: TrackStatusEnum.New })
|
||||
status?: TrackStatusEnum;
|
||||
|
||||
|
||||
@@ -70,6 +70,23 @@ export class TrackService {
|
||||
this.io.emit(WsTrackOperation.Update, track);
|
||||
}
|
||||
|
||||
private parseRejectedYoutubeUrls(track: TrackEntity): string[] {
|
||||
if (!track.rejectedYoutubeUrls) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(track.rejectedYoutubeUrls);
|
||||
return Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
private stringifyRejectedYoutubeUrls(urls: string[]): string {
|
||||
return JSON.stringify([...new Set(urls)].slice(0, 20));
|
||||
}
|
||||
|
||||
async retry(id: number): Promise<void> {
|
||||
const track = await this.get(id);
|
||||
|
||||
@@ -78,12 +95,22 @@ export class TrackService {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.enqueueSearch(id);
|
||||
const rejectedUrls = this.parseRejectedYoutubeUrls(track);
|
||||
|
||||
if (track.youtubeUrl && !rejectedUrls.includes(track.youtubeUrl)) {
|
||||
rejectedUrls.push(track.youtubeUrl);
|
||||
}
|
||||
|
||||
await this.update(id, {
|
||||
...track,
|
||||
youtubeUrl: null,
|
||||
rejectedYoutubeUrls: this.stringifyRejectedYoutubeUrls(rejectedUrls),
|
||||
downloadAttemptCount: 0,
|
||||
error: null,
|
||||
status: TrackStatusEnum.New,
|
||||
});
|
||||
|
||||
await this.enqueueSearch(id);
|
||||
}
|
||||
|
||||
async findOnYoutube(track: TrackEntity): Promise<void> {
|
||||
@@ -102,9 +129,13 @@ export class TrackService {
|
||||
});
|
||||
let updatedTrack: TrackEntity;
|
||||
try {
|
||||
const rejectedUrls = this.parseRejectedYoutubeUrls(track);
|
||||
|
||||
const youtubeMatch = await this.youtubeService.findBestYoutubeMatch(
|
||||
track.artist,
|
||||
track.name,
|
||||
track.durationMs,
|
||||
rejectedUrls,
|
||||
);
|
||||
updatedTrack = {
|
||||
...track,
|
||||
@@ -141,8 +172,8 @@ export class TrackService {
|
||||
const existingJob = await this.trackSearchQueue.getJob(jobId);
|
||||
|
||||
if (existingJob) {
|
||||
this.logger.warn(`Search job already exists for track ${id}`);
|
||||
return;
|
||||
this.logger.warn(`Removing existing search job for track ${id} before enqueue`);
|
||||
await existingJob.remove();
|
||||
}
|
||||
|
||||
await this.trackSearchQueue.add('search-track', { id }, { jobId });
|
||||
@@ -160,13 +191,23 @@ export class TrackService {
|
||||
const existingJob = await this.trackDownloadQueue.getJob(jobId);
|
||||
|
||||
if (existingJob) {
|
||||
this.logger.warn(`Download job already exists for track ${id}`);
|
||||
return;
|
||||
this.logger.warn(`Removing existing download job for track ${id} before enqueue`);
|
||||
await existingJob.remove();
|
||||
}
|
||||
|
||||
await this.trackDownloadQueue.add('download-track', { id }, { jobId });
|
||||
}
|
||||
|
||||
private getMaxDownloadAttempts(): number {
|
||||
const parsed = Number(process.env.YT_DOWNLOAD_FALLBACK_ATTEMPTS || 3);
|
||||
|
||||
if (!Number.isFinite(parsed) || parsed < 1) {
|
||||
return 3;
|
||||
}
|
||||
|
||||
return Math.max(1, Math.min(10, Math.floor(parsed)));
|
||||
}
|
||||
|
||||
async downloadFromYoutube(track: TrackEntity): Promise<void> {
|
||||
const dbTrack = await this.get(track.id);
|
||||
if (!dbTrack) {
|
||||
@@ -217,10 +258,39 @@ export class TrackService {
|
||||
error = toSafeErrorMessage(err);
|
||||
}
|
||||
|
||||
const rejectedUrls = this.parseRejectedYoutubeUrls(track);
|
||||
const nextAttemptCount = (track.downloadAttemptCount || 0) + 1;
|
||||
const maxAttempts = this.getMaxDownloadAttempts();
|
||||
|
||||
if (error && track.youtubeUrl && !rejectedUrls.includes(track.youtubeUrl)) {
|
||||
rejectedUrls.push(track.youtubeUrl);
|
||||
}
|
||||
|
||||
if (error && nextAttemptCount < maxAttempts) {
|
||||
this.logger.warn(
|
||||
`Download failed for track ${track.id}; rejecting current YouTube candidate and retrying search ` +
|
||||
`(${nextAttemptCount}/${maxAttempts})`,
|
||||
);
|
||||
|
||||
await this.update(track.id, {
|
||||
...track,
|
||||
youtubeUrl: null,
|
||||
rejectedYoutubeUrls: this.stringifyRejectedYoutubeUrls(rejectedUrls),
|
||||
downloadAttemptCount: nextAttemptCount,
|
||||
error: null,
|
||||
status: TrackStatusEnum.New,
|
||||
});
|
||||
|
||||
await this.enqueueSearch(track.id);
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedTrack = {
|
||||
...track,
|
||||
status: error ? TrackStatusEnum.Error : TrackStatusEnum.Completed,
|
||||
...(error ? { error } : {}),
|
||||
rejectedYoutubeUrls: this.stringifyRejectedYoutubeUrls(rejectedUrls),
|
||||
downloadAttemptCount: error ? nextAttemptCount : 0,
|
||||
...(error ? { error } : { error: null }),
|
||||
};
|
||||
await this.update(track.id, updatedTrack);
|
||||
}
|
||||
|
||||
@@ -1,80 +1,94 @@
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
<section class="jarri-hero">
|
||||
<div class="hero-left">
|
||||
<p class="eyebrow">Jarri subsystem · deterministic media ingestion</p>
|
||||
<h1>
|
||||
<i class="fa-brands fa-spotify"></i>
|
||||
<span>Spooty</span>
|
||||
<span class="tag is-dark is-size-7">v{{version}}</span>
|
||||
</p>
|
||||
<p class="subtitle">Self-hosted spotify downloader</p>
|
||||
Jarri Spooty
|
||||
<span class="tag version-tag">v{{version}}</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">Spotify metadata → YouTube candidate scoring → Local archive</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-right">
|
||||
<button
|
||||
class="button is-light is-small"
|
||||
[class.is-success]="spotifyConnected"
|
||||
class="button auth-button"
|
||||
[class.connected]="spotifyConnected"
|
||||
(click)="connectSpotify()"
|
||||
>
|
||||
<i class="fa-solid" [ngClass]="spotifyConnected ? 'fa-circle-check' : 'fa-plug'"></i>
|
||||
{{ spotifyConnected ? 'Spotify connected' : 'Connect Spotify' }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="box">
|
||||
<p class="subtitle">Download</p>
|
||||
<div>
|
||||
<div class="is-flex">
|
||||
<input class="input"
|
||||
[class.is-danger]="url && !isValidSpotifyUrl"
|
||||
type="text"
|
||||
[(ngModel)]="url"
|
||||
placeholder="Paste playlist/song/artist url"/>
|
||||
<button class="button is-primary"
|
||||
[class.is-loading]="(createLoading$ | async)?.isLoading"
|
||||
(click)="download()"
|
||||
[disabled]="!url || !isValidSpotifyUrl"
|
||||
>
|
||||
<i class="fa-solid fa-download"></i> Download
|
||||
</button>
|
||||
</div>
|
||||
<p *ngIf="url && !isValidSpotifyUrl" class="help is-danger">Please enter a valid Spotify URL (e.g. https://open.spotify.com/...)</p>
|
||||
</div>
|
||||
<section class="jarri-body">
|
||||
<div class="intelligence-grid">
|
||||
<div class="intel-card">
|
||||
<span class="intel-label">Spotify</span>
|
||||
<strong [class.online]="spotifyConnected">{{ spotifyConnected ? 'Connected' : 'Disconnected' }}</strong>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="box">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<p class="subtitle">Playlists</p>
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-outlined is-success" title="Remove completed from list" (click)="deleteCompleted()">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
<button class="button is-outlined is-danger" title="Remove failed from list" (click)="deleteFailed()">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="intel-card">
|
||||
<span class="intel-label">Matching</span>
|
||||
<strong>Duration-aware</strong>
|
||||
</div>
|
||||
<ng-container *ngIf="playlists$ | async as playlists">
|
||||
<app-playlist-box *ngFor="let playlist of playlists" [playlist]="playlist"></app-playlist-box>
|
||||
<p *ngIf="playlists?.length === 0" class="has-text-grey has-text-centered">No playlists</p>
|
||||
</ng-container>
|
||||
<div class="intel-card">
|
||||
<span class="intel-label">Queue</span>
|
||||
<strong>Paced</strong>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="box">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<p class="subtitle">Songs</p>
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-outlined is-success" title="Remove completed from list" (click)="deleteCompleted()">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
<button class="button is-outlined is-danger" title="Remove failed from list" (click)="deleteFailed()">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="songs$ | async as songs">
|
||||
<app-playlist-box *ngFor="let playlist of songs" [playlist]="playlist"></app-playlist-box>
|
||||
<p *ngIf="songs?.length === 0" class="has-text-grey has-text-centered">No songs</p>
|
||||
</ng-container>
|
||||
<div class="intel-card">
|
||||
<span class="intel-label">Mode</span>
|
||||
<strong>Archive run</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box jarri-box">
|
||||
<p class="subtitle">Acquire music</p>
|
||||
<div class="is-flex">
|
||||
<input class="input"
|
||||
[class.is-danger]="url && !isValidSpotifyUrl"
|
||||
type="text"
|
||||
[(ngModel)]="url"
|
||||
placeholder="Paste Spotify playlist or track URL"/>
|
||||
<button class="button is-primary"
|
||||
[class.is-loading]="(createLoading$ | async)?.isLoading"
|
||||
(click)="download()"
|
||||
[disabled]="!url || !isValidSpotifyUrl"
|
||||
>
|
||||
<i class="fa-solid fa-download"></i> Queue
|
||||
</button>
|
||||
</div>
|
||||
<p *ngIf="url && !isValidSpotifyUrl" class="help is-danger">
|
||||
Please enter a valid Spotify URL.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="box jarri-box">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<div>
|
||||
<p class="subtitle">Playlist History</p>
|
||||
<p class="has-text-grey is-size-7">One collapsed row per playlist run.</p>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-outlined is-success" title="Remove completed from list" (click)="deleteCompleted()">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
<button class="button is-outlined is-danger" title="Remove failed from list" (click)="deleteFailed()">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="playlists$ | async as playlists">
|
||||
<app-playlist-box *ngFor="let playlist of playlists" [playlist]="playlist"></app-playlist-box>
|
||||
<p *ngIf="playlists?.length === 0" class="has-text-grey has-text-centered">No playlists</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="box jarri-box">
|
||||
<p class="subtitle">Single Songs</p>
|
||||
<ng-container *ngIf="songs$ | async as songs">
|
||||
<app-playlist-box *ngFor="let playlist of songs" [playlist]="playlist"></app-playlist-box>
|
||||
<p *ngIf="songs?.length === 0" class="has-text-grey has-text-centered">No songs</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
:host {
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(29, 185, 84, 0.18), transparent 30rem),
|
||||
linear-gradient(135deg, #06110c 0%, #0a1210 45%, #020403 100%);
|
||||
color: #eafff0;
|
||||
}
|
||||
|
||||
.jarri-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
padding: 34px 44px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(3, 12, 7, 0.95), rgba(29, 185, 84, 0.92));
|
||||
border-bottom: 1px solid rgba(126, 255, 180, 0.25);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 6px;
|
||||
color: #9fffc3;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: #f3fff7;
|
||||
font-size: clamp(2.2rem, 4vw, 4.6rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.06em;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
margin-top: 8px;
|
||||
color: #d8ffe5;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
background: #07110c;
|
||||
color: #9fffc3;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #07110c;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.auth-button.connected {
|
||||
background: #9fffc3;
|
||||
}
|
||||
|
||||
.jarri-body {
|
||||
padding: 34px 44px;
|
||||
}
|
||||
|
||||
.intelligence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.intel-card {
|
||||
border: 1px solid rgba(126, 255, 180, 0.18);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.intel-label {
|
||||
display: block;
|
||||
color: #8ea99a;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.13em;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.intel-card strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #f1fff5;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.intel-card strong.online {
|
||||
color: #9fffc3;
|
||||
}
|
||||
|
||||
.jarri-box {
|
||||
border-radius: 18px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.jarri-hero,
|
||||
.jarri-body {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.jarri-hero {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.intelligence-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,65 @@
|
||||
<article class="panel" [ngClass]="statusClass$ | async">
|
||||
<p class="panel-heading is-flex is-justify-content-space-between">
|
||||
<span>
|
||||
<i class="is-clickable fa-solid"
|
||||
[ngClass]="playlist.collapsed ? 'fa-caret-up' : 'fa-caret-down'"
|
||||
(click)="toggleCollapse(playlist.id)"
|
||||
></i>
|
||||
<span *ngIf="playlist.error; else noErrorTemplate" class="is-size-6 has-text-weight-medium">{{playlist.error}}</span>
|
||||
<ng-template #noErrorTemplate>
|
||||
<span class="is-size-6 has-text-weight-semibold">{{playlist.name}}</span>
|
||||
</ng-template>
|
||||
<a [href]="playlist.spotifyUrl"
|
||||
target="_blank"
|
||||
class="has-text-black" title="Link to Spotify url to be download from">
|
||||
<i class="fa-brands fa-spotify"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<article class="panel playlist-card" [ngClass]="statusClass$ | async">
|
||||
<p class="panel-heading playlist-heading is-flex is-justify-content-space-between" (click)="toggleCollapse(playlist.id)">
|
||||
<span class="playlist-title">
|
||||
<i class="is-clickable fa-solid"
|
||||
[ngClass]="playlist.collapsed ? 'fa-caret-down' : 'fa-caret-right'"></i>
|
||||
|
||||
<span class="history-label">{{ playlist.isTrack ? 'track' : 'playlist' }}</span>
|
||||
|
||||
<span *ngIf="playlist.error; else noErrorTemplate" class="is-size-6 has-text-weight-medium">
|
||||
{{playlist.error}}
|
||||
</span>
|
||||
|
||||
<ng-template #noErrorTemplate>
|
||||
<span class="is-size-6 has-text-weight-semibold">{{playlist.name}}</span>
|
||||
</ng-template>
|
||||
</span>
|
||||
|
||||
<span class="playlist-actions" (click)="$event.stopPropagation()">
|
||||
<span *ngIf="!playlist.error" class="progress-text">
|
||||
{{trackCompletedCount$ | async}}/{{trackCount$ | async}}
|
||||
</span>
|
||||
|
||||
<span *ngIf="(trackErrorCount$ | async) as errors" class="error-count" [class.is-hidden]="errors === 0">
|
||||
{{errors}} failed
|
||||
</span>
|
||||
|
||||
<a [href]="playlist.spotifyUrl"
|
||||
target="_blank"
|
||||
class="has-text-black"
|
||||
title="Open Spotify URL">
|
||||
<i class="fa-brands fa-spotify"></i>
|
||||
</a>
|
||||
|
||||
<ng-container *ngIf="!playlist.isTrack">
|
||||
<i class="fa-solid is-clickable hover-icon"
|
||||
[ngClass]="playlist.active ? 'fa-toggle-on' : 'fa-toggle-off'"
|
||||
[title]="playlist.active ? '[ON]: Unsubscribe from playlist changes?' : '[OFF]: Subscribe to playlist changes?'"
|
||||
(click)="toggleActive(playlist.id, playlist.active)"
|
||||
></i>
|
||||
<i> </i>
|
||||
(click)="toggleActive(playlist.id, playlist.active)">
|
||||
</i>
|
||||
</ng-container>
|
||||
<i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>
|
||||
<i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>
|
||||
<i *ngIf="playlist.active" class="fa-solid fa-toggle-on hover-icon-reversed"></i>
|
||||
<span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>
|
||||
|
||||
<i class="fa-solid fa-repeat is-clickable hover-icon"
|
||||
title="Retry failed tracks"
|
||||
(click)="retryFailed(playlist.id)">
|
||||
</i>
|
||||
|
||||
<i class="fa-solid fa-xmark is-clickable hover-icon"
|
||||
title="Remove playlist from list"
|
||||
(click)="delete(playlist.id)">
|
||||
</i>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="progress-shell">
|
||||
<div class="progress-fill" [style.width.%]="progressPercent$ | async"></div>
|
||||
</div>
|
||||
|
||||
<p class="progress-caption">
|
||||
<span>{{progressPercent$ | async}}% complete</span>
|
||||
<span *ngIf="playlist.active">subscribed</span>
|
||||
</p>
|
||||
|
||||
<ng-container *ngIf="playlist.collapsed">
|
||||
<app-track-list [playlistId]="playlist.id"></app-track-list>
|
||||
</ng-container>
|
||||
|
||||
@@ -2,19 +2,73 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
.playlist-card {
|
||||
margin: 8px 0;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.playlist-heading {
|
||||
padding: 8px 12px;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .hover-icon {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&:hover .hover-icon-reversed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin: 5px 0;
|
||||
.playlist-title {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.history-label {
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
padding: 2px 7px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.playlist-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.error-count {
|
||||
border-radius: 999px;
|
||||
padding: 2px 7px;
|
||||
background: #ff3860;
|
||||
color: white;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.progress-shell {
|
||||
height: 7px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #1db954, #48f59b);
|
||||
transition: width 180ms ease-out;
|
||||
}
|
||||
|
||||
.progress-caption {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 5px 12px 8px;
|
||||
color: #667;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import {Component, Input} from '@angular/core';
|
||||
import {AsyncPipe, CommonModule, NgIf} from "@angular/common";
|
||||
import {TrackListComponent} from "../track-list/track-list.component";
|
||||
import {PlaylistService, PlaylistStatusEnum, PlaylistUi} from "../../services/playlist.service";
|
||||
import {Observable, map} from "rxjs";
|
||||
import {Observable, combineLatest, map} from "rxjs";
|
||||
import {Playlist} from "../../models/playlist";
|
||||
|
||||
const STATUS2CLASS = {
|
||||
@@ -14,15 +14,15 @@ const STATUS2CLASS = {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-playlist-box',
|
||||
imports: [
|
||||
CommonModule,
|
||||
AsyncPipe,
|
||||
NgIf,
|
||||
TrackListComponent
|
||||
],
|
||||
templateUrl: './playlist-box.component.html',
|
||||
styleUrl: './playlist-box.component.scss',
|
||||
selector: 'app-playlist-box',
|
||||
imports: [
|
||||
CommonModule,
|
||||
AsyncPipe,
|
||||
NgIf,
|
||||
TrackListComponent
|
||||
],
|
||||
templateUrl: './playlist-box.component.html',
|
||||
styleUrl: './playlist-box.component.scss',
|
||||
standalone: true
|
||||
})
|
||||
export class PlaylistBoxComponent {
|
||||
@@ -31,16 +31,27 @@ export class PlaylistBoxComponent {
|
||||
this._playlist = val;
|
||||
this.trackCount$ = this.service.getTrackCount(val.id);
|
||||
this.trackCompletedCount$ = this.service.getCompletedTrackCount(val.id);
|
||||
this.trackErrorCount$ = this.service.getErrorTrackCount(val.id);
|
||||
this.progressPercent$ = combineLatest([
|
||||
this.trackCompletedCount$,
|
||||
this.trackCount$,
|
||||
]).pipe(
|
||||
map(([completed, total]) => total ? Math.round((completed / total) * 100) : 0)
|
||||
);
|
||||
this.statusClass$ = this.service.getStatus$(val.id).pipe(
|
||||
map(status => STATUS2CLASS[status])
|
||||
);
|
||||
}
|
||||
|
||||
get playlist(): Playlist & PlaylistUi {
|
||||
return this._playlist;
|
||||
}
|
||||
|
||||
_playlist!: Playlist & PlaylistUi;
|
||||
trackCount$!: Observable<number>;
|
||||
trackCompletedCount$!: Observable<number>;
|
||||
trackErrorCount$!: Observable<number>;
|
||||
progressPercent$!: Observable<number>;
|
||||
statusClass$!: Observable<string>;
|
||||
|
||||
constructor(private readonly service: PlaylistService) { }
|
||||
|
||||
Reference in New Issue
Block a user