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:

-