agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/PinnedVideo.tsx

@@ -9,241 +9,120 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {
   ScrollView,
   View,
+  Dimensions,
   StyleSheet,
+  Text,
   Pressable,
-  FlatList,
-  useWindowDimensions,
 } from 'react-native';
 import {layoutProps} from '../../theme.json';
-import {
-  layoutComponent,
-  useLocalUid,
-  useRender,
-  useRtc,
-} from 'customization-api';
+import {layoutComponent, useRtc} 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';
 const {topPinned} = layoutProps;
 
 const PinnedVideo: layoutComponent = ({renderData}) => {
-  const {pinnedUid, activeUids, renderList, activeSpeaker} = useRender();
   const [collapse, setCollapse] = useState(false);
-  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 [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 [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 (
-        renderList[uid].type === 'screenshare' &&
-        renderList[uid].parentUid !== localUid
-      );
-    });
-
-    const localScreenShareUids = nonActiveSpeakerUids.filter((uid) => {
-      return (
-        renderList[uid].type === 'screenshare' &&
-        renderList[uid].parentUid === localUid
-      );
-    });
-    if (remoteScreenShareUids?.length || localScreenShareUids?.length) {
-      setScreenShareOn(true);
-    }
-
-    const restOfTheUids = nonActiveSpeakerUids.filter(
-      (uid) => renderList[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, renderList, 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%',
-                  paddingRight: 8,
-                }
-              : {
-                  flex: 1,
-                  minHeight: 160,
-                  marginBottom: 8,
-                }
+              ? {width: '20%', paddingHorizontal: 8}
+              : {flex: 1}
           }>
-          {/* 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>
-            );
-          })}
+          {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>
+          ))}
         </ScrollView>
       )}
-      {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
+        style={
+          isSidePinnedlayout
+            ? collapse
+              ? style.width100
+              : style.width80
+            : style.flex4
+        }>
+        <View style={style.flex1} key={'maxVideo' + maxUid}>
+          <RenderComponent uid={maxUid} />
         </View>
-      )}
+      </View>
     </View>
   );
 };
@@ -252,8 +131,42 @@ const style = StyleSheet.create({
   width80: {width: '80%'},
   width100: {width: '100%'},
   flex2: {flex: 2},
-  flex8: {flex: 8},
+  flex4: {flex: 4, backgroundColor: '#ffffff00'},
   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;