Merge branch 'develop' of github.com:shiguredo/sora-devtools into fea…

…ture/h265-params

CHANGES.md

@@ -11,6 +11,10 @@
 
 ## develop
 
+- [ADD] コネクション ID とクライアント ID の表示にラベルを追加する
+  - @tnamao
+- [ADD] Sora 接続後にセッション ID の表示を追加する
+  - @tnamao
 - [FIX] `audio` `video` がともに無効な状態で Sora への接続時に getUserMedia を呼び出してしまう問題を修正する
   - @tnamao
 - [ADD] `dataChannels` のフォームにテンプレート読み込みボタンを追加する

package.json

@@ -44,14 +44,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.4.1",
-    "@types/node": "20.10.1",
-    "@types/react": "18.2.39",
+    "@types/node": "20.10.3",
+    "@types/react": "18.2.41",
     "@types/react-redux": "7.1.31",
     "@types/redux-logger": "3.0.12",
     "@vitejs/plugin-react": "4.2.0",
     "husky": "8.0.3",
     "jsdom": "23.0.1",
-    "knip": "3.3.4",
+    "knip": "3.4.0",
     "next": "14.0.3",
     "rimraf": "5.0.5",
     "typescript": "5.3.2",

src/app/actions.ts

@@ -815,6 +815,9 @@ function setSoraCallbacks(
     ) {
       dispatch(slice.actions.deleteFocusedSpotlightConnectionId(message.connection_id))
     }
+    if (message.event_type === 'connection.created' && typeof message.session_id === 'string') {
+      dispatch(slice.actions.setSoraSessionId(message.session_id))
+    }
     dispatch(
       slice.actions.setNotifyMessages({
         timestamp: new Date().getTime(),
@@ -899,6 +902,7 @@ function setSoraCallbacks(
       fakeContents.worker.postMessage({ type: 'stop' })
     }
     dispatch(slice.actions.setSora(null))
+    dispatch(slice.actions.setSoraSessionId(null))
     dispatch(slice.actions.setSoraConnectionStatus('disconnected'))
     dispatch(slice.actions.setLocalMediaStream(null))
     dispatch(slice.actions.removeAllRemoteMediaStreams())

src/app/slice.ts

@@ -79,6 +79,7 @@ const initialState: SoraDevtoolsState = {
     sora: null,
     connectionId: null,
     clientId: null,
+    sessionId: null,
     localMediaStream: null,
     remoteMediaStreams: [],
     prevStatsReport: [],
@@ -376,6 +377,9 @@ export const slice = createSlice({
         state.soraContents.datachannels = []
       }
     },
+    setSoraSessionId: (state, action: PayloadAction<string | null>) => {
+      state.soraContents.sessionId = action.payload
+    },
     setSoraConnectionStatus: (
       state,
       action: PayloadAction<SoraDevtoolsState['soraContents']['connectionStatus']>,

src/components/Video/ConnectionStatusBar.tsx

@@ -5,6 +5,7 @@ import { copy2clipboard } from '@/utils'
 
 type TextBoxProps = {
   id?: string
+  label?: string
   text: string
 }
 const TextBox: React.FC<TextBoxProps> = (props) => {
@@ -13,14 +14,17 @@ const TextBox: React.FC<TextBoxProps> = (props) => {
     event.currentTarget.blur()
   }
   return (
-    <div className="d-flex align-items-center border border-secondary rounded mx-1">
-      <p id={props.id} className="mx-2 p-1">
-        {props.text}
-      </p>
-      <div className="border-left border-secondary">
-        <button type="button" className="btn btn-sm btn-light" onClick={onClick}>
-          <ClipboardIcon />
-        </button>
+    <div className="d-flex align-items-center">
+      {props.label ? <p>{props.label}</p> : null}
+      <div className="d-flex align-items-center border border-secondary rounded mx-1">
+        <p id={props.id} className="mx-2 p-1">
+          {props.text}
+        </p>
+        <div className="border-left border-secondary">
+          <button type="button" className="btn btn-sm btn-light" onClick={onClick}>
+            <ClipboardIcon />
+          </button>
+        </div>
       </div>
     </div>
   )
@@ -36,10 +40,18 @@ export const ConnectionStatusBar: React.FC<Props> = (props) => {
   return (
     <>
       {connectionId ? (
-        <TextBox id={localVideo ? 'local-video-connection-id' : undefined} text={connectionId} />
+        <TextBox
+          id={localVideo ? 'local-video-connection-id' : undefined}
+          label="connectionID:"
+          text={connectionId}
+        />
       ) : null}
       {clientId !== null && clientId !== undefined && connectionId !== clientId ? (
-        <TextBox id={localVideo ? 'local-video-client-id' : undefined} text={clientId} />
+        <TextBox
+          id={localVideo ? 'local-video-client-id' : undefined}
+          label="clientID:"
+          text={clientId}
+        />
       ) : null}
     </>
   )

src/components/Video/LocalVideo.tsx

@@ -7,6 +7,7 @@ import { RequestRtpStreamButton } from './RequestRtpStreamButton'
 import { RequestSpotlightRidButton } from './RequestSpotlightRidButton'
 import { ResetRtpStreamButton } from './ResetRtpStreamButton'
 import { ResetSpotlightRidButton } from './ResetSpotlightRidButton'
+import { SessionStatusBar } from './SessionStatusBar'
 import { Video } from './Video'
 import { VolumeVisualizer } from './VolumeVisualizer'
 
@@ -54,6 +55,7 @@ const VideoBox: React.FC = () => {
 export const LocalVideo: React.FC = () => {
   const connectionId = useAppSelector((state) => state.soraContents.connectionId)
   const clientId = useAppSelector((state) => state.soraContents.clientId)
+  const sessionId = useAppSelector((state) => state.soraContents.sessionId)
   const simulcast = useAppSelector((state) => state.simulcast)
   const spotlight = useAppSelector((state) => state.spotlight)
   const role = useAppSelector((state) => state.role)
@@ -62,6 +64,11 @@ export const LocalVideo: React.FC = () => {
     <div className="row my-1">
       <div className="col-auto">
         <div className="video-status mb-1">
+          {sessionId !== null ? (
+            <div className="d-flex align-items-center mb-1 video-status-inner">
+              <SessionStatusBar sessionId={sessionId} />
+            </div>
+          ) : null}
           {connectionId !== null || clientId !== null ? (
             <div className="d-flex align-items-center mb-1 video-status-inner">
               <ConnectionStatusBar connectionId={connectionId} clientId={clientId} localVideo />