Refresh the video after getting a new video event

frontend/js/components/details/polochon.js

@@ -8,7 +8,6 @@ export const PolochonMetadata = ({
   container,
   videoCodec,
   audioCodec,
-  releaseGroup,
   size,
 }) => {
   if (!quality || quality === "") {
@@ -17,12 +16,12 @@ export const PolochonMetadata = ({
 
   const s = size === 0 ? "" : prettySize(size);
 
-  const metadata = [quality, container, videoCodec, audioCodec, releaseGroup, s]
+  const metadata = [quality, s, container, videoCodec, audioCodec]
     .filter((m) => m && m !== "")
     .join(", ");
 
   return (
-    <span>
+    <span className="text text-muted">
       <i className="fa fa-file-video-o mr-1" />
       {metadata}
     </span>

frontend/js/components/websocket.js

@@ -1,8 +1,8 @@
 import { useEffect, useState, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setFetchedTorrents } from "../actions/torrents";
-import { newMovieEvent } from "../actions/movies";
-import { newEpisodeEvent } from "../actions/shows";
+import { newMovieEvent, getMovieDetails } from "../actions/movies";
+import { newEpisodeEvent, getEpisodeDetails } from "../actions/shows";
 
 export const WsHandler = () => {
   const dispatch = useDispatch();
@@ -67,8 +67,16 @@ export const WsHandler = () => {
         case "newVideo":
           if (data.message.type === "movie") {
             dispatch(newMovieEvent(data.message.data));
+            dispatch(getMovieDetails(data.message.data.imdb_id));
           } else if (data.message.type === "episode") {
             dispatch(newEpisodeEvent(data.message.data));
+            dispatch(
+              getEpisodeDetails(
+                data.message.data.show_imdb_id,
+                data.message.data.season,
+                data.message.data.episode
+              )
+            );
           }
           break;
       }

frontend/js/reducers/show.js

@@ -84,19 +84,30 @@ export default (state = defaultState, action) =>
         draft.show.tracked_episode = action.payload.episode; // eslint-disable-line camelcase
         break;
 
-      case "EPISODE_GET_DETAILS_PENDING":
-        draft.show.seasons
-          .get(action.payload.main.season)
-          .get(action.payload.main.episode).fetching = true;
+      case "EPISODE_GET_DETAILS_PENDING": {
+        const imdbId = action.payload.main.imdbId;
+        if (!draft.show || draft.show.imdb_id !== imdbId) {
           break;
+        }
+
+        const season = action.payload.main.season;
+        const episode = action.payload.main.episode;
+        draft.show.seasons.get(season).get(episode).fetching = true;
+        break;
+      }
 
       case "EPISODE_GET_DETAILS_FULFILLED": {
-        let episode = action.payload.response.data;
-        if (!episode) {
-          return draft;
+        const imdbId = action.payload.main.imdbId;
+        if (!draft.show || draft.show.imdb_id !== imdbId) {
+          break;
         }
-        formatEpisode(episode);
-        draft.show.seasons.get(episode.season).set(episode.episode, episode);
+
+        const season = action.payload.main.season;
+        const episode = action.payload.main.episode;
+
+        let data = action.payload.response.data;
+        formatEpisode(data);
+        draft.show.seasons.get(season).set(episode, data);
         break;
       }
 

frontend/scss/app.scss

@@ -78,7 +78,10 @@ div.show.dropdown.nav-item > div {
 .video-details {
     > div, > p, > span {
         margin-bottom: 1rem;
-        @media (max-width: 330px) {
+        @media (max-height: 820px) {
+            margin-bottom: 0.5rem;
+        }
+        @media (max-height: 580px) {
             margin-bottom: 0rem;
         }
     }