feat: **secret feature**

src/components/Application/VideoSection/index.tsx

@@ -1,6 +1,6 @@
 import { Ref, h } from 'preact';
 import styles from '../../../styles/Application/index.module.scss';
-import { IParty, IVideo } from 'src/utils/interfaces';
+import { IParty, IUser, IVideo } from 'src/utils/interfaces';
 import { Socket } from 'socket.io-client';
 import { DefaultEventsMap } from 'socket.io/dist/typed-events';
 import { MutableRef, useEffect, useState } from 'preact/hooks';
@@ -10,11 +10,13 @@ export function VideoSection({
   party,
   video,
   video_ref,
+  user,
 }: {
   socket: Socket<DefaultEventsMap, DefaultEventsMap>;
   party?: IParty;
   video?: IVideo['data'];
   video_ref: MutableRef<HTMLVideoElement | undefined>;
+  user?: IUser
 }) {
   function debounce(func, timeout = 300) {
     let timer: any;
@@ -44,13 +46,15 @@ export function VideoSection({
   }, []);
 
   function pauseVideoSocket() {
+    if (!user?.data.user.id || user?.data.user.id > 3) return; 
     socket.emit(`video-manage-send`, {
       partyId: party?.id,
       action: `pause`,
     });
   }
 
   function resumeVideoSocket() {
+    if (!user?.data.user.id || user?.data.user.id > 3) return; 
     socket.emit(`video-manage-send`, {
       partyId: party?.id,
       action: `resume`,
@@ -59,6 +63,7 @@ export function VideoSection({
 
   // time in secs
   function seekVideoSocket(time: number) {
+    if (!user?.data.user.id || user?.data.user.id > 3) return; 
     socket.emit(`video-manage-send`, {
       partyId: party?.id,
       action: `seek`,

src/containers/pages/Application.tsx

@@ -57,6 +57,23 @@ export function Application() {
     })();
   }, []);
 
+  useEffect(() => {
+    const refreshRate = (!user?.data.user.id || user?.data.user.id > 3) ? 10000 : 1000;
+
+    const intervalId = setInterval(() => {
+      (async () => {
+        try {
+          const { data: party } = (await api.parties.get(id)).data;
+          setParty(party);
+        } catch (err) {
+          // location.href = "/"
+        }
+      })();
+    }, refreshRate)
+
+    return () => clearInterval(intervalId);
+  }, [user?.data.user.id]);
+
   useEffect(() => {
     video_ref.current?.load();
   }, [video?.url]);
@@ -112,6 +129,7 @@ export function Application() {
       <MembersSection party={party} />
       <VideoSection
         socket={socket}
+        user={user}
         party={party}
         video={video}
         video_ref={video_ref}

src/containers/pages/Home.tsx

@@ -32,20 +32,20 @@ export function Home() {
     jsx: () => h.JSX.Element;
     description: string;
   }[] = [
-    {
-      icon: ``,
-      name: `My videos`,
-      jsx: MyVideos,
-      description: `You can see all your videos here`,
-    },
+      {
+        icon: ``,
+        name: `My videos`,
+        jsx: MyVideos,
+        description: `You can see all your videos here`,
+      },
 
-    {
-      icon: ``,
-      name: `Explore`,
-      description: `Let's explore`,
-      jsx: Parties,
-    },
-  ];
+      {
+        icon: ``,
+        name: `Explore`,
+        description: `Let's explore`,
+        jsx: Parties,
+      },
+    ];
 
   const [current, setCurrent] = useState(options[0]);
 
@@ -192,7 +192,7 @@ function Parties() {
     <div class={styles.parties}>
       {parties.map((party) => (
         <div className={styles.party}>
-          <div>
+          <div style={{ flexGrow: 1, width: '100%' }}>
             <img src={party.image_url} alt="" />
             <div class={styles.name}>
               <div class={styles.title}>{party.name}</div>

src/containers/pages/Invite.tsx

@@ -64,10 +64,14 @@ export function Invite() {
               email: makeid(10) + `@gmail.com`,
               password: `password`,
             });
-            toast.success(`you will be redirected to party in 3 seconds`);
-            setTimeout(() => {
-              location.href = `/app/` + id;
-            }, 3000);
+
+            if (res) {
+              toast.success(`you will be redirected to party in 3 seconds`);
+              setTimeout(() => {
+                location.href = `/app/` + id;
+              }, 3000);
+            }
+
           }}
           type="text"
         >

src/styles/Application/chat.module.scss

@@ -1,3 +1,5 @@
+$medium: 1000px;
+
 .container {
 	width: 100%;
 	height: 100%;

src/styles/Application/index.module.scss

@@ -1,7 +1,13 @@
+$medium: 1000px;
+
 .container {
   display: flex;
   width: 100vw;
   height: 100vh;
+  @media screen and (max-width: $medium) {
+    flex-direction: column;
+    overflow-y: auto;
+  }
 }
 .wrap {
   display: flex;
@@ -24,11 +30,22 @@
   }
 }
 .chat_section {
+  @media screen and (max-width: $medium) {
+    order: 1;
+    min-width: 100%;
+    min-height: 300px;
+  }
   min-width: 522px;
   background-color: #1c1c1c;
 }
 .video_section {
-  overflow-y: scroll;
+  @media screen and (max-width: $medium) {
+    order: 2;
+    min-height: 500px;
+    overflow: hidden;
+    min-width: 100%;
+  }
+  overflow-y: auto;
   padding-bottom: 50px;
   & > video {
     max-height: 50vh;
@@ -66,6 +83,9 @@
   background-color: #161616;
 }
 .members_section {
+  @media screen and (max-width: $medium) {
+    order: 3;
+  }
   min-width: 305px;
   padding-inline: 16px;
   padding-block: 25px;

src/styles/Application/index.module.scss.d.ts

@@ -1,12 +1,12 @@
 declare const classNames: {
   readonly container: 'container';
-  readonly wrap: 'wrap';
-  readonly title: 'title';
   readonly chat_section: 'chat_section';
   readonly video_section: 'video_section';
+  readonly members_section: 'members_section';
+  readonly wrap: 'wrap';
+  readonly title: 'title';
   readonly details: 'details';
   readonly description: 'description';
-  readonly members_section: 'members_section';
   readonly head: 'head';
   readonly divider: 'divider';
   readonly members: 'members';