add menu bar to audioviewer

src/components/shared/AudioViewer/MenuBar.tsx

@@ -0,0 +1,54 @@
+import SettingsIcon from '../../../icons/Settings';
+import Dropdown from '../../../components/ui/Dropdown';
+import Menu from '../../../components/ui/Menu';
+import { FunctionComponent } from 'react';
+import tw, { styled } from 'twin.macro';
+
+const Styles = styled.div`
+    ${tw`z-10 px-2 py-1 absolute top-0 right-0 items-start flex flex-row-reverse`}
+    button {
+        ${tw`text-gray-100
+        hover:text-gray-400
+        active:hover:text-gray-200
+        focus:text-gray-600
+    `}
+    }
+`;
+
+interface Props {
+    className?: string;
+    isLooping: boolean;
+    shouldAutostart: boolean;
+    onChangeLoop: (enabled: boolean) => void;
+    onChangeAutostart: (enabled: boolean) => void;
+}
+
+const MenuBar: FunctionComponent<Props> = ({
+    className,
+    isLooping,
+    shouldAutostart,
+    onChangeLoop,
+    onChangeAutostart,
+}) => {
+    const content = (
+        <Menu>
+            <Menu.Title>Player settings</Menu.Title>
+            <Menu.Switch value={isLooping} onChange={onChangeLoop}>
+                Loop
+            </Menu.Switch>
+            <Menu.Switch value={shouldAutostart} onChange={onChangeAutostart}>
+                Autoplay
+            </Menu.Switch>
+        </Menu>
+    );
+
+    return (
+        <Styles className={className}>
+            <Dropdown content={content}>
+                <SettingsIcon />
+            </Dropdown>
+        </Styles>
+    );
+};
+
+export default MenuBar;

src/components/shared/AudioViewer/index.tsx

@@ -15,6 +15,8 @@ import { notifyProblem } from '../../../notify';
 import WaveSurfer from 'wavesurfer.js';
 import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js';
 import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';
+import useSetting from '../../../lenses/useSetting';
+import MenuBar from './MenuBar';
 
 // Maximum zoom level for waveform
 const MAX_ZOOM = 2500;
@@ -169,6 +171,8 @@ const AudioViewer = ({
 
     const [isPlaying, setIsPlaying] = useState(false);
     const [isReady, setIsReady] = useState(false);
+    const [autoplay, setAutoplay] = useSetting('autoplay', false);
+    const [looping, setLooping] = useSetting('looping', false);
 
     const redrawWaveform = (height: number) => {
         waveform.current?.setHeight(height);
@@ -287,6 +291,14 @@ const AudioViewer = ({
             redrawWaveform(height);
 
             setIsReady(true);
+
+            if (!waveform.current) return;
+
+            if (autoplay) waveform.current.play();
+            // "media" does not exist @compiletime.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            waveform.current.backend.media.loop = looping;
         });
 
         // In case this widget was paused from the outside
@@ -315,6 +327,8 @@ const AudioViewer = ({
         onRegionClick,
         onRegionEnter,
         onRegionLeave,
+        autoplay,
+        looping,
     ]);
 
     useEffect(() => {
@@ -397,6 +411,23 @@ const AudioViewer = ({
         }
     };
 
+    const toggleRepeat = (enabled: boolean) => {
+        if (waveform.current?.isReady) {
+            if (!waveform.current) return;
+
+            setLooping(enabled);
+            waveform.current.backend.media.loop = enabled;
+        }
+    };
+
+    const toggleAutoPlay = (enabled: boolean) => {
+        if (waveform.current?.isReady) {
+            if (!waveform.current) return;
+            setAutoplay(enabled);
+            //waveform.current.backend.autoplay = true;//!waveform.current.autoplay;
+        }
+    };
+
     const fitToScreen = () => {
         if (!waveform.current?.isReady) return;
 
@@ -558,6 +589,12 @@ const AudioViewer = ({
             )}
             {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
             <audio ref={audioRef} src={url} />
+            <MenuBar
+                isLooping={looping}
+                shouldAutostart={autoplay}
+                onChangeLoop={toggleRepeat}
+                onChangeAutostart={toggleAutoPlay}
+            />
         </Container>
     );
 };