playlist websockets

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<PlaylistEntity> {
-        return await this.service.create(playlist);
+    async create(@Body() playlist: PlaylistModel): Promise<void> {
+        await this.service.create(playlist);
     }
 }

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<PlaylistEntity>,
@@ -27,9 +32,10 @@ export class PlaylistService {
         await this.repository.delete(id);
     }
 
-    async create(playlist: PlaylistEntity): Promise<PlaylistEntity> {
+    async create(playlist: PlaylistEntity): Promise<void> {
         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<void> {
-        await this.repository.update(id, track);
+    async update(id: number, playlist: PlaylistEntity): Promise<void> {
+        await this.repository.update(id, playlist);
+        this.io.emit('trackPlaylist', playlist);
     }
 }

spooty-be/src/track/track.service.ts

@@ -49,7 +49,7 @@ export class TrackService {
 
     async update(id: number, track: TrackEntity): Promise<void> {
         await this.repository.update(id, track);
-        this.io.emit('track', track);
+        this.io.emit('trackUpdate', track);
     }
 
     @Interval(1000)

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<Playlist>) => {
-      this.store.update(upsertEntities(playlist));
-      this.store.update(
-        upsertEntities(playlist),
-        upsertEntities({id: playlist.id, collapsed: false}, {ref: UIEntitiesRef})
-      )
-    });
+    ).subscribe();
   }
 
   toggleCollapsed(id: number): void {

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}]))
     );