talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

powerplayer poc

Browse Source
This commit is contained in:
Arjun Patel
2022-01-16 03:14:47 -08:00
parent 64b1149bc5
commit 8b76f323a4
3 changed files with 78 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/TeamVoiceLine.tsx
+1 -4
View File
@@ -217,10 +217,7 @@ export default function TeamVoiceLine() {
</span>
<Tooltip title="power playback mode">
<button
onClick={handleAdminRoute}
className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
>
<button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
<FaBackward className="text-lg text-white" />
</button>
</Tooltip>
components/PowerPlayer.tsx
+72
View File
@@ -0,0 +1,72 @@
import { Modal, Tooltip } from "antd";
import { Message } from "../models/message";
import { FaBackward } from "react-icons/fa";
export default function PowerPlayer(props: { messages: Message[] }) {
// two arrays:
// 1. all of my messages in order date desc => top
// 2. all of incoming messages in order date desc => bottom
return (
<Modal title="Basic Modal" visible={false}>
<div className="flex flex-col p-10 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>
<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>
<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>
</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>
</Modal>
);
}
contexts/audioContext.tsx
+5 -1
View File
@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from "uuid";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";
import CloudStorageService from "../services/cloudStorageService";
import PowerPlayer from "../components/PowerPlayer";
interface AudioContextInterface {
selectedTeammate: string; // can only have one selected
@@ -335,8 +336,11 @@ export default function AudioContextProvider({ children }) {
return (
<AudioContext.Provider value={value}>
{children}
{/* player for audio messages */}
{/* mega power mode viewer */}
<PowerPlayer />
{/* player for audio messages */}
{startPlaying ? (
<AudioPlayer
autoPlay