audio component and gated

ui/frontend/build_src/src/api/index.ts

@@ -6,7 +6,7 @@ import type { ImageRequest } from "../store/imageCreateStore";
 
 // when we are on dev we want to specifiy 9000 as the port for the backend
 // when we are on prod we want be realtive to the current url
-const API_URL = import.meta.env.DEV ? "http://localhost:9000" : "";
+export const API_URL = import.meta.env.DEV ? "http://localhost:9000" : "";
 
 export const HEALTH_PING_INTERVAL = 5000; // 5 seconds
 export const healthPing = async () => {

ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx

@@ -1,11 +1,25 @@
 import React from "react";
 
+import { useRef } from "react";
+import { API_URL } from "../../../api";
 
-export default function AudioDing() {
+const url = `${API_URL}/ding.mp3`;
 
-  return (
+const AudioDing = React.forwardRef((props, ref) => (
-      <audio controls>
+  <audio ref={ref} style={{display:'none'}}>
-        <source src="/ding.mp3" type="audio/mp3"/>
+    <source src={url} type="audio/mp3"/>
   </audio>
-  );
+));
-}
+
+export default AudioDing;
+  
+//   {
+//   const url = `${API_URL}/ding.mp3`;
+//   const audioRef = useRef<HTMLAudioElement>(null);
+
+//   return (
+//       <audio ref={audioRef} style={{display:'none'}}>
+//         <source src={url} type="audio/mp3"/>
+//       </audio>
+//   );
+// }

ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx

@@ -8,7 +8,7 @@ import GeneratedImage from "../generatedImage";
 
 // TODO move this logic to the display panel
 export default function CurrentImage() {
-  const [imageData, setImageData] = useState(null);
+  // const [imageData, setImageData] = useState(null);
   // @ts-ignore
   const { id, options } = useImageQueue((state) => state.firstInQueue());
 

ui/frontend/build_src/src/components/displayPanel/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useImageQueue } from "../../store/imageQueueStore";
 
-import { ImageRequest } from "../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../store/imageCreateStore";
 
-import { useQueryClient } from "@tanstack/react-query";
+import {useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { MakeImageKey } from "../../api";
+import {doMakeImage, MakeImageKey } from "../../api";
 
 import CurrentImage from "./currentImage";
 import AudioDing from "./audioDing";
@@ -18,6 +18,38 @@ type CompletedImagesType = {
   info: ImageRequest;
 };
 export default function DisplayPanel() {
+
+  const dingRef = useRef<HTMLAudioElement>(null);
+  const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
+
+  /* FETCHING  */
+  // @ts-ignore
+  const { id, options } = useImageQueue((state) => state.firstInQueue());
+  const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
+  const { status, data } = useQuery(
+    [MakeImageKey, id],
+    () => doMakeImage(options),
+    {
+      enabled: void 0 !== id,
+    }
+  );
+
+  useEffect(() => {
+    // query is done
+    if (status === "success") {
+      // check to make sure that the image was created
+      if (data.status === "succeeded") {
+        if(isSoundEnabled) {
+          dingRef.current?.play();
+        }
+        removeFirstInQueue();
+      }
+    }
+  }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled]);
+
+
+  /* COMPLETED IMAGES */
+
   const queryClient = useQueryClient();
   const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>(
     []
@@ -62,8 +94,8 @@ export default function DisplayPanel() {
     <div className="display-panel">
       <h1>Display Panel</h1>
       <div>
-        <AudioDing></AudioDing>
+        <AudioDing ref={dingRef}></AudioDing>
-        <CurrentImage />
+        {/* <CurrentImage /> */}
         {completedImages.map((image, index) => {
           // if(index == 0){
           //   return null;

ui/frontend/build_src/src/store/imageCreateStore.ts

@@ -115,7 +115,7 @@ export const useImageCreate = create<ImageCreateState>(
       save_to_disk_path: "null",
       use_face_correction: 'GFPGANv1.3',
       use_upscale: "RealESRGAN_x4plus",
-      show_only_filtered_image: false,
+      show_only_filtered_image: true,
     } as ImageRequest,
 
     tags: [] as string[],