Merge pull request #356 from mynaparrot/improve

feat: notification for room duration

src/assets/locales/en/translation.json

@@ -42,7 +42,8 @@
     "need-to-disable-display-external-link": "Display External Link is turned on. Please stop it before launching External Media Player.",
     "need-to-disable-external-media-player": "External Media Player is turned on. Please stop it before launching Display External Link.",
     "websocket-disconnected": "Websocket disconnected, reconnecting..",
-    "websocket-error": "Error in Websocket."
+    "websocket-error": "Error in Websocket.",
+    "room-will-end-in": "This room will be ended in {{minutes}} minutes"
   },
   "room-metadata": {
     "session-recording": "This session is being recording",

src/components/header/durationView.tsx

@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+
 import { store } from '../../store';
 
 interface IDurationViewProps {
   duration: number;
 }
 const DurationView = ({ duration }: IDurationViewProps) => {
+  const { t } = useTranslation();
+  const isRecorder = store.getState().session.currentUser?.isRecorder;
+
   const [remaining, setRemaining] = useState<string>('00:00');
+  // if duration is less than 60 minutes then we'll show clock only.
+  const [showClock, setShowClock] = useState<boolean>(false);
 
   useEffect(() => {
     const startedAt = store.getState().session.currentRoom.metadata?.started_at;
@@ -22,6 +30,9 @@ const DurationView = ({ duration }: IDurationViewProps) => {
       seconds = seconds < 10 ? '0' + seconds : seconds;
 
       setRemaining(minutes + ':' + seconds);
+      if (minutes < 60) {
+        setShowClock(true);
+      }
       if (diff <= 0) {
         setRemaining('00:00');
       }
@@ -38,11 +49,34 @@ const DurationView = ({ duration }: IDurationViewProps) => {
     };
   }, [duration]);
 
+  useEffect(() => {
+    if (isRecorder) {
+      return;
+    }
+
+    switch (remaining) {
+      case '60:00':
+      case '30:00':
+      case '10:00':
+      case '5:00':
+        toast(
+          t('notifications.room-will-end-in', {
+            minutes: remaining,
+          }),
+          {
+            type: 'warning',
+          },
+        );
+    }
+  }, [isRecorder, remaining, t]);
+
   return (
     <>
-      <div className="timer text-xs md:text-sm border border-solid border-primaryColor dark:border-darkText/80 dark:text-darkText/80 sm:py-[2px] px-3 rounded-lg mt-[2px] mr-[6px]">
-        {remaining}
-      </div>
+      {showClock ? (
+        <div className="timer text-xs md:text-sm border border-solid border-primaryColor dark:border-darkText/80 dark:text-darkText/80 sm:py-[2px] px-3 rounded-lg mt-[2px] mr-[6px]">
+          {remaining}
+        </div>
+      ) : null}
     </>
   );
 };