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