agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/components/PinnedVideo.tsx

@@ -9,89 +9,77 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   ScrollView,
   View,
   StyleSheet,
   Pressable,
-  FlatList,
   useWindowDimensions,
+  TouchableOpacity,
+  Text,
 } from 'react-native';
 import {layoutProps} from '../../theme.json';
-import {layoutComponent, useLocalUid, useContent} from 'customization-api';
+import {useContent} from 'customization-api';
 import RenderComponent from '../pages/video-call/RenderComponent';
 import IconButton from '../atoms/IconButton';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {BREAKPOINTS, isMobileUA, useIsDesktop} from '../utils/common';
+import {BREAKPOINTS, isMobileUA} from '../utils/common';
 import {DispatchContext} from '../../agora-rn-uikit';
+import {useVideoCall} from '../components/useVideoCall';
 import useActiveSpeaker from '../utils/useActiveSpeaker';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
+import {useWhiteboard} from '../components/whiteboard/WhiteboardConfigure';
+import {useString} from '../utils/useString';
+import {
+  moreBtnRemoveFromLarge,
+  videoRoomGoToActiveSpeakerText,
+} from '../language/default-labels/videoCallScreenLabels';
 const {topPinned} = layoutProps;
 
-const PinnedVideo: layoutComponent = ({renderData}) => {
-  const {pinnedUid, activeUids, defaultContent} = useContent();
-  const activeSpeaker = useActiveSpeaker();
+const PinnedVideo = ({renderData}) => {
+  const removeFromLargeText = useString(moreBtnRemoveFromLarge)();
+  const goToASText = useString(videoRoomGoToActiveSpeakerText)();
+  const [isOnTop, setIsOnTop] = useState(true);
+  const {pinnedUid, secondaryPinnedUid} = useContent();
   const [collapse, setCollapse] = useState(false);
-  const localUid = useLocalUid();
-  const {width, height} = useWindowDimensions();
+  const {width} = useWindowDimensions();
   const isDesktop = width > BREAKPOINTS.xl;
   const isSidePinnedlayout = topPinned === true ? false : isDesktop; // if either explicity set to false or auto evaluation
-  //const [maxUid, ...minUids] = renderData;
+  const [maxUid, ...minUids] = renderData;
+  const activeSpeaker = useActiveSpeaker();
   const {dispatch} = useContext(DispatchContext);
-  const [uids, setUids] = useState(renderData);
-
-  const [screenShareOn, setScreenShareOn] = useState(false);
-
+  const {videoTileInViewPortState} = useVideoCall();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
   useEffect(() => {
-    const nonPinnedUids = activeUids.filter((uid) => uid !== pinnedUid);
-
-    const nonActiveSpeakerUids = nonPinnedUids.filter(
-      (uid) => uid !== activeSpeaker,
-    );
+    if (activeSpeaker && !videoTileInViewPortState[activeSpeaker] && isOnTop) {
+      dispatch({
+        type: 'ActiveSpeaker',
+        value: [activeSpeaker],
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeSpeaker, videoTileInViewPortState, isOnTop]);
 
-    const remoteScreenShareUids = nonActiveSpeakerUids.filter((uid) => {
-      return (
-        defaultContent[uid].type === 'screenshare' &&
-        defaultContent[uid].parentUid !== localUid
-      );
-    });
+  const scrollRef = useRef() as any;
 
-    const localScreenShareUids = nonActiveSpeakerUids.filter((uid) => {
-      return (
-        defaultContent[uid].type === 'screenshare' &&
-        defaultContent[uid].parentUid === localUid
-      );
+  const scrollToTop = () => {
+    scrollRef?.current?.scrollTo({
+      y: 0,
+      animated: true,
     });
-    if (remoteScreenShareUids?.length || localScreenShareUids?.length) {
-      setScreenShareOn(true);
+  };
+  const handleScroll = (event: any) => {
+    if (
+      (isSidePinnedlayout && event.nativeEvent.contentOffset.y >= 5) ||
+      (!isSidePinnedlayout && event.nativeEvent.contentOffset.x >= 5)
+    ) {
+      isOnTop && setIsOnTop(false);
+    } else {
+      !isOnTop && setIsOnTop(true);
     }
-
-    const restOfTheUids = nonActiveSpeakerUids.filter(
-      (uid) => defaultContent[uid].type !== 'screenshare',
-    );
-
-    /**
-     * Order for pinned layout -
-     * - [1] means only one user
-     * - [N] means multiple users
-     * 1.Pinned User[1]
-     * 2.Remote screenshare users[N]
-     * 3.Active Speaker[1]
-     * 4.Local Screenshare[1]
-     * 5 and etc.Other Users[N]
-     */
-
-    const updatedOrder = [
-      pinnedUid,
-      ...remoteScreenShareUids,
-      pinnedUid !== activeSpeaker ? activeSpeaker : 0,
-      ...localScreenShareUids,
-      ...restOfTheUids,
-    ].filter((uid) => uid !== undefined && uid !== 0);
-
-    setUids(updatedOrder);
-  }, [activeUids, defaultContent, activeSpeaker, pinnedUid]);
-
+  };
   return (
     <View
       style={{
@@ -99,45 +87,32 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
         flex: 1,
       }}>
       {!collapse && (
-        <ScrollView
-          horizontal={!isSidePinnedlayout}
-          showsHorizontalScrollIndicator={isMobileUA() ? false : true}
-          decelerationRate={0}
-          style={
-            isSidePinnedlayout
-              ? {
-                  width: '20%',
-                  paddingRight: 8,
-                }
-              : {
-                  flex: 1,
-                  minHeight: 160,
-                  marginBottom: 8,
-                }
-          }>
-          {/* Pinned Video Top View(Desktop minimized and Mobile native and Mobile web) / Side View(Desktop maximized)*/}
-          {uids?.map((minUid, i) => {
-            //first item -> maximized view so returning null
-            if (i === 0) return null;
-            //remaining items -> minimized view
-            {
-              /**Rendering minimized views */
-            }
-            return (
+        <>
+          <ScrollView
+            onScroll={handleScroll}
+            ref={scrollRef}
+            horizontal={!isSidePinnedlayout}
+            showsHorizontalScrollIndicator={isMobileUA() ? false : true}
+            decelerationRate={0}
+            style={
+              isSidePinnedlayout
+                ? {
+                    width: '20%',
+                    paddingRight: 8,
+                    borderWidth: 2,
+                    borderColor: 'transparent',
+                  }
+                : {
+                    flex: 1,
+                    minHeight: 160,
+                    marginBottom: 8,
+                  }
+            }>
+            {secondaryPinnedUid &&
+            secondaryPinnedUid !== pinnedUid &&
+            secondaryPinnedUid !== maxUid ? (
               <Pressable
-                //old
-                //if user pinned somebody then side panel items should not be clickable - swap video should be called
-                //instead we will show replace pin button on hovering the video tile
-                //old
-                disabled={
-                  //old fix
-                  //activeSpeaker || pinnedUid || screenShareOn ? true : false
-                  //old fix
-
-                  //latest fix : pinned video sidepanel layout should not be clickable
-                  //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
-                  true
-                }
+                disabled={true}
                 style={
                   isSidePinnedlayout
                     ? {
@@ -154,17 +129,116 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
                         marginRight: 8,
                       }
                 }
-                key={'minVideo' + i}
-                onPress={() => {
-                  dispatch({type: 'SwapVideo', value: [minUid]});
-                }}>
-                <RenderComponent uid={minUid} />
+                key={'minVideo' + secondaryPinnedUid}
+                onPress={() => {}}>
+                <RenderComponent uid={secondaryPinnedUid} />
               </Pressable>
-            );
-          })}
-        </ScrollView>
+            ) : (
+              <></>
+            )}
+            {/* Pinned Video Top View(Desktop minimized and Mobile native and Mobile web) / Side View(Desktop maximized)*/}
+            {minUids?.map((minUid, i) => {
+              if (minUid === secondaryPinnedUid) return null;
+              if (minUid === pinnedUid) return null;
+              if (minUid === maxUid) return null;
+              //rendering minimized view
+              return (
+                <Pressable
+                  //old
+                  //if user pinned somebody then side panel items should not be clickable - swap video should be called
+                  //instead we will show replace pin button on hovering the video tile
+                  //old
+                  disabled={
+                    //old fix
+                    //activeSpeaker || pinnedUid || screenShareOn ? true : false
+                    //old fix
+
+                    //latest fix : pinned video sidepanel layout should not be clickable
+                    //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
+                    true
+                  }
+                  style={
+                    isSidePinnedlayout
+                      ? {
+                          width: '100%',
+                          height: width * 0.1125 + 2, // width * 20/100 * 9/16 + 2
+                          zIndex: 40,
+                          paddingBottom: 8,
+                        }
+                      : {
+                          // width: ((height / 3) * 16) / 9 / 2 + 12, //dim[1] /4.3
+                          width: 254,
+                          height: '100%',
+                          zIndex: 40,
+                          marginRight: 8,
+                        }
+                  }
+                  key={'minVideo' + i}
+                  onPress={() => {}}>
+                  <RenderComponent uid={minUid} />
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+          {$config.ACTIVE_SPEAKER && !isOnTop && (
+            <View
+              style={
+                isSidePinnedlayout
+                  ? {
+                      width: '20%',
+                      position: 'absolute',
+                      bottom: 0,
+                      zIndex: 999,
+                    }
+                  : {
+                      position: 'absolute',
+                      right: 5,
+                      top: 5,
+                    }
+              }>
+              <TouchableOpacity
+                style={{
+                  paddingHorizontal: 12,
+                  paddingVertical: 8,
+                  flexDirection: 'row',
+                  borderRadius: 27,
+                  backgroundColor: $config.CARD_LAYER_5_COLOR,
+                  maxWidth: 180,
+                  alignSelf: 'center',
+                }}
+                onPress={scrollToTop}>
+                <ImageIcon
+                  iconType="plain"
+                  name={'view-last'}
+                  iconSize={20}
+                  tintColor={$config.FONT_COLOR}
+                  iconContainerStyle={
+                    isSidePinnedlayout
+                      ? {
+                          transform: [{rotate: '180deg'}],
+                        }
+                      : {
+                          transform: [{rotate: '90deg'}],
+                        }
+                  }
+                />
+                <Text
+                  style={{
+                    marginLeft: 4,
+                    color: $config.FONT_COLOR,
+                    textAlign: 'center',
+                    fontSize: 14,
+                    fontFamily: ThemeConfig.FontFamily.sansPro,
+                    alignSelf: 'center',
+                  }}>
+                  {goToASText}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </>
       )}
-      {uids && uids?.length && (
+      {(pinnedUid || maxUid) && (
         <View
           style={
             isSidePinnedlayout
@@ -173,13 +247,13 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
                 : style.width80
               : style.flex8
           }>
-          <View style={style.flex1} key={'maxVideo' + uids[0]}>
+          <View style={style.flex1} key={'maxVideo' + (pinnedUid || maxUid)}>
             {isSidePinnedlayout && (
               <IconButton
                 containerStyle={{
                   position: 'absolute',
-                  top: 8,
-                  left: 8,
+                  top: 12,
+                  left: 12,
                   zIndex: 999,
                   elevation: 999,
                 }}
@@ -197,7 +271,7 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
                 }}
               />
             )}
-            {pinnedUid ? (
+            {pinnedUid && pinnedUid !== getWhiteboardUid() ? (
               <IconButton
                 containerStyle={{
                   paddingHorizontal: 8,
@@ -206,8 +280,8 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
                   borderRadius: 8,
                   flexDirection: 'row',
                   position: 'absolute',
-                  top: 8,
-                  left: 8 + (isSidePinnedlayout ? 32 + 12 + 8 : 0),
+                  top: 12,
+                  left: 12 + (isSidePinnedlayout ? 32 + 12 + 8 : 0),
                   zIndex: 999,
                   elevation: 999,
                 }}
@@ -224,7 +298,7 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
                   dispatch({type: 'UserPin', value: [0]});
                 }}
                 btnTextProps={{
-                  text: 'Unpin',
+                  text: removeFromLargeText,
                   textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
                   textStyle: {
                     marginTop: 0,
@@ -238,7 +312,7 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
               <></>
             )}
             {/** Render the maximized view */}
-            <RenderComponent uid={uids[0]} isMax={true} />
+            <RenderComponent uid={pinnedUid || maxUid} isMax={true} />
           </View>
         </View>
       )}