raise-hand-feature

index.tsx

@@ -1,10 +1,14 @@
-import {customize} from 'customization-api';
-import AttendeeLayout from './layout/AttendeeLayout';
-import {CUSTOM_LAYOUT_NAME, VideoCallWrapper} from './wrapper/VideoCallWrapper';
-import {AppRootWrapper} from './wrapper/AppRootWrapper';
-import {BottomToolbarOverride} from './toolbar/BottomToolbarOverride';
-import {TopToolbarOverride} from './toolbar/TopToolbarOverride';
-import {PrecallWrapper} from './wrapper/PrecallWrapper';
+import { customize } from "customization-api";
+import AttendeeLayout from "./layout/AttendeeLayout";
+import {
+  CUSTOM_LAYOUT_NAME,
+  CustomWrapperProvider,
+} from "./wrapper/VideoCallWrapper";
+import { AppRootWrapper } from "./wrapper/AppRootWrapper";
+import { BottomToolbarOverride } from "./toolbar/BottomToolbarOverride";
+import { TopToolbarOverride } from "./toolbar/TopToolbarOverride";
+import { PrecallWrapper } from "./wrapper/PrecallWrapper";
+import CustomSidePanel from "./sidePanel/CustomSidePanel";
 
 const config = customize({
   components: {
@@ -20,18 +24,29 @@ const config = customize({
       //hiding the unnessary controls
       bottomToolBar: BottomToolbarOverride,
       //to update layout for attendee and hide the share tile for the host and inject chat overlay
-      wrapper: VideoCallWrapper,
+      wrapper: CustomWrapperProvider,
       //adding custom layout
-      customLayout: defaultLayouts => {
+      customLayout: (defaultLayouts) => {
         return defaultLayouts.concat([
           {
             component: AttendeeLayout,
-            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABrYAAAa2AGP9iLXAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABJQTFRF////AAAAAAAAAAAAAAAAAAAAZJzAmgAAAAV0Uk5TADhWeLi9mUy9AAAAQUlEQVRIS2MIhYJgBgYWGNuBgcEUxmYYVTCqAFmBMRQYMjAwwdgKDAzCMDbDkAAuBAA8HHCBUQWjCkYVjCoY4QoAw0lL0bRtNkoAAAAASUVORK5CYII=',
-            label: 'Custom Layout',
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABrYAAAa2AGP9iLXAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABJQTFRF////AAAAAAAAAAAAAAAAAAAAZJzAmgAAAAV0Uk5TADhWeLi9mUy9AAAAQUlEQVRIS2MIhYJgBgYWGNuBgcEUxmYYVTCqAFmBMRQYMjAwwdgKDAzCMDbDkAAuBAA8HHCBUQWjCkYVjCoY4QoAw0lL0bRtNkoAAAAASUVORK5CYII=",
+            label: "Custom Layout",
             name: CUSTOM_LAYOUT_NAME,
           },
         ]);
       },
+      // side panel to show raised hand users
+      customSidePanel: () => {
+        return [
+          {
+            name: "raise-hand-panel",
+            component: CustomSidePanel,
+            title: "Raised Hand Users",
+            onClose: () => {},
+          },
+        ];
+      },
     },
   },
 });

sidePanel/CustomSidePanel.tsx

@@ -0,0 +1,86 @@
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import React, { useContext } from "react";
+import { CustomWrapperContext } from "../wrapper/VideoCallWrapper";
+import { customEvents, UidType, useContent } from "customization-api";
+
+const CustomSidePanel = () => {
+  const { raisedHandUsers, setRaisedHandUsers } =
+    useContext(CustomWrapperContext);
+  const { defaultContent } = useContent();
+
+  // Handler to lower a user's raised hand
+  const handleLowerHand = (uid: UidType) => {
+    const data = {
+      hand_raised: false,
+      user_uid: uid,
+    };
+    // Emit custom event to notify other Hosts
+    customEvents.send("LowerHandEvent", JSON.stringify({ data }), uid);
+    // Remove the uid from the raiseHandUsers List
+    setRaisedHandUsers((prev) => prev.filter((user) => user.user_uid !== uid));
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView>
+        {/* Filter and display only users with raised hands */}
+        {raisedHandUsers
+          .filter((user) => user.hand_raised)
+          .map((user) => (
+            <View key={user.user_uid} style={styles.userRow}>
+              <Text style={styles.userName}>
+                {defaultContent[user.user_uid].name}
+              </Text>
+              {/* Hand raised emoji indicator */}
+              <Text style={styles.handStatus}>✋</Text>
+              {/* Button to lower user's hand */}
+              <TouchableOpacity
+                onPress={() => handleLowerHand(user.user_uid)}
+                style={styles.crossButton}
+              >
+                <Text style={styles.crossIcon}>❌</Text>
+              </TouchableOpacity>
+            </View>
+          ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default CustomSidePanel;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#1A1A1A",
+  },
+  userRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#333333",
+  },
+  userName: {
+    color: "white",
+    flex: 1,
+    fontSize: 16,
+  },
+  handStatus: {
+    fontSize: 18,
+    marginLeft: 8,
+  },
+  crossButton: {
+    marginLeft: 8,
+    padding: 4,
+  },
+  crossIcon: {
+    fontSize: 14,
+  },
+});

toolbar/BottomToolbarOverride.tsx

@@ -1,5 +1,14 @@
-import React from 'react';
-import {ToolbarPreset} from 'customization-api';
+import React from "react";
+import {
+  ToolbarPreset,
+  ToolbarItem,
+  IconButton,
+  customEvents,
+  PersistanceLevel,
+  useLocalUid,
+  useContent,
+  useIsAttendee,
+} from "customization-api";
 
 export const BottomToolbarOverride = () => {
   /**
@@ -9,14 +18,78 @@ export const BottomToolbarOverride = () => {
     <ToolbarPreset
       align="bottom"
       items={{
-        layout: {hide: true},
+        layout: { hide: true },
         invite: {
           hide: true,
         },
         chat: {
           hide: true,
         },
+        "raise-hand": {
+          component: RaiseHandOption,
+          order: 10,
+          align: "center",
+        },
       }}
     />
   );
 };
+
+const RaiseHandOption = () => {
+  const [isHandRaised, setIsHandRaised] = React.useState(false);
+  const localUid = useLocalUid();
+  const { defaultContent } = useContent();
+  const isAttendee = useIsAttendee()(localUid);
+
+  React.useEffect(() => {
+    customEvents.on("LowerHandEvent", handleLowerHandCallback);
+  }, []);
+
+  // When Host / Self (Attendee) lowers raised hand
+  const handleLowerHandCallback = (data) => {
+    const payload = JSON.parse(data?.payload);
+    if (payload.data.user_uid === localUid) {
+      setIsHandRaised(false);
+    }
+  };
+
+  // When Self (Attendee) toggle  raises Hand Option
+  const handleRaiseHand = () => {
+    setIsHandRaised((prev) => {
+      const newHandRaisedState = !prev;
+
+      const data = {
+        hand_raised: newHandRaisedState,
+        user_uid: localUid,
+      };
+
+      customEvents.send(
+        "RaiseHandEvent",
+        JSON.stringify({ data }),
+        PersistanceLevel.Session
+      );
+
+      return newHandRaisedState;
+    });
+  };
+
+  // Raise Hand Option is only for attendee
+  return isAttendee ? (
+    <ToolbarItem style={{ position: "relative" }}>
+      <IconButton
+        iconProps={{
+          name: isHandRaised ? "lower-hand" : "raise-hand",
+          iconSize: 28,
+          tintColor: "orange",
+        }}
+        btnTextProps={{
+          textColor: "white",
+          text: isHandRaised ? "Lower Hand" : "Raise Hand",
+        }}
+        onPress={() => {
+          handleRaiseHand();
+        }}
+      />
+    </ToolbarItem>
+  ) : null;
+};

toolbar/TopToolbarOverride.tsx

@@ -1,11 +1,79 @@
-import React from 'react';
-import {ToolbarPreset, isMobileUA} from 'customization-api';
+import React, { useContext } from "react";
+import {
+  ToolbarPreset,
+  isMobileUA,
+  useLocalUid,
+  useIsHost,
+  useSidePanel,
+  ToolbarItem,
+  IconButton,
+} from "customization-api";
+import { CustomWrapperContext } from "../wrapper/VideoCallWrapper";
+import { View } from "react-native";
 
 export const TopToolbarOverride = () => {
+  const { raisedHandUsers } = useContext(CustomWrapperContext);
+  const localUid = useLocalUid();
+  const isHost = useIsHost()(localUid);
+  const { sidePanel, setSidePanel } = useSidePanel();
+  const hasRaisedHands = raisedHandUsers?.some(
+    (user) => user.hand_raised === true
+  );
+
+  const NewToolBarItem = () => {
+    const isOpen = sidePanel === "raise-hand-panel";
+
+    const handlePress = () => {
+      setSidePanel(isOpen ? null : "raise-hand-panel");
+    };
+
+    return (
+      <ToolbarItem style={{ position: "relative" }}>
+        <IconButton
+          iconProps={{
+            name: "list-view",
+            iconSize: 28,
+            tintColor: "white",
+          }}
+          btnTextProps={{
+            textColor: "white",
+            text: "Raised Hands",
+          }}
+          onPress={handlePress}
+        />
+        {hasRaisedHands && (
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: "red",
+            }}
+          />
+        )}
+      </ToolbarItem>
+    );
+  };
+
   //mobile web we are hiding the top toolbar so we will have extra space to view host video
   if (isMobileUA()) {
     return null;
   }
 
-  return <ToolbarPreset align="top" items={{chat: {hide: true}}} />;
+  return (
+    <ToolbarPreset
+      align="top"
+      items={{
+        chat: { hide: true },
+        raisehand: {
+          component: isHost ? NewToolBarItem : null,
+          order: 6,
+          align: "end",
+        },
+      }}
+    />
+  );
 };