From 80a562c5cd604cb13502cd69cccbb7a3000dc76d Mon Sep 17 00:00:00 2001 From: raiper34 Date: Sat, 13 Jul 2024 14:42:22 +0200 Subject: [PATCH] playlist websockets --- spooty-be/src/playlist/playlist.controller.ts | 5 ++--- spooty-be/src/playlist/playlist.service.ts | 14 +++++++++---- spooty-be/src/track/track.service.ts | 2 +- .../src/app/services/playlist.service.ts | 20 ++++++++++--------- spooty-fe/src/app/services/track.service.ts | 2 +- 5 files changed, 25 insertions(+), 18 deletions(-) diff --git a/spooty-be/src/playlist/playlist.controller.ts b/spooty-be/src/playlist/playlist.controller.ts index 6099010..971637f 100644 --- a/spooty-be/src/playlist/playlist.controller.ts +++ b/spooty-be/src/playlist/playlist.controller.ts @@ -1,7 +1,6 @@ import {Body, Controller, Get, Post} from '@nestjs/common'; import {PlaylistService} from "./playlist.service"; import {PlaylistModel} from "./playlist.model"; -import {PlaylistEntity} from "./playlist.entity"; @Controller('playlist') export class PlaylistController { @@ -17,7 +16,7 @@ export class PlaylistController { } @Post() - async create(@Body() playlist: PlaylistModel): Promise { - return await this.service.create(playlist); + async create(@Body() playlist: PlaylistModel): Promise { + await this.service.create(playlist); } } \ No newline at end of file diff --git a/spooty-be/src/playlist/playlist.service.ts b/spooty-be/src/playlist/playlist.service.ts index 6d4f91f..5a2eb53 100644 --- a/spooty-be/src/playlist/playlist.service.ts +++ b/spooty-be/src/playlist/playlist.service.ts @@ -3,12 +3,17 @@ import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import {PlaylistEntity} from "./playlist.entity"; import {TrackService} from "../track/track.service"; +import {WebSocketGateway, WebSocketServer} from "@nestjs/websockets"; +import {Server} from "socket.io"; const fetch = require('isomorphic-unfetch'); const { getData, getPreview, getTracks, getDetails } = require('spotify-url-info')(fetch); +@WebSocketGateway() @Injectable() export class PlaylistService { + @WebSocketServer() io: Server; + constructor( @InjectRepository(PlaylistEntity) private repository: Repository, @@ -27,9 +32,10 @@ export class PlaylistService { await this.repository.delete(id); } - async create(playlist: PlaylistEntity): Promise { + async create(playlist: PlaylistEntity): Promise { const details = await getDetails(playlist.spotifyUrl); const savedPlaylist = await this.repository.save({...playlist, name: details.preview.title}); + this.io.emit('playlistNew', savedPlaylist); for(let track of details.tracks) { await this.trackService.create({ artist: track.artist, @@ -37,10 +43,10 @@ export class PlaylistService { spotifyUrl: track.previewUrl, }, savedPlaylist); } - return savedPlaylist; } - async update(id: number, track: PlaylistEntity): Promise { - await this.repository.update(id, track); + async update(id: number, playlist: PlaylistEntity): Promise { + await this.repository.update(id, playlist); + this.io.emit('trackPlaylist', playlist); } } \ No newline at end of file diff --git a/spooty-be/src/track/track.service.ts b/spooty-be/src/track/track.service.ts index de3ba5a..e217e7d 100644 --- a/spooty-be/src/track/track.service.ts +++ b/spooty-be/src/track/track.service.ts @@ -49,7 +49,7 @@ export class TrackService { async update(id: number, track: TrackEntity): Promise { await this.repository.update(id, track); - this.io.emit('track', track); + this.io.emit('trackUpdate', track); } @Interval(1000) diff --git a/spooty-fe/src/app/services/playlist.service.ts b/spooty-fe/src/app/services/playlist.service.ts index 2f7dc57..79260f8 100644 --- a/spooty-fe/src/app/services/playlist.service.ts +++ b/spooty-fe/src/app/services/playlist.service.ts @@ -11,8 +11,8 @@ import { } from "@ngneat/elf-entities"; import {joinRequestResult, trackRequestResult} from "@ngneat/elf-requests"; import {map, tap} from "rxjs"; -import {TrackService} from "./track.service"; -import {PlaylistEntity} from "spooty-be/dist/playlist/playlist.entity"; +import {Track, TrackService} from "./track.service"; +import {Socket} from "ngx-socket-io"; const STORE_NAME = 'playlist'; const ENDPOINT = '/api/playlist'; @@ -49,8 +49,16 @@ export class PlaylistService { createLoading$ = this.store.pipe(joinRequestResult([CREATE_LOADING], { initialStatus: 'idle' })); constructor(private readonly http: HttpClient, + private readonly socket: Socket, private readonly trackService: TrackService, ) { + this.socket.on('playlistUpdate', (playlist: Playlist) => this.store.update(upsertEntities(playlist))); + this.socket.on('playlistNew', (playlist: Playlist) => + this.store.update( + upsertEntities(playlist), + upsertEntities({id: playlist.id, collapsed: false}, {ref: UIEntitiesRef}) + ) + ); } fetch(): void { @@ -67,13 +75,7 @@ export class PlaylistService { create(spotifyUrl: string): void { this.http.post(ENDPOINT, {spotifyUrl}).pipe( trackRequestResult([CREATE_LOADING], { skipCache: true }) - ).subscribe((playlist: Partial) => { - this.store.update(upsertEntities(playlist)); - this.store.update( - upsertEntities(playlist), - upsertEntities({id: playlist.id, collapsed: false}, {ref: UIEntitiesRef}) - ) - }); + ).subscribe(); } toggleCollapsed(id: number): void { diff --git a/spooty-fe/src/app/services/track.service.ts b/spooty-fe/src/app/services/track.service.ts index ee3c5fd..a9d4183 100644 --- a/spooty-fe/src/app/services/track.service.ts +++ b/spooty-fe/src/app/services/track.service.ts @@ -47,7 +47,7 @@ export class TrackService { private readonly http: HttpClient, private readonly socket: Socket, ) { - this.socket.on('track', (track: Track) => this.store.update(upsertEntities(track))); + this.socket.on('trackUpdate', (track: Track) => this.store.update(upsertEntities(track))); this.socket.on('trackNew', ({track, playlistId}: {track: Track, playlistId: number}) => this.store.update(upsertEntities([{...track, playlistId}])) );