Ty Fiero
8 months ago
parent
9505429c5a
commit
23cc71a3a3
|
Before Width: | Height: | Size: 13 KiB |
@ -1,180 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
|
||||||
import { View, Text, TouchableOpacity, StyleSheet, Image, Touchable } from "react-native";
|
|
||||||
import * as FileSystem from "expo-file-system";
|
|
||||||
import { AVPlaybackStatus, AVPlaybackStatusSuccess, Audio } from "expo-av";
|
|
||||||
import { create } from "zustand";
|
|
||||||
import useStore from "../utils/state";
|
|
||||||
import { Animated } from "react-native";
|
|
||||||
import * as Haptics from "expo-haptics";
|
|
||||||
import useSoundEffect from "../utils/useSoundEffect";
|
|
||||||
|
|
||||||
import { useNavigation } from "@react-navigation/native";
|
|
||||||
|
|
||||||
interface RecordButtonProps {
|
|
||||||
playPip: () => void;
|
|
||||||
playPop: () => void;
|
|
||||||
recording: Audio.Recording | null;
|
|
||||||
setRecording: (recording: Audio.Recording | null) => void;
|
|
||||||
ws: WebSocket | null;
|
|
||||||
backgroundColorAnim: Animated.Value;
|
|
||||||
buttonBackgroundColorAnim: Animated.Value;
|
|
||||||
setIsPressed: (isPressed: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
position: "relative",
|
|
||||||
},
|
|
||||||
middle: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
padding: 10,
|
|
||||||
position: "relative",
|
|
||||||
},
|
|
||||||
circle: {
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
borderRadius: 50,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
qr: {
|
|
||||||
position: "absolute",
|
|
||||||
top: 30,
|
|
||||||
left: 10,
|
|
||||||
padding: 10,
|
|
||||||
zIndex: 100,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
height: 40,
|
|
||||||
width: 40,
|
|
||||||
},
|
|
||||||
topBar: {
|
|
||||||
height: 40,
|
|
||||||
backgroundColor: "#000",
|
|
||||||
paddingTop: 50,
|
|
||||||
},
|
|
||||||
|
|
||||||
button: {
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
borderRadius: 50,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
buttonTextDefault: {
|
|
||||||
color: "black",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
buttonTextRecording: {
|
|
||||||
color: "white",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
statusText: {
|
|
||||||
position: "absolute",
|
|
||||||
bottom: 20,
|
|
||||||
alignSelf: "center",
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const RecordButton = ({ playPip, playPop, recording, setRecording, ws, backgroundColorAnim, buttonBackgroundColorAnim, setIsPressed}: RecordButtonProps) => {
|
|
||||||
const [permissionResponse, requestPermission] = Audio.usePermissions();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("Permission Response:", permissionResponse);
|
|
||||||
if (permissionResponse?.status !== "granted") {
|
|
||||||
console.log("Requesting permission..");
|
|
||||||
requestPermission();
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const startRecording = useCallback(async () => {
|
|
||||||
if (recording) {
|
|
||||||
console.log("A recording is already in progress.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log("🌶️🌶️🌶️🌶️🌶️🌶️🌶️🌶️🌶️🌶️");
|
|
||||||
|
|
||||||
console.log(permissionResponse);
|
|
||||||
|
|
||||||
if (
|
|
||||||
permissionResponse !== null &&
|
|
||||||
permissionResponse.status !== `granted`
|
|
||||||
) {
|
|
||||||
console.log("Requesting permission..");
|
|
||||||
await requestPermission();
|
|
||||||
}
|
|
||||||
|
|
||||||
await Audio.setAudioModeAsync({
|
|
||||||
allowsRecordingIOS: true,
|
|
||||||
playsInSilentModeIOS: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("Starting recording..");
|
|
||||||
const newRecording = new Audio.Recording();
|
|
||||||
await newRecording.prepareToRecordAsync(
|
|
||||||
Audio.RecordingOptionsPresets.HIGH_QUALITY
|
|
||||||
);
|
|
||||||
await newRecording.startAsync();
|
|
||||||
|
|
||||||
setRecording(newRecording);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to start recording", err);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const stopRecording = useCallback(async () => {
|
|
||||||
console.log("Stopping recording..");
|
|
||||||
|
|
||||||
if (recording) {
|
|
||||||
await recording.stopAndUnloadAsync();
|
|
||||||
await Audio.setAudioModeAsync({
|
|
||||||
allowsRecordingIOS: false,
|
|
||||||
});
|
|
||||||
const uri = recording.getURI();
|
|
||||||
// console.log("recording uri at ", uri);
|
|
||||||
setRecording(null);
|
|
||||||
|
|
||||||
if (ws && uri) {
|
|
||||||
const response = await fetch(uri);
|
|
||||||
// console.log("fetched audio file", response);
|
|
||||||
const blob = await response.blob();
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsArrayBuffer(blob);
|
|
||||||
reader.onloadend = () => {
|
|
||||||
const audioBytes = reader.result;
|
|
||||||
if (audioBytes) {
|
|
||||||
ws.send(audioBytes);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [recording]);
|
|
||||||
|
|
||||||
const toggleRecording = (shouldPress: boolean) => {
|
|
||||||
Animated.timing(backgroundColorAnim, {
|
|
||||||
toValue: shouldPress ? 1 : 0,
|
|
||||||
duration: 400,
|
|
||||||
useNativeDriver: false, // 'backgroundColor' does not support native driver
|
|
||||||
}).start();
|
|
||||||
Animated.timing(buttonBackgroundColorAnim, {
|
|
||||||
toValue: shouldPress ? 1 : 0,
|
|
||||||
duration: 400,
|
|
||||||
useNativeDriver: false, // 'backgroundColor' does not support native driver
|
|
||||||
}).start();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RecordButton;
|
|
||||||
@ -0,0 +1,151 @@
|
|||||||
|
import React, { useEffect, useCallback } from "react";
|
||||||
|
import { TouchableOpacity, StyleSheet } from "react-native";
|
||||||
|
import { Audio } from "expo-av";
|
||||||
|
import { Animated } from "react-native";
|
||||||
|
import * as Haptics from "expo-haptics";
|
||||||
|
|
||||||
|
interface RecordButtonProps {
|
||||||
|
playPip: () => void;
|
||||||
|
playPop: () => void;
|
||||||
|
recording: Audio.Recording | null;
|
||||||
|
setRecording: (recording: Audio.Recording | null) => void;
|
||||||
|
ws: WebSocket | null;
|
||||||
|
buttonBackgroundColorAnim: Animated.Value;
|
||||||
|
backgroundColorAnim: Animated.Value;
|
||||||
|
backgroundColor: Animated.AnimatedInterpolation<string | number>;
|
||||||
|
buttonBackgroundColor: Animated.AnimatedInterpolation<string | number>;
|
||||||
|
setIsPressed: (isPressed: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
circle: {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 50,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 50,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const RecordButton: React.FC<RecordButtonProps> = ({
|
||||||
|
playPip,
|
||||||
|
playPop,
|
||||||
|
recording,
|
||||||
|
setRecording,
|
||||||
|
ws,
|
||||||
|
backgroundColorAnim,
|
||||||
|
buttonBackgroundColorAnim,
|
||||||
|
backgroundColor,
|
||||||
|
buttonBackgroundColor,
|
||||||
|
setIsPressed,
|
||||||
|
}: RecordButtonProps) => {
|
||||||
|
const [permissionResponse, requestPermission] = Audio.usePermissions();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (permissionResponse?.status !== "granted") {
|
||||||
|
requestPermission();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const startRecording = useCallback(async () => {
|
||||||
|
if (recording) {
|
||||||
|
console.log("A recording is already in progress.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
permissionResponse !== null &&
|
||||||
|
permissionResponse.status !== `granted`
|
||||||
|
) {
|
||||||
|
await requestPermission();
|
||||||
|
}
|
||||||
|
|
||||||
|
await Audio.setAudioModeAsync({
|
||||||
|
allowsRecordingIOS: true,
|
||||||
|
playsInSilentModeIOS: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const newRecording = new Audio.Recording();
|
||||||
|
await newRecording.prepareToRecordAsync(
|
||||||
|
Audio.RecordingOptionsPresets.HIGH_QUALITY
|
||||||
|
);
|
||||||
|
await newRecording.startAsync();
|
||||||
|
|
||||||
|
setRecording(newRecording);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to start recording", err);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const stopRecording = useCallback(async () => {
|
||||||
|
if (recording) {
|
||||||
|
await recording.stopAndUnloadAsync();
|
||||||
|
await Audio.setAudioModeAsync({
|
||||||
|
allowsRecordingIOS: false,
|
||||||
|
});
|
||||||
|
const uri = recording.getURI();
|
||||||
|
setRecording(null);
|
||||||
|
|
||||||
|
if (ws && uri) {
|
||||||
|
const response = await fetch(uri);
|
||||||
|
const blob = await response.blob();
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsArrayBuffer(blob);
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const audioBytes = reader.result;
|
||||||
|
if (audioBytes) {
|
||||||
|
ws.send(audioBytes);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [recording]);
|
||||||
|
|
||||||
|
const toggleRecording = (shouldPress: boolean) => {
|
||||||
|
Animated.timing(backgroundColorAnim, {
|
||||||
|
toValue: shouldPress ? 1 : 0,
|
||||||
|
duration: 400,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start();
|
||||||
|
Animated.timing(buttonBackgroundColorAnim, {
|
||||||
|
toValue: shouldPress ? 1 : 0,
|
||||||
|
duration: 400,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.button}
|
||||||
|
onPressIn={() => {
|
||||||
|
playPip();
|
||||||
|
setIsPressed(true);
|
||||||
|
toggleRecording(true);
|
||||||
|
startRecording();
|
||||||
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
|
||||||
|
}}
|
||||||
|
onPressOut={() => {
|
||||||
|
playPop();
|
||||||
|
setIsPressed(false);
|
||||||
|
toggleRecording(false);
|
||||||
|
stopRecording();
|
||||||
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Animated.View
|
||||||
|
style={[styles.circle, { backgroundColor: buttonBackgroundColor }]}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RecordButton;
|
||||||
Loading…
Reference in new issue