feat: add configurable rewind fetch group size to admin dashboard

.github/workflows/misc.yml

@@ -33,6 +33,7 @@ jobs:
     if: github.event.action == 'opened' || github.event.action == 'synchronize'
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       pull-requests: read
     steps:
       - name: Checkout code
@@ -46,6 +47,12 @@ jobs:
             **.ts
             **.tsx
 
+      - name: Set up Go
+        if: steps.changed-files.outputs.any_changed == 'true'
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21'
+
       - name: Install addlicense
         if: steps.changed-files.outputs.any_changed == 'true'
         run: go install github.com/google/addlicense@latest

apps/client/src/contexts/SessionContext.tsx

@@ -22,7 +22,14 @@ type SessionContextType = {
   username: string
   roomState: RoomState | undefined
   sessionDurationMinutes: number
-  setSession: (userId: string, username: string, roomState: RoomState, sessionDurationMinutes: number) => void
+  rewindFetchGroupSize: number
+  setSession: (
+    userId: string,
+    username: string,
+    roomState: RoomState,
+    sessionDurationMinutes: number,
+    rewindFetchGroupSize: number,
+  ) => void
   clearSession: () => void
 }
 
@@ -33,23 +40,34 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   const [username, setUsername] = useState('')
   const [roomState, setRoomState] = useState<RoomState | undefined>(undefined)
   const [sessionDurationMinutes, setSessionDurationMinutes] = useState(10) // default fallback
+  const [rewindFetchGroupSize, setRewindFetchGroupSize] = useState(5) // default fallback
 
