Skip to content

Commit 05f39bb

Browse files
richiemcilroyrichiemcilroy
committed
Improve countdown animation and fix recording logic
1 parent dec0d8e commit 05f39bb

File tree

2 files changed

+53
-39
lines changed

2 files changed

+53
-39
lines changed

‎apps/desktop/src/routes/in-progress-recording.tsx‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ import {
1818
createEffect,
1919
createMemo,
2020
createSignal,
21+
For,
2122
onCleanup,
2223
Show,
2324
} from "solid-js";
2425
import { createStore, produce } from "solid-js/store";
26+
import { TransitionGroup } from "solid-transition-group";
2527
import { authStore } from "~/store";
2628
import { createTauriEventListener } from "~/utils/createEventListener";
2729
import {
@@ -191,8 +193,9 @@ export default function () {
191193
});
192194

193195
createEffect(() => {
194-
if (state().variant === "initializing") {
195-
const recording = currentRecording.data as CurrentRecording;
196+
const s = state();
197+
if (s.variant === "initializing" || s.variant === "countdown") {
198+
const recording = currentRecording.data as CurrentRecording | undefined;
196199
if (recording?.status === "recording") {
197200
setDisconnectedInputs({ microphone: false, camera: false });
198201
setRecordingFailure(null);
@@ -486,7 +489,7 @@ export default function () {
486489
for (const { pause, resume } of pauseResumes) {
487490
if (pause && resume) t -= resume - pause;
488491
}
489-
return t;
492+
return Math.max(0, t);
490493
};
491494

492495
const isMaxRecordingLimitEnabled = () => {
@@ -560,10 +563,55 @@ export default function () {
560563
>
561564
<IconCapStopCircle />
562565
<span class="text-[0.875rem] font-[500] tabular-nums">
563-
<Show when={!isInitializing()} fallback="Starting...">
566+
<Show when={!isInitializing()} fallback="Starting">
564567
<Show
565568
when={!isCountdown()}
566-
fallback={`${countdownCurrent()}...`}
569+
fallback={
570+
<div class="relative inline-block h-[1.5em] w-[1ch] overflow-hidden align-middle">
571+
<TransitionGroup
572+
onEnter={(el, done) => {
573+
const a = el.animate(
574+
[
575+
{
576+
opacity: 0,
577+
transform: "translateY(-100%)",
578+
},
579+
{ opacity: 1, transform: "translateY(0)" },
580+
],
581+
{
582+
duration: 300,
583+
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
584+
},
585+
);
586+
a.finished.then(done);
587+
}}
588+
onExit={(el, done) => {
589+
const a = el.animate(
590+
[
591+
{ opacity: 1, transform: "translateY(0)" },
592+
{
593+
opacity: 0,
594+
transform: "translateY(100%)",
595+
},
596+
],
597+
{
598+
duration: 300,
599+
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
600+
},
601+
);
602+
a.finished.then(done);
603+
}}
604+
>
605+
<For each={[countdownCurrent()]}>
606+
{(num) => (
607+
<span class="absolute inset-0 flex items-center justify-center">
608+
{num}
609+
</span>
610+
)}
611+
</For>
612+
</TransitionGroup>
613+
</div>
614+
}
567615
>
568616
<Show
569617
when={isMaxRecordingLimitEnabled()}

‎packages/ui-solid/src/auto-imports.d.ts‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,29 @@ export {}
88
declare global {
99
const IconCapArrows: typeof import('~icons/cap/arrows.jsx')['default']
1010
const IconCapAudioOn: typeof import('~icons/cap/audio-on.jsx')['default']
11-
const IconCapAuto: typeof import("~icons/cap/auto.jsx")["default"]
1211
const IconCapBgBlur: typeof import('~icons/cap/bg-blur.jsx')['default']
13-
const IconCapBlur: typeof import("~icons/cap/blur.jsx")["default"]
1412
const IconCapCamera: typeof import('~icons/cap/camera.jsx')['default']
1513
const IconCapCaptions: typeof import('~icons/cap/captions.jsx')['default']
1614
const IconCapCaretDown: typeof import('~icons/cap/caret-down.jsx')['default']
17-
const IconCapCheck: typeof import("~icons/cap/check.jsx")["default"]
1815
const IconCapChevronDown: typeof import('~icons/cap/chevron-down.jsx')['default']
1916
const IconCapCircle: typeof import('~icons/cap/circle.jsx')['default']
2017
const IconCapCircleCheck: typeof import('~icons/cap/circle-check.jsx')['default']
2118
const IconCapCirclePlus: typeof import('~icons/cap/circle-plus.jsx')['default']
2219
const IconCapCircleX: typeof import('~icons/cap/circle-x.jsx')['default']
23-
const IconCapClock: typeof import("~icons/cap/clock.jsx")["default"]
2420
const IconCapCopy: typeof import('~icons/cap/copy.jsx')['default']
2521
const IconCapCorners: typeof import('~icons/cap/corners.jsx')['default']
2622
const IconCapCrop: typeof import('~icons/cap/crop.jsx')['default']
2723
const IconCapCursor: typeof import('~icons/cap/cursor.jsx')['default']
2824
const IconCapCursorMacos: typeof import('~icons/cap/cursor-macos.jsx')['default']
2925
const IconCapCursorWindows: typeof import('~icons/cap/cursor-windows.jsx')['default']
30-
const IconCapDownload: typeof import('~icons/cap/download.jsx')['default']
31-
const IconCapEditor: typeof import('~icons/cap/editor.jsx')['default']
3226
const IconCapEnlarge: typeof import('~icons/cap/enlarge.jsx')['default']
3327
const IconCapFile: typeof import('~icons/cap/file.jsx')['default']
3428
const IconCapFilmCut: typeof import('~icons/cap/film-cut.jsx')['default']
35-
const IconCapFrameFirst: typeof import("~icons/cap/frame-first.jsx")["default"]
36-
const IconCapFrameLast: typeof import("~icons/cap/frame-last.jsx")["default"]
3729
const IconCapGauge: typeof import('~icons/cap/gauge.jsx')['default']
3830
const IconCapGear: typeof import('~icons/cap/gear.jsx')['default']
3931
const IconCapHotkeys: typeof import('~icons/cap/hotkeys.jsx')['default']
4032
const IconCapImage: typeof import('~icons/cap/image.jsx')['default']
4133
const IconCapInfo: typeof import('~icons/cap/info.jsx')['default']
42-
const IconCapInset: typeof import("~icons/cap/inset.jsx")["default"]
4334
const IconCapInstant: typeof import('~icons/cap/instant.jsx')['default']
4435
const IconCapLayout: typeof import('~icons/cap/layout.jsx')['default']
4536
const IconCapLink: typeof import('~icons/cap/link.jsx')['default']
@@ -50,8 +41,6 @@ declare global {
5041
const IconCapMicrophone: typeof import('~icons/cap/microphone.jsx')['default']
5142
const IconCapMonitor: typeof import('~icons/cap/monitor.jsx')['default']
5243
const IconCapMoreVertical: typeof import('~icons/cap/more-vertical.jsx')['default']
53-
const IconCapMoveLeft: typeof import("~icons/cap/move-left.jsx")["default"]
54-
const IconCapMoveRight: typeof import("~icons/cap/move-right.jsx")["default"]
5544
const IconCapNext: typeof import('~icons/cap/next.jsx')['default']
5645
const IconCapPadding: typeof import('~icons/cap/padding.jsx')['default']
5746
const IconCapPause: typeof import('~icons/cap/pause.jsx')['default']
@@ -61,63 +50,40 @@ declare global {
6150
const IconCapPresets: typeof import('~icons/cap/presets.jsx')['default']
6251
const IconCapPrev: typeof import('~icons/cap/prev.jsx')['default']
6352
const IconCapRedo: typeof import('~icons/cap/redo.jsx')['default']
64-
const IconCapRefresh: typeof import('~icons/cap/refresh.jsx')['default']
6553
const IconCapRestart: typeof import('~icons/cap/restart.jsx')['default']
6654
const IconCapScissors: typeof import('~icons/cap/scissors.jsx')['default']
6755
const IconCapSettings: typeof import('~icons/cap/settings.jsx')['default']
6856
const IconCapShadow: typeof import('~icons/cap/shadow.jsx')['default']
69-
const IconCapSize: typeof import("~icons/cap/size.jsx")["default"]
7057
const IconCapSquare: typeof import('~icons/cap/square.jsx')['default']
71-
const IconCapStop: typeof import("~icons/cap/stop.jsx")["default"]
7258
const IconCapStopCircle: typeof import('~icons/cap/stop-circle.jsx')['default']
7359
const IconCapTrash: typeof import('~icons/cap/trash.jsx')['default']
7460
const IconCapUndo: typeof import('~icons/cap/undo.jsx')['default']
75-
const IconCapUpload: typeof import('~icons/cap/upload.jsx')['default']
7661
const IconCapX: typeof import('~icons/cap/x.jsx')['default']
7762
const IconCapZoomIn: typeof import('~icons/cap/zoom-in.jsx')['default']
7863
const IconCapZoomOut: typeof import('~icons/cap/zoom-out.jsx')['default']
7964
const IconHugeiconsEaseCurveControlPoints: typeof import('~icons/hugeicons/ease-curve-control-points.jsx')['default']
80-
const IconIcBaselineMonitor: typeof import("~icons/ic/baseline-monitor.jsx")["default"]
81-
const IconIcRoundSearch: typeof import("~icons/ic/round-search.jsx")["default"]
8265
const IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle.jsx')['default']
8366
const IconLucideBell: typeof import('~icons/lucide/bell.jsx')['default']
8467
const IconLucideBug: typeof import('~icons/lucide/bug.jsx')['default']
85-
const IconLucideCamera: typeof import("~icons/lucide/camera.jsx")["default"]
8668
const IconLucideCheck: typeof import('~icons/lucide/check.jsx')['default']
87-
const IconLucideChevronDown: typeof import("~icons/lucide/chevron-down.jsx")["default"]
8869
const IconLucideClock: typeof import('~icons/lucide/clock.jsx')['default']
89-
const IconLucideDatabase: typeof import('~icons/lucide/database.jsx')['default']
90-
const IconLucideEdit: typeof import('~icons/lucide/edit.jsx')['default']
91-
const IconLucideExpand: typeof import('~icons/lucide/expand.jsx')['default']
92-
const IconLucideEye: typeof import('~icons/lucide/eye.jsx')['default']
9370
const IconLucideEyeOff: typeof import('~icons/lucide/eye-off.jsx')['default']
9471
const IconLucideFastForward: typeof import('~icons/lucide/fast-forward.jsx')['default']
9572
const IconLucideFolder: typeof import('~icons/lucide/folder.jsx')['default']
96-
const IconLucideGift: typeof import('~icons/lucide/gift.jsx')['default']
9773
const IconLucideHardDrive: typeof import('~icons/lucide/hard-drive.jsx')['default']
9874
const IconLucideLayout: typeof import('~icons/lucide/layout.jsx')['default']
99-
const IconLucideLayoutGrid: typeof import("~icons/lucide/layout-grid.jsx")["default"]
10075
const IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle.jsx')['default']
10176
const IconLucideMaximize: typeof import('~icons/lucide/maximize.jsx')['default']
102-
const IconLucideMessageCircle: typeof import("~icons/lucide/message-circle.jsx")["default"]
103-
const IconLucideMessageSquare: typeof import("~icons/lucide/message-square.jsx")["default"]
104-
const IconLucideMessageSquarePlus: typeof import('~icons/lucide/message-square-plus.jsx')['default']
10577
const IconLucideMicOff: typeof import('~icons/lucide/mic-off.jsx')['default']
10678
const IconLucideMonitor: typeof import('~icons/lucide/monitor.jsx')['default']
10779
const IconLucidePlus: typeof import('~icons/lucide/plus.jsx')['default']
108-
const IconLucideRabbit: typeof import("~icons/lucide/rabbit.jsx")["default"]
10980
const IconLucideRatio: typeof import('~icons/lucide/ratio.jsx')['default']
11081
const IconLucideRectangleHorizontal: typeof import('~icons/lucide/rectangle-horizontal.jsx')['default']
11182
const IconLucideRotateCcw: typeof import('~icons/lucide/rotate-ccw.jsx')['default']
11283
const IconLucideSearch: typeof import('~icons/lucide/search.jsx')['default']
11384
const IconLucideSquarePlay: typeof import('~icons/lucide/square-play.jsx')['default']
114-
const IconLucideUnplug: typeof import('~icons/lucide/unplug.jsx')['default']
11585
const IconLucideVideo: typeof import('~icons/lucide/video.jsx')['default']
11686
const IconLucideVolume2: typeof import('~icons/lucide/volume2.jsx')['default']
117-
const IconLucideVolumeX: typeof import('~icons/lucide/volume-x.jsx')['default']
11887
const IconLucideX: typeof import('~icons/lucide/x.jsx')['default']
119-
const IconMdiMonitor: typeof import("~icons/mdi/monitor.jsx")["default"]
12088
const IconPhMonitorBold: typeof import('~icons/ph/monitor-bold.jsx')['default']
121-
const IconPhRecordFill: typeof import('~icons/ph/record-fill.jsx')['default']
122-
const IconPhWarningBold: typeof import('~icons/ph/warning-bold.jsx')['default']
12389
}

0 commit comments

Comments
 (0)