feat(agenda): handle multiple VCs associated to a single Lecture in agenda

.env.example

@@ -1,2 +1 @@
-API_BASE_PATH=https://app.didattica.polito.it/mock/api
-MAPBOX_TOKEN=
+API_BASE_PATH=https://app.didattica.polito.it/api

lib/ui/components/Swiper.tsx

@@ -0,0 +1,88 @@
+import { ReactElement, useState } from 'react';
+import {
+  FlatList,
+  ListRenderItemInfo,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { CarouselDots } from '@lib/ui/components/CarouselDots';
+import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
+import { Theme } from '@lib/ui/types/Theme';
+
+type SwiperProps<T> = {
+  items: readonly T[];
+  renderItem: (item: ListRenderItemInfo<T>) => ReactElement;
+  keyExtractor: (item: T) => string;
+  onIndexChanged: (newIndex: number, oldIndex: number) => void;
+};
+
+export const Swiper = <T,>({
+  items,
+  renderItem,
+  keyExtractor,
+  onIndexChanged,
+}: SwiperProps<T>) => {
+  const styles = useStylesheet(createStyles);
+  const [currentPageIndex, setCurrentPageIndex] = useState<number>(0);
+  const { bottom: marginBottom } = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+
+  return (
+    <View
+      style={[
+        styles.screen,
+        {
+          marginBottom,
+        },
+      ]}
+    >
+      <FlatList
+        data={items}
+        horizontal
+        pagingEnabled
+        keyExtractor={keyExtractor}
+        onScroll={({
+          nativeEvent: {
+            contentOffset: { x },
+          },
+        }) => {
+          const newIndex = Math.max(0, Math.round(x / width));
+          setCurrentPageIndex(oldIndex => {
+            if (oldIndex === newIndex) return oldIndex;
+            onIndexChanged(newIndex, oldIndex);
+            return newIndex;
+          });
+        }}
+        scrollEventThrottle={100}
+        showsHorizontalScrollIndicator={false}
+        renderItem={renderItem}
+        extraData={items}
+      />
+
+      <View style={styles.dotsContainer}>
+        <CarouselDots
+          carouselLength={items.length ?? 0}
+          carouselIndex={currentPageIndex}
+          expandedDotsCounts={4}
+        />
+      </View>
+    </View>
+  );
+};
+const createStyles = ({ spacing }: Theme) =>
+  StyleSheet.create({
+    screen: {
+      flex: 1,
+    },
+    dotsContainer: {
+      alignItems: 'center',
+      height: 6,
+      marginVertical: spacing[4],
+    },
+    dot: {
+      marginHorizontal: spacing[1],
+    },
+  });

src/features/agenda/screens/LectureScreen.tsx

@@ -1,14 +1,22 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SafeAreaView, ScrollView, View } from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { ListRenderItemInfo } from 'react-native';
 
 import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
 import { Icon } from '@lib/ui/components/Icon';
 import { ListItem } from '@lib/ui/components/ListItem';
 import { OverviewList } from '@lib/ui/components/OverviewList';
 import { PersonListItem } from '@lib/ui/components/PersonListItem';
 import { Row } from '@lib/ui/components/Row';
+import { Swiper } from '@lib/ui/components/Swiper';
 import { useTheme } from '@lib/ui/hooks/useTheme';
+import { VirtualClassroom } from '@polito/api-client/models/VirtualClassroom';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
 import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer';
@@ -19,56 +27,95 @@ import { useGetPerson } from '../../../core/queries/peopleHooks';
 import { GlobalStyles } from '../../../core/styles/GlobalStyles';
 import { convertMachineDateToFormatDate } from '../../../utils/dates';
 import { CourseIcon } from '../../courses/components/CourseIcon';
