Nolo 305 create the page biblioth que (#38)

* Add video API calls

* Add library screen

* Prettified Code!

* Add bridgeless mode on ios

* Add precommit hook

* Add precommit hook

* Add precommit hook

* Add husky config

* Add text when running husky

* Add precommit hook

# Conflicts:
#	.husky/pre-commit

* Remove useless images

---------

Co-authored-by: JohanCDev <[email protected]>

.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "Running husky pre-commit hooks ✨"
+
+yarn image-optimization
+
+echo "All done 🚀"

bin/optimization

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+staged_png_files=$(git diff --cached --name-only --diff-filter=ACM | grep "^assets/.*\.png$")
+
+if [ -z "$staged_png_files" ]; then
+  exit 0
+fi
+
+echo "Compressing staged .png images in assets..."
+
+# Loop over each staged .png file and compress it
+for file in $staged_png_files; do
+  echo "Compressing $file"
+  optipng -o7 "$file" > /dev/null 2>&1
+done
+
+echo "Checking for changes..."
+git diff --exit-code --quiet -- ./assets
+if [ $? -eq 0 ]; then
+  echo "No changes detected."
+else
+  echo "Changes detected. We'll add the changes to the commit. Please commit again."
+  for file in $staged_png_files; do
+    git add "$file"
+  done
+  exit 1
+fi

ios/NoLoSay/AppDelegate.mm

@@ -19,6 +19,11 @@ - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
   return [self getBundleURL];
 }
 
+- (BOOL)bridgelessEnabled
+{
+    return YES;
+}
+
 - (NSURL *)getBundleURL
 {
 #if DEBUG

package.json

@@ -28,7 +28,9 @@
     "documentation": "typedoc --options ./typedoc.json",
     "test": "jest --coverage",
     "format": "prettier --write '**/*.{tsx,ts,jsx,js}' --config './.prettierrc.js'",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "prepare": "husky install",
+    "image-optimization": "bash bin/optimization"
   },
   "dependencies": {
     "@react-native-camera-roll/camera-roll": "^7.0.0",
@@ -75,6 +77,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
     "jest": "^29.6.3",
     "metro-config": "^0.80.1",
     "metro-react-native-babel-preset": "0.72.3",

src/global/types/Videos.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line no-shadow
+export enum VideoValidationStatus {
+  Pending = 'Pending',
+  Approved = 'Approved',
+  Rejected = 'Rejected',
+}
+
+export type Video = {
+  id: string
+  artWorkName: string
+  artWorkImage: string
+  placeName: string
+  validationStatus: VideoValidationStatus
+  videoDuration: number
+}

src/global/types/screensProps/VideoStackParams.ts

@@ -16,6 +16,7 @@ export type VideoStackParamList = {
   PlacesNeedingTranslation: undefined
   PlaceArtsPiecesScreen: undefined
   TextScreen: undefined
+  LibraryScreen: undefined
 }
 
 /**
@@ -29,3 +30,4 @@ export type PlacesNeedingDescriptionScreenProps = NativeStackScreenProps<
 >
 export type PlaceArtsPiecesScreenProps = NativeStackScreenProps<VideoStackParamList, 'PlaceArtsPiecesScreen'>
 export type TextScreenProps = NativeStackScreenProps<VideoStackParamList, 'TextScreen'>
+export type LibraryScreenProps = NativeStackScreenProps<VideoStackParamList, 'LibraryScreen'>

src/helpers/httpClient/videos.ts

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview Video related helper functions.
+ * @module videos
+ * @description Helper functions for videos.
+ */
+
+import { Video, VideoValidationStatus } from '../../global/types/Videos'
+
+type GetUserVideosParams = {
+  userId: number
+}
+
+const VIDEOS: Video[] = [
+  {
+    id: '1',
+    artWorkName: 'La tapisserie de Charles X',
+    artWorkImage: 'https://collections.louvre.fr/media/cache/medium/0000000021/0000101500/0000793562_OG.JPG',
+    placeName: 'Château des ducs de Bretagne',
+    validationStatus: VideoValidationStatus.Approved,
+    videoDuration: 140,
+  },
+  {
+    id: '2',
+    artWorkName: 'Château sur bois',
+    artWorkImage: 'https://media.paperblog.fr/i/580/5808387/nantes-L-BoeJzB.jpeg',
+    placeName: 'Château des ducs de Bretagne',
+    validationStatus: VideoValidationStatus.Pending,
+    videoDuration: 120,
+  },
+]
+
+// Remove this line when the function is implemented
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function getUserVideos({ userId }: GetUserVideosParams) {
+  return new Promise<Video[]>(resolve => {
+    setTimeout(() => {
+      resolve(VIDEOS)
+    }, 500)
+  })
+}

src/screens/addSection/ActionsScreen/useActionsScreenController.ts

@@ -48,7 +48,9 @@ export default function useActionsScreenController(): useActionScreenControllerP
         navigation.navigate('PlacesNeedingTranslation')
         break
       case ContentCategoryId.LIBRARY:
-        console.log('Pressed on library')
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        navigation.navigate('LibraryScreen')
         break
       case ContentCategoryId.COMMUNITY:
         console.log('Pressed on community')

src/screens/addSection/AddSection.tsx

@@ -13,6 +13,7 @@ import VideoScreen from './VideoScreen/VideoScreen'
 import PlacesNeedingTranslation from './PlacesNeedTranslation/PlacesNeedingTranslation'
 import PlaceArtsPiecesScreen from './PlaceArtsPiecesScreen/PlaceArtsPiecesScreen'
 import TextScreen from './TextScreen/TextScreen'
+import LibraryScreen from './LibraryScreen/LibraryScreen'
 
 /**
  * @function AddScreen
@@ -56,6 +57,10 @@ export default function AddScreen(): React.JSX.Element {
           // @ts-ignore
           component={TextScreen}
         />
+        <VideoStack.Screen
+          name='LibraryScreen'
+          component={LibraryScreen}
+        />
       </VideoStack.Group>
     </VideoStack.Navigator>
   )

src/screens/addSection/LibraryScreen/LibraryScreen.tsx

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview This screen is used to display the library of the user.
+ * @module LibraryScreen
+ * @requires react-native
+ */
+
+import React from 'react'
+import { StyleSheet, ScrollView, View } from 'react-native'
+import useLibraryScreenController from './useLibraryScreenController'
+import TopBar from './Views/TopBar'
+import LoadingModal from '../../../components/LoadingModal'
+import VideoDisplay from './Views/VideoDisplay'
+
+type Props = {
+  navigation: any
+}
+
+export default function LibraryScreen({ navigation }: Props) {
+  const { videos, loading } = useLibraryScreenController()
+
+  return (
+    <View style={styles.container}>
+      <TopBar navigation={navigation} />
+      <ScrollView>
+        {videos.map(video => (
+          <VideoDisplay
+            key={video.id}
+            video={video}
+          />
+        ))}
+      </ScrollView>
+      <LoadingModal visible={loading} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'scroll',
+  },
+})

