Merge pull request #382 from mynaparrot/FeatureUpdate

issue fix and design update
mynaparrot · Apr 1, 2023 · b124317 · b124317
2 parents 559271f + 8796084
commit b124317
Show file tree

Hide file tree

Showing 22 changed files with 165 additions and 49 deletions.
diff --git a/src/assets/locales/ar-SA/translation.json b/src/assets/locales/ar-SA/translation.json
@@ -111,7 +111,7 @@
     "loading": "loading...",
     "connected": "connected",
     "ready": "ready",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page.",
     "require-ssl-title": "يجب تمكين SSL للمجال",
     "require-ssl-des": "مطلوب استخدام نطاق مزود بـ SSL غير المضيف المحلي."
   },

diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -123,7 +123,7 @@
     "loading": "loading...",
     "connected": "connected",
     "ready": "ready",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page.",
     "require-ssl-title": "Domain must be SSL enabled",
     "require-ssl-des": "It is required to use an SSL-enabled domain other than localhost."
   },

diff --git a/src/assets/locales/fr-FR/translation.json b/src/assets/locales/fr-FR/translation.json
@@ -111,7 +111,7 @@
     "loading": "chargement en cours...",
     "connected": "lié",
     "ready": "prêt",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page.",
     "require-ssl-title": "Domain must be SSL enabled",
     "require-ssl-des": "It is required to use an SSL-enabled domain other than localhost."
   },

diff --git a/src/assets/locales/ja-JP/translation.json b/src/assets/locales/ja-JP/translation.json
@@ -111,7 +111,7 @@
     "loading": "loading...",
     "connected": "connected",
     "ready": "ready",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page.",
     "require-ssl-title": "Domain must be SSL enabled",
     "require-ssl-des": "It is required to use an SSL-enabled domain other than localhost."
   },

diff --git a/src/assets/locales/nl-NL/translation.json b/src/assets/locales/nl-NL/translation.json
@@ -111,7 +111,7 @@
     "loading": "loading...",
     "connected": "connected",
     "ready": "ready",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page.",
     "require-ssl-title": "Domain must be SSL enabled",
     "require-ssl-des": "It is required to use an SSL-enabled domain other than localhost."
   },

diff --git a/src/assets/locales/zh-TW/translation.json b/src/assets/locales/zh-TW/translation.json
@@ -111,7 +111,7 @@
     "loading": "下載中...",
     "connected": "已連接",
     "ready": "就緒",
-    "webcams-per-page": "Display per page:",
+    "webcams-per-page": "Per page",
     "require-ssl-title": "Domain must be SSL enabled",
     "require-ssl-des": "It is required to use an SSL-enabled domain other than localhost."
   },

diff --git a/src/components/footer/icons/chat.tsx b/src/components/footer/icons/chat.tsx
@@ -60,7 +60,7 @@ const ChatIcon = () => {
         }`}
         onClick={() => toggleChatPanel()}
       >
-        <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
+        <span className="tooltip">
           {isActiveChatPanel
             ? t('footer.icons.hide-chat-panel')
             : t('footer.icons.show-chat-panel')}

diff --git a/src/components/footer/icons/microphone.tsx b/src/components/footer/icons/microphone.tsx
@@ -148,9 +148,7 @@ const MicrophoneIcon = ({ currentRoom }: IMicrophoneIconProps) => {
         }`}
         onClick={() => manageMic()}
       >
