getting it to play and stuff
This commit is contained in:
talksik
@@ -1,71 +1,98 @@
|
||||
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 }) {
|
||||
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
|
||||
// 2. all of incoming messages in order date desc => bottom
|
||||
// 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="Basic Modal" visible={false}>
|
||||
<div className="flex flex-col p-10 overflow-x-scroll">
|
||||
<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">
|
||||
<span className="border-r-2 border-r-orange-400 h-10 pl-1">
|
||||
<Tooltip title={"Heran: 2 minutes ago"}>
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
|
||||
alt="asdf"
|
||||
className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
|
||||
/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
<span className="border-r-2 border-r-orange-400 h-10 pl-2">
|
||||
<Tooltip title={"Heran: 5 minutes ago"}>
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
|
||||
alt="asdf"
|
||||
className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
|
||||
/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
const sender = teamUsersMap[msg.senderUserId];
|
||||
|
||||
<span className="border-r-2 border-r-orange-400 h-10 pl-10">
|
||||
<Tooltip title={"Kam: 2 hours ago"}>
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/a/AATXAJzgek1jh-qtptTj_VT_9QkCWlv9r02riUptU0Hk=s96-c"
|
||||
alt="asdf"
|
||||
className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
|
||||
/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
// 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"></div>
|
||||
|
||||
{/* bottom outgoing messages */}
|
||||
<div className="flex flex-row">
|
||||
<span className="border-r-2 border-r-orange-4 h-5 pl-5">
|
||||
<Tooltip title={"you: 22 minutes ago"}>
|
||||
<div className="rounded-full w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
<span className="border-r-2 border-r-orange-4 h-5 pl-0">
|
||||
<Tooltip title={"you: 22 minutes ago"}>
|
||||
<div className="rounded-full w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
<span className="border-r-2 border-r-orange-4 h-5 pl-5">
|
||||
<Tooltip title={"you: 22 minutes ago"}>
|
||||
<div className="rounded-full w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<div className="border border-b-2 border-b-black flex-1 w-full"></div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user