Handling progress delete event in UI

bazarr/event_handler.py

@@ -28,4 +28,4 @@ def show_progress(id, header, name, value, count):
 
 
 def hide_progress(id):
-    event_stream(type="progress", action="delete", payload={"id": id})
+    event_stream(type="progress", action="delete", payload=id)

frontend/src/@socketio/index.ts

@@ -91,8 +91,8 @@ class SocketIOClient {
 
           forIn(element, (ids, key) => {
             ids = uniq(ids);
-            const action = handler[key as SocketIO.Action];
-            if (action) {
+            const action = handler[key];
+            if (typeof action == "function") {
               action(ids);
             } else if (anyAction === undefined) {
               log("warning", "Unhandle action of SocketIO event", key, type);

frontend/src/@socketio/reducer.ts

@@ -9,6 +9,7 @@ import {
   siteAddNotifications,
   siteAddProgress,
   siteInitializationFailed,
+  siteRemoveProgress,
   siteUpdateOffline,
   systemUpdateLanguagesAll,
   systemUpdateSettings,
@@ -72,6 +73,13 @@ export function createDefaultReducer(): SocketIO.Reducer[] {
           reduxStore.dispatch(siteAddProgress(progress));
         }
       },
+      delete: (ids) => {
+        setTimeout(() => {
+          ids?.forEach((id) => {
+            reduxStore.dispatch(siteRemoveProgress(id));
+          });
+        }, 3 * 1000);
+      },
     },
     {
       key: "series",

frontend/src/@types/socket.d.ts

@@ -1,6 +1,4 @@
 namespace SocketIO {
-  type Action = "update" | "delete";
-
   type EventType = NumEventType | NullEventType | SpecialEventType;
 
   type NumEventType =
@@ -25,18 +23,21 @@ namespace SocketIO {
 
   type SpecialEventType = "message" | "progress";
 
-  type ReducerCreator<E extends EventType, T> = ValueOf<
+  type ReducerCreator<E extends EventType, U, D = never> = ValueOf<
     {
       [P in E]: {
         key: P;
         any?: () => void;
-      } & Partial<Record<Action, ActionFn<T>>>;
+        update?: ActionFn<T>;
+        delete?: ActionFn<D extends never ? T : D>;
+      } & LooseObject;
+      // TODO: Typing
     }
   >;
 
   type Event = {
     type: EventType;
-    action: Action;
+    action: string;
     payload: any;
   };
 
@@ -46,9 +47,9 @@ namespace SocketIO {
     | ReducerCreator<NumEventType, number>
     | ReducerCreator<NullEventType, null>
     | ReducerCreator<"message", string>
-    | ReducerCreator<"progress", CustomEvent.Progress>;
+    | ReducerCreator<"progress", CustomEvent.Progress, string>;
 
-  type ActionRecord = OptionalRecord<EventType, OptionalRecord<Action, any[]>>;
+  type ActionRecord = OptionalRecord<EventType, StrictObject<any[]>>;
 
   namespace CustomEvent {
     type Progress = ReduxStore.Progress;

frontend/src/App/notifications/index.tsx

@@ -86,7 +86,7 @@ const ProgressToast: FunctionComponent<ProgressHolderProps> = ({
   const remove = useCallback(() => removeProgress(id), [removeProgress, id]);
 
   useEffect(() => {
-    const handle = setTimeout(remove, 5 * 1000);
+    const handle = setTimeout(remove, 10 * 1000);
     return () => {
       clearTimeout(handle);
     };