From 325209891d95c08577a0f8f61fc48fef32f64910 Mon Sep 17 00:00:00 2001
From: Jose B <jose.zdy@gmail.com>
Date: Tue, 8 Aug 2023 12:54:49 -0500
Subject: [PATCH] download recording

---
 www/app/components/record.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/www/app/components/record.js b/www/app/components/record.js
index f683f2b7..de27b7d3 100644
--- a/www/app/components/record.js
+++ b/www/app/components/record.js
@@ -2,6 +2,9 @@ import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+
 import Dropdown from "react-dropdown";
 import "react-dropdown/style.css";
 
@@ -87,6 +90,17 @@ export default function Recorder(props) {
     }
   }, []);
 
+  useEffect(() => {
+    if (record) {
+      return record.on("stopRecording", () => {
+        const link = document.getElementById("download-recording");
+        link.href = record.getRecordedUrl();
+        link.download = "reflector-recording.webm";
+        link.style.visibility = "visible";
+      });
+    }
+  }, [record]);
+
   const handleRecClick = async () => {
     if (!record) return console.log("no record");
 
@@ -135,9 +149,15 @@ export default function Recorder(props) {
         >
           {isPlaying ? "Pause" : "Play"}
         </button>
+        <a
+          id="download-recording"
+          title="Download recording"
+          className="invisible w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
+        >
+          <FontAwesomeIcon icon={faDownload} />
+        </a>
       </div>
       <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
-      {/* TODO: Download audio <a> tag */}
       {/* TODO: current time / audio duration */}
     </div>
   );