upd

package.json

@@ -10,8 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^1.0.6",
+    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^1.0.8",
-    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "^0.1.4",
     "@uidotdev/usehooks": "^2.4.1",
     "ahooks": "^3.7.10",
     "date-fns": "^2.30.0",

src/components/Chat2.tsx

@@ -12,11 +12,10 @@ import useChatStore from "../stores/useChatStore";
 import { isMobile } from "react-device-detect";
 
 interface Props {
-  isFullscreen: boolean;
   onClose: () => void;
 }
 
-function Chat2({ isFullscreen, onClose }: Props) {
+function Chat2({ onClose }: Props) {
   const { socket } = useSocketStore();
   const { me, users } = useStreamUserStore();
   // const [messages] = useStateRef<IMessage[]>([]);
@@ -46,9 +45,7 @@ function Chat2({ isFullscreen, onClose }: Props) {
 
   return (
     <div
-      className={`chat lg:relative absolute right-0 ${
+      className={`chat fixed top-0 right-0 h-dvh flex flex-col w-[296px] bg-white border-t border-[#DAE0E5]`}
-        !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">

src/components/PixelStreamingWrapper.tsx

@@ -91,13 +91,13 @@ export const PixelStreamingWrapper = ({
         }}
       />
       {!isVideoInitialized && (
-        <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+        <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full">
           <p className="flex items-center gap-4">
             <span>
               <img
                 src="/icons/Loader.png"
                 alt=""
-                className="animate-spin w-6 h-6"
+                className="w-6 h-6 animate-spin"
               />
             </span>
             <Trans i18nKey="streamBuffering">Буферизация потока</Trans>
@@ -124,7 +124,7 @@ export const PixelStreamingWrapper = ({
             setClickToPlayVisible(false);
           }}
         >
-          <div className="bg-gradient rounded px-4 py-2 opacity-95 hover:opacity-100 transition-opacity">
+          <div className="px-4 py-2 transition-opacity rounded bg-gradient opacity-95 hover:opacity-100">
             <p>
               <Trans i18nKey="clickToContinue">Нажмите, чтобы продолжить</Trans>
             </p>

src/pages/StreamPage.tsx

@@ -378,18 +378,25 @@ function StreamPage() {
     >
       {isEnded === false && (
         <>
-          {me && (
+          <Draggable
-            <>
+            disabled={isMobile}
+            positionOffset={!isMobile ? { x: "-50%", y: 0 } : { x: 0, y: 0 }}
+            defaultClassName={`cursor-grab lg:fixed top-2 left-1/2 z-10 transition-opacity transition-opacity ${
+              me ? "opacity-100" : "opacity-0"
+            }`}
+            defaultClassNameDragging="cursor-grabbing"
+          >
+            <div
+              className={`bg-white max-lg:flex-col lg:h-12 lg:px-6 px-2 max-lg:py-2 lg:min-w-[744px] lg:rounded-lg flex flex-col`}
+            >
               <div
-                className={`flex items-center justify-between ${
+                className={`flex items-center justify-between flex-1 max-lg:flex-col`}
-                  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"
+                    className="hidden pointer-events-none lg:block"
                   />
                 </div>
                 <div className="flex items-center gap-4">
@@ -541,8 +548,8 @@ function StreamPage() {
                   </div>
                 </div>
               </div>
-            </>
+            </div>
-          )}
+          </Draggable>
           <div className="relative flex flex-1">
             {WSUrl && (
               <PixelStreamingWrapper2
@@ -569,7 +576,9 @@ function StreamPage() {
               )}
 
             <Draggable
-              defaultClassName="cursor-grab"
+              defaultClassName={`cursor-grab transition-opacity ${
+                me ? "opacity-100" : "opacity-0"
+              }`}
               defaultClassNameDragging="cursor-grabbing"
             >
               <div className="absolute space-y-2 top-2 lg:left-2 max-lg:right-2">
@@ -599,10 +608,10 @@ function StreamPage() {
                 ))}
               </div>
             </Draggable>
-
-            {isShowChat && <Chat2 isFullscreen={isFullscreen} onClose={() => setIsShowChat(false)} />}
           </div>
 
+          {isShowChat && <Chat2 onClose={() => setIsShowChat(false)} />}
+
           {isPortrait && (
             <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full gap-2 bg-white">
               <Rotate64Icon />

yarn.lock

@@ -31,28 +31,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
   integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
-"@epicgames-ps/lib-pixelstreamingcommon-ue5.5@^0.0.14":
+"@epicgames-ps/lib-pixelstreamingfrontend-ue5.3@^1.0.8":
-  version "0.0.14"
+  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@epicgames-ps/lib-pixelstreamingcommon-ue5.5/-/lib-pixelstreamingcommon-ue5.5-0.0.14.tgz#bb719f1ed1da509888774f22820207e6c82de626"
+  resolved "https://registry.yarnpkg.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.3/-/lib-pixelstreamingfrontend-ue5.3-1.0.8.tgz#d46b49917b01ecb0a022bc67074630db65924856"
-  integrity sha512-GXu1GJUfXAWnTHylBYAfvE9SVPXl8B6ovD/6CbQh0AXxktadbA4KsDbuEFuZHIVEVLLn6vXsBkkKf7yZODphOQ==
+  integrity sha512-1dIvu/So6bUKSFi2xh1cUbcPdCAEKccJUSeWs3vmlSf3xwsi6O4dTKr44Gxxq5szg5F4lxQxVPrO5rrtWeDy4Q==
   dependencies:
-    "@protobuf-ts/plugin" "^2.9.3"
-    "@types/ws" "^8.5.10"
-    ws "^8.17.1"
-
-"@epicgames-ps/lib-pixelstreamingfrontend-ue5.3@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.3/-/lib-pixelstreamingfrontend-ue5.3-1.0.6.tgz#8b6603e7ffc99f564576623bf94494f6f3a98ec4"
-  integrity sha512-IEeGZbSGSha+fJkIJm3VyoVAFpsqhkd5ktiV9aBeEN98wt+oKTGSJFHjXIBmyfxpZQqXmS3hrtIOUJ31XPNmdw==
-  dependencies:
-    sdp "^3.1.0"
-
-"@epicgames-ps/lib-pixelstreamingfrontend-ue5.5@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.5/-/lib-pixelstreamingfrontend-ue5.5-0.1.4.tgz#4279fb0a396e51e16567bc18f9df41860a96367d"
-  integrity sha512-1/fS60vir++vJ5n0LY4lzZEO1hdi1uMlOrD/Okbr7yT6dqRWAo7EarPlHwlIMrjxvhPe4t7Ox06CdSsZDIg7gg==
-  dependencies:
-    "@epicgames-ps/lib-pixelstreamingcommon-ue5.5" "^0.0.14"
     sdp "^3.1.0"
 
 "@esbuild/android-arm64@0.18.20":
@@ -291,42 +274,6 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@protobuf-ts/plugin-framework@^2.9.4":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/plugin-framework/-/plugin-framework-2.9.4.tgz#d7a617dedda4a12c568fdc1db5aa67d5e4da2406"
-  integrity sha512-9nuX1kjdMliv+Pes8dQCKyVhjKgNNfwxVHg+tx3fLXSfZZRcUHMc1PMwB9/vTvc6gBKt9QGz5ERqSqZc0++E9A==
-  dependencies:
-    "@protobuf-ts/runtime" "^2.9.4"
-    typescript "^3.9"
-
-"@protobuf-ts/plugin@^2.9.3":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/plugin/-/plugin-2.9.4.tgz#4e593e59013aaad313e7abbabe6e61964ef0ca28"
-  integrity sha512-Db5Laq5T3mc6ERZvhIhkj1rn57/p8gbWiCKxQWbZBBl20wMuqKoHbRw4tuD7FyXi+IkwTToaNVXymv5CY3E8Rw==
-  dependencies:
-    "@protobuf-ts/plugin-framework" "^2.9.4"
-    "@protobuf-ts/protoc" "^2.9.4"
-    "@protobuf-ts/runtime" "^2.9.4"
-    "@protobuf-ts/runtime-rpc" "^2.9.4"
-    typescript "^3.9"
-
-"@protobuf-ts/protoc@^2.9.4":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/protoc/-/protoc-2.9.4.tgz#a92262ee64d252998540238701d2140f4ffec081"
-  integrity sha512-hQX+nOhFtrA+YdAXsXEDrLoGJqXHpgv4+BueYF0S9hy/Jq0VRTVlJS1Etmf4qlMt/WdigEes5LOd/LDzui4GIQ==
-
-"@protobuf-ts/runtime-rpc@^2.9.4":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime-rpc/-/runtime-rpc-2.9.4.tgz#d6ab2316c0ba67ce5a08863bb23203a837ff2a3b"
-  integrity sha512-y9L9JgnZxXFqH5vD4d7j9duWvIJ7AShyBRoNKJGhu9Q27qIbchfzli66H9RvrQNIFk5ER7z1Twe059WZGqERcA==
-  dependencies:
-    "@protobuf-ts/runtime" "^2.9.4"
-
-"@protobuf-ts/runtime@^2.9.4":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-2.9.4.tgz#db8a78b1c409e26d258ca39464f4757d804add8f"
-  integrity sha512-vHRFWtJJB/SiogWDF0ypoKfRIZ41Kq+G9cEFj6Qm1eQaAhJ1LDFvgZ7Ja4tb3iLOQhz0PaoPnnOijF1qmEqTxg==
-
 "@remix-run/router@1.15.3":
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
@@ -433,13 +380,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
   integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
 
-"@types/node@*":
-  version "22.0.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.0.0.tgz#04862a2a71e62264426083abe1e27e87cac05a30"
-  integrity sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==
-  dependencies:
-    undici-types "~6.11.1"
-
 "@types/node@^20.11.17":
   version "20.11.28"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.28.tgz#4fd5b2daff2e580c12316e457473d68f15ee6f66"
@@ -509,13 +449,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
   integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
-"@types/ws@^8.5.10":
-  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.11.tgz#90ad17b3df7719ce3e6bc32f83ff954d38656508"
-  integrity sha512-4+q7P5h3SpJxaBft0Dzpbr6lmMaqh0Jr2tbhJZ/luAwvD7ohSCniYkwz/pLxuT2h0EOa6QADgJj1Ko+TzRfZ+w==
-  dependencies:
-    "@types/node" "*"
-
 "@typescript-eslint/eslint-plugin@^5.57.1":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
@@ -2445,11 +2378,6 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^3.9:
-  version "3.9.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
-
 typescript@^5.0.2:
   version "5.4.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
@@ -2465,11 +2393,6 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
-undici-types@~6.11.1:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.11.1.tgz#432ea6e8efd54a48569705a699e62d8f4981b197"
-  integrity sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==
-
 update-browserslist-db@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
@@ -2579,11 +2502,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@^8.17.1:
-  version "8.18.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
-  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
-
 ws@~8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"