From 9a6d91f97f8d5aec44facf0022652e485702365e Mon Sep 17 00:00:00 2001 From: codeAndie <114886583+codeAndie@users.noreply.github.com> Date: Thu, 17 Oct 2024 00:45:04 -0400 Subject: [PATCH 1/2] Update AudioRecorder.js --- src/AudioRecorder.js | 94 +++++++++++++++++++++++++++----------------- 1 file changed, 59 insertions(+), 35 deletions(-) diff --git a/src/AudioRecorder.js b/src/AudioRecorder.js index ddc09c9..2cc3975 100644 --- a/src/AudioRecorder.js +++ b/src/AudioRecorder.js @@ -1,5 +1,5 @@ -import React, { useState, useRef } from 'react'; -import { Loader2, Mic, Send, PlayCircle, AlertCircle } from 'lucide-react'; +import React, { useState, useRef } from "react"; +import { Loader2, Mic, Send, PlayCircle, AlertCircle } from "lucide-react"; const AudioRecorder = () => { const [isRecording, setIsRecording] = useState(false); @@ -21,7 +21,9 @@ const AudioRecorder = () => { }; mediaRecorderRef.current.onstop = () => { - const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' }); + const audioBlob = new Blob(audioChunksRef.current, { + type: "audio/webm", + }); const url = URL.createObjectURL(audioBlob); setAudioUrl(url); audioChunksRef.current = []; @@ -30,8 +32,8 @@ const AudioRecorder = () => { mediaRecorderRef.current.start(); setIsRecording(true); } catch (error) { - console.error('Error accessing microphone', error); - setError('Failed to access microphone'); + console.error("Error accessing microphone", error); + setError("Failed to access microphone"); } }; @@ -46,24 +48,27 @@ const AudioRecorder = () => { setIsSubmitting(true); setError(null); const formData = new FormData(); - const audioBlob = await fetch(audioUrl).then(r => r.blob()); - formData.append('audio', audioBlob, 'recording.webm'); + const audioBlob = await fetch(audioUrl).then((r) => r.blob()); + formData.append("audio", audioBlob, "recording.webm"); try { - const response = await fetch('https://labracadabra-confessional.azurewebsites.net/api/saveAudioBlob', { - method: 'POST', - body: formData, - }); + const response = await fetch( + "https://labracadabra-confessional.azurewebsites.net/api/saveAudioBlob", + { + method: "POST", + body: formData, + } + ); if (response.ok) { - console.log('Audio uploaded successfully'); + console.log("Audio uploaded successfully"); setAudioUrl(null); // Clear the recorded audio } else { - throw new Error('Audio upload failed'); + throw new Error("Audio upload failed"); } } catch (error) { - console.error('Error sending audio:', error); - setError('Failed to upload audio'); + console.error("Error sending audio:", error); + setError("Failed to upload audio"); } finally { setIsSubmitting(false); } @@ -73,20 +78,22 @@ const AudioRecorder = () => { setIsLoading(true); setError(null); try { - const response = await fetch('https://labracadabra-confessional.azurewebsites.net/api/loadRandomAudioBlob?'); + const response = await fetch( + "https://labracadabra-confessional.azurewebsites.net/api/loadRandomAudioBlob?" + ); if (response.ok) { const audioUrl = await response.text(); setRandomAudioUrl(audioUrl); // Check if the audio file exists - const audioCheck = await fetch(audioUrl, { method: 'HEAD' }); + const audioCheck = await fetch(audioUrl, { method: "HEAD" }); if (!audioCheck.ok) { - throw new Error('Audio file not found'); + throw new Error("Audio file not found"); } } else { - throw new Error('Failed to get random audio'); + throw new Error("Failed to get random audio"); } } catch (error) { - console.error('Error getting random audio:', error); + console.error("Error getting random audio:", error); setError(error.message); setRandomAudioUrl(null); } finally { @@ -97,16 +104,20 @@ const AudioRecorder = () => { return (
-

Audio Recorder

- +

+ Hellium Confessional +

+
-
@@ -114,25 +125,33 @@ const AudioRecorder = () => {

Preview:

)}
-
@@ -146,7 +165,12 @@ const AudioRecorder = () => { {randomAudioUrl && !error && (

Random Recording:

-
)}
@@ -154,4 +178,4 @@ const AudioRecorder = () => { ); }; -export default AudioRecorder; \ No newline at end of file +export default AudioRecorder; From ff5f293e14aeb5bf6b28a68745465479f9c346fb Mon Sep 17 00:00:00 2001 From: codeAndie <114886583+codeAndie@users.noreply.github.com> Date: Fri, 18 Oct 2024 11:40:32 -0400 Subject: [PATCH 2/2] ui changes, ux / flow updates Made the buttons appear sequentially, added some random ui ideas --- src/App.css | 106 +++++++++++++++++++++++++++++ src/App.js | 7 +- src/AudioRecorder.js | 156 +++++++++++++++++++++++++++++-------------- 3 files changed, 215 insertions(+), 54 deletions(-) diff --git a/src/App.css b/src/App.css index 59ad501..2f4566e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,42 @@ +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-30px); + } +} + +@keyframes move { + 0% { + transform: translate(0, 0); + } + 25% { + transform: translate(100px, -100px); + } + 50% { + transform: translate(200px, 0); + } + 75% { + transform: translate(100px, 100px); + } + 100% { + transform: translate(0, 0); + } +} + .App { font-family: Arial, sans-serif; text-align: center; @@ -24,3 +63,70 @@ button:hover { audio { margin-top: 15px; } + +.circle-button { + width: 200px; /* Adjust size as needed */ + height: 200px; /* Adjust size as needed */ + background-color: red; /* Red background color */ + color: white; /* White text color */ + border: none; /* Remove border */ + border-radius: 50%; /* Make it circular */ + font-size: 32px; /* Adjust font size as needed */ + display: flex; /* Use flexbox for centering */ + align-items: center; /* Center content vertically */ + justify-content: center; /* Center content horizontally */ + cursor: pointer; /* Pointer cursor on hover */ + transition: background-color 0.3s; /* Smooth transition for hover effect */ +} + +.circle-button:hover { + background-color: darkred; /* Darker red on hover */ +} + +.center-screen { + display: flex; + justify-content: center; + align-items: center; + height: 50vh; /* Full viewport height */ +} + +.pulse { + animation: pulse 1s infinite; /* Apply the pulse animation */ +} + +.vertical-stack { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; /* Adjust the gap between elements as needed */ +} + +.secret-container { + padding: 20px; /* Add padding inside the container */ + border-radius: 15px; /* Rounded corners */ + background-color: #f9f9f9; /* Light background color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ + border: 2px solid #e0e0e0; /* Light border */ + position: relative; /* For positioning pseudo-elements */ + overflow: hidden; /* Hide overflow for pseudo-elements */ + animation: bounce 5s infinite, move 10s infinite; /* Apply bounce and move animations */ +} + +.secret-container::before, +.secret-container::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(0, 0, 255, 0.1)); + mix-blend-mode: multiply; + pointer-events: none; /* Allow clicks to pass through */ + z-index: 1; /* Ensure it's above the content */ +} + +.secret-container::after { + background: linear-gradient(-45deg, rgba(0, 255, 0, 0.1), rgba(255, 255, 0, 0.1)); +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 0845402..b138209 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,9 @@ -import React from 'react'; -import AudioRecorder from './AudioRecorder'; // Import the component +import React from "react"; +import AudioRecorder from "./AudioRecorder"; // Import the component function App() { return ( -
-

Welcome to Audio Recorder App

+
{/* Render the AudioRecorder component */}
); diff --git a/src/AudioRecorder.js b/src/AudioRecorder.js index 2cc3975..fa3b830 100644 --- a/src/AudioRecorder.js +++ b/src/AudioRecorder.js @@ -1,25 +1,30 @@ import React, { useState, useRef } from "react"; import { Loader2, Mic, Send, PlayCircle, AlertCircle } from "lucide-react"; +import "./App.css"; // Ensure this line is present const AudioRecorder = () => { const [isRecording, setIsRecording] = useState(false); + const [recording, setRecording] = useState(null); const [audioUrl, setAudioUrl] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); const [isLoading, setIsLoading] = useState(false); const [randomAudioUrl, setRandomAudioUrl] = useState(null); const [error, setError] = useState(null); const mediaRecorderRef = useRef(null); const audioChunksRef = useRef([]); + const [showSecret, setShowSecret] = useState(false); + const [showAudio, setShowAudio] = useState(false); const startRecording = async () => { + console.log("Recording started"); try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorderRef.current = new MediaRecorder(stream); - mediaRecorderRef.current.ondataavailable = (event) => { if (event.data.size > 0) audioChunksRef.current.push(event.data); }; - + console.log("audio good"); mediaRecorderRef.current.onstop = () => { const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm", @@ -38,15 +43,17 @@ const AudioRecorder = () => { }; const stopRecording = () => { + console.log("Recording stopped"); mediaRecorderRef.current?.stop(); setIsRecording(false); + setShowAudio(true); }; - const sendAudioToAzureFunction = async () => { if (!audioUrl) return; setIsSubmitting(true); setError(null); + setShowAudio(false); const formData = new FormData(); const audioBlob = await fetch(audioUrl).then((r) => r.blob()); formData.append("audio", audioBlob, "recording.webm"); @@ -71,12 +78,14 @@ const AudioRecorder = () => { setError("Failed to upload audio"); } finally { setIsSubmitting(false); + setIsSubmitted(true); } }; const getRandomAudio = async () => { setIsLoading(true); setError(null); + setShowSecret(true); try { const response = await fetch( "https://labracadabra-confessional.azurewebsites.net/api/loadRandomAudioBlob?" @@ -101,6 +110,34 @@ const AudioRecorder = () => { } }; + const handleDelete = () => { + setRecording(null); + setIsSubmitted(false); + setShowSecret(false); + setShowAudio(false); + }; + + const handleRestart = () => { + setRecording(null); + setIsSubmitted(false); + setShowSecret(false); + setAudioUrl(null); // Clear the recorded audio + }; + + const handleSubmit = () => { + setIsSubmitting(true); + // Logic to submit the recording to the database + // Simulate a delay for submission + setTimeout(() => { + setIsSubmitting(false); + setIsSubmitted(true); + }, 2000); + }; + + console.log("audioUrl", audioUrl); + console.log("show audio: ", showAudio); + console.log("issubmitted: ", isSubmitted); + return (
@@ -108,52 +145,66 @@ const AudioRecorder = () => { Hellium Confessional -
- -
- - {audioUrl && ( -
-

Preview:

-