Added track controls

frontend/react/src/ui/modals/components/card.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faCheckCircle, faExternalLink, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 export function Card(props: { children?: JSX.Element | JSX.Element[]; className?: string }) {
   return (

frontend/react/src/ui/panels/components/audiosourcepanel.tsx

@@ -1,14 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { OlStateButton } from "../../components/olstatebutton";
-import { faPlay, faRepeat } from "@fortawesome/free-solid-svg-icons";
+import { faPause, faPlay, faRepeat, faStop } from "@fortawesome/free-solid-svg-icons";
 import { getApp } from "../../../olympusapp";
 import { AudioSource } from "../../../audio/audiosource";
 import { FaTrash, FaVolumeHigh } from "react-icons/fa6";
 import { OlRangeSlider } from "../../components/olrangeslider";
 import { FaUnlink } from "react-icons/fa";
 import { OlDropdown, OlDropdownItem } from "../../components/oldropdown";
+import { FileSource } from "../../../audio/filesource";
 
 export function AudioSourcePanel(props: { source: AudioSource }) {
+  const [meterLevel, setMeterLevel] = useState(0);
+
+  useEffect(() => {
+    setInterval(() => {
+      // TODO apply to all sources
+      if (props.source instanceof FileSource) {
+        setMeterLevel(props.source.getMeter().getPeaks().current[0]);
+      }
+    }, 50);
+  }, []);
+
   return (
     <div
       className={`
@@ -17,26 +29,61 @@ export function AudioSourcePanel(props: { source: AudioSource }) {
       `}
     >
       <span>{props.source.getName()}</span>
-      {props.source.getName() != "Microphone" && (
-        <div className="flex gap-4 py-2">
-          <OlStateButton
-            checked={false}
-            icon={faPlay}
-            onClick={() => {
-              props.source.play();
-            }}
-            tooltip="Play file"
-          ></OlStateButton>
-          <OlRangeSlider
-            value={50}
-            onChange={(ev) => {
-              //let setting = props.setting;
-              //setting.volume = parseFloat(ev.currentTarget.value) / 100;
-              //props.updateSetting(setting);
-            }}
-            className="my-auto"
-          />
-          <OlStateButton checked={false} icon={faRepeat} onClick={() => {}} tooltip="Loop"></OlStateButton>
+      {props.source instanceof FileSource && (
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-4">
+            <OlStateButton
+              checked={false}
+              icon={props.source.getPlaying() ? faPause : faPlay}
+              onClick={() => {
+                if (props.source instanceof FileSource) props.source.getPlaying() ? props.source.stop() : props.source.play();
+              }}
+              tooltip="Play file"
+            ></OlStateButton>
+            <OlRangeSlider
+              value={(props.source.getCurrentPosition() / props.source.getDuration()) * 100}
+              onChange={(ev) => {
+                if (props.source instanceof FileSource) props.source.setCurrentPosition(parseFloat(ev.currentTarget.value));
+              }}
+              className="my-auto"
+            />
+            <OlStateButton
+              checked={props.source.getLooping()}
+              icon={faRepeat}
+              onClick={() => {
+                if (props.source instanceof FileSource) props.source.setLooping(!props.source.getLooping());
+              }}
+              tooltip="Loop"
+            ></OlStateButton>
+          </div>
+          <div className="flex gap-4">
+            <div className="h-[40px] min-w-[40px] p-2">
+              <FaVolumeHigh className="h-full w-full" />
+            </div>
+            <div className="relative flex w-full flex-col gap-3">
+              <div
+                className={`
+                  absolute top-[18px] flex h-2 min-w-full translate-y-[-5px]
+                  flex-row border-gray-500
+                `}
+              >
+                <div
+                  style={{ minWidth: `${meterLevel * 100}%` }}
+                  className={`rounded-full bg-gray-200`}
+                ></div>
+              </div>
+              <OlRangeSlider
+                value={props.source.getVolume() * 100}
+                onChange={(ev) => {
+                  if (props.source instanceof FileSource) props.source.setVolume(parseFloat(ev.currentTarget.value) / 100);
+                }}
+                className="absolute top-[18px]"
+              />
+            </div>
+            <div className="h-[40px] min-w-[40px] p-2">
+              <span>{Math.round(props.source.getVolume() * 100)}</span>
+            </div>
+          </div>
         </div>
       )}
       <span className="text-sm">Connected to:</span>
@@ -45,7 +92,7 @@ export function AudioSourcePanel(props: { source: AudioSource }) {
           return (
             <div className="flex justify-between text-sm">
               {sink.getName()}
-              <FaUnlink></FaUnlink>
+              <FaUnlink className="cursor-pointer" onClick={() => props.source.disconnect(sink)}></FaUnlink>
             </div>
           );
         })}
@@ -55,9 +102,15 @@ export function AudioSourcePanel(props: { source: AudioSource }) {
             .getSinks()
             .filter((sink) => !props.source.getConnectedTo().includes(sink))
             .map((sink) => {
-              return <OlDropdownItem onClick={() => {
-                props.source.connect(sink);
-              }}>{sink.getName()}</OlDropdownItem>;
+              return (
+                <OlDropdownItem
+                  onClick={() => {
+                    props.source.connect(sink);
+                  }}
+                >
+                  {sink.getName()}
+                </OlDropdownItem>
+              );
             })}
         </OlDropdown>
       </div>