Sound alerts (#78)

* Sound alerts

* add more sounds

app/web/package.json

@@ -38,6 +38,7 @@
     "styled-components": "5.3.5",
     "typescript": "4.6.3",
     "use-query-params": "1.2.3",
+    "use-sound": "^4.0.1",
     "webpack": "5.70.0"
   },
   "keywords": [
@@ -77,7 +78,7 @@
     "gulp-less": "5.0.0",
     "gulp-postcss": "9.0.1",
     "less-plugin-npm-import": "2.1.0",
-    "prettier": "2.6.1",
-    "md5": "2.3.0"
+    "md5": "2.3.0",
+    "prettier": "2.6.1"
   }
 }

app/web/src/containers/layout/Header.tsx

@@ -30,6 +30,7 @@ import { useAuth } from "../../context/AuthProvider";
 import { useApplication } from "../../context/ApplicationProvider";
 import env from "../../utils/vars";
 import { useThemeSwitcher } from "react-css-theme-switcher";
+import useSound from "use-sound";
 
 const { SubMenu } = Menu;
 const tabs = [
@@ -56,6 +57,15 @@ const Header = () => {
 
   const { switcher, currentTheme, themes } = useThemeSwitcher();
 
+  const [playOn] = useSound(
+      '/sounds/switch-on.mp3',
+      { volume: 0.50 }
+  );
+  const [playOff] = useSound(
+      '/sounds/switch-off.mp3',
+      { volume: 0.50 }
+  );
+
   function handleAppSelect(e) {
     selectApplication(e.key);
   }
@@ -105,7 +115,14 @@ const Header = () => {
   const toggleTheme = (isChecked) => {
     if (isChecked) localStorage.setItem("theme", "dark");
     else localStorage.setItem("theme", "light");
-    switcher({ theme: isChecked ? themes.dark : themes.light });
+    if (isChecked) {
+      switcher({ theme: themes.dark });
+      playOff()
+    }
+    else {
+      switcher({ theme: themes.light });
+      playOn()
+    }
   };
 
   return (

app/web/src/pages/queues.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
+import useSound from 'use-sound';
 import {Card, Col, Row, Empty, Table, Button, Alert, Radio, Tooltip, Space, message, Typography, Modal} from "antd";
 import {
   SyncOutlined,
@@ -44,6 +45,19 @@ const QueuesPage = () => {
   const [hidePIDBoxes, setHidePIDBoxes] = useState<boolean>(true);
   const [live, setLive] = useState<boolean>(true);
 
+  const [playActive] = useSound(
+      '/sounds/pop-down.mp3',
+      { volume: 0.35 }
+  );
+  const [playOn] = useSound(
+      '/sounds/pop-up-on.mp3',
+      { volume: 0.35 }
+  );
+  const [playOff] = useSound(
+      '/sounds/pop-up-off.mp3',
+      { volume: 0.35 }
+  );
+
   function filterIndexQueues() {
     if (!currentApp) return;
     setLoading(true);
@@ -244,8 +258,11 @@ const QueuesPage = () => {
                           onClick={() => {setHidePIDBoxes(!hidePIDBoxes)}}
                           icon={hidePIDBoxes ? <EyeInvisibleOutlined style={{color: '#333'}} /> : <EyeOutlined style={{color: "#33ccb8"}}/>}
                           type={hidePIDBoxes ? "primary" : "secondary"}
-                          danger={hidePIDBoxes}
                           style={hidePIDBoxes ? {background: "gold", borderColor: "gold"} : {}}
+                          onMouseDown={playActive}
+                          onMouseUp={() => {
+                            hidePIDBoxes ? playOff() : playOn();
+                          }}
                       />
                     </Tooltip>
                   }
@@ -269,6 +286,10 @@ const QueuesPage = () => {
                         icon={live ? <PauseOutlined style={{color: '#fff'}} /> : <CaretRightOutlined style={{color: "#33ccb8"}}/>}
                         type={live ? "primary" : "secondary"}
                         danger={live}
+                        onMouseDown={playActive}
+                        onMouseUp={() => {
+                          live ? playOff() : playOn();
+                        }}
                     />
                   </Tooltip>
                   <Button

app/web/src/pages/tasks.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Helmet } from "react-helmet-async";
+import useSound from 'use-sound';
 import {
   Row,
   Col,
@@ -12,14 +13,19 @@ import {
   Space,
   Typography,
   Modal,
-  List,
+  List, Tooltip,
 } from "antd";
 import {
   SyncOutlined,
   CaretUpOutlined,
   CaretDownOutlined,
   CheckCircleOutlined,
-  ExclamationCircleOutlined, PauseOutlined, CaretRightOutlined, LoadingOutlined,
+  ExclamationCircleOutlined,
+  PauseOutlined,
+  CaretRightOutlined,
+  LoadingOutlined,
+  SoundOutlined,
+  NotificationOutlined
 } from "@ant-design/icons";
 
 import TaskDataColumns from "../components/data/TaskData";
@@ -62,6 +68,7 @@ const TasksPage: React.FC = () => {
   });
   const [order, setOrder] = useState<string>("desc");
   const [live, setLive] = useState<boolean>(false);
+  const [alarm, setAlarm] = useState<boolean>(false);
 
   // Data
   const columns = TaskDataColumns();
@@ -73,6 +80,25 @@ const TasksPage: React.FC = () => {
   const [tasksRetrying, setTasksRetrying] = useState<boolean>();
   const [tasksExporting, setTasksExporting] = useState<boolean>();
   const [tasks, setTasks] = useState<any[]>([]);
+  const prevTasksRef = useRef<any[]>([]);
+
+  // Sounds
+  const [playActive] = useSound(
+      '/sounds/pop-down.mp3',
+      { volume: 0.35 }
+  );
+  const [playOn] = useSound(
+      '/sounds/pop-up-on.mp3',
+      { volume: 0.35 }
+  );
+  const [playOff] = useSound(
+      '/sounds/pop-up-off.mp3',
+      { volume: 0.35 }
+  );
+  const [playAlarm] = useSound(
+      '/sounds/fanfare.mp3',
+      { volume: 0.35 }
+  );
 
   // API Calls
   function filterTasks(pager = { current: 1, pageSize: 20 }) {
@@ -103,6 +129,25 @@ const TasksPage: React.FC = () => {
   }
 
   // Hooks
+  useEffect(() => {
+    /**
+     * Play alarm only if:
+     * 1: live mode is on
+     * 2: alarm mode is on
+     * 3: there was 0 tasks during previous lookup
+     * 4: there is one or more tasks during current fetch
+     */
+    if (live && alarm && prevTasksRef.current.length == 0 && tasks.length > 0) {
+      playAlarm()
+    }
+    prevTasksRef.current = tasks;
+
+    // Failsafe, disable alarm when tasks are discovered.
+    if (tasks.length > 0) {
+      setAlarm(false)
+    }
+  }, [tasks]);
+
   useEffect(() => {
     // Stop refreshing queues
     if (timeout) clearInterval(timeout);
@@ -358,21 +403,40 @@ const TasksPage: React.FC = () => {
                       }
                       {tasks.length > 0 &&
                         <Button
-                            ghost
-                            type="default"
+                            type="secondary"
                             size="small"
                             onClick={exportByQuery}
                             loading={tasksExporting}
                         >
                           Export Filtered
                         </Button>
                       }
+                      <Tooltip
+                          title={"Play sound alert when one or more tasks found, only applicable when live mode is on and table is empty."}
+                      >
+                        <Button
+                            size="small"
+                            onClick={() => {setAlarm(!alarm)}}
+                            icon={alarm ? <SoundOutlined style={{color: '#333'}} /> : <NotificationOutlined/>}
+                            type={alarm ? "primary" : "secondary"}
+                            style={alarm ? {background: "gold", borderColor: "gold"} : {}}
+                            onMouseDown={playActive}
+                            onMouseUp={() => {
+                              alarm ? playOff() : playOn();
+                            }}
+                            disabled={!live || tasks.length>0}
+                        />
+                      </Tooltip>
                       <Button
                           size="small"
                           onClick={() => {setLive(!live)}}
                           icon={live ? <PauseOutlined style={{color: '#fff'}} /> : <CaretRightOutlined style={{color: "#33ccb8"}}/>}
                           type={live ? "primary" : "secondary"}
                           danger={live}
+                          onMouseDown={playActive}
+                          onMouseUp={() => {
+                            live ? playOff() : playOn();
+                          }}
                       />
                       <Button
                         size="small"

app/web/yarn.lock

@@ -7759,6 +7759,11 @@ hosted-git-info@^3.0.8:
   dependencies:
     lru-cache "^6.0.0"
 
+howler@^2.1.3:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1"
+  integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==
+
 html-entities@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
@@ -13206,6 +13211,13 @@ [email protected]:
   dependencies:
     serialize-query-params "^1.3.5"
 
+use-sound@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-4.0.1.tgz#8c8de4badd16902db7762fd9418a4283b9bf7b3e"
+  integrity sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==
+  dependencies:
+    howler "^2.1.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"