upd
This commit is contained in:
@@ -12,10 +12,11 @@ import useChatStore from "../stores/useChatStore";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
interface Props {
|
||||
isFullscreen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function Chat2({ onClose }: Props) {
|
||||
function Chat2({ isFullscreen, onClose }: Props) {
|
||||
const { socket } = useSocketStore();
|
||||
const { me, users } = useStreamUserStore();
|
||||
// const [messages] = useStateRef<IMessage[]>([]);
|
||||
@@ -45,7 +46,9 @@ function Chat2({ onClose }: Props) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`chat lg:relative absolute right-0 lg:h-[calc(100dvh-48px)] h-dvh flex flex-col w-[296px] bg-white border-t border-[#DAE0E5]`}
|
||||
className={`chat lg:relative absolute right-0 ${
|
||||
!isFullscreen ? "lg:h-[calc(100dvh-48px)]" : ""
|
||||
} h-dvh flex flex-col w-[296px] bg-white border-t border-[#DAE0E5]`}
|
||||
>
|
||||
<div className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between border-b border-[#DAE0E5] pb-4">
|
||||
|
||||
@@ -38,7 +38,7 @@ function User({ me, user, handleTransferControl, handleKick }: Props) {
|
||||
</div>
|
||||
|
||||
{me.isAdmin && (
|
||||
<div ref={ref} className="relative z-10">
|
||||
<div ref={ref} className="relative">
|
||||
<Button
|
||||
variant="tertiary"
|
||||
icon={<MoreIcon />}
|
||||
|
||||
+145
-119
@@ -374,149 +374,175 @@ function StreamPage() {
|
||||
return (
|
||||
<div
|
||||
ref={fullscreenRef}
|
||||
className="h-[100dvh] flex lg:flex-col bg-[#111C26] overflow-hidden"
|
||||
className="h-dvh flex lg:flex-col bg-[#111C26] overflow-hidden"
|
||||
>
|
||||
{isEnded === false && (
|
||||
<>
|
||||
<div className="flex items-center justify-between w-12 bg-white max-lg:flex-col lg:h-12 lg:w-auto lg:px-6 max-lg:py-2">
|
||||
<div className="lg:pr-6">
|
||||
<img
|
||||
src="/images/logo24.svg"
|
||||
alt=""
|
||||
className="hidden lg:block"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="items-center hidden gap-2 lg:flex">
|
||||
<div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold">
|
||||
{name[0]?.toUpperCase()}
|
||||
</p>
|
||||
{me?.isControlAllowed && (
|
||||
<div className="absolute bottom-0 right-0 bg-[#49A1F5] w-2 h-2 rounded-full border border-white"></div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs">{name}</p>
|
||||
<div className="text-[#CCCCCC]">
|
||||
{isMobile ? <MobileIcon /> : <DesktopIcon />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 max-lg:flex-col">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={
|
||||
me?.isControlAllowed ? <HandOnIcon /> : <HandOffIcon />
|
||||
}
|
||||
onlyIcon
|
||||
onClick={() =>
|
||||
me!.isAdmin
|
||||
? transferControl(me!.id)
|
||||
: requestControl(me!.id)
|
||||
}
|
||||
{me && (
|
||||
<>
|
||||
<div
|
||||
className={`flex items-center justify-between ${
|
||||
isFullscreen ? "fixed z-10 top-2 min-w-[744px] rounded-lg left-1/2 -translate-x-1/2" : ""
|
||||
} bg-white max-lg:flex-col lg:h-12 lg:w-auto lg:px-6 max-lg:py-2`}
|
||||
>
|
||||
<div className="lg:pr-6">
|
||||
<img
|
||||
src="/images/logo24.svg"
|
||||
alt=""
|
||||
className="hidden lg:block"
|
||||
/>
|
||||
{me?.isAdmin && !me.isControlAllowed && (
|
||||
<Tooltip text={"Вернуть управление"} />
|
||||
)}
|
||||
|
||||
{!me?.isAdmin && !me?.isControlAllowed && (
|
||||
<Tooltip text={"Запросить управление"} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{permission && (
|
||||
<>
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={isMicEnabled ? <MicroOnIcon /> : <MicroOffIcon />}
|
||||
onlyIcon
|
||||
onClick={toggleMic}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isMicEnabled
|
||||
? "Выключить микрофон"
|
||||
: "Включить микрофон"
|
||||
}
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="items-center hidden gap-2 lg:flex">
|
||||
<div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold">
|
||||
{name[0]?.toUpperCase()}
|
||||
</p>
|
||||
{me?.isControlAllowed && (
|
||||
<div className="absolute bottom-0 right-0 bg-[#49A1F5] w-2 h-2 rounded-full border border-white"></div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs">{name}</p>
|
||||
<div className="text-[#CCCCCC]">
|
||||
{isMobile ? <MobileIcon /> : <DesktopIcon />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 max-lg:flex-col">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={
|
||||
isCameraEnabled ? <CameraOnIcon /> : <CameraOffIcon />
|
||||
me?.isControlAllowed ? (
|
||||
<HandOnIcon />
|
||||
) : (
|
||||
<HandOffIcon />
|
||||
)
|
||||
}
|
||||
onlyIcon
|
||||
onClick={toggleCamera}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isCameraEnabled
|
||||
? "Выключить камеру"
|
||||
: "Включить камеру"
|
||||
onClick={() =>
|
||||
me!.isAdmin
|
||||
? transferControl(me!.id)
|
||||
: requestControl(me!.id)
|
||||
}
|
||||
/>
|
||||
{me?.isAdmin && !me.isControlAllowed && (
|
||||
<Tooltip text={"Вернуть управление"} />
|
||||
)}
|
||||
|
||||
{!me?.isAdmin && !me?.isControlAllowed && (
|
||||
<Tooltip text={"Запросить управление"} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-4 w-px bg-[#DAE0E5] lg:block hidden"></div>
|
||||
<div className="hidden gap-6 lg:flex">
|
||||
{me &&
|
||||
users.map((user) => {
|
||||
if (user.id !== userId) {
|
||||
return (
|
||||
<User
|
||||
me={me}
|
||||
user={user}
|
||||
handleTransferControl={() => transferControl(user.id)}
|
||||
handleKick={() => kick(user.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 lg:gap-4 max-lg:flex-col lg:ml-auto">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<ChatIcon />}
|
||||
onlyIcon
|
||||
onClick={() => setIsShowChat((prev) => !prev)}
|
||||
/>
|
||||
<Tooltip text={isShowChat ? "Скрыть чат" : "Показать чат"} />
|
||||
</div>
|
||||
<div className="w-px h-4 bg-[#DAE0E5] max-lg:hidden"></div>
|
||||
<div className="flex gap-2 max-lg:flex-col lg:ml-auto">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<ShareIcon />}
|
||||
onlyIcon
|
||||
onClick={() => setModal(<InviteModal />)}
|
||||
/>
|
||||
<Tooltip text={"Поделиться"} />
|
||||
|
||||
{permission && (
|
||||
<>
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={
|
||||
isMicEnabled ? <MicroOnIcon /> : <MicroOffIcon />
|
||||
}
|
||||
onlyIcon
|
||||
onClick={toggleMic}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isMicEnabled
|
||||
? "Выключить микрофон"
|
||||
: "Включить микрофон"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={
|
||||
isCameraEnabled ? (
|
||||
<CameraOnIcon />
|
||||
) : (
|
||||
<CameraOffIcon />
|
||||
)
|
||||
}
|
||||
onlyIcon
|
||||
onClick={toggleCamera}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isCameraEnabled
|
||||
? "Выключить камеру"
|
||||
: "Включить камеру"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-4 w-px bg-[#DAE0E5] lg:block hidden"></div>
|
||||
<div className="hidden gap-6 lg:flex">
|
||||
{me &&
|
||||
users.map((user) => {
|
||||
if (user.id !== userId) {
|
||||
return (
|
||||
<User
|
||||
me={me}
|
||||
user={user}
|
||||
handleTransferControl={() =>
|
||||
transferControl(user.id)
|
||||
}
|
||||
handleKick={() => kick(user.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{!isIOS && (
|
||||
<div className="flex items-center gap-2 lg:gap-4 max-lg:flex-col lg:ml-auto">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={isFullscreen ? <WindowIcon /> : <FullscreenIcon />}
|
||||
icon={<ChatIcon />}
|
||||
onlyIcon
|
||||
onClick={toggleFullscreen}
|
||||
onClick={() => setIsShowChat((prev) => !prev)}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isFullscreen ? "Оконный режим" : "Полноэкранный режим"
|
||||
}
|
||||
text={isShowChat ? "Скрыть чат" : "Показать чат"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-px h-4 bg-[#DAE0E5] max-lg:hidden"></div>
|
||||
<div className="flex gap-2 max-lg:flex-col lg:ml-auto">
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<ShareIcon />}
|
||||
onlyIcon
|
||||
onClick={() => setModal(<InviteModal />)}
|
||||
/>
|
||||
<Tooltip text={"Поделиться"} />
|
||||
</div>
|
||||
{!isIOS && (
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={
|
||||
isFullscreen ? <WindowIcon /> : <FullscreenIcon />
|
||||
}
|
||||
onlyIcon
|
||||
onClick={toggleFullscreen}
|
||||
/>
|
||||
<Tooltip
|
||||
text={
|
||||
isFullscreen
|
||||
? "Оконный режим"
|
||||
: "Полноэкранный режим"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="relative flex flex-1">
|
||||
{WSUrl && (
|
||||
<PixelStreamingWrapper2
|
||||
@@ -574,7 +600,7 @@ function StreamPage() {
|
||||
</div>
|
||||
</Draggable>
|
||||
|
||||
{isShowChat && <Chat2 onClose={() => setIsShowChat(false)} />}
|
||||
{isShowChat && <Chat2 isFullscreen={isFullscreen} onClose={() => setIsShowChat(false)} />}
|
||||
</div>
|
||||
|
||||
{isPortrait && (
|
||||
|
||||
Reference in New Issue
Block a user