Skip to content

fix: Force grid layout in recording mode #18208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
axonbf wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: Force grid layout in recording mode #18208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85ffea1
feat: Add recording_layout server config option for Talk recording la…
Jun 5, 2026
c84af84
chore: Regenerate OpenAPI types for recording-layout capability
Jun 5, 2026
1ed795a
feat: Use configurable recording layout in recording frontend
Jun 5, 2026
aff5dfd
fix: Align recording-layout tests and mocks
Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/capabilities.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@
* `config => call => play-sounds` (local) - Whether the user has sounds enabled for calls (falls back to admin default for guests)
* `config => call => grid-limit` (local) - Suggested gird size for all participants
* `config => call => grid-limit-enforced` (local) - Whether the limit is hard enforced for all participants
* `config => call => recording-layout` (local) - Recording layout style, either `grid` or `speaker` (defaults to `speaker`)
* `config => feature-hints => current` (local) - The current feature hint count that should be sent to the app config to hide all current feature hints
* `config => feature-hints => hidden` (local) - Number of the last hint the administration has hidden via the app config
* `config => conversations => sort-order` (local) - User selected sort order for conversations (`activity` or `alphabetical`)
Expand Down
2 changes: 2 additions & 0 deletions lib/Capabilities.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ class Capabilities implements IPublicCapability {
'play-sounds',
'grid-limit',
'grid-limit-enforced',
'recording-layout',
],
'chat' => [
'read-privacy',
Expand Down Expand Up @@ -286,6 +287,7 @@ public function getCapabilities(): array {
'play-sounds' => $this->talkConfig->getPlaySoundsForUser($user),
'grid-limit' => $this->talkConfig->getGridVideosLimit(),
'grid-limit-enforced' => $this->talkConfig->getGridVideosLimitEnforced(),
'recording-layout' => $this->talkConfig->getRecordingLayout(),
],
'chat' => [
'max-length' => ChatManager::MAX_CHAT_LENGTH,
Expand Down
5 changes: 5 additions & 0 deletions lib/Config.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,11 @@ public function getRecordingFolder(string $userId): string {
);
}

public function getRecordingLayout(): string {
$value = $this->config->getAppValue('spreed', 'recording_layout', 'speaker');
return in_array($value, ['grid', 'speaker'], true) ? $value : 'speaker';
}

public function getLiveTranscriptionTargetLanguageId(?string $userId = null): string {
return $this->config->getUserValue(
$userId,
Expand Down
2 changes: 2 additions & 0 deletions lib/ResponseDefinitions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,6 +806,8 @@
* grid-limit: int,
* // Whether the grid limit is enforced by the server
* grid-limit-enforced: bool,
* // Recording layout ('grid' or 'speaker')

@Antreesy Antreesy Jun 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line should appear in openapi files. I'm afraid your agent might rewrite it?

* recording-layout: string,

@nickvergessen nickvergessen Jun 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* recording-layout: string,
* recording-layout: 'grid'|'speaker',

* },
* chat: array{
* // Maximum length of a chat message
Expand Down
7 changes: 6 additions & 1 deletion openapi-administration.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -285,6 +286,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-backend-recording.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -208,6 +209,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-backend-signaling.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -208,6 +209,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-backend-sipbridge.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -259,6 +260,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-bots.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -208,6 +209,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-federation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -259,6 +260,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi-full.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -442,6 +443,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion openapi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,8 @@
"live-transcription-target-language-id",
"play-sounds",
"grid-limit",
"grid-limit-enforced"
"grid-limit-enforced",
"recording-layout"
],
"properties": {
"enabled": {
Expand Down Expand Up @@ -395,6 +396,10 @@
"grid-limit-enforced": {
"type": "boolean",
"description": "Whether the grid limit is enforced by the server"
},
"recording-layout": {
"type": "string",
"description": "Recording layout ('grid' or 'speaker')"
}
}
},
Expand Down
5 changes: 5 additions & 0 deletions src/RecordingApp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import { onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CallView from './components/CallView/CallView.vue'
import { useGetToken } from './composables/useGetToken.ts'
import { getTalkConfig } from './services/CapabilitiesManager.ts'
import SessionStorage from './services/SessionStorage.js'
import { useCallViewStore } from './stores/callView.ts'
import { useSoundsStore } from './stores/sounds.js'
import { useTokenStore } from './stores/token.ts'
import { signalingKill } from './utils/webrtc/index.js'
Expand All @@ -19,12 +21,15 @@ const route = useRoute()
const soundsStore = useSoundsStore()
const token = useGetToken()
const tokenStore = useTokenStore()
const callViewStore = useCallViewStore()

onBeforeMount(async () => {
await router.isReady()
if (route.name === 'recording') {
tokenStore.updateToken(route.params.token as string)
await soundsStore.setShouldPlaySounds(false)
const isGridLayout = getTalkConfig(token.value, 'call', 'recording-layout') === 'grid'

@Antreesy Antreesy Jun 8, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Token here needed, if participant is from federated instance. Recording is connecting locally, so:

Suggested change
const isGridLayout = getTalkConfig(token.value, 'call', 'recording-layout') === 'grid'
const isGridLayout = getTalkConfig('local', 'call', 'recording-layout') === 'grid'

callViewStore.setCallViewMode({ token: token.value, isGrid: isGridLayout, isStripeOpen: false })
}

// This should not be strictly needed, as the recording server is
Expand Down
2 changes: 2 additions & 0 deletions src/__mocks__/capabilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export const mockedCapabilities: Capabilities = {
'play-sounds': true,
'grid-limit': 0,
'grid-limit-enforced': false,
'recording-layout': 'speaker',
},
chat: {
'max-length': 32000,
Expand Down Expand Up @@ -229,6 +230,7 @@ export const mockedCapabilities: Capabilities = {
'can-upload-background',
'start-without-media',
'blur-virtual-background',
'recording-layout',
],
chat: [
'read-privacy',
Expand Down
14 changes: 9 additions & 5 deletions src/components/CallView/Grid/VideosGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,9 +457,13 @@ export default {

// Number of grid slots at any given moment
// The local video always takes one slot if the grid view is not shown
// as a stripe.
// as a stripe. In recording mode the local video is not shown, so all
// slots are available for remote participants.
slots() {
return this.isStripe ? this.rows * this.columns : this.rows * this.columns - 1
if (this.isStripe || this.isRecording) {
return this.rows * this.columns
}
return this.rows * this.columns - 1
},

// Grid pages at any given moment
Expand Down Expand Up @@ -776,7 +780,7 @@ export default {

let currentColumns = this.columns
let currentRows = this.rows
let currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
let currentSlots = this.isStripe || this.isRecording ? currentColumns * currentRows : currentColumns * currentRows - 1

// Run this code only if we don't have an 'overflow' of videos. If the
// videos are populating the grid, there's no point in shrinking it.
Expand Down Expand Up @@ -809,7 +813,7 @@ export default {
currentColumns--
}

currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
currentSlots = this.isStripe || this.isRecording ? currentColumns * currentRows : currentColumns * currentRows - 1

// Check that there are still enough slots available
if (numberOfVideos > currentSlots) {
Expand All @@ -822,7 +826,7 @@ export default {
currentRows--
}

currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
currentSlots = this.isStripe || this.isRecording ? currentColumns * currentRows : currentColumns * currentRows - 1

// Check that there are still enough slots available
if (numberOfVideos > currentSlots) {
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-administration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-backend-recording.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-backend-signaling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-backend-sipbridge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-bots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-federation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi-full.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2751,6 +2751,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
2 changes: 2 additions & 0 deletions src/types/openapi/openapi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2217,6 +2217,8 @@ export type components = {
"grid-limit": number;
/** @description Whether the grid limit is enforced by the server */
"grid-limit-enforced": boolean;
/** @description Recording layout ('grid' or 'speaker') */
"recording-layout": string;
};
chat: {
/**
Expand Down
Loading
Loading