src/screens/addSection/LibraryScreen/Views/TopBar.tsx

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview TopBar view of the PlacesNeedTranslation screen
+ * @module TopBar
+ * @description TopBar, it displays the title of the screen and a back button.
+ * @requires react react-native
+ */
+
+import React from 'react'
+import { View, Pressable, Text, StyleSheet } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import images from '../../../../global/images'
+
+/**
+ * @typedef Props
+ * @property {any} navigation Navigation object
+ */
+type Props = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  navigation: any
+}
+
+/**
+ * @function TopBar
+ * @description Component that renders the TopBar view.
+ * @param navigation TopBar navigation object
+ * @returns {React.JSX.Element} TopBar component template
+ */
+export default function TopBar({ navigation }: Props): JSX.Element {
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={styles.pressablePosition}
+        onPress={() => navigation.goBack()}
+      >
+        <FastImage
+          source={images.icons.outline.backArrow()}
+          style={styles.backIcon}
+        />
+      </Pressable>
+      <Text style={styles.title}>Bibliothèque</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 'auto',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    paddingVertical: 20,
+  },
+  pressablePosition: {
+    position: 'absolute',
+    left: 15,
+  },
+  backIcon: {
+    height: 25,
+    width: 20,
+    transform: [{ rotate: '180deg' }],
+  },
+  title: {
+    fontSize: 24,
+    fontFamily: 'Poppins',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+})

src/screens/addSection/LibraryScreen/Views/VideoDisplay.tsx

@@ -0,0 +1,98 @@
+/**
+ * @fileoverview Component that renders a video on the library screen
+ * @module VideoDisplay
+ * @requires react react-native
+ */
+import React, { Text, StyleSheet, View } from 'react-native'
+import ImageLoader from '../../../../components/ImageLoader'
+import { Video, VideoValidationStatus } from '../../../../global/types/Videos'
+
+/**
+ * @typedef Props
+ * @property {Video} Video Video to display
+ */
+type Props = {
+  video: Video
+}
+
+/**
+ * @function VideoDisplay
+ * @description Component that renders a video on the library screen
+ * @param place Video to display
+ * @returns {JSX.Element} VideoDisplay component
+ */
+export default function VideoDisplay({ video }: Props): JSX.Element {
+  const validationStatus =
+    // eslint-disable-next-line no-nested-ternary
+    video.validationStatus === VideoValidationStatus.Pending
+      ? { text: 'En attente de vérification', color: 'orange' }
+      : VideoValidationStatus.Approved
+        ? { text: 'Validé', color: 'green' }
+        : { text: 'Refusé', color: 'red' }
+
+  return (
+    <View style={styles.container}>
+      <ImageLoader
+        imageURL={video.artWorkImage}
+        imageStyle={styles.image}
+      />
+      <View style={styles.textContainer}>
+        <Text style={styles.placeText}>{video.placeName}</Text>
+        <Text style={styles.artWorkText}>{video.artWorkName}</Text>
+        <Text style={[styles.state, { color: validationStatus.color }]}>État: {validationStatus.text}</Text>
+        <Text style={styles.durationText}>
+          Durée de la vidéo: {(video.videoDuration / 60).toFixed()}mn
+          {video.videoDuration % 60 !== 0 ? ` ${video.videoDuration % 60}s` : ''}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '90%',
+    marginHorizontal: '5%',
+    marginTop: 12,
+    flexDirection: 'row',
+    borderRadius: 12,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  textContainer: {
+    width: '80%',
+    flexDirection: 'column',
+    paddingHorizontal: 4,
+    paddingVertical: 8,
+  },
+  image: {
+    height: 100,
+    width: '20%',
+    borderRadius: 12,
+  },
+  placeText: {
+    fontFamily: 'Poppins',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  artWorkText: {
+    fontFamily: 'Poppins',
+    fontSize: 14,
+    fontWeight: '400',
+    marginLeft: 2,
+  },
+  state: {
+    fontFamily: 'Poppins',
+    fontSize: 12,
+    fontWeight: '500',
+    marginLeft: 2,
+    marginTop: 4,
+  },
+  durationText: {
+    fontFamily: 'Poppins',
+    fontSize: 12,
+    fontWeight: '500',
+    textAlign: 'right',
+    marginRight: 8,
+  },
+})