separating out and improving flow
This commit is contained in:
talksik
@@ -293,26 +293,39 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
|
|||||||
* tune into socket room and tell everyone else
|
* tune into socket room and tell everyone else
|
||||||
*/
|
*/
|
||||||
const handleSelectLine = useCallback(
|
const handleSelectLine = useCallback(
|
||||||
(newLineIdToSelect: string) => {
|
(newLineIdToSelect: string | undefined) => {
|
||||||
setSelectedLineId((prevLineId) => {
|
if (!newLineIdToSelect) {
|
||||||
if (newLineIdToSelect === prevLineId) {
|
setSelectedLineId(undefined);
|
||||||
return prevLineId;
|
} else {
|
||||||
}
|
setSelectedLineId((prevLineId) => {
|
||||||
|
if (newLineIdToSelect === prevLineId) {
|
||||||
|
return prevLineId;
|
||||||
|
}
|
||||||
|
|
||||||
// untune from the last line if it was just a temporary tuned one
|
// untune from the last line if it was just a temporary tuned one
|
||||||
if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
|
if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
|
||||||
handleUntuneFromLine(prevLineId);
|
handleUntuneFromLine(prevLineId);
|
||||||
}
|
}
|
||||||
|
|
||||||
// tune in if not already tuned into this line
|
// tune in if not already tuned into this line
|
||||||
if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
|
if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
|
||||||
handleTuneIntoLine(newLineIdToSelect);
|
handleTuneIntoLine(newLineIdToSelect);
|
||||||
}
|
}
|
||||||
|
|
||||||
return newLineIdToSelect;
|
return newLineIdToSelect;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowNewChannelForm(false);
|
||||||
},
|
},
|
||||||
[setSelectedLineId, handleUntuneFromLine, roomMap, user, handleTuneIntoLine],
|
[
|
||||||
|
setSelectedLineId,
|
||||||
|
handleUntuneFromLine,
|
||||||
|
roomMap,
|
||||||
|
user,
|
||||||
|
handleTuneIntoLine,
|
||||||
|
setShowNewChannelForm,
|
||||||
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleShowNewChannelForm = useCallback(
|
const handleShowNewChannelForm = useCallback(
|
||||||
|
|||||||
@@ -0,0 +1,287 @@
|
|||||||
|
import React, { useMemo, useEffect, useState } from 'react';
|
||||||
|
import useAuth from '../../../../providers/AuthProvider';
|
||||||
|
import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
|
||||||
|
import useStreams from '../../../../providers/StreamProvider';
|
||||||
|
|
||||||
|
import { LineMemberState } from '@nirvana/core/models/line.model';
|
||||||
|
import LineIcon from '../../../../components/lineIcon';
|
||||||
|
import {
|
||||||
|
FiActivity,
|
||||||
|
FiHeadphones,
|
||||||
|
FiImage,
|
||||||
|
FiMoreVertical,
|
||||||
|
FiSearch,
|
||||||
|
FiSettings,
|
||||||
|
FiSun,
|
||||||
|
FiUsers,
|
||||||
|
FiVideo,
|
||||||
|
} from 'react-icons/fi';
|
||||||
|
import { Avatar, Tooltip } from 'antd';
|
||||||
|
|
||||||
|
export default function LineDetails() {
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms();
|
||||||
|
|
||||||
|
const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]);
|
||||||
|
|
||||||
|
const isUserToggleTuned = useMemo(
|
||||||
|
() => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
|
||||||
|
[selectedLine],
|
||||||
|
);
|
||||||
|
|
||||||
|
const { peerMap } = useStreams();
|
||||||
|
|
||||||
|
// seeing if I am in the list of broadcasters
|
||||||
|
// the source of truth from the socket connections telling me if my clicking actually made a round trip
|
||||||
|
const isUserBroadcasting = useMemo(
|
||||||
|
() => selectedLine?.currentBroadcastersUserIds?.includes(user._id.toString()),
|
||||||
|
[user, selectedLine],
|
||||||
|
);
|
||||||
|
|
||||||
|
// showing all tuned in members...they may not hear me since they might be doing something else
|
||||||
|
// but feeling of presentness
|
||||||
|
const tunedProfiles = useMemo(() => {
|
||||||
|
const pictureSources: { name: string; pictureSrc: string }[] = [];
|
||||||
|
|
||||||
|
selectedLine.tunedInMemberIds?.forEach((tunedInMemberUserId) => {
|
||||||
|
// don't want to see my own picture
|
||||||
|
// TODO: don't show myself!?
|
||||||
|
if (tunedInMemberUserId === user._id.toString()) {
|
||||||
|
pictureSources.push();
|
||||||
|
|
||||||
|
pictureSources.push({
|
||||||
|
name: user.givenName,
|
||||||
|
pictureSrc: user.picture,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const otherUserObject = selectedLine.otherUserObjects?.find(
|
||||||
|
(userObj) => userObj._id.toString() === tunedInMemberUserId,
|
||||||
|
);
|
||||||
|
if (otherUserObject?.picture)
|
||||||
|
pictureSources.push({
|
||||||
|
name: otherUserObject.givenName,
|
||||||
|
pictureSrc: otherUserObject.picture,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return pictureSources;
|
||||||
|
}, [selectedLine, user]);
|
||||||
|
|
||||||
|
// pics for the line icons
|
||||||
|
const profilePictures = useMemo(() => {
|
||||||
|
const pictureSources: string[] = [];
|
||||||
|
|
||||||
|
// ?don't add in my image as that's useless contextually?
|
||||||
|
// if (userData?.user?.picture) pictureSources.push(userData.user.picture);
|
||||||
|
|
||||||
|
selectedLine.otherUserObjects?.forEach((otherUser) => {
|
||||||
|
if (otherUser.picture) pictureSources.push(otherUser.picture);
|
||||||
|
});
|
||||||
|
|
||||||
|
return pictureSources;
|
||||||
|
}, [selectedLine]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col flex-1 bg-white relative">
|
||||||
|
{/* line details */}
|
||||||
|
<div
|
||||||
|
className="p-5 z-30
|
||||||
|
flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group"
|
||||||
|
>
|
||||||
|
{profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
|
||||||
|
|
||||||
|
<div className="ml-2 mr-auto flex flex-col items-start ">
|
||||||
|
<span className="flex flex-row gap-2 items-center">
|
||||||
|
<h2 className={`text-md text-gray-800 font-semibold`}>
|
||||||
|
{selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
|
||||||
|
transition-all hover:scale-105`}
|
||||||
|
>
|
||||||
|
<FiSettings className="text-gray-400 text-xs" />
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={user.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'large'}
|
||||||
|
// grayscale if not playing?
|
||||||
|
className={`shadow-lg`}
|
||||||
|
/>
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={otherUser.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'large'}
|
||||||
|
className={`shadow-lg`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Avatar.Group>
|
||||||
|
|
||||||
|
<span className="px-10 text-gray-200"> | </span>
|
||||||
|
|
||||||
|
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={otherUser.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'default'}
|
||||||
|
// grayscale if not playing?
|
||||||
|
className={`${true && 'grayscale'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Avatar.Group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* main canvas */}
|
||||||
|
<div className="flex flex-col flex-1">
|
||||||
|
{/* line timeline */}
|
||||||
|
<div
|
||||||
|
className="flex-1 flex flex-col justify-start items-center gap-2 p-5 mx-auto
|
||||||
|
max-w-lg w-full bg-white"
|
||||||
|
>
|
||||||
|
<span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
|
||||||
|
|
||||||
|
<span className={'text-gray-300 text-sm'}>yesterday</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`rounded flex flex-row items-center gap-2 w-full
|
||||||
|
p-5 border-gray-200 border`}
|
||||||
|
>
|
||||||
|
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={otherUser.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'default'}
|
||||||
|
// grayscale if not playing?
|
||||||
|
className={`${true && 'grayscale'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Avatar.Group>
|
||||||
|
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<span key={`chunk-${otherUser.name}`} className="text-gray-500">
|
||||||
|
{`${otherUser.givenName}, `}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<span className="ml-auto text-xs text-gray-300">{`${
|
||||||
|
Math.floor(Math.random() * 10) + 1
|
||||||
|
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
||||||
|
|
||||||
|
<span className="text-gray-400 text-md">{`${
|
||||||
|
Math.floor(Math.random() * 60) + 1
|
||||||
|
} seconds`}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className={'text-gray-300 text-sm'}>today</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`rounded flex flex-row items-center gap-2 w-full shadow-lg p-5
|
||||||
|
border-gray-200 border`}
|
||||||
|
>
|
||||||
|
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={otherUser.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'default'}
|
||||||
|
// grayscale if not playing?
|
||||||
|
className={`${true && 'grayscale'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Avatar.Group>
|
||||||
|
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<span key={`chunk-${otherUser.name}`} className="text-gray-500">
|
||||||
|
{`${otherUser.givenName}, `}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<span className="ml-auto text-xs text-gray-300">{`${
|
||||||
|
Math.floor(Math.random() * 10) + 1
|
||||||
|
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
||||||
|
|
||||||
|
<span className="text-gray-400 text-md">{`${
|
||||||
|
Math.floor(Math.random() * 60) + 1
|
||||||
|
} seconds`}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className={'text-teal-500 text-sm flex flex-row gap-2 items-center mt-5'}>
|
||||||
|
<FiSun />
|
||||||
|
<span>right now</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* live broadcasters */}
|
||||||
|
<div className="flex flex-col w-full gap-2 shadow-2xl border border-teal-500 rounded">
|
||||||
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
||||||
|
<div key={otherUser.email} className="flex flex-row items-center gap-2 p-4">
|
||||||
|
<Avatar
|
||||||
|
key={`linehistory-${1}`}
|
||||||
|
src={otherUser.picture}
|
||||||
|
shape="square"
|
||||||
|
size={'large'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span className="text-gray-600 font-semibold">{otherUser.name}</span>
|
||||||
|
|
||||||
|
<FiHeadphones className="ml-auto text-lg" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* canvas action buttons */}
|
||||||
|
<div className="flex flex-row gap-3 p-10 justify-end items-center ">
|
||||||
|
<Tooltip
|
||||||
|
placement="left"
|
||||||
|
title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className={`p-2 flex justify-center items-center shadow-lg
|
||||||
|
hover:scale-105 transition-all animate-pulse ${
|
||||||
|
isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
|
||||||
|
}`}
|
||||||
|
onClick={() =>
|
||||||
|
isUserToggleTuned
|
||||||
|
? handleUpdateLineMemberState(
|
||||||
|
selectedLine.lineDetails._id.toString(),
|
||||||
|
LineMemberState.INBOX,
|
||||||
|
)
|
||||||
|
: handleUpdateLineMemberState(
|
||||||
|
selectedLine.lineDetails._id.toString(),
|
||||||
|
LineMemberState.TUNED,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FiActivity className="text-md" />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={`p-3 flex justify-center items-center shadow-2xl
|
||||||
|
hover:scale-105 transition-all ${
|
||||||
|
isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FiSun className="text-lg" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -19,6 +19,7 @@ import { Avatar, Tooltip } from 'antd';
|
|||||||
import useStreams from '../../../../providers/StreamProvider';
|
import useStreams from '../../../../providers/StreamProvider';
|
||||||
import Peer from 'simple-peer';
|
import Peer from 'simple-peer';
|
||||||
import NewChannelForm from '../compose/NewChannelForm';
|
import NewChannelForm from '../compose/NewChannelForm';
|
||||||
|
import LineDetails from '../line/LineDetails';
|
||||||
|
|
||||||
export default function MainPanel() {
|
export default function MainPanel() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
@@ -45,274 +46,6 @@ export default function MainPanel() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LineDetails() {
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms();
|
|
||||||
|
|
||||||
const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]);
|
|
||||||
|
|
||||||
const isUserToggleTuned = useMemo(
|
|
||||||
() => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
|
|
||||||
[selectedLine],
|
|
||||||
);
|
|
||||||
|
|
||||||
const { peerMap } = useStreams();
|
|
||||||
|
|
||||||
// seeing if I am in the list of broadcasters
|
|
||||||
// the source of truth from the socket connections telling me if my clicking actually made a round trip
|
|
||||||
const isUserBroadcasting = useMemo(
|
|
||||||
() => selectedLine?.currentBroadcastersUserIds?.includes(user._id.toString()),
|
|
||||||
[user, selectedLine],
|
|
||||||
);
|
|
||||||
|
|
||||||
// showing all tuned in members...they may not hear me since they might be doing something else
|
|
||||||
// but feeling of presentness
|
|
||||||
const tunedProfiles = useMemo(() => {
|
|
||||||
const pictureSources: { name: string; pictureSrc: string }[] = [];
|
|
||||||
|
|
||||||
selectedLine.tunedInMemberIds?.forEach((tunedInMemberUserId) => {
|
|
||||||
// don't want to see my own picture
|
|
||||||
// TODO: don't show myself!?
|
|
||||||
if (tunedInMemberUserId === user._id.toString()) {
|
|
||||||
pictureSources.push();
|
|
||||||
|
|
||||||
pictureSources.push({
|
|
||||||
name: user.givenName,
|
|
||||||
pictureSrc: user.picture,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const otherUserObject = selectedLine.otherUserObjects?.find(
|
|
||||||
(userObj) => userObj._id.toString() === tunedInMemberUserId,
|
|
||||||
);
|
|
||||||
if (otherUserObject?.picture)
|
|
||||||
pictureSources.push({
|
|
||||||
name: otherUserObject.givenName,
|
|
||||||
pictureSrc: otherUserObject.picture,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return pictureSources;
|
|
||||||
}, [selectedLine, user]);
|
|
||||||
|
|
||||||
// pics for the line icons
|
|
||||||
const profilePictures = useMemo(() => {
|
|
||||||
const pictureSources: string[] = [];
|
|
||||||
|
|
||||||
// ?don't add in my image as that's useless contextually?
|
|
||||||
// if (userData?.user?.picture) pictureSources.push(userData.user.picture);
|
|
||||||
|
|
||||||
selectedLine.otherUserObjects?.forEach((otherUser) => {
|
|
||||||
if (otherUser.picture) pictureSources.push(otherUser.picture);
|
|
||||||
});
|
|
||||||
|
|
||||||
return pictureSources;
|
|
||||||
}, [selectedLine]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col flex-1 bg-white relative">
|
|
||||||
{/* line details */}
|
|
||||||
<div
|
|
||||||
className="p-5 z-30
|
|
||||||
flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group"
|
|
||||||
>
|
|
||||||
{profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
|
|
||||||
|
|
||||||
<div className="ml-2 mr-auto flex flex-col items-start ">
|
|
||||||
<span className="flex flex-row gap-2 items-center">
|
|
||||||
<h2 className={`text-md text-gray-800 font-semibold`}>
|
|
||||||
{selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
|
|
||||||
transition-all hover:scale-105`}
|
|
||||||
>
|
|
||||||
<FiSettings className="text-gray-400 text-xs" />
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={user.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'large'}
|
|
||||||
// grayscale if not playing?
|
|
||||||
className={`shadow-lg`}
|
|
||||||
/>
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={otherUser.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'large'}
|
|
||||||
className={`shadow-lg`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Avatar.Group>
|
|
||||||
|
|
||||||
<span className="px-10 text-gray-200"> | </span>
|
|
||||||
|
|
||||||
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={otherUser.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'default'}
|
|
||||||
// grayscale if not playing?
|
|
||||||
className={`${true && 'grayscale'}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Avatar.Group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* main canvas */}
|
|
||||||
<div className="flex flex-col flex-1">
|
|
||||||
{/* line timeline */}
|
|
||||||
<div
|
|
||||||
className="flex-1 flex flex-col justify-start items-center gap-2 p-5 mx-auto
|
|
||||||
max-w-lg w-full bg-white"
|
|
||||||
>
|
|
||||||
<span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
|
|
||||||
|
|
||||||
<span className={'text-gray-300 text-sm'}>yesterday</span>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`rounded flex flex-row items-center gap-2 w-full
|
|
||||||
p-5 border-gray-200 border`}
|
|
||||||
>
|
|
||||||
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={otherUser.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'default'}
|
|
||||||
// grayscale if not playing?
|
|
||||||
className={`${true && 'grayscale'}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Avatar.Group>
|
|
||||||
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<span key={`chunk-${otherUser.name}`} className="text-gray-500">
|
|
||||||
{`${otherUser.givenName}, `}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<span className="ml-auto text-xs text-gray-300">{`${
|
|
||||||
Math.floor(Math.random() * 10) + 1
|
|
||||||
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
|
||||||
|
|
||||||
<span className="text-gray-400 text-md">{`${
|
|
||||||
Math.floor(Math.random() * 60) + 1
|
|
||||||
} seconds`}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span className={'text-gray-300 text-sm'}>today</span>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`rounded flex flex-row items-center gap-2 w-full shadow-lg p-5
|
|
||||||
border-gray-200 border`}
|
|
||||||
>
|
|
||||||
<Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={otherUser.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'default'}
|
|
||||||
// grayscale if not playing?
|
|
||||||
className={`${true && 'grayscale'}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Avatar.Group>
|
|
||||||
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<span key={`chunk-${otherUser.name}`} className="text-gray-500">
|
|
||||||
{`${otherUser.givenName}, `}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<span className="ml-auto text-xs text-gray-300">{`${
|
|
||||||
Math.floor(Math.random() * 10) + 1
|
|
||||||
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
|
||||||
|
|
||||||
<span className="text-gray-400 text-md">{`${
|
|
||||||
Math.floor(Math.random() * 60) + 1
|
|
||||||
} seconds`}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span className={'text-teal-500 text-sm flex flex-row gap-2 items-center mt-5'}>
|
|
||||||
<FiSun />
|
|
||||||
<span>right now</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* live broadcasters */}
|
|
||||||
<div className="flex flex-col w-full gap-2 shadow-2xl border border-teal-500 rounded">
|
|
||||||
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
||||||
<div key={otherUser.email} className="flex flex-row items-center gap-2 p-4">
|
|
||||||
<Avatar
|
|
||||||
key={`linehistory-${1}`}
|
|
||||||
src={otherUser.picture}
|
|
||||||
shape="square"
|
|
||||||
size={'large'}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span className="text-gray-600 font-semibold">{otherUser.name}</span>
|
|
||||||
|
|
||||||
<FiHeadphones className="ml-auto text-lg" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* canvas action buttons */}
|
|
||||||
<div className="flex flex-row gap-3 p-10 justify-end items-center ">
|
|
||||||
<Tooltip
|
|
||||||
placement="left"
|
|
||||||
title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className={`p-2 flex justify-center items-center shadow-lg
|
|
||||||
hover:scale-105 transition-all animate-pulse ${
|
|
||||||
isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
|
|
||||||
}`}
|
|
||||||
onClick={() =>
|
|
||||||
isUserToggleTuned
|
|
||||||
? handleUpdateLineMemberState(
|
|
||||||
selectedLine.lineDetails._id.toString(),
|
|
||||||
LineMemberState.INBOX,
|
|
||||||
)
|
|
||||||
: handleUpdateLineMemberState(
|
|
||||||
selectedLine.lineDetails._id.toString(),
|
|
||||||
LineMemberState.TUNED,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<FiActivity className="text-md" />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className={`p-3 flex justify-center items-center shadow-2xl
|
|
||||||
hover:scale-105 transition-all ${
|
|
||||||
isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FiSun className="text-lg" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LineStreams({ broadcasters }: { broadcasters: string[] }) {
|
function LineStreams({ broadcasters }: { broadcasters: string[] }) {
|
||||||
const { peerMap } = useStreams();
|
const { peerMap } = useStreams();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user