WIP

wireapp · Dec 19, 2024 · 97b5460 · 97b5460
1 parent 568c33e
commit 97b5460
Show file tree

Hide file tree

Showing 15 changed files with 561 additions and 295 deletions.
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -331,6 +331,9 @@
   "callReactionButtonsAriaLabel": "Emoji selection bar",
   "callReactions": "Reactions",
   "callReactionsAriaLabel": "Emoji {{emoji}} from {{from}}",
+  "callMenuMoreInteractions": "More settings",
+  "callMenuMoreButtonAriaLabel": "Select setting: {{setting}}",
+  "callMenuMoreButtonsAriaLabel": "More settings selection bar",
   "callStateCbr": "Constant Bit Rate",
   "callStateConnecting": "Connecting…",
   "callStateIncoming": "Calling…",

diff --git a/src/script/components/calling/FullscreenVideoCall.styles.ts b/src/script/components/calling/FullscreenVideoCall.styles.ts
@@ -41,28 +41,6 @@ export const videoControlInActiveStyles = css`
   }
 `;
 
-export const paginationButtonStyles: CSSObject = {
-  ['& svg > path']: {
-    fill: 'var(--main-color)',
-  },
-  ['&:focus-visible']: {
-    ['& svg > path']: {
-      fill: 'var(--accent-color)',
-    },
-    outline: '1px solid var(--accent-color-focus)',
-  },
-  ['&:not([disabled]):hover svg > path']: {
-    fill: 'var(--accent-color)',
-  },
-  ['&:disabled svg > path']: {
-    fill: 'var(--disabled-call-button-svg)',
-  },
-  display: 'flex',
-  alignItems: 'center',
-  cursor: 'pointer',
-  height: '100%',
-};
-
 export const videoTopBarStyles: CSSObject = {
   display: 'grid',
   gridTemplateColumns: '1fr auto 1fr',
@@ -78,9 +56,3 @@ export const headerActionsWrapperStyles: CSSObject = {
   marginLeft: 'auto',
   padding: '0 6px',
 };
-
-export const paginationWrapperStyles: CSSObject = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-};
diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -23,7 +23,7 @@ import {DefaultConversationRoleName} from '@wireapp/api-client/lib/conversation/
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import {container} from 'tsyringe';
 
-import {Checkbox, CheckboxLabel, IconButton, IconButtonVariant} from '@wireapp/react-ui-kit';
+import {Checkbox, CheckboxLabel, IconButton, IconButtonVariant, QUERY} from '@wireapp/react-ui-kit';
 
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
 import {ConversationClassifiedBar} from 'Components/ClassifiedBar/ClassifiedBar';
@@ -43,15 +43,12 @@ import {CallingParticipantList} from './CallingCell/CallIngParticipantList';
 import {Duration} from './Duration';
 import {
   videoControlInActiveStyles,
-  paginationButtonStyles,
   classifiedBarStyles,
   headerActionsWrapperStyles,
-  paginationWrapperStyles,
   videoTopBarStyles,
 } from './FullscreenVideoCall.styles';
 import {GroupVideoGrid} from './GroupVideoGrid';
-import {Pagination} from './Pagination';
-import {useSyncCurrentRange} from './useSyncCurrentRange';
+import {Pagination} from './Pagination/Pagination';
 import {VideoControls} from './VideoControls/VideoControls';
 
 import type {Call} from '../../calling/Call';
@@ -92,8 +89,6 @@ export interface FullscreenVideoCallProps {
 
 const LOCAL_STORAGE_KEY_FOR_SCREEN_SHARING_CONFIRM_MODAL = 'DO_NOT_ASK_AGAIN_FOR_SCREEN_SHARING_CONFIRM_MODAL';
 
-const DEFAULT_VISIBLE_DOTS = 5;
-
 const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   call,
   canShareScreen,
@@ -194,47 +189,10 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
     cameraStatus: t(selfSharesCamera ? 'cameraStatusOn' : 'cameraStatusOff'),
   });
 
-  const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
-
-  const [currentStart, setCurrentStart] = useState(0);
-  const visibleDots = DEFAULT_VISIBLE_DOTS > totalPages ? totalPages : DEFAULT_VISIBLE_DOTS;
-
-  useSyncCurrentRange({
-    currentStart,
-    currentPage,
-    totalPages,
-    visibleDots,
-    setCurrentStart,
-  });
-
-  const handlePreviousPage = () => {
-    if (currentPage === 0) {
-      return;
-    }
-
-    const previousPage = currentPage - 1;
-
-    // previousPage !== 0 --> jest niepotrzebne prawdopodnie
-    if (previousPage === currentStart && previousPage !== 0) {
-      setCurrentStart(currentStart => currentStart - 1);
-    }
-
-    changePage(previousPage, call);
-  };
-
-  const handleNextPage = () => {
-    if (currentPage === totalPages - 1) {
-      return;
-    }
-
-    const nextPage = currentPage + 1;
+  const isMobile = useActiveWindowMatchMedia(QUERY.mobile);
+  const isPaginationVisible = !maximizedParticipant && activeCallViewTab === CallViewTab.ALL && totalPages > 1;
 
-    if (nextPage === currentStart + visibleDots - 1 && nextPage !== totalPages - 1) {
-      setCurrentStart(currentStart => currentStart + 1);
-    }
-
-    changePage(nextPage, call);
-  };
+  const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
 
   return (
     <div className="video-calling-wrapper">
@@ -282,49 +240,12 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
             )}
           </div>
           <div css={headerActionsWrapperStyles}>
