100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import { Modal, Tooltip } from "antd";
|
|
import { Message } from "../../models/message";
|
|
import { FaBackward } from "react-icons/fa";
|
|
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
|
|
import { useAuth } from "../../contexts/authContext";
|
|
import { useKeyboardContext } from "../../contexts/keyboardContext";
|
|
|
|
export default function PowerPlayer(props: {
|
|
show: boolean;
|
|
handleCloseModal: Function;
|
|
}) {
|
|
const { currUser } = useAuth();
|
|
const { allMessages, teamUsersMap } = useTeamDashboardContext();
|
|
const { handleAddAudioToQueue } = useKeyboardContext();
|
|
// two arrays:
|
|
// 1. all of my messages in order date desc => top
|
|
// const sentMessages = allMessages.filter(msg => msg.senderUserId == currUser.uid)
|
|
|
|
// // 2. all of incoming messages in order date desc => bottom
|
|
// const receivedMessages = allMessages.filter(msg => msg.receiverUserId == currUser.uid)
|
|
|
|
const messageRangeHalfToPlay = 2;
|
|
function handlePlayAudio(url: string) {
|
|
// todo play like 2 indexes lower to 2 indexes higher instead of
|
|
const indexOfMessage = 5;
|
|
|
|
var startPlay = indexOfMessage - messageRangeHalfToPlay;
|
|
if (startPlay < 0) {
|
|
startPlay = 0;
|
|
}
|
|
|
|
var endPlay = indexOfMessage + messageRangeHalfToPlay;
|
|
if (endPlay > allMessages.length) {
|
|
endPlay = allMessages.length;
|
|
}
|
|
|
|
// loop through start to end and add to queue
|
|
|
|
console.log(url);
|
|
|
|
handleAddAudioToQueue([url]);
|
|
}
|
|
|
|
return (
|
|
<Modal title="Power Playback " visible={props.show}>
|
|
<span className="flex flex-col items-start">
|
|
<span>One timeline to listen to the past 24 hours.</span>
|
|
|
|
<span className="text-sm text-gray-400">
|
|
The bottom are your messages. The top are incoming messages. Click on
|
|
the bubbles to listen to conversations during that period.
|
|
</span>
|
|
</span>
|
|
|
|
<div className="flex flex-col py-20 overflow-x-scroll">
|
|
{/* top incoming messages */}
|
|
<div className="flex flex-row">
|
|
{allMessages.map((msg, i) => {
|
|
if (msg.senderUserId == currUser.uid) {
|
|
return (
|
|
<span
|
|
key={i}
|
|
onClick={() => handlePlayAudio(msg.audioDataUrl)}
|
|
className="border-r-2 border-r-sky-400 translate-y-10 min-w-max hover:cursor-pointer"
|
|
>
|
|
<Tooltip title={"you: 22 minutes ago"}>
|
|
<div className="rounded-full w-5 h-5 translate-x-2/4 translate-y-full bg-teal-500"></div>
|
|
</Tooltip>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const sender = teamUsersMap[msg.senderUserId];
|
|
|
|
// incoming messages
|
|
return (
|
|
<span
|
|
key={i}
|
|
onClick={() => handlePlayAudio(msg.audioDataUrl)}
|
|
className="border-r-2 border-r-orange-400 min-w-max hover:cursor-pointer"
|
|
>
|
|
<Tooltip title={sender.firstName + ": " + "2 minutes ago"}>
|
|
<img
|
|
src={sender ? sender.avatarUrl : "K"}
|
|
alt="K"
|
|
className="rounded-full w-10 h-10 translate-x-2/4 -translate-y-2/4"
|
|
/>
|
|
</Tooltip>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* middle line */}
|
|
<div className="border border-b-2 border-b-black flex-1 w-full"></div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|