From a2edd40282204f8be9ac93023fde91c7267f325a Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Thu, 24 Aug 2023 06:55:35 +0300
Subject: [PATCH] Add support for audio icons in MultiSelect component

---
 web/src/components/MultiSelect.jsx |  7 +++++--
 web/src/icons/Audio.jsx            | 20 +++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 1ff30a231..c4ef22082 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -5,6 +5,8 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
 import CameraIcon from '../icons/Camera';
+import { AudioIcon } from '../icons/Audio';
+import useSWR from 'swr';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
   const popupRef = useRef(null);
@@ -18,7 +20,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
   };
 
   const menuHeight = Math.round(window.innerHeight * 0.55);
-
+  const { data: config } = useSWR('config');
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@@ -59,7 +61,8 @@ export default function MultiSelect({ className, title, options, selection, onTo
                   className="max-h-[35px] mx-2"
                   onClick={() => onSelectSingle(item)}
                 >
-                  <CameraIcon />
+                  { (title === "Labels" && config.audio.listen.includes(item)) ? ( <AudioIcon /> ) : ( <CameraIcon /> ) }
+                  
                 </Button>
               </div>
             </div>
diff --git a/web/src/icons/Audio.jsx b/web/src/icons/Audio.jsx
index cec783854..ff0d7fbbf 100644
--- a/web/src/icons/Audio.jsx
+++ b/web/src/icons/Audio.jsx
@@ -32,5 +32,23 @@ export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onCli
     </svg>
   );
 }
-
+export function AudioIcon({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M11 5L6 9H2v6h4l5 4V5zM19 9a2 2 0 01-2-2a2 2 0 012-2a2 2 0 012 2a2 2 0 01-2 2zm0 4a4 4 0 01-4-4a4 4 0 014-4a4 4 0 014 4a4 4 0 01-4 4zm0 4a6 6 0 01-6-6a6 6 0 016-6a6 6 0 016 6a6 6 0 01-6 6z"
+      />
+    </svg>
+  );
+}
 export default memo(Snapshot);