5 Commits

Author SHA1 Message Date
Arjun Patel ba0fbcb4ba unused var 2026-06-13 11:36:21 -07:00
Arjun Patel 3175b04d3c cleanup unnecessary logic and complexity 2026-06-13 11:33:12 -07:00
Arjun Patel 368922a2c1 cleanup unnecessary logic 2026-06-13 11:31:28 -07:00
Arjun Patel 3381ff0b02 fix avatar change affordance 2026-06-13 11:25:50 -07:00
Arjun Patel 03ec264c93 fix awkward stream list experience 2026-06-13 11:18:09 -07:00
4 changed files with 8 additions and 112 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "Flowy.llink",
"productName": "Flowy.llink",
"version": "1.7.1",
"version": "1.7.0",
"description": "Flowy.llink is a video messaging app for teams",
"main": ".vite/build/main.js",
"private": true,
@@ -7,10 +7,6 @@ import { useObjectUrl } from '@/hooks/use-object-url';
import { AttachmentStrip } from '@/features/compose/attachment-strip';
import type { PendingAttachment } from '@/features/compose/attachment-strip';
import { cn } from '@/lib/utils';
import {
RECORDING_MAX_DURATION_SECONDS,
RECORDING_WARNING_SECONDS,
} from '@/lib/constants';
import { Button } from '@/components/ui/button';
import { KeyHint } from '@/components/key-hint';
import { useComposeIntentStore } from '@/stores/compose-intent-store';
@@ -38,50 +34,16 @@ interface RecordingOverlayProps {
objectFit?: 'cover' | 'contain';
}
const WARNING_AT_SECONDS =
RECORDING_MAX_DURATION_SECONDS - RECORDING_WARNING_SECONDS;
/**
* Tracks elapsed recording time and drives the time-limit UI. Keeps the
* recorder itself unaware of limits: when the cap is reached it dispatches the
* standard `stop` intent (the same path as releasing the ` key), which finishes
* the recording into the review step.
*/
function useRecordingCountdown(active: boolean) {
function RecordingTimer() {
const [elapsed, setElapsed] = useState(0);
const requestIntent = useComposeIntentStore((s) => s.request);
useEffect(() => {
if (!active) return;
const start = Date.now();
let stopped = false;
// Tick faster than 1s so the auto-stop lands within ~250ms of the cap, but
// only re-render when the whole-second value actually changes.
const interval = setInterval(() => {
const seconds = Math.floor((Date.now() - start) / 1000);
setElapsed((prev) => (prev === seconds ? prev : seconds));
if (seconds >= RECORDING_MAX_DURATION_SECONDS && !stopped) {
stopped = true;
requestIntent('stop');
}
}, 250);
return () => {
clearInterval(interval);
setElapsed(0);
};
}, [active, requestIntent]);
setElapsed((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return { elapsed, isWarning: elapsed >= WARNING_AT_SECONDS };
}
function RecordingTimer({
elapsed,
isWarning,
}: {
elapsed: number;
isWarning: boolean;
}) {
const minutes = Math.floor(elapsed / 60);
const seconds = elapsed % 60;
const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
@@ -89,14 +51,7 @@ function RecordingTimer({
return (
<div className="flex items-center gap-2">
<span className="h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
<span
className={cn(
'font-mono text-sm text-white/80',
isWarning && 'text-red-400',
)}
>
{display}
</span>
<span className="font-mono text-sm text-white/80">{display}</span>
</div>
);
}
@@ -182,31 +137,14 @@ export function RecordingOverlay({
const isLoading = isRecording && !mediaStream;
const requestIntent = useComposeIntentStore((s) => s.request);
const { elapsed, isWarning } = useRecordingCountdown(
isRecording && !isLoading,
);
return (
<div
className={cn(
'absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90',
isReviewing && isDragging && 'ring-2 ring-inset ring-white/30',
isRecording && isWarning && 'record-warning-glow',
)}
{...(isReviewing ? dropZoneProps : {})}
>
{/* Top progress bar: fills over the recording duration, red in warning */}
{isRecording && !isLoading && (
<div className="absolute inset-x-0 top-0 z-20 h-1 bg-white/10">
<div
className={cn(
'h-full w-full origin-left record-progress',
isWarning ? 'bg-red-500' : 'bg-white/80',
)}
style={{ animationDuration: `${RECORDING_MAX_DURATION_SECONDS}s` }}
/>
</div>
)}
{/* Loading state */}
{isLoading && (
<div className="z-10 flex flex-col items-center gap-2">
@@ -247,7 +185,7 @@ export function RecordingOverlay({
{/* Top center: recording indicator */}
<div className="absolute top-8 z-10">
{isRecording && !isLoading ? (
<RecordingTimer elapsed={elapsed} isWarning={isWarning} />
<RecordingTimer />
) : isReviewing ? (
<div className="flex items-center gap-2">
<span className="text-sm text-white/80">Review recording</span>
-6
View File
@@ -4,12 +4,6 @@ export const MAX_ATTACHMENT_SIZE_BYTES = 25 * 1024 * 1024;
/** Maximum number of file attachments per particle. */
export const MAX_ATTACHMENTS = 10;
/** Maximum duration for a media (audio/video) recording, in seconds. */
export const RECORDING_MAX_DURATION_SECONDS = 60;
/** When this many seconds or fewer remain, show the red warning state. */
export const RECORDING_WARNING_SECONDS = 10;
export const SUPPORT_EMAIL = 'team@flowylabs.ai';
export const PRIVACY_URL = 'https://flowylabs.ai/llink/privacy';
-36
View File
@@ -186,39 +186,3 @@
.no-drag {
-webkit-app-region: no-drag;
}
/* Recording time-limit progress bar: a single CSS animation fills the bar
left→right over the recording duration (duration set inline), avoiding
per-frame React renders. */
@keyframes record-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.record-progress {
transform: scaleX(0);
animation-name: record-progress;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
/* Pulsing red glow around the recording overlay during the final warning window. */
@keyframes record-warning-glow {
0%,
100% {
box-shadow:
inset 0 0 0 2px var(--destructive),
inset 0 0 24px 0 oklch(0.6 0.24 27 / 0.25);
}
50% {
box-shadow:
inset 0 0 0 3px var(--destructive),
inset 0 0 60px 0 oklch(0.6 0.24 27 / 0.5);
}
}
.record-warning-glow {
animation: record-warning-glow 1s ease-in-out infinite;
}