✨ ags(control-center/tiles): finally add screen recording tile!!

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")

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);

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
                 })
             ]