feat: disable zoom feature for screen share [WPB-14947] (#18475)

* feat: enable conference feature check

* feat: remove zoom icons

src/script/components/calling/GroupVideoGridTile.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useState} from 'react';
+import React from 'react';
 
 import {QualifiedId} from '@wireapp/api-client/lib/user';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
@@ -89,8 +89,6 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
     'isSwitchingVideoResolution',
   ]);
 
-  const [isZoomedIn, setIsZoomedIn] = useState(false);
-
   const {name} = useKoSubscribableChildren(participant?.user, ['name']);
 
   const sharesScreen = videoState === VIDEO_STATE.SCREENSHARE;
@@ -108,24 +106,8 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
     }
   };
 
-  const handleZoomClick = () => {
-    setIsZoomedIn(prev => !prev);
-  };
-
   const participantNameColor = getParticipantNameColor({isActivelySpeaking, isAudioEstablished});
 
-  const actionItem = !minimized && sharesScreen && (
-    <button
-      data-uie-name="item-grid"
-      data-user-id={participant?.user.id}
-      className="group-video-grid__element__action_icon"
-      onClick={handleZoomClick}
-    >
-      {!isZoomedIn && <Icon.ZoomInIcon data-uie-name="zoom-in-icon" />}
-      {isZoomedIn && <Icon.ZoomOutIcon data-uie-name="zoom-out-icon" />}
-    </button>
-  );
-
   const nameContainer = !minimized && (
     <div
       className="group-video-grid__element__label"
@@ -179,7 +161,7 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
       tabIndex={isMaximized ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE}
     >
       {hasActiveVideo ? (
-        <div className="tile-wrapper" css={{overflow: isZoomedIn ? 'auto' : 'unset', zIndex: isZoomedIn ? 1 : 'unset'}}>
+        <div className="tile-wrapper">
           <Video
             autoPlay
             playsInline
@@ -193,7 +175,6 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
             css={{
               objectFit: isMaximized || sharesScreen ? 'contain' : 'cover',
               transform: participant === selfParticipant && sharesCamera ? 'rotateY(180deg)' : 'initial',
-              height: isZoomedIn ? 'unset' : '100%',
             }}
           />
         </div>
@@ -250,8 +231,6 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
         </div>
       )}
 
-      {actionItem}
-
       {nameContainer}
 
       {(hasPausedVideo || isSwitchingVideoResolution) && (

src/script/team/TeamState.ts

@@ -117,7 +117,9 @@ export class TeamState {
       () => this.teamFeatures()?.mls?.config.protocolToggleUsers.includes(this.userState.self().id) ?? false,
     );
 
-    this.isConferenceCallingEnabled = ko.pureComputed(() => true);
+    this.isConferenceCallingEnabled = ko.pureComputed(
+      () => this.teamFeatures()?.conferenceCalling?.status === FeatureStatus.ENABLED,
+    );
 
     this.isGuestLinkEnabled = ko.pureComputed(
       () => this.teamFeatures()?.conversationGuestLinks?.status === FeatureStatus.ENABLED,