-        <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
-          {getTooltipText()}
-        </span>
+        <span className="tooltip">{getTooltipText()}</span>
 
         {!isActiveMicrophone ? (
           <>

diff --git a/src/components/footer/icons/participant.tsx b/src/components/footer/icons/participant.tsx
@@ -49,7 +49,7 @@ const ParticipantIcon = () => {
       }`}
       onClick={() => toggleParticipantsPanel()}
     >
-      <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
+      <span className="tooltip">
         {isActiveParticipantsPanel
           ? t('footer.icons.hide-users-list')
           : t('footer.icons.show-users-list')}

diff --git a/src/components/footer/icons/raisehand.tsx b/src/components/footer/icons/raisehand.tsx
@@ -107,7 +107,7 @@ const RaiseHandIcon = ({ currentRoom }: IRaiseHandIconProps) => {
       }`}
       onClick={() => toggleRaiseHand()}
     >
-      <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
+      <span className="tooltip !bottom-[62px]">
         {isActiveRaisehand
           ? t('footer.icons.lower-hand')
           : t('footer.icons.raise-hand')}

diff --git a/src/components/footer/icons/recording.tsx b/src/components/footer/icons/recording.tsx
@@ -230,7 +230,7 @@ const RecordingIcon = ({ currentRoom }: IRecordingIconProps) => {
           onClick={() => onClickRecordingBtn()}
           disabled={disable}
         >
-          <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
+          <span className="tooltip !bottom-[62px]">
             {isRecording
               ? t('footer.icons.stop-recording')
               : t('footer.icons.start-recording')}

diff --git a/src/components/footer/icons/screenshare.tsx b/src/components/footer/icons/screenshare.tsx
@@ -160,9 +160,7 @@ const ScrenshareIcon = ({ currentRoom }: IScrenshareIconProps) => {
         }`}
         onClick={() => toggleScreenShare()}
       >
-        <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
-          {text()}
-        </span>
+        <span className="tooltip">{text()}</span>
         <>
           <i
             className={`pnm-screen-share ${iconCSS} text-[14px] lg:text-[16px]`}

diff --git a/src/components/footer/icons/sharedNotePad.tsx b/src/components/footer/icons/sharedNotePad.tsx
@@ -158,9 +158,7 @@ const SharedNotePadIcon = () => {
         }`}
         onClick={() => toggleSharedNotePad()}
       >
-        <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
-          {text()}
-        </span>
+        <span className="tooltip">{text()}</span>
         <>
           <i className={`pnm-notepad ${iconCSS} text-[14px] lg:text-[16px]`} />
         </>

diff --git a/src/components/footer/icons/webcam.tsx b/src/components/footer/icons/webcam.tsx
@@ -290,7 +290,7 @@ const WebcamIcon = ({ currentRoom }: IWebcamIconProps) => {
           }`}
           onClick={() => toggleWebcam()}
         >
-          <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
+          <span className="tooltip !-left-3 tooltip-left">
             {getTooltipText()}
           </span>
 

diff --git a/src/components/footer/icons/whiteboard.tsx b/src/components/footer/icons/whiteboard.tsx
@@ -146,9 +146,7 @@ const WhiteboardIcon = () => {
         }`}
         onClick={() => toggleWhiteboard()}
       >
