From e309cc5e8d31469f15b455c926db16e895a85b77 Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Thu, 10 Apr 2025 16:26:38 -0300
Subject: [PATCH] :sparkles: ags(control-center/tiles): finally add screen
 recording tile!!

---
 ags/widget/control-center/tiles/Bluetooth.ts |  1 +
 ags/widget/control-center/tiles/Recording.ts | 28 +++++++++++++++-----
 ags/widget/control-center/tiles/Tile.ts      |  9 ++++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/ags/widget/control-center/tiles/Bluetooth.ts b/ags/widget/control-center/tiles/Bluetooth.ts
index e466eca..8f2f2da 100644
--- a/ags/widget/control-center/tiles/Bluetooth.ts
+++ b/ags/widget/control-center/tiles/Bluetooth.ts
@@ -13,6 +13,7 @@ export const TileBluetooth = Tile({
     onToggledOn: () => AstalBluetooth.get_default().adapter.set_powered(true),
     onToggledOff: () => AstalBluetooth.get_default().adapter.set_powered(false),
     onClickMore: () => togglePage(BluetoothPage),
+    enableOnClickMore: true,
     icon: Variable.derive([
             bind(AstalBluetooth.get_default().adapter, "powered"),
             bind(AstalBluetooth.get_default(), "isConnected")
diff --git a/ags/widget/control-center/tiles/Recording.ts b/ags/widget/control-center/tiles/Recording.ts
index 19a84e5..42f745e 100644
--- a/ags/widget/control-center/tiles/Recording.ts
+++ b/ags/widget/control-center/tiles/Recording.ts
@@ -1,18 +1,32 @@
 import { Tile, TileProps } from "./Tile";
 import { Recording } from "../../../scripts/recording";
-import { bind } from "astal";
+import { bind, Variable } from "astal";
 import { tr } from "../../../i18n/intl";
+import { getDateTime } from "../../../scripts/time";
 
 export const TileRecording = Tile({
     title: tr("control_center.tiles.recording.title") || "Screen Recording",
-    description: bind(Recording.getDefault(), "recording").as(
-        (isRecording: boolean) => isRecording ? 
-            "Recording {time}" 
-        : tr("control_center.tiles.recording.disabled_desc") || "Start recording"
-    ),
+    description: Variable.derive([
+        bind(Recording.getDefault(), "recording"),
+        getDateTime()
+    ], (recording, dateTime) => {
+        if(!recording || !Recording.getDefault().startedAt) 
+            return tr("control_center.tiles.recording.disabled_desc") || "Start recording";
+
+        const startedAtSeconds = dateTime.to_unix() - Recording.getDefault().startedAt!.to_unix();
+        if(startedAtSeconds <= 0) return "00:00";
+
+        const hours = Math.floor(startedAtSeconds / 120);
+        const minutes = Math.floor(startedAtSeconds / 60);
+        const seconds = Math.floor(startedAtSeconds % 60);
+
+        return `${ hours > 0 ? `${hours < 10 ? `0${hours}` : hours }:` : ""
+            }${ minutes < 10 ? `0${minutes}` : minutes 
+            }:${ seconds < 10 ? `0${seconds}` : seconds }`;
+    })(),
     icon: "󰻂",
     onToggledOff: () => Recording.getDefault().stopRecording(),
     onToggledOn: () => Recording.getDefault().startRecording(),
-    iconSize: 16,
     toggleState: bind(Recording.getDefault(), "recording"),
+    iconSize: 16
 } as TileProps);
diff --git a/ags/widget/control-center/tiles/Tile.ts b/ags/widget/control-center/tiles/Tile.ts
index 8ad3bae..f36d334 100644
--- a/ags/widget/control-center/tiles/Tile.ts
+++ b/ags/widget/control-center/tiles/Tile.ts
@@ -10,6 +10,7 @@ export type TileProps = {
     title: string | Binding<string | undefined>;
     description?: string | Binding<string | undefined>;
     toggleState?: boolean | Binding<boolean | undefined>;
+    enableOnClickMore: boolean | Binding<boolean | undefined>;
     onToggledOn: () => void;
     onToggledOff: () => void;
     onClickMore?: () => void;
@@ -97,7 +98,13 @@ export function Tile(props: TileProps): (() => Widget.EventBox) {
                         icon: "go-next-symbolic",
                         css: "icon { font-size: 16px; }"
                     }),
-                    onClick: () => props.onClickMore && props?.onClickMore(),
+                    onClick: () => {
+                        ((props.enableOnClickMore instanceof Binding) ? 
+                            props.enableOnClickMore.get()
+                        : props.enableOnClickMore) && props?.onToggledOn();
+
+                        props.onClickMore && props?.onClickMore()
+                    },
                     widthRequest: 32
                 })
             ]