feat: add limits to recordings on destop #291

2026-06-20T21:26:54Z

talksik commented

2026-06-20 21:26:54 +00:00

(Migrated from github.com)

Summary by CodeRabbit

New Features
- Recording sessions now enforce a 60-second maximum duration, automatically stopping when the limit is reached.
- A warning state activates during the final 10 seconds, including a pulsing red warning glow on the recording overlay.
- A progress bar animates during active recording (not loading) and fills across the full duration, turning red as the warning threshold nears.

## Summary by CodeRabbit * **New Features** * Recording sessions now enforce a 60-second maximum duration, automatically stopping when the limit is reached. * A warning state activates during the final 10 seconds, including a pulsing red warning glow on the recording overlay. * A progress bar animates during active recording (not loading) and fills across the full duration, turning red as the warning threshold nears.

coderabbitai[bot] commented

2026-06-20 21:27:02 +00:00

(Migrated from github.com)

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: f3c202f0-de3b-433e-ae23-f9bc1bd72b7f

📥 Commits

Reviewing files that changed from the base of the PR and between 543b5ffa60 and f23eae00c0.

📒 Files selected for processing (1)

js/desktop/src/features/compose/recording-overlay.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

js/desktop/src/features/compose/recording-overlay.tsx

📝 Walkthrough

Walkthrough

Adds RECORDING_MAX_DURATION_SECONDS (60s) and RECORDING_WARNING_SECONDS (10s) constants, introduces a useRecordingCountdown hook that tracks elapsed time via wall-clock and auto-dispatches stop at max duration, refactors RecordingTimer into a prop-driven component, adds CSS progress/warning-glow animations, and wires everything into RecordingOverlay.

Changes

Recording Countdown and Warning UI

Layer / File(s)	Summary
Recording duration constants `js/desktop/src/lib/constants.ts`	Exports `RECORDING_MAX_DURATION_SECONDS` (60) and `RECORDING_WARNING_SECONDS` (10) with JSDoc describing their warning threshold roles.
`useRecordingCountdown` hook and `RecordingTimer` component `js/desktop/src/features/compose/recording-overlay.tsx`	Imports constants and replaces the old 1-second internal state ticker with a 250ms wall-clock hook computing `elapsed`/`isWarning`; hook auto-dispatches `requestIntent('stop')` at max duration. `RecordingTimer` becomes a prop-driven presentational component applying warning color when `isWarning` is true.
CSS progress and warning-glow animations `js/desktop/src/styles/globals.css`	Adds `@keyframes record-progress` (scaleX 0→1, linear, forwards) and `@keyframes record-warning-glow` (pulsing red destructive box-shadow, infinite ease-in-out) with corresponding utility classes.
`RecordingOverlay` wiring and progress bar `js/desktop/src/features/compose/recording-overlay.tsx`	Calls `useRecordingCountdown`, conditionally applies `record-warning-glow` to the overlay container, renders the top progress bar with `RECORDING_MAX_DURATION_SECONDS` as `animationDuration` and red fill when `isWarning`, and passes `elapsed`/`isWarning` to `RecordingTimer`.

Sequence Diagram(s)

