Listen and notify newVideo events in the frontend

frontend/js/actions/movies.js

@@ -1,6 +1,7 @@
 import { configureAxios, request } from "../requests"
 
 import { addAlertOk } from "./alerts"
+import { sendNotification } from "./notifications"
 
 export function updateLastMovieFetchUrl(url) {
   return {
@@ -105,3 +106,15 @@ export function fetchMovies(url) {
     ]
   )
 }
+
+export const newMovieEvent = (data) => {
+  return (dispatch) => {
+    dispatch(sendNotification({
+      icon: "film",
+      autohide: true,
+      delay: 10000,
+      title: `${data.title} added to the library`,
+      imageUrl: data.thumb,
+    }));
+  }
+}

frontend/js/actions/shows.js

@@ -1,5 +1,8 @@
 import { configureAxios, request } from "../requests"
 
+import { prettyEpisodeName } from "../utils"
+import { sendNotification } from "./notifications"
+
 export function fetchShows(url) {
   return request(
     "SHOW_LIST_FETCH",
@@ -118,3 +121,15 @@ export function updateLastShowsFetchUrl(url) {
     },
   }
 }
+
+export const newEpisodeEvent = (data) => {
+  return (dispatch) => {
+    dispatch(sendNotification({
+      icon: "video-camera",
+      autohide: true,
+      delay: 10000,
+      title: `${prettyEpisodeName(data.show_title, data.season, data.episode)} added to the library`,
+      imageUrl: `img/shows/${data.show_imdb_id}-poster.jpg`,
+    }));
+  }
+}

frontend/js/components/websocket.js

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react"
 import { connect } from "react-redux"
 import { setFetchedTorrents } from "../actions/torrents"
+import { newMovieEvent } from "../actions/movies"
+import { newEpisodeEvent } from "../actions/shows"
 
 const mapStateToProps = (state) => ({
   isLogged: state.userStore.get("isLogged"),
 });
-const mapDispatchToProps = { setFetchedTorrents };
+const mapDispatchToProps = { setFetchedTorrents, newMovieEvent, newEpisodeEvent };
 
 const WsHandler = (props) => {
   const [ws, setWs] = useState(null);
@@ -56,6 +58,10 @@ const WsHandler = (props) => {
         "type": "subscribe",
         "message": "torrents",
       }))
+      socket.send(JSON.stringify({
+        "type": "subscribe",
+        "message": "newVideo",
+      }))
     }
 
     socket.onmessage = (event) => {
@@ -73,6 +79,13 @@ const WsHandler = (props) => {
         case "torrents":
           props.setFetchedTorrents(data.message);
           break;
+        case "newVideo":
+          if (data.message.type === "movie") {
+            props.newMovieEvent(data.message.data)
+          } else if (data.message.type === "episode") {
+            props.newEpisodeEvent(data.message.data)
+          }
+          break;
       }
     }