-import {
-  isLiveVC,
-  isRecordedVC,
-  isVideoLecture,
-} from '../../courses/utils/lectures';
+import { isLiveVC, isRecordedVC } from '../../courses/utils/lectures';
 import { resolvePlaceId } from '../../places/utils/resolvePlaceId';
 import { AgendaStackParamList } from '../components/AgendaNavigator';
 
 type Props = NativeStackScreenProps<AgendaStackParamList, 'Lecture'>;
 
 export const LectureScreen = ({ route, navigation }: Props) => {
   const { item: lecture } = route.params;
+  const [currentVideoIndex, setCurrentVideoIndex] = useState<number>(0);
+  const associatedVirtualClassrooms = lecture.virtualClassrooms;
   const { t } = useTranslation();
   const { fontSizes } = useTheme();
   const teacherQuery = useGetPerson(lecture.teacherId);
-  const { data: virtualClassrooms } = useGetCourseVirtualClassrooms(
+  const { data: virtualClassroomsQuery } = useGetCourseVirtualClassrooms(
     lecture.courseId,
   );
-  const virtualClassroom = useMemo(() => {
-    if (lecture.virtualClassrooms.length > 0 || !virtualClassrooms) return;
+  const { width } = useWindowDimensions();
+
+  const handleSetCurrentPageIndex = (newIndex: number, oldIndex: number) => {
+    // setCurrentVideoIndex(newIndex);
+    setPlayingVC(oldVC => [
+      ...oldVC.map((v, i) => {
+        if (i === newIndex) v.isPaused = false;
+        if (i === oldIndex) v.isPaused = true;
+        return v;
+      }),
+    ]);
+  };
+  const renderItem = ({ item }: ListRenderItemInfo<PlayingVC>) => {
+    return (
+      <View style={{ width }}>
+        <VideoPlayer
+          source={{ uri: item.videoUrl }}
+          poster={item.coverUrl ?? undefined}
+          paused={item.isPaused}
+        />
+      </View>
+    );
+  };
+
+  type PlayingVC = VirtualClassroom & { isPaused: boolean };
+
+  const [playingVC, setPlayingVC] = useState<PlayingVC[]>([]);
 
-    // Temporary behaviour until multiple videos in 1 screen are managed
-    const vc = [...lecture.virtualClassrooms].shift();
-    if (!vc) return;
+  useEffect(() => {
+    if (!associatedVirtualClassrooms || !virtualClassroomsQuery) return;
 
-    return virtualClassrooms.find(vcs => vcs.id === vc.id);
-  }, [lecture.virtualClassrooms, virtualClassrooms]);
+    setPlayingVC(
+      associatedVirtualClassrooms
+        .map((vc, index) => {
+          const apiVC = virtualClassroomsQuery.find(vcs => vcs.id === vc.id);
+
+          return { ...apiVC, isPaused: index > 0 } as PlayingVC;
+        })
+        .filter(vc => vc && vc?.videoUrl),
+    );
+  }, [associatedVirtualClassrooms, virtualClassroomsQuery]);
 
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={GlobalStyles.fillHeight}
     >
       <SafeAreaView>
-        {lecture &&
-          (isRecordedVC(lecture) || isVideoLecture(lecture)) &&
-          lecture.videoUrl && (
+        {playingVC[0] &&
+          playingVC.length === 1 &&
+          isRecordedVC(playingVC[0]) && (
             <VideoPlayer
-              source={{ uri: lecture.videoUrl }}
-              poster={lecture?.coverUrl ?? undefined}
+              source={{ uri: playingVC[0]?.videoUrl }}
+              poster={playingVC[0]?.coverUrl ?? undefined}
             />
           )}
-        {lecture && isLiveVC(lecture) && (
+        {playingVC && playingVC.length > 1 && (
+          <Swiper
+            items={playingVC}
+            renderItem={renderItem}
+            keyExtractor={item => item.id.toString()}
+            onIndexChanged={handleSetCurrentPageIndex}
+          />
+        )}
+
+        {playingVC && isLiveVC(playingVC) && (
           <View></View>
           // TODO handle live VC
           // <CtaButton title={t('courseVirtualClassroomScreen.liveCta')} action={Linking.openURL(lecture.)}/>
         )}
         <Row justify="space-between" align="center">
           <EventDetails
-            title={virtualClassroom?.title ?? lecture.title}
+            title={playingVC[currentVideoIndex]?.title ?? lecture.title}
             type={t('common.lecture')}
             time={`${convertMachineDateToFormatDate(lecture.date)} ${
               lecture.fromTime