agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/components/PinnedVideo.tsx

@@ -9,120 +9,239 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {
   ScrollView,
   View,
-  Dimensions,
   StyleSheet,
-  Text,
   Pressable,
+  FlatList,
+  useWindowDimensions,
 } from 'react-native';
 import {layoutProps} from '../../theme.json';
-import {layoutComponent, useRtc} from 'customization-api';
+import {layoutComponent, useLocalUid, 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 {DispatchContext} from '../../agora-rn-uikit';
+import useActiveSpeaker from '../utils/useActiveSpeaker';
 const {topPinned} = layoutProps;
 
 const PinnedVideo: layoutComponent = ({renderData}) => {
+  const {pinnedUid, activeUids, defaultContent} = useContent();
+  const activeSpeaker = useActiveSpeaker();
   const [collapse, setCollapse] = useState(false);
-  const [dim, setDim] = useState<[number, number, boolean]>([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  let onLayout = () => {
-    setTimeout(() => {
-      let {height, width} = Dimensions.get('window');
-      let isLandscape = width > height;
-      setDim([width, height, isLandscape]);
-    }, 20);
-  };
-  const isSidePinnedlayout = topPinned === true ? false : dim[2]; // if either explicity set to false or auto evaluation
-  const [maxUid, ...minUids] = renderData;
-  const {dispatch} = useRtc();
+  const localUid = useLocalUid();
+  const {width, height} = 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 {dispatch} = useContext(DispatchContext);
+  const [uids, setUids] = useState(renderData);
+
+  const [screenShareOn, setScreenShareOn] = useState(false);
+
+  useEffect(() => {
+    const nonPinnedUids = activeUids.filter((uid) => uid !== pinnedUid);
+
+    const nonActiveSpeakerUids = nonPinnedUids.filter(
+      (uid) => uid !== activeSpeaker,
+    );
+
+    const remoteScreenShareUids = nonActiveSpeakerUids.filter((uid) => {
+      return (
+        defaultContent[uid].type === 'screenshare' &&
+        defaultContent[uid].parentUid !== localUid
+      );
+    });
+
+    const localScreenShareUids = nonActiveSpeakerUids.filter((uid) => {
+      return (
+        defaultContent[uid].type === 'screenshare' &&
+        defaultContent[uid].parentUid === localUid
+      );
+    });
+    if (remoteScreenShareUids?.length || localScreenShareUids?.length) {
+      setScreenShareOn(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={{
         flexDirection: isSidePinnedlayout ? 'row' : 'column',
         flex: 1,
-        padding: 4,
-      }}
-      onLayout={onLayout}>
-      {isSidePinnedlayout && (
-        <Pressable
-          onPress={() => setCollapse(!collapse)}
-          style={{
-            position: 'absolute',
-            zIndex: 50,
-            marginTop: 5,
-            width: 35,
-            height: 35,
-            marginLeft: collapse ? 5 : '20.1%',
-            backgroundColor: $config.SECONDARY_FONT_COLOR + 'aa',
-            borderRadius: 50,
-            justifyContent: 'center',
-          }}>
-          <Text
-            style={{
-              alignSelf: 'center',
-              justifyContent: 'center',
-              color: $config.PRIMARY_COLOR,
-              fontWeight: '500',
-              fontSize: 20,
-            }}>
-            {collapse ? '>' : '<'}
-          </Text>
-        </Pressable>
-      )}
+      }}>
       {!collapse && (
         <ScrollView
           horizontal={!isSidePinnedlayout}
+          showsHorizontalScrollIndicator={isMobileUA() ? false : true}
           decelerationRate={0}
           style={
             isSidePinnedlayout
-              ? {width: '20%', paddingHorizontal: 8}
-              : {flex: 1}
+              ? {
+                  width: '20%',
+                  paddingRight: 8,
+                }
+              : {
+                  flex: 1,
+                  minHeight: 160,
+                  marginBottom: 8,
+                }
           }>
-          {minUids.map((minUid, i) => (
-            <Pressable
-              style={
-                isSidePinnedlayout
-                  ? {
-                      width: '100%',
-                      height: dim[0] * 0.1125 + 2, // width * 20/100 * 9/16 + 2
-                      zIndex: 40,
-                      paddingBottom: 8,
-                    }
-                  : {
-                      width: ((dim[1] / 3) * 16) / 9 / 2 + 12, //dim[1] /4.3
-                      height: '100%',
-                      zIndex: 40,
-                      paddingRight: 8,
-                      paddingVertical: 4,
-                    }
-              }
-              key={'minVideo' + i}
-              onPress={() => {
-                dispatch({type: 'SwapVideo', value: [minUid]});
-              }}>
-              <RenderComponent uid={minUid} />
-            </Pressable>
-          ))}
+          {/* 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 (
+              <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={() => {
+                  dispatch({type: 'SwapVideo', value: [minUid]});
+                }}>
+                <RenderComponent uid={minUid} />
+              </Pressable>
+            );
+          })}
         </ScrollView>
       )}
-      <View
-        style={
-          isSidePinnedlayout
-            ? collapse
-              ? style.width100
-              : style.width80
-            : style.flex4
-        }>
-        <View style={style.flex1} key={'maxVideo' + maxUid}>
-          <RenderComponent uid={maxUid} />
+      {uids && uids?.length && (
+        <View
+          style={
+            isSidePinnedlayout
+              ? collapse
+                ? style.width100
+                : style.width80
+              : style.flex8
+          }>
+          <View style={style.flex1} key={'maxVideo' + uids[0]}>
+            {isSidePinnedlayout && (
+              <IconButton
+                containerStyle={{
+                  position: 'absolute',
+                  top: 8,
+                  left: 8,
+                  zIndex: 999,
+                  elevation: 999,
+                }}
+                onPress={() => setCollapse(!collapse)}
+                iconProps={{
+                  iconContainerStyle: {
+                    padding: 8,
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['10%'],
+                  },
+                  name: collapse ? 'collapse' : 'expand',
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                  iconSize: 24,
+                }}
+              />
+            )}
+            {pinnedUid ? (
+              <IconButton
+                containerStyle={{
+                  paddingHorizontal: 8,
+                  paddingVertical: 10,
+                  backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+                  borderRadius: 8,
+                  flexDirection: 'row',
+                  position: 'absolute',
+                  top: 8,
+                  left: 8 + (isSidePinnedlayout ? 32 + 12 + 8 : 0),
+                  zIndex: 999,
+                  elevation: 999,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: 0,
+                  },
+                  name: 'unpin-filled',
+                  iconSize: 20,
+                  tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                }}
+                onPress={() => {
+                  dispatch({type: 'UserPin', value: [0]});
+                }}
+                btnTextProps={{
+                  text: 'Unpin',
+                  textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                  textStyle: {
+                    marginTop: 0,
+                    marginLeft: 6,
+                    marginRight: 2,
+                    fontWeight: '700',
+                  },
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            {/** Render the maximized view */}
+            <RenderComponent uid={uids[0]} isMax={true} />
+          </View>
         </View>
-      </View>
+      )}
     </View>
   );
 };
@@ -131,42 +250,8 @@ const style = StyleSheet.create({
   width80: {width: '80%'},
   width100: {width: '100%'},
   flex2: {flex: 2},
-  flex4: {flex: 4, backgroundColor: '#ffffff00'},
+  flex8: {flex: 8},
   flex1: {flex: 1},
-  nameHolder: {
-    marginTop: -25,
-    backgroundColor: $config.SECONDARY_FONT_COLOR + 'aa',
-    alignSelf: 'flex-end',
-    paddingHorizontal: 8,
-    height: 25,
-    borderTopLeftRadius: 15,
-    borderBottomRightRadius: 15,
-    flexDirection: 'row',
-    zIndex: 5,
-    maxWidth: '100%',
-  },
-  name: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 25,
-    fontWeight: '700',
-    flexShrink: 1,
-  },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 15,
-    marginHorizontal: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-    resizeMode: 'contain',
-  },
 });
 
 export default PinnedVideo;