[Don't merge] Feature/polling

template/bridge/rtm/web/index.ts

@@ -37,7 +37,6 @@ export default class RtmEngine {
     ['channelMessageReceived', () => null],
     ['channelMemberJoined', () => null],
     ['channelMemberLeft', () => null],
-    ['channelAttributesUpdated', () => null],
   ]);
   public clientEventsMap = new Map<string, any>([
     ['connectionStateChanged', () => null],
@@ -67,8 +66,7 @@ export default class RtmEngine {
     if (
       event === 'channelMessageReceived' ||
       event === 'channelMemberJoined' ||
-      event === 'channelMemberLeft' ||
-      event === 'channelAttributesUpdated'
+      event === 'channelMemberLeft'
     ) {
       this.channelEventsMap.set(event, listener);
     } else if (
@@ -253,7 +251,7 @@ export default class RtmEngine {
           return acc;
         }, []);
 
-        this.channelEventsMap.get('channelAttributesUpdated')(
+        this.channelEventsMap.get('ChannelAttributesUpdated')(
           channelAttributes,
         );
       });
@@ -342,8 +340,21 @@ export default class RtmEngine {
     let response = {};
     await this.client
       .getChannelAttributes(channelId)
-      .then((attributes: string) => {
-        response = {attributes};
+      .then((attributes: RtmChannelAttribute) => {
+        /**
+         *  Here the attributes received are in the format {[valueOfKey]: valueOfValue} of type RtmChannelAttribute
+         *  We need to convert it into (array of objects [{key: 'valueOfKey', value: 'valueOfValue}])
+        /**
+         * 1. Loop through object
+         * 2. Create a object {key: "", value: ""} and push into array
+         * 3. Return the Array
+         */
+        const channelAttributes = Object.keys(attributes).reduce((acc, key) => {
+          const {value, lastUpdateTs, lastUpdateUserId} = attributes[key];
+          acc.push({key, value, lastUpdateTs, lastUpdateUserId});
+          return acc;
+        }, []);
+        response = channelAttributes;
       })
       .catch((e: any) => {
         Promise.reject(e);

template/customization/bottombar-native.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {ToolbarPreset, useSidePanel} from 'customization-api';
+import {
+  PollButtonSidePanelTrigger,
+  POLL_SIDEBAR_NAME,
+} from './polling/components/PollButtonSidePanelTrigger';
+
+const NativeBottomToolbar = () => {
+  const {setSidePanel} = useSidePanel();
+
+  return (
+    <ToolbarPreset
+      align="bottom"
+      items={{
+        more: {
+          fields: {
+            poll: {
+              component: PollButtonSidePanelTrigger,
+              onPress: () => {
+                setSidePanel(POLL_SIDEBAR_NAME);
+              },
+            },
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default NativeBottomToolbar;

template/customization/index.tsx

@@ -0,0 +1,28 @@
+import {$config, customize} from 'customization-api';
+import NativeBottomToolbar from './bottombar-native';
+import PollSidebar from './polling/components/PollSidebar';
+import Poll from './polling/components/Poll';
+import {POLL_SIDEBAR_NAME} from './polling/components/PollButtonSidePanelTrigger';
+
+const config = customize({
+  components: {
+    videoCall: {
+      wrapper: Poll,
+      bottomToolBar: NativeBottomToolbar,
+      customSidePanel: () => {
+        return [
+          {
+            name: POLL_SIDEBAR_NAME,
+            component: PollSidebar,
+            title: 'Polls',
+            onClose: () => {},
+          },
+        ];
+      },
+    },
+  },
+});
+
+const isLiveMode = $config.AUDIO_ROOM || $config.EVENT_MODE;
+
+export default isLiveMode ? {} : config;

template/customization/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "customization"
+}

template/customization/polling/components/Poll.tsx

@@ -0,0 +1,87 @@
+import React, {useMemo, useCallback} 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 = useCallback(() => {
+    switch (modalState.modalType) {
+      case PollModalType.DRAFT_POLL:
+        if (modalState.id && polls[modalState.id]) {
+          const editFormObject = {...polls[modalState.id]};
+          return (
+            <PollFormWizardModal formObject={editFormObject} formStep="DRAFT" />
+          );
+        }
+        return <PollFormWizardModal formStep="SELECT" />;
+      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 <></>;
+    }
+  }, [modalState, polls]);
+
+  const memoizedModal = useMemo(() => renderModal(), [renderModal]);
+
+  return <>{memoizedModal}</>;
+}
+
+export default Poll;

template/customization/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;

template/customization/polling/components/PollButtonSidePanelTrigger.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  useSidePanel,
+  ToolbarItem,
+  ImageIcon,
+  ThemeConfig,
+  $config,
+  useActionSheet,
+  IconButton,
+  IconButtonProps,
+} from 'customization-api';
+import {View, Text, StyleSheet} from 'react-native';
+import pollIcons from '../poll-icons';
+
+const POLL_SIDEBAR_NAME = 'side-panel-poll';
+
+const PollButtonSidePanelTrigger = () => {
+  const {isOnActionSheet} = useActionSheet();
+  const {sidePanel, setSidePanel} = useSidePanel();
+
+  const isPollPanelActive = sidePanel === POLL_SIDEBAR_NAME;
+  // On smaller screens
+  if (isOnActionSheet) {
+    const iconButtonProps: IconButtonProps = {
+      onPress: () => {
+        setSidePanel(POLL_SIDEBAR_NAME);
+      },
+      iconProps: {
+        icon: pollIcons['bar-chart'],
+        tintColor: isPollPanelActive
+          ? $config.PRIMARY_ACTION_TEXT_COLOR
+          : $config.SECONDARY_ACTION_COLOR,
+        iconBackgroundColor: isPollPanelActive
+          ? $config.PRIMARY_ACTION_BRAND_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, ...style.spacing}}>
+      <View style={style.toolbarImg}>
+        <ImageIcon
+          iconType="plain"
+          iconSize={22}
+          icon={pollIcons['bar-chart']}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
+        />
+      </View>
+      <Text style={style.toolbarText}>Polls</Text>
+    </ToolbarItem>
+  );
+};
+
+export {PollButtonSidePanelTrigger, 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,
+  },
+  spacing: {
+    margin: 12,
+  },
+});