Spaces:
Paused
Paused
File size: 4,519 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
import React from "react";
import { useSelector } from "react-redux";
import CTAIconWrapper from "./CTAIconWrapper";
import Modal from "./Modal";
import Image from "../globals/Image";
import usePeer from "../../hooks/usePeer";
import callReceiverTone from "../../assets/Receiver Call Request Tone.mp3";
import callSenderTone from "../../assets/Sender Call Request Tone.mp3";
function VoiceCallModal() {
const { partnerProfile, callDetail } = useSelector(
(state) => state.modalReducer.payload
);
const {
userMediaRef,
callStatus,
partnerMediaRef,
acceptCall,
callAccepted,
endCall,
denyCall,
duration,
} = usePeer({
mediaOptions: { video: false, audio: true },
callDetail,
partnerProfile,
});
return (
<Modal
typeValue="voiceCallModal"
canOverlayClose={false}
className="!p-0 !rounded-3xl sm:!rounded-none overflow-hidden text-white h-fit"
>
<Image
src={partnerProfile?.avatar}
alt={partnerProfile?.username}
className="w-[40rem] h-[50rem] sm:w-full sm:h-full"
/>
<div
className={`flex flex-col items-center absolute top-0 right-0 w-full h-full`}
>
<div className="pt-[5rem] text-center w-full">
<p className="text-[2.5rem] font-semibold">
{partnerProfile?.name || partnerProfile?.username}
</p>
{/* Call progress */}
<span className="block mt-[1rem] capitalize">
{callAccepted ? duration : `${callStatus}...`}
</span>
</div>
<div className="flex gap-[20rem] mt-auto mb-[5rem]">
<div
onClick={() => (callAccepted ? endCall() : denyCall("Busy"))}
className=""
>
<CTAIconWrapper className="bg-danger">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
className="fill-white stroke-transparent"
/>
</svg>
</CTAIconWrapper>
</div>
{!callAccepted && !callDetail.caller && (
<div onClick={acceptCall} className="mt-auto mb-[5rem]">
<CTAIconWrapper className="bg-[#0ac630]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
className="fill-white stroke-transparent"
/>
</svg>
</CTAIconWrapper>
</div>
)}
</div>
</div>
{/* Speakers */}
<audio
ref={userMediaRef}
autoPlay
playsInline
muted
hidden
controlsList="nodownload"
/>
<audio
ref={partnerMediaRef}
autoPlay
playsInline
hidden
controlsList="nodownload"
/>
{/* Ringtones */}
{callDetail.caller && !callAccepted && (
<audio
src={callSenderTone}
autoPlay
playsInline
loop
hidden
controlsList="nodownload"
/>
)}
{!callDetail.caller && !callAccepted && (
<audio
src={callReceiverTone}
autoPlay
playsInline
loop
hidden
controlsList="nodownload"
/>
)}
</Modal>
);
}
export default VoiceCallModal;
|