From f668578b4d47c968c7c0acd9654c01fb41f181bc Mon Sep 17 00:00:00 2001
From: Pierre Aumond <pierre.aumond@univ-eiffel.fr>
Date: Mon, 22 Apr 2024 15:59:32 +0200
Subject: [PATCH] remove sound if no feature

---
 .../project/map/FeatureDataPanel.tsx          |  4 +
 .../src/components/project/map/Selected.tsx   | 25 ++++---
 .../components/project/map/SoundFeature.tsx   | 73 ++++++++++++++-----
 3 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/project/map/FeatureDataPanel.tsx b/packages/client/src/components/project/map/FeatureDataPanel.tsx
index 19babb70..5e6fb560 100644
--- a/packages/client/src/components/project/map/FeatureDataPanel.tsx
+++ b/packages/client/src/components/project/map/FeatureDataPanel.tsx
@@ -6,6 +6,7 @@ import { FeatureDataTimeline } from "./FeatureDataTimeline";
 import { EmotionFeatureScatterPlot } from "./EmotionFeatureScatterPlot";
 import { AcousticFeatureCircles } from "./AcousticFeatureCircles";
 import { useCurrentProject } from "../../../hooks/useCurrentProject";
+import { SoundFeature } from "./SoundFeature";
 
 export const FeatureDataPanel: FC<{
   mapId: string;
@@ -19,10 +20,13 @@ export const FeatureDataPanel: FC<{
   const mapVariable = project.maps[mapId].lassoVariable;
 
   return (
+    
     <div className="map-point-data">
+      <SoundFeature feature={feature} mapId={mapId} currentTimeKey={project.maps[mapId].timeKey} />
       <button className="btn-close" onClick={() => onClose()}></button>
 
       <div className="map-point-data-content">
+        
         <AcousticFeatureCircles feature={feature} currentTimeKey={project.maps[mapId].timeKey} />
 
         {/* Display emotion plot only if variables are available in the project */}
diff --git a/packages/client/src/components/project/map/Selected.tsx b/packages/client/src/components/project/map/Selected.tsx
index c1cd73a5..7df41523 100644
--- a/packages/client/src/components/project/map/Selected.tsx
+++ b/packages/client/src/components/project/map/Selected.tsx
@@ -8,7 +8,7 @@ import { config } from "../../../config";
 import { getI18NText } from "../../../utils/i18n";
 import { useCurrentProject } from "../../../hooks/useCurrentProject";
 import { FeatureDataPanel } from "./FeatureDataPanel";
-import { SoundFeature } from "./SoundFeature";
+
 
 export const Selected: FC<{ mapId: "left" | "right" }> = ({ mapId }) => {
   const locale = useLocale();
@@ -41,7 +41,7 @@ export const Selected: FC<{ mapId: "left" | "right" }> = ({ mapId }) => {
     <>
       {selected && (
         <>
-          <SoundFeature feature={selected.feature} mapId={mapId} />
+          
           <FeatureDataPanel
             mapId={mapId}
             feature={selected.feature}
@@ -58,6 +58,16 @@ export const Selected: FC<{ mapId: "left" | "right" }> = ({ mapId }) => {
               maxWidth={"50%"}
             >
               <div className="d-flex flex-column">
+                <div>
+                  <img
+                    className="img-fluid"
+                    src={`${config.data_path}/${project.data.id}/assets/${images[imageIndex].path}`}
+                    alt={getI18NText(locale, images[imageIndex].description)}
+                  />
+                  {images[imageIndex].description && (
+                    <p className="text-center mb-0">{getI18NText(locale, images[imageIndex].description)}</p>
+                  )}
+                </div>
                 {images.length > 1 && (
                   <div className="d-flex justify-content-center mb-3">
                     <button
@@ -86,16 +96,7 @@ export const Selected: FC<{ mapId: "left" | "right" }> = ({ mapId }) => {
                     </button>
                   </div>
                 )}
-                <div>
-                  <img
-                    className="img-fluid"
-                    src={`${config.data_path}/${project.data.id}/assets/${images[imageIndex].path}`}
-                    alt={getI18NText(locale, images[imageIndex].description)}
-                  />
-                  {images[imageIndex].description && (
-                    <p className="text-center mb-0">{getI18NText(locale, images[imageIndex].description)}</p>
-                  )}
-                </div>
+                
               </div>
             </Popup>
           )}
diff --git a/packages/client/src/components/project/map/SoundFeature.tsx b/packages/client/src/components/project/map/SoundFeature.tsx
index 5827885b..5d0f30ee 100644
--- a/packages/client/src/components/project/map/SoundFeature.tsx
+++ b/packages/client/src/components/project/map/SoundFeature.tsx
@@ -4,30 +4,67 @@ import { Feature } from "geojson";
 
 import { useCurrentProject } from "../../../hooks/useCurrentProject";
 
-export const SoundFeature: FC<{ feature?: Feature; mapId: string }> = ({ mapId, feature }) => {
+export const SoundFeature: FC<{ feature?: Feature; mapId: string; currentTimeKey?: string | null }> = ({ 
+  mapId, 
+  feature, 
+  currentTimeKey }) => {
   const { project } = useCurrentProject();
   const timeKey = useMemo(() => project.maps[mapId].timeKey, [project, mapId]);
   const muted = useMemo(() => project.maps[mapId].muted, [project.maps, mapId]);
+  //const previousHowler = useRef<Howl | null>(null);
 
   useEffect(() => {
     // handle sound
     let howler: Howl | null = null;
-    if (!muted && feature && feature.properties) {
-      const properties = timeKey && feature.properties[timeKey] ? feature.properties[timeKey] : feature.properties;
-      const noiseVariable = project.lassoVariables[`acoustic_soundlevel`];
-
-      if (properties.sound) {
-        const volume = feature.properties.acoustic_soundlevel
-          ? feature.properties.acoustic_soundlevel / noiseVariable.maximumValue
-          : 1;
-        howler = new Howl({
-          src: [feature.properties.sound],
-          autoplay: true,
-          loop: true,
-          html5: true,
-          format: ["mp3"],
-          volume,
-        });
+
+    if (!muted && feature && feature.properties ) {
+
+
+      // if time is specified, we try to get it
+      if (currentTimeKey ) {
+
+       const properties = currentTimeKey && feature.properties[currentTimeKey] ? feature.properties[currentTimeKey] : feature.properties;
+       const noiseVariable = project.lassoVariables[`acoustic_soundlevel`];
+       if (properties.sound && feature.properties[currentTimeKey]) {
+          
+          const volume = feature.properties[currentTimeKey].acoustic_soundlevel
+            ? feature.properties[currentTimeKey].acoustic_soundlevel / noiseVariable.maximumValue
+            : 1;
+            
+          howler = new Howl({
+            src: [feature.properties[currentTimeKey].sound],
+            autoplay: true,
+            loop: true,
+            html5: true,
+            format: ["mp3"],
+            volume,
+          });
+        }else{
+
+        }
+      } else {
+        if (timeKey ) {
+
+        }else{
+
+       const properties = timeKey && feature.properties[timeKey] ? feature.properties[timeKey] : feature.properties;
+        const noiseVariable = project.lassoVariables[`acoustic_soundlevel`];
+
+        if (properties.sound) {
+          
+          const volume = feature.properties.acoustic_soundlevel
+            ? feature.properties.acoustic_soundlevel / noiseVariable.maximumValue
+            : 1;
+          howler = new Howl({
+            src: [feature.properties.sound],
+            autoplay: true,
+            loop: true,
+            html5: true,
+            format: ["mp3"],
+            volume,
+          });
+        }
+      }
       }
     }
 
@@ -39,7 +76,7 @@ export const SoundFeature: FC<{ feature?: Feature; mapId: string }> = ({ mapId,
         }, 200);
       }
     };
-  }, [feature, timeKey, project.lassoVariables, muted]);
+  }, [feature, currentTimeKey, project.lassoVariables, muted]);
 
   return null;
 };