diff --git a/src/assets/locales/ar-SA/translation.json b/src/assets/locales/ar-SA/translation.json index c017a9b0..e63f22b0 100644 --- 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 index 65d11be4..8491c58a 100644 --- 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 index 53879d50..027fb974 100644 --- 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 index 1acedc0e..91b3ad73 100644 --- 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 index 05436c5a..235aa50b 100644 --- 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 index 59398770..a1698d08 100644 --- 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 index 213f7be9..f1422c71 100644 --- a/src/components/footer/icons/chat.tsx +++ b/src/components/footer/icons/chat.tsx @@ -60,7 +60,7 @@ const ChatIcon = () => { }`} onClick={() => toggleChatPanel()} > - + {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 index 9d2d802f..15f59251 100644 --- a/src/components/footer/icons/microphone.tsx +++ b/src/components/footer/icons/microphone.tsx @@ -148,9 +148,7 @@ const MicrophoneIcon = ({ currentRoom }: IMicrophoneIconProps) => { }`} onClick={() => manageMic()} > - - {getTooltipText()} - + {getTooltipText()} {!isActiveMicrophone ? ( <> diff --git a/src/components/footer/icons/participant.tsx b/src/components/footer/icons/participant.tsx index 723f5ba4..9299f7db 100644 --- a/src/components/footer/icons/participant.tsx +++ b/src/components/footer/icons/participant.tsx @@ -49,7 +49,7 @@ const ParticipantIcon = () => { }`} onClick={() => toggleParticipantsPanel()} > - + {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 index 87938b86..528a32b6 100644 --- a/src/components/footer/icons/raisehand.tsx +++ b/src/components/footer/icons/raisehand.tsx @@ -107,7 +107,7 @@ const RaiseHandIcon = ({ currentRoom }: IRaiseHandIconProps) => { }`} onClick={() => toggleRaiseHand()} > - + {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 index 4dcc10e7..9106a15e 100644 --- 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} > - + {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 index 8b414eff..65e5dc72 100644 --- a/src/components/footer/icons/screenshare.tsx +++ b/src/components/footer/icons/screenshare.tsx @@ -160,9 +160,7 @@ const ScrenshareIcon = ({ currentRoom }: IScrenshareIconProps) => { }`} onClick={() => toggleScreenShare()} > - - {text()} - + {text()} <> { }`} onClick={() => toggleSharedNotePad()} > - - {text()} - + {text()} <> diff --git a/src/components/footer/icons/webcam.tsx b/src/components/footer/icons/webcam.tsx index 9127f6ee..075a33ca 100644 --- a/src/components/footer/icons/webcam.tsx +++ b/src/components/footer/icons/webcam.tsx @@ -290,7 +290,7 @@ const WebcamIcon = ({ currentRoom }: IWebcamIconProps) => { }`} onClick={() => toggleWebcam()} > - + {getTooltipText()} diff --git a/src/components/footer/icons/whiteboard.tsx b/src/components/footer/icons/whiteboard.tsx index 3b11fcdc..1b7bc33f 100644 --- a/src/components/footer/icons/whiteboard.tsx +++ b/src/components/footer/icons/whiteboard.tsx @@ -146,9 +146,7 @@ const WhiteboardIcon = () => { }`} onClick={() => toggleWhiteboard()} > - - {text()} - + {text()} <> { -
dispatch(toggleFooterVisibility())} - > - - - {footerVisible ? t('footer.hide-footer') : t('footer.show-footer')} - -
+ onClick={() => dispatch(toggleFooterVisibility())} + > + + + {footerVisible + ? t('footer.hide-footer') + : t('footer.show-footer')} + + + )} ); //eslint-disable-next-line diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 7bee184d..523ca951 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -263,8 +263,8 @@ const Header = ({ currentRoom }: IHeaderProps) => {
dispatch(toggleHeaderVisibility())} > @@ -273,7 +273,7 @@ const Header = ({ currentRoom }: IHeaderProps) => { headerVisible ? 'rotate-180' : '' }`} > - + {headerVisible ? t('header.hide-header') : t('header.show-header')}
diff --git a/src/components/media-elements/videos/videosComponentElms.tsx b/src/components/media-elements/videos/videosComponentElms.tsx index 53562f7f..dad3b28b 100644 --- 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, @@ -235,7 +242,6 @@ const VideosComponentElms = ({ totalNumWebcams > 6 && !isVertical ? (
- +
) : null} diff --git a/src/styles/common.scss b/src/styles/common.scss index b6d8438f..d277ccc4 100644 --- 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 index 006db36c..678a5227 100644 --- 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; + } } diff --git a/src/styles/media_screens/min_1024.scss b/src/styles/media_screens/min_1024.scss index 827267e4..63c91f28 100644 --- a/src/styles/media_screens/min_1024.scss +++ b/src/styles/media_screens/min_1024.scss @@ -337,4 +337,52 @@ margin: auto; right: 0; } + .column-camera-width-medium + .all-webcam-wrapper.total-cam-1 + .all-webcam-wrapper-inner, + .column-camera-width-medium + .all-webcam-wrapper.total-cam-2 + .all-webcam-wrapper-inner, + .column-camera-width-medium + .all-webcam-wrapper.total-cam-3 + .all-webcam-wrapper-inner, + .column-camera-width-medium + .all-webcam-wrapper.total-cam-4 + .all-webcam-wrapper-inner, + .column-camera-width-medium + .all-webcam-wrapper.total-cam-5 + .all-webcam-wrapper-inner, + .column-camera-width-medium + .all-webcam-wrapper.total-cam-6 + .all-webcam-wrapper-inner { + width: 80%; + margin: auto; + height: 90%; + } + .column-camera-width-small + .all-webcam-wrapper.total-cam-1 + .all-webcam-wrapper-inner, + .column-camera-width-small + .all-webcam-wrapper.total-cam-2 + .all-webcam-wrapper-inner, + .column-camera-width-small + .all-webcam-wrapper.total-cam-3 + .all-webcam-wrapper-inner { + width: 60%; + margin: auto; + height: 70%; + } + .column-camera-width-small + .all-webcam-wrapper.total-cam-4 + .all-webcam-wrapper-inner, + .column-camera-width-small + .all-webcam-wrapper.total-cam-5 + .all-webcam-wrapper-inner, + .column-camera-width-small + .all-webcam-wrapper.total-cam-6 + .all-webcam-wrapper-inner { + width: 70%; + margin: auto; + height: 80%; + } } diff --git a/src/styles/media_screens/min_641_max_1025.scss b/src/styles/media_screens/min_641_max_1025.scss index fa4fab14..6442e0b9 100644 --- a/src/styles/media_screens/min_641_max_1025.scss +++ b/src/styles/media_screens/min_641_max_1025.scss @@ -1,7 +1,7 @@ @media screen and (max-width: 1025px) and (min-width: 641px) { .camera-row-1.total-items-5.inner-items-2 { .video-camera-item { - @apply w-1/2; + width: 50% !important; } } .camera-row-2.total-items-5.inner-items-1 { @@ -11,7 +11,7 @@ } .camera-row-1.total-items-7.inner-items-3 { .video-camera-item { - @apply w-1/3; + width: 50% !important; } } .camera-row-2.total-items-7.inner-items-1 {