Add video widget display component in public page

met-api/src/met_api/constants/widget.py

@@ -23,3 +23,5 @@ class WidgetType(IntEnum):
     PHASES = 3
     SUBSCRIBE = 4
     EVENTS = 5
+    Map = 6
+    Video = 7

met-web/package.json

@@ -55,6 +55,7 @@
         "react-hook-form": "^7.37.0",
         "react-if": "^4.1.4",
         "react-map-gl": "^7.0.21",
+        "react-player": "^2.12.0",
         "react-redux": "^7.2.8",
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",

met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentOptionCard.tsx

@@ -20,7 +20,7 @@ const DocumentOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Document);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Document);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.DOCUMENT_FORM);
             return;

met-web/src/components/engagement/form/EngagementWidgets/Events/EventsOptionCard.tsx

@@ -21,7 +21,7 @@ const EventsOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Events);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Events);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.EVENTS_FORM);
             return;

met-web/src/components/engagement/form/EngagementWidgets/Map/MapOptionCard.tsx

@@ -21,7 +21,7 @@ const MapOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Map);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Map);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.MAP_FORM);
             return;

met-web/src/components/engagement/form/EngagementWidgets/Phases/PhasesOptionCard.tsx

@@ -26,7 +26,7 @@ const PhasesOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Phases);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Phases);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.PHASES_FORM);
             return;

met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeOptionCard.tsx

@@ -19,7 +19,7 @@ const SubscribeOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Subscribe);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Subscribe);
         if (alreadyExists) {
             return;
         }

met-web/src/components/engagement/form/EngagementWidgets/Video/VideoOptionCard.tsx

@@ -9,8 +9,8 @@ import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { optionCardStyle } from '../Phases/PhasesOptionCard';
 import { WidgetTabValues } from '../type';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { useCreateWidgetMutation } from 'apiManager/apiSlices/widgets';
+import MovieIcon from '@mui/icons-material/Movie';
 
 const VideoOptionCard = () => {
     const { widgets, loadWidgets, handleWidgetDrawerOpen, handleWidgetDrawerTabValueChange } =
@@ -21,7 +21,7 @@ const VideoOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Video);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Video);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.VIDEO_FORM);
             return;
@@ -65,7 +65,7 @@ const VideoOptionCard = () => {
                 <Else>
                     <Grid container alignItems="center" justifyContent="flex-start" direction="row" columnSpacing={1}>
                         <Grid item sx={{ mr: 0.5 }}>
-                            <LocationOnIcon color="info" sx={{ p: 0.5, fontSize: '4em' }} />
+                            <MovieIcon color="info" sx={{ p: 0.5, fontSize: '4em' }} />
                         </Grid>
                         <Grid
                             container

met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningOptionCard.tsx

@@ -20,7 +20,7 @@ const WhoIsListeningOptionCard = () => {
     const [isCreatingWidget, setIsCreatingWidget] = useState(false);
 
     const handleCreateWidget = async () => {
-        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.WhoIsListening);
+        const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.WhoIsListening);
         if (alreadyExists) {
             handleWidgetDrawerTabValueChange(WidgetTabValues.WHO_IS_LISTENING_FORM);
             return;

met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { MetPaper, MetHeader2, MetParagraph } from 'components/common';
+import { Grid, Skeleton, Divider } from '@mui/material';
+import { Widget } from 'models/widget';
+import { useAppDispatch } from 'hooks';
+import { openNotification } from 'services/notificationService/notificationSlice';
+import { VideoWidget } from 'models/videoWidget';
+import { fetchVideoWidgets } from 'services/widgetService/VideoService';
+import ReactPlayer from 'react-player/lazy';
+
+interface VideoWidgetProps {
+    widget: Widget;
+}
+
+const VideoWidgetView = ({ widget }: VideoWidgetProps) => {
+    const dispatch = useAppDispatch();
+    const [videoWidget, setVideoWidget] = useState<VideoWidget | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const fetchVideo = async () => {
+        try {
+            const videos = await fetchVideoWidgets(widget.id);
+            const video = videos[videos.length - 1];
+            setVideoWidget(video);
+            setIsLoading(false);
+        } catch (error) {
+            setIsLoading(false);
+            console.log(error);
+            dispatch(
+                openNotification({
+                    severity: 'error',
+                    text: 'Error occurred while fetching Engagement widgets information',
+                }),
+            );
+        }
+    };
+
+    useEffect(() => {
+        fetchVideo();
+    }, [widget]);
+
+    if (isLoading) {
+        return (
+            <MetPaper elevation={1} sx={{ padding: '1em' }}>
+                <Grid container justifyContent="flex-start" spacing={3}>
+                    <Grid item xs={12}>
+                        <MetHeader2>
+                            <Skeleton variant="rectangular" />
+                        </MetHeader2>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Skeleton variant="rectangular" height="20em" />
+                    </Grid>
+                </Grid>
+            </MetPaper>
+        );
+    }
+
+    if (!videoWidget) {
+        return null;
+    }
+
+    return (
+        <>
+            <MetPaper elevation={1} sx={{ paddingTop: '0.5em', padding: '1em' }}>
+                <Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
+                    <Grid
+                        item
+                        container
+                        justifyContent={{ xs: 'center', md: 'flex-start' }}
+                        flexDirection={'column'}
+                        xs={12}
+                        paddingBottom={0}
+                    >
+                        <MetHeader2 bold>Video</MetHeader2>
+                        <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
+                    </Grid>
+                    <Grid item xs={12}>
+                        <MetParagraph>{videoWidget.description}</MetParagraph>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <ReactPlayer url={videoWidget.video_url} controls width="100%" />
+                    </Grid>
+                </Grid>
+            </MetPaper>
+        </>
+    );
+};
+
+export default VideoWidgetView;

met-web/src/components/engagement/view/widgets/WidgetSwitch.tsx

@@ -6,6 +6,7 @@ import DocumentWidget from './DocumentWidget';
 import SubscribeWidget from './Subscribe/SubscribeWidget';
 import EventsWidget from './Events/EventsWidget';
 import MapWidget from './Map/MapWidget';
+import VideoWidgetView from './Video/VideoWidgetView';
 interface WidgetSwitchProps {
     widget: Widget;
 }
@@ -29,6 +30,9 @@ export const WidgetSwitch = ({ widget }: WidgetSwitchProps) => {
                 <Case condition={widget.widget_type_id === WidgetType.Subscribe}>
                     <SubscribeWidget />
                 </Case>
+                <Case condition={widget.widget_type_id === WidgetType.Video}>
+                    <VideoWidgetView widget={widget} />
+                </Case>
             </Switch>
         </>
     );

met-web/src/services/widgetService/VideoService/index.tsx

@@ -24,10 +24,7 @@ export const postVideo = async (widget_id: number, data: PostVideoRequest): Prom
     try {
         const url = replaceUrl(Endpoints.VideoWidgets.CREATE, 'widget_id', String(widget_id));
         const response = await http.PostRequest<VideoWidget>(url, data);
-        if (response.data) {
-            return response.data;
-        }
-        return Promise.reject('Failed to create video widget');
+        return response.data || Promise.reject('Failed to create video widget');
     } catch (err) {
         return Promise.reject(err);
     }
@@ -52,10 +49,7 @@ export const patchVideo = async (
             },
         });
         const response = await http.PatchRequest<VideoWidget>(url, data);
-        if (response.data) {
-            return response.data;
-        }
-        return Promise.reject('Failed to create video widget');
+        return response.data || Promise.reject('Failed to create video widget');
     } catch (err) {
         return Promise.reject(err);
     }