sequenceDiagram
  participant RecordingOverlay
  participant useRecordingCountdown
  participant RecordingTimer
  participant requestIntent

  RecordingOverlay->>useRecordingCountdown: active = isRecording && !isLoading
  useRecordingCountdown-->>RecordingOverlay: { elapsed, isWarning }
  RecordingOverlay->>RecordingTimer: elapsed, isWarning
  RecordingTimer-->>RecordingOverlay: renders formatted time with warning style
  Note over RecordingOverlay: adds record-warning-glow class when isWarning
  Note over RecordingOverlay: progress bar animates over RECORDING_MAX_DURATION_SECONDS
  useRecordingCountdown->>requestIntent: dispatch stop when elapsed >= 60s

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Tick-tock, the bunny hops fast,
A red glow warns the time won't last!
Sixty seconds, then stop—no more,
A progress bar slides 'cross the floor.
Warning pulses, bold and bright,
The recording ends just right! 🎙️

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/flowy-live/llink/pull/291?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)  <details> <summary>ℹ️ Recent review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Free **Run ID**: `f3c202f0-de3b-433e-ae23-f9bc1bd72b7f` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 543b5ffa6058281ce8325ab50ea06748119f664b and f23eae00c049416c9dcacbaa23100704256550bf. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `js/desktop/src/features/compose/recording-overlay.tsx` </details> <details> <summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary> * js/desktop/src/features/compose/recording-overlay.tsx </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough Adds `RECORDING_MAX_DURATION_SECONDS` (60s) and `RECORDING_WARNING_SECONDS` (10s) constants, introduces a `useRecordingCountdown` hook that tracks elapsed time via wall-clock and auto-dispatches stop at max duration, refactors `RecordingTimer` into a prop-driven component, adds CSS progress/warning-glow animations, and wires everything into `RecordingOverlay`. ## Changes **Recording Countdown and Warning UI** | Layer / File(s) | Summary | |---|---| | **Recording duration constants** `js/desktop/src/lib/constants.ts` | Exports `RECORDING_MAX_DURATION_SECONDS` (60) and `RECORDING_WARNING_SECONDS` (10) with JSDoc describing their warning threshold roles. | | **`useRecordingCountdown` hook and `RecordingTimer` component** `js/desktop/src/features/compose/recording-overlay.tsx` | Imports constants and replaces the old 1-second internal state ticker with a 250ms wall-clock hook computing `elapsed`/`isWarning`; hook auto-dispatches `requestIntent('stop')` at max duration. `RecordingTimer` becomes a prop-driven presentational component applying warning color when `isWarning` is true. | | **CSS progress and warning-glow animations** `js/desktop/src/styles/globals.css` | Adds `@keyframes record-progress` (scaleX 0→1, linear, forwards) and `@keyframes record-warning-glow` (pulsing red destructive box-shadow, infinite ease-in-out) with corresponding utility classes. | | **`RecordingOverlay` wiring and progress bar** `js/desktop/src/features/compose/recording-overlay.tsx` | Calls `useRecordingCountdown`, conditionally applies `record-warning-glow` to the overlay container, renders the top progress bar with `RECORDING_MAX_DURATION_SECONDS` as `animationDuration` and red fill when `isWarning`, and passes `elapsed`/`isWarning` to `RecordingTimer`. | ## Sequence Diagram(s) ```mermaid sequenceDiagram participant RecordingOverlay participant useRecordingCountdown participant RecordingTimer participant requestIntent RecordingOverlay->>useRecordingCountdown: active = isRecording && !isLoading useRecordingCountdown-->>RecordingOverlay: { elapsed, isWarning } RecordingOverlay->>RecordingTimer: elapsed, isWarning RecordingTimer-->>RecordingOverlay: renders formatted time with warning style Note over RecordingOverlay: adds record-warning-glow class when isWarning Note over RecordingOverlay: progress bar animates over RECORDING_MAX_DURATION_SECONDS useRecordingCountdown->>requestIntent: dispatch stop when elapsed >= 60s ``` ## Estimated code review effort 🎯 2 (Simple) | ⏱️ ~10 minutes ## Poem > 🐰 Tick-tock, the bunny hops fast, > A red glow warns the time won't last! > Sixty seconds, then stop—no more, > A progress bar slides 'cross the floor. > Warning pulses, bold and bright, > The recording ends just right! 🎙️ </details>   --- > [!NOTE] > <details> > <summary>🎁 Summarized by CodeRabbit Free</summary> > > Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting <https://app.coderabbit.ai/login>. > > </details> Comment `@coderabbitai help` to get the list of available commands and usage tips.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#291