fix: Force grid layout in recording mode

[axonbf]

Problem

When recording a Talk call, the recording browser session uses promoted/speaker view by default. This means only the active speaker is shown prominently, with other participants in a thin stripe at the bottom. For recorded videos that will be published (e.g., podcasts, social media), a grid layout showing all participants equally is far more useful.

Issue #10060 requested a configurable grid mode for the recording backend, but was closed as "not planned" and redirected to #8768 (Recording UI customization), which remains in the backlog with no timeline.

Current workaround

The maintainer suggested modifying Participant.py on the recording server to run store.commit("isGrid", true). However, this hack has known problems:

• The grid still shows a placeholder/empty slot for the recording participant itself
• The slot math (slots() and shrinkGrid()) subtracts one slot for the local video, which is hidden in recording mode, causing poor layout with empty areas
• The grid-wrapper height does not fill the recording viewport properly

Proposed fix

Instead of modifying the recording server, fix the recording frontend (RecordingApp.vue → CallView.vue → VideosGrid.vue) to properly support grid mode during recording:

1. CallView.vue: When isRecording is true, force isGrid to true so the recording always uses grid layout instead of promoted view.

2. VideosGrid.vue:

   • slots(): When recording, count all slots (do not subtract 1 for local video, since local video is hidden in recording mode).
   • shrinkGrid(): Use the same full slot count in recording mode so grid sizing does not leave empty space.

These changes only affect the recording view and do not change behavior for regular call participants.

Testing

Tested on a production Nextcloud Talk setup with a dedicated recording VPS. The recording layout correctly:

• Shows all participants in an adaptive grid instead of promoted speaker-only view
• Adapts from 1 to 2+ participants during an active recording
• Fills the recording viewport without empty bottom gaps

Related issues

• Fixes Grid view in recording backend #10060
• Related to Recording UI customization #8768

[axonbf]

@Antreesy Updated: reverted the isGrid hardcode in CallView.vue and instead set grid mode via callViewStore.setCallViewMode() from RecordingApp.
vue. This makes it configurable rather than enforced.

[Antreesy]

This makes it configurable rather than enforced.

Better, but it is still executed for every RecordingApp.
If UserA wants to retain the speaker view, that change is breaking for them, and it will just shift the problem to another angle.

What can be done to improve it:

• You dive a bit into PHP backend code
• Extend Capabilities.php to add e.g. ['config']['call']['recording-layout'] => $this->talkConfig->getRecordingLayout()
• add method getRecordingLayout to read $this->config->getAppValue('spreed', 'recording_layout', 'speaker')
• In frontend, change line to callViewStore.setCallViewMode({ token: token.value, isGrid: getTalkConfig('local', 'call', 'recording-layout') === 'grid', isStripeOpen: false })
• In server terminal, you run occ config:app:set spreed recording_layout --value=grid

There you go, a configurable layout (without UI option, but we have some of those already). That's a rough description, I omitted some details, but we can polish it after changes, of course

[axonbf]

I will assumed that grid is the default desired value, (since it thes the standard in calls and recordings), but I (my AI) left it speaker as default. Can you check it is ok?

[Antreesy]

Works in manual tests, let's fix CI and then double-check with backend maintainer:

• DCO: repository requires all commits to be signed-off. (should have 'Signed-off-by: Author Name authoremail@example.com' in the end). We'd also appreciate if you can disclose that it was co-authored with AI in the commit message.
• Lint: run npm run lint:fix, it should fix the import sorting
• OpenAPI: run composer run openapi to generate files automatically
• PHPUnit: CapabilitiesTest.php is missing new capaility added
• It should also be documented in docs/capabilities.md. You can put it under 24, we'll discuss internally if we can backport it further
• You can also semantically split it into three commits for readability:
  1. Backend support for the app value
  2. Regenerate OpenAPI types
  3. Frontend support for the app value

[Antreesy]

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

[Antreesy]

Same here, but maybe something on unicode side is unsupported on your machine 🤷🏽

[axonbf]

@Antreesy @nickvergessen All requested changes are now addressed and CI is fully green, including OpenAPI and PHPUnit. Could you please take a final look when you have a moment?