-  function setSession(userId: string, username: string, roomState: RoomState, sessionDurationMinutes: number) {
+  function setSession(
+    userId: string,
+    username: string,
+    roomState: RoomState,
+    sessionDurationMinutes: number,
+    rewindFetchGroupSize: number,
+  ) {
     setUserId(userId)
     setUsername(username)
     setRoomState(roomState)
     setSessionDurationMinutes(sessionDurationMinutes)
+    setRewindFetchGroupSize(rewindFetchGroupSize)
   }
 
   function clearSession() {
     setUserId('')
     setUsername('')
     setRoomState(undefined)
     setSessionDurationMinutes(10)
+    setRewindFetchGroupSize(5)
   }
 
   return (
-    <SessionContext.Provider value={{ userId, username, roomState, sessionDurationMinutes, setSession, clearSession }}>
+    <SessionContext.Provider
+      value={{ userId, username, roomState, sessionDurationMinutes, rewindFetchGroupSize, setSession, clearSession }}
+    >
       {children}
     </SessionContext.Provider>
   )

apps/client/src/pages/JoinPage.tsx

@@ -71,8 +71,22 @@ export default function JoinPage() {
     setClock(clock)
 
     socket.on('joined-room', (response: JoinResponse) => {
-      setSession(response.userId, username, response.roomState, response.sessionDurationMinutes)
-      console.log('Navigating to /session', response.roomState, 'Duration:', response.sessionDurationMinutes, 'minutes')
+      setSession(
+        response.userId,
+        username,
+        response.roomState,
+        response.sessionDurationMinutes,
+        response.rewindFetchGroupSize,
+      )
+      console.log(
+        'Navigating to /session',
+        response.roomState,
+        'Duration:',
+        response.sessionDurationMinutes,
+        'minutes',
+        'Rewind fetch group size:',
+        response.rewindFetchGroupSize,
+      )
       navigate('/session')
     })
 

apps/client/src/pages/SessionPage.tsx

@@ -81,7 +81,7 @@ function SessionPage() {
 
   // initialize the variables
   const [maximizedUserId, setMaximizedUserId] = useState<string | null>(null)
-  const { userId, username, roomState, sessionDurationMinutes, clearSession } = useSession()
+  const { userId, username, roomState, sessionDurationMinutes, rewindFetchGroupSize, clearSession } = useSession()
   const [isMicOn, setIsMicOn] = useState(false)
   const [isCamOn, setisCamOn] = useState(false)
   const [isScreenSharing, setIsScreenSharing] = useState(false)
@@ -301,6 +301,7 @@ function SessionPage() {
       }
 
       console.log('SessionPage: About to fetch video with joiningRequestId:', videoRequestId)
+      console.log('SessionPage: Using rewind fetch group size:', rewindFetchGroupSize)
       console.log(
         'SessionPage: All moqClient requestIds before video fetch:',
         moqClient ? Array.from(moqClient.requests.keys()) : 'no client',
@@ -311,9 +312,8 @@ function SessionPage() {
         typeAndProps: {
           type: FetchType.Relative,
           props: {
-            fullTrackName: videoTrackName,
             joiningRequestId: videoRequestId,
-            joiningStart: 5n, // last 5 groups
+            joiningStart: BigInt(rewindFetchGroupSize),
           },
         },
       })

apps/client/src/types/types.ts

@@ -32,6 +32,7 @@ export interface JoinResponse {
   userId: string
   roomState: RoomState
   sessionDurationMinutes: number
+  rewindFetchGroupSize: number
 }
 
 export interface RoomUser {

apps/room-server/admin.html

@@ -680,6 +680,12 @@ <h3>Room Limits Configuration</h3>
                 <span class="form-help">Current limit: 1-1440 minutes (24 hours)</span>
               </div>
 
+              <div class="form-group">
+                <label for="rewind-fetch-group-size">Rewind fetch group size:</label>
+                <input type="number" id="rewind-fetch-group-size" min="1" max="100" required />
+                <span class="form-help">Number of groups to fetch for rewind playback (1-100)</span>
+              </div>
+
               <div class="form-actions">
                 <button type="submit" class="save-btn">Save Settings</button>
                 <button type="button" class="reset-btn" onclick="loadSettings()">Reset</button>
@@ -830,6 +836,7 @@ <h3>Room Limits Configuration</h3>
             document.getElementById('max-rooms').value = limits.maxRooms
             document.getElementById('max-users').value = limits.maxUsersPerRoom
             document.getElementById('session-duration').value = limits.sessionDurationMinutes
+            document.getElementById('rewind-fetch-group-size').value = limits.rewindFetchGroupSize
           } else {
             console.error('Failed to load settings:', result.error)
             alert('Failed to load settings. Please try refreshing the page.')
@@ -852,6 +859,7 @@ <h3>Room Limits Configuration</h3>
             maxRooms: parseInt(document.getElementById('max-rooms').value),
             maxUsersPerRoom: parseInt(document.getElementById('max-users').value),
             sessionDurationMinutes: parseInt(document.getElementById('session-duration').value),
+            rewindFetchGroupSize: parseInt(document.getElementById('rewind-fetch-group-size').value),
           }
 
           const response = await fetch('/api/rooms/limits', {

apps/room-server/src/server.ts

@@ -175,6 +175,7 @@ let roomLimits = {
   maxRooms: parseInt(process.env.MOQTAIL_MAX_ROOMS || '5'),
   maxUsersPerRoom: parseInt(process.env.MOQTAIL_MAX_USERS_PER_ROOM || '6'),
   sessionDurationMinutes: parseInt(process.env.MOQTAIL_SESSION_DURATION_MINUTES || '10'),
+  rewindFetchGroupSize: parseInt(process.env.MOQTAIL_REWIND_FETCH_GROUP_SIZE || '5'),
 }
 
 // ANSI to HTML converter for log formatting
@@ -344,11 +345,22 @@ function handleSetRoomLimits(req: any, res: any) {
         return
       }
 
+      if (
+        typeof newLimits.rewindFetchGroupSize !== 'number' ||
+        newLimits.rewindFetchGroupSize < 1 ||
+        newLimits.rewindFetchGroupSize > 100
+      ) {
+        res.writeHead(400, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify({ error: 'rewindFetchGroupSize must be a number between 1 and 100' }))
+        return
+      }
+
       // Update the limits
       roomLimits = {
         maxRooms: newLimits.maxRooms,
         maxUsersPerRoom: newLimits.maxUsersPerRoom,
         sessionDurationMinutes: newLimits.sessionDurationMinutes,
+        rewindFetchGroupSize: newLimits.rewindFetchGroupSize,
       }
 
       console.log('Room limits updated by admin:', roomLimits)
@@ -868,6 +880,7 @@ io.on('connection', (socket) => {
       userId,
       roomState,
       sessionDurationMinutes: roomLimits.sessionDurationMinutes,
+      rewindFetchGroupSize: roomLimits.rewindFetchGroupSize,
     }
     console.debug('sending joined-room', joinResponse, socket.id)
     socket.emit('joined-room', joinResponse)

apps/room-server/src/types.ts

@@ -43,6 +43,7 @@ export interface JoinResponse {
   userId: string
   roomState: RoomStateView
   sessionDurationMinutes: number
+  rewindFetchGroupSize: number
 }
 
 export interface RoomUser {