Implemented screen recording functionality for record button in dashboard.

modules/bar/index.js

@@ -9,7 +9,6 @@ import { Bluetooth } from "./bluetooth/index.js";
 import { BatteryLabel } from "./battery/index.js";
 import { Clock } from "./clock/index.js"; 
 import { SysTray } from "./systray/index.js";
-import { Power } from "./power/index.js";
 
 import { BarItemBox } from "../shared/barItemBox.js";
 
@@ -52,9 +51,8 @@ const Right = () => {
       BarItemBox(Bluetooth()),
       BarItemBox(BatteryLabel()),
       BarItemBox(SysTray()),
-      BarItemBox(Notifications()),
       BarItemBox(Clock()),
-      BarItemBox(Power()),
+      BarItemBox(Notifications()),
     ],
   });
 };
@@ -86,7 +84,6 @@ const RightAlt = () => {
     children: [
       BarItemBox(Volume()),
       BarItemBox(Clock()),
-      BarItemBox(Power()),
     ],
   });
 };

modules/menus/dashboard/shortcuts/index.js

@@ -1,10 +1,30 @@
+const hyprland = await Service.import("hyprland");
+
 const Shortcuts = () => {
-  const handleClick = (action) => {
+  const isRecording = Variable(false, {
+    poll: [
+      1000,
+      `${App.configDir}/services/screen_record.sh status`,
+      (out) => {
+        if (out === "recording") {
+          return true;
+        }
+        return false;
+      },
+    ],
+  });
+  const handleClick = (action, resolver) => {
     App.closeWindow("dashboardmenu");
     Utils.execAsync(action)
-    .then(res => res)
-    .catch(err => err);
+      .then((res) => {
+        if (typeof resolver === "function") {
+          return resolver(res);
         }
+
+        return res;
+      })
+      .catch((err) => err);
+  };
   return Widget.Box({
     class_name: "shortcuts-container",
     hpack: "fill",
@@ -72,7 +92,7 @@ const Shortcuts = () => {
             children: [
               Widget.Button({
                 class_name: "dashboard-button colorpicker top-button",
-                on_primary_click: () => handleClick("hyprpicker"),
+                on_primary_click: () => handleClick("hyprpicker -a"),
                 child: Widget.Label({
                   class_name: "button-label",
                   label: "",
@@ -80,7 +100,10 @@ const Shortcuts = () => {
               }),
               Widget.Button({
                 class_name: "dashboard-button settings",
-                on_primary_click: () => handleClick('bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"'),
+                on_primary_click: () =>
+                  handleClick(
+                    'bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"',
+                  ),
                 child: Widget.Label({
                   class_name: "button-label",
                   label: "󰒓",
@@ -94,15 +117,32 @@ const Shortcuts = () => {
             children: [
               Widget.Button({
                 class_name: "dashboard-button snapshot top-button",
-                on_primary_click: () => handleClick("grimblast --notify copysave area"),
+                on_primary_click: () =>
+                  handleClick("grimblast --notify copysave area"),
                 child: Widget.Label({
                   class_name: "button-label",
                   label: "󰄀",
                 }),
               }),
               Widget.Button({
-                class_name: "dashboard-button record",
-                on_primary_click: () => handleClick("rofi -show drun"),
+                class_name: isRecording
+                  .bind("value")
+                  .as((v) => `dashboard-button record ${v ? "active" : ""}`),
+                setup: (self) => {
+                  self.hook(isRecording, () => {
+                    self.on_primary_click = () => {
+                      App.closeWindow("dashboardmenu");
+                      if (isRecording.value === true) {
+                        return Utils.execAsync(
+                          `${App.configDir}/services/screen_record.sh stop`,
+                        ).catch((err) => console.error(err));
+                      }
+                      return Utils.execAsync(
+                        `${App.configDir}/services/screen_record.sh start ${hyprland.active.monitor.name}`,
+                      ).catch((err) => console.error(err));
+                    };
+                  });
+                },
                 child: Widget.Label({
                   class_name: "button-label",
                   label: "󰑊",

modules/menus/notifications/index.js

@@ -123,7 +123,13 @@ export default () => {
                               hexpand: true,
                               class_name: "notification-action-buttons menu",
                               on_primary_click: () => {
+                                if (action.id.includes("scriptAction:-")) {
+                                  Utils.execAsync(
+                                    `${action.id.replace("scriptAction:-", "")}`,
+                                  ).catch((err) => console.error(err));
+                                } else {
                                   notif.invoke(action.id);
+                                }
                               },
                               child: Widget.Box({
                                 hpack: "center",

modules/notifications/index.js

@@ -57,7 +57,13 @@ export default () => {
                       hexpand: true,
                       class_name: "notification-action-buttons",
                       on_primary_click: () => {
+                        if (action.id.includes("scriptAction:-")) {
+                          Utils.execAsync(
+                            `${action.id.replace("scriptAction:-", "")}`,
+                          ).catch((err) => console.error(err));
+                        } else {
                           notif.invoke(action.id);
+                        }
                       },
                       child: Widget.Box({
                         hpack: "center",

scss/bar/bar.scss

@@ -7,7 +7,6 @@
 .bar_item_box_visible {
   background-color: $base2;
   border-radius: 0.35em;
-  // border: 0.15em solid $surface0;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
 

scss/menus/dashboard.scss

@@ -100,6 +100,10 @@
 
                 &.record.active {
                     background: $red;
+
+                    &:hover {
+                        background: $green;
+                    }
                 }
 
                 &:hover {
@@ -196,7 +200,7 @@
                 }
 
                 trough {
-                    min-height: 1.2em;
+                    min-height: 1.05em;
                 }
 
                 block {

services/screen_record.sh

@@ -1,9 +1,9 @@
 #!/bin/bash
 
-outputDir="$HOME/Videos"
+outputDir="$HOME/Videos/Screencasts"
 
 checkRecording() {
-    if pgrep -x "gpu-screen-recorder" > /dev/null; then
+    if pgrep -f "gpu-screen-recorder" > /dev/null; then
         return 0
     else
         return 1
@@ -16,38 +16,18 @@ startRecording() {
         exit 1
     fi
 
-    if [ -z "$2" ]; then
-        echo "Usage: $0 start {screen|window} [screen_name|window_id]"
-        exit 1
-    fi
+    target="$2"
 
-    mode="$2"
-    target="$3"
-
-    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S).mp4"
+    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S).mkv"
     outputPath="$outputDir/$outputFile"
     mkdir -p "$outputDir"
 
-    case "$mode" in
-        screen)
     if [ -z "$target" ]; then
         echo "Usage: $0 start screen [screen_name]"
         exit 1
     fi
+
     gpu-screen-recorder -w "$target" -f 60 -a "$(pactl get-default-sink).monitor" -o "$outputPath" &
-            ;;
-        window)
-            if [ -z "$target" ]; then
-                echo "Usage: $0 start window [window_id]"
-                exit 1
-            fi
-            gpu-screen-recorder -w "$target" -f 60 -a "$(pactl get-default-sink).monitor" -o "$outputPath" &
-            ;;
-        *)
-            echo "Invalid mode. Use 'screen' or 'window'."
-            exit 1
-            ;;
-    esac
 
     echo "Recording started. Output will be saved to $outputPath"
 }
@@ -58,16 +38,15 @@ stopRecording() {
         exit 1
     fi
 
-    pkill -SIGINT gpu-screen-recorder
-    recentFile=$(ls -t "$outputDir"/recording_*.mp4 | head -n 1)
+    pkill -f gpu-screen-recorder
+    recentFile=$(ls -t "$outputDir"/recording_*.mkv | head -n 1)
     notify-send "Recording stopped" "Your recording has been saved." \
         -i video-x-generic \
         -a "Screen Recorder" \
         -t 10000 \
         -u normal \
-        --action="open_directory=xdg-open $outputDir" \
-        --action="play_recording=xdg-open $recentFile"
-    echo "Recording stopped. Output saved to $recentFile"
+        --action="scriptAction:-dolphin $outputDir=Directory" \
+        --action="scriptAction:-xdg-open $recentFile=Play"
         }
 
         case "$1" in
@@ -79,13 +58,13 @@ case "$1" in
                 ;;
             status)
                 if checkRecording; then
-            echo "A recording is in progress."
+                    echo "recording"
                 else
-            echo "No recording is in progress."
+                    echo "not recording"
                 fi
                 ;;
             *)
-        echo "Usage: $0 {start {screen|window} [screen_name|window_id]|stop|status}"
+                echo "Usage: $0 {start [screen_name|window_id]|stop|status}"
                 exit 1
                 ;;
         esac

style.css

@@ -1397,6 +1397,9 @@ window#powermenu .powermenu.box {
 .dashboard-content-items .shortcuts-container .container button.record.active {
   background: #f38ba8;
 }
+.dashboard-content-items .shortcuts-container .container button.record.active:hover {
+  background: #a6e3a1;
+}
 .dashboard-content-items .shortcuts-container .container button:hover {
   background: #f5c2e7;
 }
@@ -1474,7 +1477,7 @@ window#powermenu .powermenu.box {
   transition: 200ms;
 }
 .dashboard-content-items .stats-container .stat .stats-bar trough {
-  min-height: 1.2em;
+  min-height: 1.05em;
 }
 .dashboard-content-items .stats-container .stat .stats-bar block {
   border-radius: 0.4em;