Add polling feature as customization

bottombar.tsx

@@ -1,7 +1,13 @@
-import { ToolbarPreset, ToolbarComponents } from "customization-api";
+import {
+  ToolbarPreset,
+  ToolbarComponents,
+  useSidePanel,
+} from "customization-api";
 import React from "react";
+import { PollButtonWithSidePanel, POLL_SIDEBAR_NAME } from "./polling-ui";
 
 const Bottombar = () => {
+  const { setSidePanel } = useSidePanel();
   const {
     MeetingTitleToolbarItem,
     ParticipantCountToolbarItem,
@@ -62,6 +68,15 @@ const Bottombar = () => {
                   return w > 767 ? true : false;
                 },
               },
+              poll: {
+                hide: (w) => {
+                  return w > 767 ? true : false;
+                },
+                component: PollButtonWithSidePanel,
+                onPress: () => {
+                  setSidePanel(POLL_SIDEBAR_NAME);
+                },
+              },
             },
           },
           "meeting-title": {

index.tsx

@@ -1,9 +1,23 @@
 import { customize, isMobileUA } from "customization-api";
 import Topbar from "./topbar";
 import Bottombar from "./bottombar";
+import PollSidebar from "./polling/components/PollSidebar";
+import Poll from "./polling/components/Poll";
+import { POLL_SIDEBAR_NAME } from "./polling-ui";
 
 const config = customize({
   components: {
+    wrapper: Poll,
+    customSidePanel: () => {
+      return [
+        {
+          name: POLL_SIDEBAR_NAME,
+          component: PollSidebar,
+          title: "Polls",
+          onClose: () => {},
+        },
+      ];
+    },
     videoCall: {
       topToolBar: Topbar,
       bottomToolBar: Bottombar,

polling-ui.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  ToolbarPreset,
+  useSidePanel,
+  ToolbarItem,
+  ImageIcon,
+  ThemeConfig,
+  $config,
+  useActionSheet,
+  IconButton,
+  IconButtonProps,
+} from "customization-api";
+import { View, Text, StyleSheet } from "react-native";
+import pollIcons from "./polling/poll-icons";
+
+const POLL_SIDEBAR_NAME = "side-panel-poll";
+
+const PollButtonWithSidePanel = () => {
+  const { isOnActionSheet } = useActionSheet();
+  const { setSidePanel } = useSidePanel();
+
+  // On smaller screens
+  if (isOnActionSheet) {
+    const iconButtonProps: IconButtonProps = {
+      onPress: () => {
+        setSidePanel(POLL_SIDEBAR_NAME);
+      },
+      iconProps: {
+        icon: pollIcons["bar-chart"],
+        tintColor: $config.SECONDARY_ACTION_COLOR,
+      },
+      btnTextProps: {
+        text: "Polls",
+        textColor: $config.FONT_COLOR,
+        numberOfLines: 1,
+        textStyle: {
+          marginTop: 8,
+        },
+      },
+      isOnActionSheet: isOnActionSheet,
+    };
+
+    return (
+      <ToolbarItem>
+        <IconButton {...iconButtonProps} />
+      </ToolbarItem>
+    );
+  }
+  // On bigger screens
+  return (
+    <ToolbarItem style={style.toolbarItem}>
+      <View style={style.toolbarImg}>
+        <ImageIcon
+          iconType="plain"
+          iconSize={15}
+          icon={pollIcons["bar-chart"]}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
+        />
+      </View>
+      <Text style={style.toolbarText}>Polls</Text>
+    </ToolbarItem>
+  );
+};
+
+export { PollButtonWithSidePanel, POLL_SIDEBAR_NAME };
+
+const style = StyleSheet.create({
+  toolbarItem: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  toolbarImg: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  toolbarText: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: "400",
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

polling/components/Poll.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {PollModalType, PollProvider, usePoll} from '../context/poll-context';
+import PollFormWizardModal from './modals/PollFormWizardModal';
+import {PollEventsProvider, PollEventsSubscriber} from '../context/poll-events';
+import PollResponseFormModal from './modals/PollResponseFormModal';
+import PollResultModal from './modals/PollResultModal';
+import PollConfirmModal from './modals/PollEndConfirmModal';
+import PollItemNotFound from './modals/PollItemNotFound';
+import {log} from '../helpers';
+
+function Poll({children}: {children?: React.ReactNode}) {
+  return (
+    <PollEventsProvider>
+      <PollProvider>
+        <PollEventsSubscriber>
+          {children}
+          <PollModals />
+        </PollEventsSubscriber>
+      </PollProvider>
+    </PollEventsProvider>
+  );
+}
+
+function PollModals() {
+  const {modalState, polls} = usePoll();
+  // Log only in development mode to prevent performance hits
+  if (process.env.NODE_ENV === 'development') {
+    log('polls data changed: ', polls);
+  }
+
+  const renderModal = () => {
+    switch (modalState.modalType) {
+      case PollModalType.DRAFT_POLL:
+        if (modalState.id && polls[modalState.id]) {
+          const editFormObject = {...polls[modalState.id]};
+          return <PollFormWizardModal formObject={editFormObject} />;
+        }
+        return <PollFormWizardModal />;
+      case PollModalType.PREVIEW_POLL:
+        if (modalState.id && polls[modalState.id]) {
+          const previewFormObject = {...polls[modalState.id]};
+          return (
+            <PollFormWizardModal
+              formObject={previewFormObject}
+              formStep="PREVIEW"
+            />
+          );
+        }
+        break;
+      case PollModalType.RESPOND_TO_POLL:
+        if (modalState.id && polls[modalState.id]) {
+          return <PollResponseFormModal pollId={modalState.id} />;
+        }
+        return <PollItemNotFound />;
+      case PollModalType.VIEW_POLL_RESULTS:
+        if (modalState.id && polls[modalState.id]) {
+          return <PollResultModal pollId={modalState.id} />;
+        }
+        return <PollItemNotFound />;
+      case PollModalType.END_POLL_CONFIRMATION:
+        if (modalState.id && polls[modalState.id]) {
+          return <PollConfirmModal actionType="end" pollId={modalState.id} />;
+        }
+        return <PollItemNotFound />;
+      case PollModalType.DELETE_POLL_CONFIRMATION:
+        if (modalState.id && polls[modalState.id]) {
+          return (
+            <PollConfirmModal actionType="delete" pollId={modalState.id} />
+          );
+        }
+        return <PollItemNotFound />;
+      case PollModalType.NONE:
+        break;
+      default:
+        log('Unknown modal type: ', modalState);
+        return <></>;
+    }
+  };
+
+  return <>{renderModal()}</>;
+}
+
+export default Poll;

polling/components/PollAvatarHeader.tsx

@@ -0,0 +1,86 @@
+import {Text, View, StyleSheet} from 'react-native';
+import React from 'react';
+import {PollItem} from '../context/poll-context';
+import {
+  useContent,
+  UserAvatar,
+  ThemeConfig,
+  useString,
+  videoRoomUserFallbackText,
+  UidType,
+  $config,
+} from 'customization-api';
+
+interface Props {
+  pollItem: PollItem;
+}
+
+function PollAvatarHeader({pollItem}: Props) {
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
+  const {defaultContent} = useContent();
+
+  const getPollCreaterName = ({uid, name}: {uid: UidType; name: string}) => {
+    return defaultContent[uid]?.name || name || remoteUserDefaultLabel;
+  };
+
+  return (
+    <View style={style.titleCard}>
+      <View style={style.titleAvatar}>
+        <UserAvatar
+          name={getPollCreaterName(pollItem.createdBy)}
+          containerStyle={style.titleAvatarContainer}
+          textStyle={style.titleAvatarContainerText}
+        />
+      </View>
+      <View style={style.title}>
+        <Text style={style.titleText}>
+          {getPollCreaterName(pollItem.createdBy)}
+        </Text>
+        <Text style={style.titleSubtext}>{pollItem.type}</Text>
+      </View>
+    </View>
+  );
+}
+export const style = StyleSheet.create({
+  titleCard: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+  },
+  titleAvatar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleAvatarContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+  },
+  titleAvatarContainerText: {
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 16,
+    fontWeight: '600',
+    color: $config.VIDEO_AUDIO_TILE_COLOR,
+  },
+  titleText: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+  titleSubtext: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontWeight: '400',
+    lineHeight: 16,
+  },
+});
+
+export default PollAvatarHeader;