agora-appbuilder-core 4.0.26 → 4.0.27

package/template/src/atoms/CustomIcon.tsx

@@ -149,4 +149,5 @@ export interface IconsInterface {
   'play-circle': string;
   'copy-link': string;
   'recording-status': string;
+  fullscreen: string;
 }

package/template/src/components/GridVideo.tsx

@@ -77,17 +77,21 @@ const GridVideo: LayoutComponent = ({renderData}) => {
               disabled={renderData.length === 1}
               onPress={() => {
                 //if (!(ridx === 0 && cidx === 0)) {
-                const currentUid = renderData[ridx * dims.c + cidx];
-                if (
-                  currentUid !== pinnedUid &&
-                  currentUid !== secondaryPinnedUid
-                ) {
-                  dispatch({
-                    type: 'ActiveSpeaker',
-                    value: [renderData[ridx * dims.c + cidx]],
-                  });
-                }
+                //const currentUid = renderData[ridx * dims.c + cidx];
+                // if (
+                //   currentUid !== pinnedUid &&
+                //   currentUid !== secondaryPinnedUid
+                // ) {
+                //   dispatch({
+                //     type: 'ActiveSpeaker',
+                //     value: [renderData[ridx * dims.c + cidx]],
+                //   });
+                // }
                 //}
+                dispatch({
+                  type: 'UserPin',
+                  value: [renderData[ridx * dims.c + cidx]],
+                });
                 setPinnedLayout();
               }}
               style={{

package/template/src/components/PinnedVideo.tsx

@@ -20,7 +20,7 @@ import {
   Text,
 } from 'react-native';
 import {layoutProps} from '../../theme.json';
-import {useContent} from 'customization-api';
+import {useContent, useLocalUserInfo} from 'customization-api';
 import RenderComponent from '../pages/video-call/RenderComponent';
 import IconButton from '../atoms/IconButton';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
@@ -36,9 +36,12 @@ import {
   moreBtnRemoveFromLarge,
   videoRoomGoToActiveSpeakerText,
 } from '../language/default-labels/videoCallScreenLabels';
+import {useFullScreen} from '..//utils/useFullScreen';
 const {topPinned} = layoutProps;
 
 const PinnedVideo = ({renderData}) => {
+  const {screenUid} = useLocalUserInfo();
+  const {requestFullscreen} = useFullScreen();
   const removeFromLargeText = useString(moreBtnRemoveFromLarge)();
   const goToASText = useString(videoRoomGoToActiveSpeakerText)();
   const [isOnTop, setIsOnTop] = useState(true);
@@ -52,6 +55,7 @@ const PinnedVideo = ({renderData}) => {
   const {dispatch} = useContext(DispatchContext);
   const {videoTileInViewPortState} = useVideoCall();
   const {getWhiteboardUid = () => 0} = useWhiteboard();
+  const {defaultContent, customContent} = useContent();
   useEffect(() => {
     if (activeSpeaker && !videoTileInViewPortState[activeSpeaker] && isOnTop) {
       dispatch({
@@ -80,6 +84,14 @@ const PinnedVideo = ({renderData}) => {
       !isOnTop && setIsOnTop(true);
     }
   };
+
+  const isWhiteboard = customContent && customContent[pinnedUid || maxUid];
+  const isRemoteScreenshare =
+    (pinnedUid || maxUid) != screenUid &&
+    defaultContent &&
+    defaultContent[pinnedUid || maxUid]?.video &&
+    defaultContent[pinnedUid || maxUid]?.type === 'screenshare';
+
   return (
     <View
       style={{
@@ -248,7 +260,7 @@ const PinnedVideo = ({renderData}) => {
               : style.flex8
           }>
           <View style={style.flex1} key={'maxVideo' + (pinnedUid || maxUid)}>
-            {isSidePinnedlayout && (
+            {isSidePinnedlayout && (isWhiteboard || isRemoteScreenshare) ? (
               <IconButton
                 containerStyle={{
                   position: 'absolute',
@@ -257,7 +269,16 @@ const PinnedVideo = ({renderData}) => {
                   zIndex: 999,
                   elevation: 999,
                 }}
-                onPress={() => setCollapse(!collapse)}
+                onPress={() => {
+                  if (
+                    defaultContent &&
+                    defaultContent[pinnedUid || maxUid]?.video
+                  ) {
+                    requestFullscreen(pinnedUid || maxUid);
+                  } else if (customContent[pinnedUid || maxUid]) {
+                    setCollapse(!collapse);
+                  }
+                }}
                 iconProps={{
                   iconContainerStyle: {
                     padding: 8,
@@ -265,13 +286,19 @@ const PinnedVideo = ({renderData}) => {
                       $config.CARD_LAYER_5_COLOR +
                       hexadecimalTransparency['10%'],
                   },
-                  name: collapse ? 'collapse' : 'expand',
+                  name: isRemoteScreenshare
+                    ? 'fullscreen'
+                    : isWhiteboard && collapse
+                    ? 'collapse'
+                    : 'expand',
                   tintColor: $config.SECONDARY_ACTION_COLOR,
                   iconSize: 24,
                 }}
               />
+            ) : (
+              <></>
             )}
-            {pinnedUid && pinnedUid !== getWhiteboardUid() ? (
+            {/* {pinnedUid && pinnedUid !== getWhiteboardUid() ? (
               <IconButton
                 containerStyle={{
                   paddingHorizontal: 8,
@@ -310,7 +337,7 @@ const PinnedVideo = ({renderData}) => {
               />
             ) : (
               <></>
-            )}
+            )} */}
             {/** Render the maximized view */}
             <RenderComponent uid={pinnedUid || maxUid} isMax={true} />
           </View>

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -39,7 +39,7 @@ import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
 import {useFocus} from '../../utils/useFocus';
 import Toast from '../../../react-native-toast-message';
 import RemoteMutePopup from '../../subComponents/RemoteMutePopup';
-import {calculatePosition, trimText} from '../../utils/common';
+import {calculatePosition, isMobileUA, trimText} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {customEvents} from 'customization-api';
 import {useDisableChat} from '../disable-chat/useDisableChat';
@@ -63,6 +63,7 @@ import {
   moreBtnViewWhiteboard,
   userRemovedFromTheRoomToastHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
+import {isAndroid, isIOS} from '../../utils/common';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
@@ -154,32 +155,33 @@ export default function UserActionMenuOptionsOptions(
       )
     ) {
       if (enablePinForMe) {
-        //if (pinnedUid !== user.uid) {
-        items.push({
-          //disabled: activeUids?.filter(i => !customContent[i])?.length === 1,
-          disabled: activeUids?.length === 1,
-          icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
-          onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
-          iconColor: $config.SECONDARY_ACTION_COLOR,
-          textColor: $config.SECONDARY_ACTION_COLOR,
-          title: pinnedUid
-            ? user.uid === pinnedUid
-              ? removeFromLargeLabel
+        if (pinnedUid !== user.uid) {
+          items.push({
+            //disabled: activeUids?.filter(i => !customContent[i])?.length === 1,
+            disabled: activeUids?.length === 1,
+            icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
+            onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
+            iconColor: $config.SECONDARY_ACTION_COLOR,
+            textColor: $config.SECONDARY_ACTION_COLOR,
+            title: pinnedUid
+              ? user.uid === pinnedUid
+                ? removeFromLargeLabel
+                : user.uid === getWhiteboardUid()
+                ? viewWhiteboardLabel
+                : viewInLargeLabel
               : user.uid === getWhiteboardUid()
               ? viewWhiteboardLabel
-              : viewInLargeLabel
-            : user.uid === getWhiteboardUid()
-            ? viewWhiteboardLabel
-            : viewInLargeLabel,
-          callback: () => {
-            setActionMenuVisible(false);
-            dispatch({
-              type: 'UserPin',
-              value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
-            });
-            setLayout(getPinnedLayoutName());
-          },
-        });
+              : viewInLargeLabel,
+            callback: () => {
+              setActionMenuVisible(false);
+              dispatch({
+                type: 'UserPin',
+                value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+              });
+              setLayout(getPinnedLayoutName());
+            },
+          });
+        }
         if (currentLayout === DefaultLayouts[1].name) {
           items.push({
             // disabled:
@@ -207,7 +209,6 @@ export default function UserActionMenuOptionsOptions(
             },
           });
         }
-        //}
       }
     }
 

package/template/src/logger/AppBuilderLogger.tsx

@@ -80,7 +80,8 @@ type LogType = {
     | 'RECORDING'
     | 'STORE'
     | 'GET_MEETING_PHRASE'
-    | 'MUTE_PSTN';
+    | 'MUTE_PSTN'
+    | 'FULL_SCREEN';
   [LogSource.NetworkRest]:
     | 'idp_login'
     | 'token_login'

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -473,12 +473,8 @@ const ActionSheetContent = props => {
     ([_, v]) => !isHidden(v?.hide) && v?.component,
   );
 
-  console.log('debugging displayItems', displayItems);
-
   const displayItemsOrdered = CustomToolbarSorting(displayItems);
 
-  console.log('debugging displayItemsOrdered', displayItemsOrdered);
-
   if (displayCustomBottomSheetContent) {
     return <View>{customBottomSheetContent}</View>;
   }

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -42,7 +42,12 @@ import WhiteboardView from '../../components/whiteboard/WhiteboardView';
 const VideoCallMobileView = props => {
   const {native = true} = props;
   const {customContent} = useContent();
-  const {isScreenShareOnFullView, screenShareData} = useScreenContext();
+  const {
+    isScreenShareOnFullView,
+    screenShareData,
+    setScreenShareData,
+    setScreenShareOnFullView,
+  } = useScreenContext();
   const {getWhiteboardUid, isWhiteboardOnFullScreen} = useWhiteboard();
 
   const {RtcEngineUnsafe} = useContext(RtcContext);
@@ -66,6 +71,25 @@ const VideoCallMobileView = props => {
   const isVBAvaialble =
     $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM && isVBActive;
 
+  useEffect(() => {
+    if (
+      isScreenShareOnFullView &&
+      defaultContent &&
+      !defaultContent[maxScreenShareUid]?.video
+    ) {
+      setScreenShareOnFullView(false);
+      setScreenShareData(prevState => {
+        return {
+          ...prevState,
+          [maxScreenShareUid]: {
+            ...prevState[maxScreenShareUid],
+            isExpanded: !prevState[maxScreenShareUid]?.isExpanded,
+          },
+        };
+      });
+    }
+  }, [defaultContent, maxScreenShareUid, isScreenShareOnFullView]);
+
   useEffect(() => {
     // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
     //native screenshare use local uid to publish the screenshare stream

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -38,6 +38,7 @@ import {
   moreBtnViewWhiteboard,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import {useFullScreen} from '../../utils/useFullScreen';
 export interface VideoRendererProps {
   user: ContentInterface;
   isMax?: boolean;
@@ -49,6 +50,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   CustomChild,
 }) => {
   const {height, width} = useWindowDimensions();
+  const {requestFullscreen} = useFullScreen();
   const {dispatch} = useContext(DispatchContext);
   const {RtcEngineUnsafe} = useRtc();
   const {pinnedUid, secondaryPinnedUid} = useContent();
@@ -141,6 +143,19 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   const viewinlargeLabel = useString(moreBtnViewInLarge)();
   const viewwhiteboardlabel = useString(moreBtnViewWhiteboard)();
 
+  const setScreenShareFullScreen = () => {
+    setScreenShareOnFullView(!screenShareData[user.uid]?.isExpanded);
+    setScreenShareData(prevState => {
+      return {
+        ...prevState,
+        [user.uid]: {
+          ...prevState[user.uid],
+          isExpanded: !prevState[user.uid]?.isExpanded,
+        },
+      };
+    });
+  };
+
   return (
     <>
       <UserActionMenuOptionsOptions
@@ -231,7 +246,8 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                         pinnedUid &&
                         pinnedUid == user.uid &&
                         !isScreenShareOnFullView
-                          ? 160 + (isAndroid() ? 15 : 0)
+                          ? //160 + (isAndroid() ? 15 : 0)
+                            8
                           : 8,
                       zIndex: 999,
                       elevation: 999,
@@ -241,18 +257,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                 if (user?.type == 'whiteboard') {
                   setWhiteboardOnFullScreen(!isWhiteboardOnFullScreen);
                 } else {
-                  setScreenShareOnFullView(
-                    !screenShareData[user.uid]?.isExpanded,
-                  );
-                  setScreenShareData(prevState => {
-                    return {
-                      ...prevState,
-                      [user.uid]: {
-                        ...prevState[user.uid],
-                        isExpanded: !prevState[user.uid]?.isExpanded,
-                      },
-                    };
-                  });
+                  if (isMobileUA() && !(isAndroid() || isIOS())) {
+                    requestFullscreen(user.uid).catch(() => {
+                      setScreenShareFullScreen();
+                    });
+                  } else {
+                    setScreenShareFullScreen();
+                  }
                 }
               }}
               iconProps={{

package/template/src/utils/useFullScreen.ts

@@ -0,0 +1,161 @@
+import {useEffect, useRef} from 'react';
+import {useContent, useLocalUserInfo} from 'customization-api';
+import {UidType} from '../../agora-rn-uikit';
+import {isWebInternal} from '../utils/common';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
+
+export const useFullScreen = () => {
+  const {uid: localUid, screenUid: localScreenUid} = useLocalUserInfo();
+  const {defaultContent} = useContent();
+  const defaultContentRef = useRef(defaultContent);
+
+  useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
+
+  const onFullScreenChange = () => {
+    setTimeout(() => {
+      try {
+        if (
+          document.fullscreenElement &&
+          screen?.orientation?.type?.startsWith('portrait')
+        ) {
+          //@ts-ignore
+          screen?.orientation?.lock &&
+            //@ts-ignore
+            screen?.orientation?.lock('landscape')?.catch(e => {
+              console.error('debugging error on lock', e);
+            });
+        }
+      } catch (error) {
+        console.error('debugging error on onFullScreenChange', error);
+      }
+    }, 500);
+  };
+
+  useEffect(() => {
+    try {
+      document?.addEventListener('fullscreenchange', onFullScreenChange);
+    } catch (error) {}
+
+    return () => {
+      document?.removeEventListener('fullscreenchange', onFullScreenChange);
+    };
+  }, []);
+
+  const requestFullscreen = async (uid: UidType) => {
+    if (!document?.fullscreenEnabled) {
+      console.error('Full screen API - Not supported');
+      return Promise.reject(false);
+    }
+
+    if (!isWebInternal()) {
+      console.error('Full screen API - only available web platform');
+      return Promise.reject(false);
+    }
+
+    if (!uid) {
+      console.error("Full screen API - Uid can't be empty");
+      return Promise.reject(false);
+    }
+
+    let isVideoEnabled = defaultContentRef?.current[uid]?.video;
+
+    if (!isVideoEnabled) {
+      console.error(
+        `Full screen API - please enable video for uid - ${uid} before calling full screen api`,
+      );
+      return Promise.reject(false);
+    }
+
+    let fullScreenUid = uid === localUid ? 0 : uid === localScreenUid ? 1 : uid;
+
+    try {
+      /**
+       * Agora assign user uid in the video tag container element
+       * 0 - local user
+       * 1 - local screen
+       * actual user uid - for rest of remote stream
+       *
+       * agora assign uid to parent div of video element
+       * so that's reason we are access children element to get the video element
+       *
+       * we can requestFullScreen for parent div
+       * but it won't have auto rotate as soon fullscreen enabled and timer/exit full screen buttons
+       *
+       * Sample structure
+       * <div id="0" >
+       *   <div>
+       *    <video />
+       *   </div>
+       * </div>
+       *  */
+      const videoTag = document.getElementById(fullScreenUid?.toString())
+        ?.children[0]?.children[0];
+
+      if (!document?.fullscreenElement && videoTag?.requestFullscreen) {
+        videoTag
+          ?.requestFullscreen()
+          .then(() => {
+            logger.log(
+              LogSource.Internals,
+              'FULL_SCREEN',
+              'requestFullscreen success',
+            );
+            return Promise.resolve(true);
+          })
+          .catch(error => {
+            logger.error(
+              LogSource.Internals,
+              'FULL_SCREEN',
+              'requestFullscreen - error',
+              error,
+            );
+            return Promise.reject(false);
+          });
+      } else {
+        logger.error(
+          LogSource.Internals,
+          'FULL_SCREEN',
+          'requestFullscreen - error',
+        );
+        return Promise.reject(false);
+      }
+    } catch (error) {
+      logger.log(
+        LogSource.Internals,
+        'FULL_SCREEN',
+        'requestFullscreen error',
+        error,
+      );
+      return Promise.reject(false);
+    }
+  };
+
+  const exitFullScreen = () => {
+    try {
+      if (document?.fullscreenElement) {
+        document?.exitFullscreen();
+        logger.log(
+          LogSource.Internals,
+          'FULL_SCREEN',
+          'exitFullscreen success',
+        );
+        return true;
+      } else {
+        console.error('Full screen AI - there is no fullscreen element');
+        return false;
+      }
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'FULL_SCREEN',
+        'exitFullscreen error',
+        error,
+      );
+      return false;
+    }
+  };
+
+  return {requestFullscreen, exitFullScreen};
+};

package/template/web/index.html

@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <!-- moved to template/src/assets/font-styles.css as it was not available for sdks-->
     <!-- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> -->
 
-    <base href="/">
+    <base href="/" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-
-</head>
-<body>
+  </head>
+  <body>
     <style>
-        /* .video-container > *{
+      /* .video-container > *{
             background-color: #000 !important;
 
         }
@@ -24,36 +23,40 @@
         .video-container{
             background-color: #000;
         } */
-        /* *:active {
+      /* *:active {
             outline: none;
         } */
-    /* Webkit (Chrome, Safari) */
-    ::-webkit-scrollbar {
-    width: 4px;
-    }
-
-    ::-webkit-scrollbar-track {
-    background-color: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-    background-color: #777;
-    border-radius: 2px;
-    }
-
-    /* Firefox */
-    html {
-    scrollbar-width: thin;
-    scrollbar-color: transparent #777;
-    }
-
+      /* Webkit (Chrome, Safari) */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #777;
+        border-radius: 2px;
+      }
+
+      /** to hide screenshare fullscreen play/pause button  */
+      video::-webkit-media-controls-play-button {
+        display: none !important;
+      }
+
+      /* Firefox */
+      html {
+        scrollbar-width: thin;
+        scrollbar-color: transparent #777;
+      }
     </style>
-<div id="react-app" style="
-    height: 100vh;
-    max-height: -webkit-fill-available;
-    display: flex;
-">
-
-</div>
-</body>
-</html>
+    <div
+      id="react-app"
+      style="
+        height: 100vh;
+        max-height: -webkit-fill-available;
+        display: flex;
+      "></div>
+  </body>
+</html>