From c3bced8b5868b0143de40c16082ea1ff9ece6664 Mon Sep 17 00:00:00 2001
From: Siyuan Miao <i@xswan.net>
Date: Wed, 10 Sep 2025 14:39:36 +0200
Subject: [PATCH] chore: show codec and clock rate

---
 ui/src/components/sidebar/connectionStats.tsx | 17 ++++++++++++++++-
 ui/src/hooks/stores.ts                        |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
index a69cd94e..697d317c 100644
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -19,6 +19,8 @@ export default function ConnectionStatsSidebar() {
     appendLocalCandidateStats,
     appendRemoteCandidateStats,
     appendDiskDataChannelStats,
+    setCodecInfo,
+    codecInfo,
   } = useRTCStore();
 
   useInterval(function collectWebRTCStats() {
@@ -52,6 +54,8 @@ export default function ConnectionStatsSidebar() {
           }
         } else if (report.type === "data-channel" && report.label === "disk") {
           appendDiskDataChannelStats(report);
+        } else if (report.type === "codec") {
+          setCodecInfo(report);
         }
       });
     })();
@@ -124,7 +128,18 @@ export default function ConnectionStatsSidebar() {
               <div className="space-y-3">
                 <SettingsSectionHeader
                   title="Video"
-                  description="The video stream from the JetKVM to the client."
+                  description={<>
+                    The video stream from the JetKVM to the client.
+                    {codecInfo && <div className="text-xs text-slate-700 dark:text-slate-300 mt-1 flex flex-col">
+                      <div>
+                        Current codec: <strong>{codecInfo.mimeType}</strong>
+                      </div>
+                      <div>
+                        Clock Rate: <strong>{codecInfo.clockRate}</strong>
+                      </div>
+                    </div>}
+                  </>
+                  }
                 />
 
                 {/* RTP Jitter */}
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index f99fd07d..17c77bc0 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -131,6 +131,9 @@ export interface RTCState {
   appendInboundRtpStats: (stats: RTCInboundRtpStreamStats) => void;
   clearInboundRtpStats: () => void;
 
+  codecInfo: RTCRtpCodec | null;
+  setCodecInfo: (info: RTCRtpCodec) => void;
+
   candidatePairStats: Map<number, RTCIceCandidatePairStats>;
   appendCandidatePairStats: (stats: RTCIceCandidatePairStats) => void;
   clearCandidatePairStats: () => void;
@@ -179,6 +182,9 @@ export const useRTCStore = create<RTCState>(set => ({
   isTurnServerInUse: false,
   setTurnServerInUse: (inUse: boolean)  => set({ isTurnServerInUse: inUse }),
 
+  codecInfo: null,
+  setCodecInfo: (info: RTCRtpCodec) => set({ codecInfo: info }),
+
   inboundRtpStats: new Map(),
   appendInboundRtpStats: (stats: RTCInboundRtpStreamStats) => {
     set(prevState => ({