feat(media-transcoding): add periodic live updates (#4166)

packages/api/src/router/widgets/media-transcoding.ts

@@ -1,4 +1,7 @@
+import { observable } from "@trpc/server/observable";
+
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import type { MediaTranscoding } from "@homarr/request-handler/media-transcoding";
 import { mediaTranscodingRequestHandler } from "@homarr/request-handler/media-transcoding";
 import { paginatedSchema } from "@homarr/validation/common";
 
@@ -15,7 +18,7 @@ export const mediaTranscodingRouter = createTRPCRouter({
     .input(paginatedSchema.pick({ page: true, pageSize: true }))
     .query(async ({ ctx, input }) => {
       const innerHandler = mediaTranscodingRequestHandler.handler(ctx.integration, {
-        pageOffset: input.page,
+        pageOffset: (input.page - 1) * input.pageSize,
         pageSize: input.pageSize,
       });
       const { data } = await innerHandler.getCachedOrUpdatedDataAsync({ forceUpdate: false });
@@ -25,4 +28,19 @@ export const mediaTranscodingRouter = createTRPCRouter({
         data,
       };
     }),
+  subscribeData: publicProcedure
+    .concat(createIndexerManagerIntegrationMiddleware("query"))
+    .input(paginatedSchema.pick({ page: true, pageSize: true }))
+    .subscription(({ ctx, input }) => {
+      return observable<{ integrationId: string; data: MediaTranscoding }>((emit) => {
+        const innerHandler = mediaTranscodingRequestHandler.handler(ctx.integration, {
+          pageOffset: (input.page - 1) * input.pageSize,
+          pageSize: input.pageSize,
+        });
+        const unsubscribe = innerHandler.subscribe((data) => {
+          emit.next({ integrationId: input.integrationId, data });
+        });
+        return unsubscribe;
+      });
+    }),
 });