-        <span className="tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-darkSecondary2 text-red-500 dark:text-darkText -mt-16 text-[10px] w-max">
-          {text()}
-        </span>
+        <span className="tooltip">{text()}</span>
         <>
           <i
             className={`pnm-whiteboard ${iconCSS} text-[14px] lg:text-[16px]`}

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -75,21 +75,25 @@ const Footer = ({ currentRoom, isRecorder }: IFooterProps) => {
             </div>
           </footer>
         </Transition>
-        <div
-          className={`footer-collapse-arrow group fixed right-0 flex items-end justify-end h-6 w-6 cursor-pointer z-[1] bg-white dark:bg-darkPrimary rounded-tl-[50px] pr-1 ${
-            footerVisible ? 'bottom-[60px] pb-[3px]' : 'bottom-0 pb-1'
-          }`}
-          onClick={() => dispatch(toggleFooterVisibility())}
-        >
-          <i
-            className={` text-[10px] sm:text-[12px] dark:text-secondaryColor pnm-arrow-below ${
-              footerVisible ? '' : 'rotate-180'
+        {isRecorder ? null : (
+          <div
+            className={`footer-collapse-arrow group fixed right-0 flex items-end justify-center h-5 w-[50px] cursor-pointer z-[1] bg-white dark:bg-darkPrimary rounded-tl-lg ${
+              footerVisible ? 'bottom-[60px] pb-[3px]' : 'bottom-0 pb-[6px]'
             }`}
-          ></i>
-          <span className="absolute right-0 bottom-5 w-max text-darkPrimary dark:text-white bg-white dark:bg-darkPrimary text-[10px] py-1 px-[10px] rounded opacity-0 invisible transition-all group-hover:opacity-100 group-hover:visible">
-            {footerVisible ? t('footer.hide-footer') : t('footer.show-footer')}
-          </span>
-        </div>
+            onClick={() => dispatch(toggleFooterVisibility())}
+          >
+            <i
+              className={` text-[10px] sm:text-[12px] dark:text-secondaryColor pnm-arrow-below ${
+                footerVisible ? '' : 'rotate-180'
+              }`}
+            ></i>
+            <span className="absolute right-0 bottom-7 w-max text-darkPrimary dark:text-white bg-white dark:bg-darkPrimary text-[12px] py-1 px-[10px] rounded opacity-0 invisible transition-all group-hover:opacity-100 group-hover:visible">
+              {footerVisible
+                ? t('footer.hide-footer')
+                : t('footer.show-footer')}
+            </span>
+          </div>
+        )}
       </>
     );
     //eslint-disable-next-line

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -263,8 +263,8 @@ const Header = ({ currentRoom }: IHeaderProps) => {
         </header>
       </Transition>
       <div
-        className={`header-collapse-arrow group fixed right-0 flex items-start justify-end h-6 w-6 cursor-pointer z-[2] bg-white dark:bg-darkPrimary rounded-bl-[50px] pr-1 ${
-          headerVisible ? 'top-[50px] pt-[3px]' : 'top-0 pt-1'
+        className={`header-collapse-arrow group fixed right-0 flex items-start justify-center h-5 w-[50px] cursor-pointer z-[2] bg-white dark:bg-darkPrimary rounded-bl-lg ${
+          headerVisible ? 'top-[50px] pt-[3px]' : 'top-0 pt-[6px]'
         }`}
         onClick={() => dispatch(toggleHeaderVisibility())}
       >
@@ -273,7 +273,7 @@ const Header = ({ currentRoom }: IHeaderProps) => {
             headerVisible ? 'rotate-180' : ''
           }`}
         ></i>
-        <span className="absolute right-0 top-5 w-max bg-white text-darkPrimary dark:text-white dark:bg-darkPrimary text-[10px] py-1 px-[10px] rounded opacity-0 invisible transition-all group-hover:opacity-100 group-hover:visible">
+        <span className="absolute right-0 top-7 w-max bg-white text-darkPrimary dark:text-white dark:bg-darkPrimary text-[10px] py-1 px-[12px] rounded opacity-0 invisible transition-all group-hover:opacity-100 group-hover:visible">
           {headerVisible ? t('header.hide-header') : t('header.show-header')}
         </span>
       </div>

diff --git a/src/components/media-elements/videos/videosComponentElms.tsx b/src/components/media-elements/videos/videosComponentElms.tsx
@@ -31,7 +31,8 @@ const MOBILE_PER_PAGE = 6,
   TABLET_PER_PAGE = 9,
   DESKTOP_PER_PAGE = 24,
   VERTICAL_PER_PAGE = 3,
-  VERTICAL_TOP_BOTTOM_PER_PAGE = 8;
+  VERTICAL_TOP_BOTTOM_PER_PAGE = 8,
+  VERTICAL_TABLET_PORTRAIT = 5;
 
 const screenWidthSelector = createSelector(
   (state: RootState) => state.bottomIconsActivity.screenWidth,
@@ -80,6 +81,12 @@ const VideosComponentElms = ({
           setWebcamPerPage(VERTICAL_TOP_BOTTOM_PER_PAGE);
           return;
         }
+      } else if (
+        deviceType === UserDeviceType.TABLET &&
+        deviceOrientation === 'portrait'
+      ) {
+        setWebcamPerPage(VERTICAL_TABLET_PORTRAIT);
+        return;
       }
       setWebcamPerPage(VERTICAL_PER_PAGE);
       return;
@@ -107,7 +114,7 @@ const VideosComponentElms = ({
       }
     }
     //eslint-disable-next-line
-  }, [isVertical, screenWidth, columnCameraPosition]);
+  }, [isVertical, screenWidth, columnCameraPosition, deviceOrientation]);
 
   const setParticipantsToDisplay = (
     [...allParticipants]: Array<JSX.Element>,
@@ -235,7 +242,6 @@ const VideosComponentElms = ({
       totalNumWebcams > 6 &&
       !isVertical ? (
         <div className="select-camera-number">
-          <label htmlFor="select-camera-num">{t('app.webcams-per-page')}</label>
           <select
             name="select-camera-num"
             id="select-camera-num"
@@ -249,6 +255,7 @@ const VideosComponentElms = ({
             <option value="18">18</option>
             <option value="24">24</option>
           </select>
+          <label htmlFor="select-camera-num">{t('app.webcams-per-page')}</label>
         </div>
       ) : null}
     </>

diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -299,9 +299,9 @@ code {
   }
 }
 .select-camera-number {
-  @apply flex items-center absolute right-6 text-xs top-0;
+  @apply flex items-center absolute left-6 text-xs top-0;
   select#select-camera-num {
-    @apply bg-transparent border border-solid border-[#333] ml-[5px] outline-none;
+    @apply bg-transparent border border-solid border-[#333] mr-[5px] outline-none;
   }
 }
 .video-camera-item {
@@ -393,7 +393,29 @@ code {
 
 // Tool Tip
 .tooltip {
-  @apply invisible absolute;
+  @apply invisible absolute shadow-lg rounded text-[13px] text-darkPrimary dark:text-darkText py-[6px] px-[10px] inline-block bg-gray-100 dark:bg-darkSecondary2 w-[150px] m-0 bottom-[52px] text-center;
+  &::before {
+    content: '';
+    @apply absolute h-[12px] w-[12px] bg-gray-100 dark:bg-darkSecondary2 bottom-[-6px] left-0 right-0 m-auto rotate-45 border border-solid border-darkPrimary/40;
+  }
+  &::after {
+    content: '';
+    @apply absolute h-2 w-full bg-gray-100 dark:bg-darkSecondary2 left-0 bottom-0 rounded;
+  }
+}
+.tooltip-left {
+  &::before {
+    left: 24px !important;
+    right: auto !important;
+  }
+}
+html[dir='rtl'] span.tooltip.tooltip-left {
+  right: -34px !important;
+  left: auto !important;
+}
+html[dir='rtl'] span.tooltip.tooltip-left::before {
+  left: auto !important;
+  right: 45px !important;
 }
 .has-tooltip {
   &:hover {
@@ -753,7 +775,7 @@ aside {
         .all-webcam-wrapper-inner {
           @apply m-0 py-0 px-[15px] flex-wrap gap-0;
           .video-camera-item {
-            @apply w-full m-[5px] h-[100px] pb-0 max-w-[150px];
+            @apply w-full m-[5px] h-[100px] pb-0 max-w-[135px];
           }
         }
       }
@@ -796,3 +818,42 @@ aside {
     @apply mt-4;
   }
 }
+.message-form {
+  textarea#message-textarea {
+    color: #004d90;
+  }
+  textarea#message-textarea::placeholder {
+    color: #004d90aa;
+  }
+}
+
+.dark {
+  .message-form {
+    textarea#message-textarea,
+    textarea#message-textarea::placeholder {
+      color: #fff;
+    }
+  }
+}
+.is-mobile {
+  .footer-collapse-arrow,
+  .header-collapse-arrow {
+    display: none;
+  }
+}
+.portrait-device.is-tablet {
+  .footer-collapse-arrow,
+  .header-collapse-arrow {
+    display: none;
+  }
+}
+.footer-collapse-arrow span::before,
+.header-collapse-arrow span::before {
+  content: '';
+  bottom: -6px;
+  @apply absolute w-[10px] h-[10px] bg-white dark:bg-darkPrimary right-5 rotate-45;
+}
+.header-collapse-arrow span::before {
+  bottom: auto;
+  top: -5px;
+}
diff --git a/src/styles/media_screens/max_1025.scss b/src/styles/media_screens/max_1025.scss
@@ -5,4 +5,8 @@
   button.next-cam {
     @apply w-[95px] h-[25px] -right-[43px];
   }
+  .footer-collapse-arrow,
+  .header-collapse-arrow {
+    display: none;
+  }
 }