-            {!maximizedParticipant && activeCallViewTab === CallViewTab.ALL && totalPages > 1 && (
-              <div css={paginationWrapperStyles}>
-                <button
-                  data-uie-name="pagination-previous"
-                  type="button"
-                  onClick={handlePreviousPage}
-                  onKeyDown={event => handleKeyDown(event, handlePreviousPage)}
-                  className="button-reset-default"
-                  disabled={currentPage === 0}
-                  css={{
-                    ...paginationButtonStyles,
-                    borderBottomRightRadius: 32,
-                    borderTopRightRadius: 32,
-                    left: 0,
-                  }}
-                >
-                  <Icon.ChevronRight css={{position: 'relative', right: 4, transform: 'rotateY(180deg)'}} />
-                </button>
-
-                <Pagination
-                  totalPages={totalPages}
-                  currentPage={currentPage}
-                  currentStart={currentStart}
-                  visibleDots={visibleDots}
-                />
-                <button
-                  data-uie-name="pagination-next"
-                  onClick={handleNextPage}
-                  onKeyDown={event => handleKeyDown(event, handleNextPage)}
-                  type="button"
-                  className="button-reset-default"
-                  disabled={currentPage === totalPages - 1}
-                  css={{
-                    ...paginationButtonStyles,
-                    borderBottomLeftRadius: 32,
-                    borderTopLeftRadius: 32,
-                    right: 0,
-                    marginRight: 14,
-                  }}
-                >
-                  <Icon.ChevronRight css={{left: 4, position: 'relative'}} />
-                </button>
-              </div>
+            {!isMobile && isPaginationVisible && (
+              <Pagination
+                totalPages={totalPages}
+                currentPage={currentPage}
+                onChangePage={newPage => changePage(newPage, call)}
+              />
             )}
 
             {isDetachedCallingFeatureEnabled() && viewMode !== CallingViewMode.DETACHED_WINDOW && (
@@ -369,6 +290,14 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
           )}
         </div>
 
+        {isMobile && isPaginationVisible && (
+          <Pagination
+            totalPages={totalPages}
+            currentPage={currentPage}
+            onChangePage={newPage => changePage(newPage, call)}
+          />
+        )}
+
         {!isChoosingScreen && (
           <div id="video-controls" className="video-controls">
             {emojis.map(({id, emoji, left, from}) => (

diff --git a/src/script/components/calling/GroupVideoGrid.tsx b/src/script/components/calling/GroupVideoGrid.tsx
@@ -194,11 +194,21 @@ const GroupVideoGrid: React.FunctionComponent<GroupVideoGripProps> = ({
     const PARTICIPANTS_LIMITS = {
       TABLET: {SHORT: 2, MEDIUM: 4, TALL: 8},
       DESKTOP: {SHORT: 3, MEDIUM: 6, TALL: 9},
-      MOBILE: {SHORT: 1, MEDIUM: 2, TALL: 4},
+      MOBILE: {WITH_THUMBNAIL: 2, SHORT: 1, MEDIUM: 2, TALL: 4},
     };
 
-    const setParticipantsForDevice = (limits: {SHORT: number; MEDIUM: number; TALL: number}) => {
+    const setParticipantsForDevice = (limits: {
+      WITH_THUMBNAIL?: number;
+      SHORT: number;
+      MEDIUM: number;
+      TALL: number;
+    }) => {
       if (isShort) {
+        // TODO: czy ten komentarz jest poprawny?
+        // Special case: use different layout for 2 participants when in short mode
+        if (grid.thumbnail && limits.WITH_THUMBNAIL) {
+          return call.setNumberOfParticipantsInOnePage(limits.WITH_THUMBNAIL);
+        }
         return call.setNumberOfParticipantsInOnePage(limits.SHORT);
       }
       if (isMedium) {
@@ -218,7 +228,7 @@ const GroupVideoGrid: React.FunctionComponent<GroupVideoGripProps> = ({
     if (isMobile) {
       setParticipantsForDevice(PARTICIPANTS_LIMITS.MOBILE);
     }
-  }, [call, isTablet, isDesktop, isMobile, isShort, isMedium, isTall]);
+  }, [call, grid.thumbnail, isTablet, isDesktop, isMobile, isShort, isMedium, isTall]);
 
   const {isMuted: selfIsMuted} = useKoSubscribableChildren(selfParticipant, ['isMuted']);
 

diff --git a/src/script/components/calling/Pagination.tsx b/src/script/components/calling/Pagination.tsx
diff --git a/src/script/components/calling/Pagination/Pagination.styles.ts b/src/script/components/calling/Pagination/Pagination.styles.ts
@@ -0,0 +1,48 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const paginationWrapperStyles: CSSObject = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+export const paginationButtonStyles: CSSObject = {
+  ['& svg > path']: {
+    fill: 'var(--main-color)',
+  },
+  ['&:focus-visible']: {
+    ['& svg > path']: {
+      fill: 'var(--accent-color)',
+    },
+    outline: '1px solid var(--accent-color-focus)',
+  },
+  ['&:not([disabled]):hover svg > path']: {
+    fill: 'var(--accent-color)',
+  },
+  ['&:disabled svg > path']: {
+    fill: 'var(--disabled-call-button-svg)',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  height: '100%',
+};