Audio Editor UI

package.json

@@ -158,6 +158,7 @@
 		"usfm-editor": "0.8.7",
 		"usfm-grammar": "^2.3.0",
 		"uuid": "^8.3.2",
+		"wavesurfer.js": "^6.2.0",
 		"webpack-node-externals": "^3.0.0",
 		"winston": "^3.7.2",
 		"word-aligner": "^1.0.0",

pages/wip/WaveForm.js

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { PlayIcon, PauseIcon } from '@heroicons/react/solid';
+
+export default function AudioWaveForm(props) {
+  const {
+    height,
+    waveColor,
+    btnColor,
+    barGap,
+    barWidth,
+    barRadius,
+  } = props;
+
+  const formWaveSurferOptions = (ref) => ({
+    container: ref,
+    waveColor,
+    progressColor: '#0073E5',
+    cursorColor: 'OrangeRed',
+    barWidth: barWidth ?? 1,
+    barRadius: barRadius ?? 1,
+    barGap: barGap ?? 2,
+    responsive: true,
+    height,
+    normalize: true,
+    partialRender: true,
+    hideScrollbar: true,
+  });
+
+  const waveformRef = useRef(null);
+  const wavesurfer = useRef(null);
+  const [playing, setPlaying] = useState(false);
+
+  const url = 'https://www.mfiles.co.uk/mp3-downloads/brahms-st-anthony-chorale-theme-two-pianos.mp3';
+
+  const create = async () => {
+    const WaveSurfer = (await import('wavesurfer.js')).default;
+
+    const options = formWaveSurferOptions(waveformRef.current);
+    wavesurfer.current = WaveSurfer.create(options);
+
+    wavesurfer.current.load(url);
+  };
+
+  useEffect(() => {
+    create();
+
+    return () => {
+      if (wavesurfer.current) {
+        wavesurfer.current.destroy();
+      }
+    };
+  }, []);
+
+  const handlePlayPause = () => {
+    setPlaying(!playing);
+    wavesurfer.current.playPause();
+  };
+
+  return (
+    <div className="flex items-center">
+      <div className="w-full">
+        <div id="waveform" ref={waveformRef} />
+      </div>
+      <button type="button" onClick={handlePlayPause}>
+        {!playing
+        ? (
+          <PlayIcon
+            // fill="currentColor"
+            className={`w-7 h-7 ${btnColor}`}
+            aria-hidden="true"
+          />
+        )
+        : (
+          <PauseIcon
+            // fill="currentColor"
+            className="w-7 h-7 text-error"
+            aria-hidden="true"
+          />
+        )}
+      </button>
+    </div>
+  );
+}
+
+AudioWaveForm.propTypes = {
+  height: PropTypes.number,
+  waveColor: PropTypes.string,
+  btnColor: PropTypes.string,
+  barGap: PropTypes.number,
+  barWidth: PropTypes.number,
+  barRadius: PropTypes.number,
+};

renderer/src/components/ProjectsPage/CreateProject/LicencePopover.js

@@ -127,7 +127,7 @@ export default function LicencePopover({ call }) {
                       checked={preview}
                       onChange={setPreview}
                       className={`${preview ? 'bg-primary' : 'bg-dark'}
-                                  relative inline-flex flex-shrink-0 h-5 w-10 border-2 border-transparent rounded-full cursor-pointer
+                                  relative inline-flex shrink-0 h-5 w-10 border-2 border-transparent rounded-full cursor-pointer
                                   transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2
                                 focus-visible:ring-white focus-visible:ring-opacity-75`}
                     >

renderer/src/layouts/editor/ConfirmationModal.js

@@ -51,7 +51,7 @@ export default function ConfirmationModal({
             <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <div className="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">