Migrate from channel to event for listener (#765)

Author: yujonglee

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "desktop"
-version = "0.0.31"
+version = "0.0.32"
 authors = ["you"]
 edition = "2021"
 description = "Hyprnote Desktop App"

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "productName": "Hyprnote Dev",
   "mainBinaryName": "Hyprnote Dev",
   "identifier": "com.hyprnote.dev",

apps/desktop/src-tauri/tauri.conf.json

@@ -29,16 +29,16 @@ function Component() {
   useEffect(() => {
     let unlisten: () => void;
 
-    listenerEvents.statusEvent.listen(({ payload }) => {
-      if (payload === "running_paused") {
+    listenerEvents.sessionEvent.listen(({ payload }) => {
+      if (payload.type === "running_paused") {
         player.current?.pause();
       }
 
-      if (payload === "running_active") {
+      if (payload.type === "running_active") {
         player.current?.play();
       }
 
-      if (payload === "inactive") {
+      if (payload.type === "inactive") {
         handleEnded();
       }
     }).then((u) => {

apps/desktop/src/routes/video.tsx

@@ -1,11 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
-import { Channel } from "@tauri-apps/api/core";
 import { generateObject } from "ai";
 import { motion } from "motion/react";
 import { useEffect, useState } from "react";
 
 import { commands as dbCommands } from "@hypr/plugin-db";
-import { commands as listenerCommands, type SessionEvent } from "@hypr/plugin-listener";
+import { events as listenerEvents } from "@hypr/plugin-listener";
 import { commands as templateCommands } from "@hypr/plugin-template";
 import { Button } from "@hypr/ui/components/ui/button";
 import { WidgetHeader, type WidgetTwoByTwo, WidgetTwoByTwoWrapper } from "@hypr/ui/components/ui/widgets";
@@ -25,20 +24,23 @@ const Widget: WidgetTwoByTwo = ({ queryClient }) => {
   const [progress, setProgress] = useState(0);
 
   useEffect(() => {
-    const channel = new Channel<SessionEvent>();
-    listenerCommands.subscribe(channel);
+    let unlisten: (() => void) | null = null;
 
-    channel.onmessage = (e) => {
-      if (e.type === "started") {
-        setIsLive(true);
-      }
-      if (e.type === "stopped") {
+    listenerEvents.sessionEvent.listen(({ payload }) => {
+      if (payload.type === "inactive" || payload.type === "running_paused") {
         setIsLive(false);
       }
-    };
+      if (payload.type === "running_active") {
+        setIsLive(true);
+      }
+    }).then((fn) => {
+      unlisten = fn;
+    });
 
     return () => {
-      listenerCommands.unsubscribe(channel);
+      if (unlisten) {
+        unlisten();
+      }
     };
   }, []);
 

extensions/summary/src/widgets/bullet/2x2.tsx

@@ -1,8 +1,7 @@
-import { Channel } from "@tauri-apps/api/core";
 import { useEffect, useMemo, useState } from "react";
 
 import { commands as dbCommands } from "@hypr/plugin-db";
-import { commands as listenerCommands, type SessionEvent, type TimelineView } from "@hypr/plugin-listener";
+import { events as listenerEvents, type TimelineView } from "@hypr/plugin-listener";
 import { useOngoingSession, useSession } from "@hypr/utils/contexts";
 
 export function useTranscript(sessionId: string | null) {
@@ -53,17 +52,20 @@ export function useTranscript(sessionId: string | null) {
       return;
     }
 
-    const channel = new Channel<SessionEvent>();
-    listenerCommands.subscribe(channel);
+    let unlisten: (() => void) | null = null;
 
-    channel.onmessage = (e) => {
-      if (e.type === "timelineView") {
-        setTimeline(e.timeline);
+    listenerEvents.sessionEvent.listen(({ payload }) => {
+      if (payload.type === "timelineView") {
+        setTimeline(payload.view);
       }
-    };
+    }).then((fn) => {
+      unlisten = fn;
+    });
 
     return () => {
-      listenerCommands.unsubscribe(channel);
+      if (unlisten) {
+        unlisten();
+      }
     };
   }, [ongoingSessionState.status, ongoingSessionState.sessionId, sessionId]);
 

extensions/transcript/src/hooks/useTranscript.ts

@@ -1,14 +1,13 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Channel, isTauri } from "@tauri-apps/api/core";
+import { isTauri } from "@tauri-apps/api/core";
 import { clearMocks, mockIPC } from "@tauri-apps/api/mocks";
 import { useEffect } from "react";
 
 import { Session } from "@hypr/plugin-db";
-import { type SessionEvent, TimelineView } from "@hypr/plugin-listener";
+import { type TimelineView } from "@hypr/plugin-listener";
 import { OngoingSessionProvider } from "@hypr/utils/contexts";
 import { SessionsProvider } from "@hypr/utils/contexts";
 import { createOngoingSessionStore, createSessionsStore, createSessionStore } from "@hypr/utils/stores";
-import { sleep } from "../../utils";
 
 const queryClient = new QueryClient();
 
@@ -63,15 +62,11 @@ export default function MockProvider({
 }
 
 const mockTranscriptIPC = (): (() => void) | undefined => {
-  mockIPC((cmd, args) => {
+  mockIPC((cmd, _args) => {
     if (cmd == "plugin:listener|get_timeline_view") {
       return handleGetTimeline();
     }
 
-    if (cmd == "plugin:listener|subscribe") {
-      return handleListenerSubscribe((args as any).channel as Channel<SessionEvent>);
-    }
-
     console.warn(`'${cmd}' is not mocked`);
   });
 
@@ -83,143 +78,3 @@ const handleGetTimeline = () => {
     items: [],
   } satisfies TimelineView;
 };
-
-const handleListenerSubscribe = (channel: Channel<SessionEvent>) => {
-  (async () => {
-    let currentTime = 0;
-
-    // John starts the meeting
-    await sleep(500);
-    currentTime += 0.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 3,
-            speaker: 1,
-            text: "Hey team, thanks for joining. Today we'll discuss the new transcription feature requirements.",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Sarah responds
-    await sleep(3500);
-    currentTime += 3.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 5,
-            speaker: 2,
-            text:
-              "I've been working on some mockups based on user feedback. The main request is for real-time updates and clear speaker identification.",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Mike adds technical context
-    await sleep(5500);
-    currentTime += 5.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 4,
-            speaker: 3,
-            text:
-              "That aligns with our backend capabilities. We can stream the transcription with about 500ms latency.",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // John asks about timeline
-    await sleep(4500);
-    currentTime += 4.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 2,
-            speaker: 1,
-            text: "What's our timeline for implementing this?",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Sarah provides estimate
-    await sleep(3000);
-    currentTime += 3;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 4,
-            speaker: 2,
-            text: "The UI work should take about two weeks. We already have most of the components ready.",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Mike confirms backend timeline
-    await sleep(4500);
-    currentTime += 4.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 3,
-            speaker: 3,
-            text: "Backend integration can be done in parallel. We should be ready for testing in two weeks.",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Meeting wrap-up
-    await sleep(3500);
-    currentTime += 3.5;
-    channel.onmessage({
-      type: "timelineView",
-      timeline: {
-        items: [
-          {
-            start: currentTime,
-            end: currentTime + 2,
-            speaker: 1,
-            text: "Perfect, let's reconvene next week for a progress check. Thanks everyone!",
-            confidence: 0.9,
-          },
-        ],
-      },
-    });
-
-    // Send stopped event after a brief pause
-    await sleep(2500);
-    channel.onmessage({
-      type: "stopped",
-    });
-  })();
-};