Merge pull request #399 from MTES-MCT/feat/add-video-into-repo

feat(video): add video into repo

servers.conf.erb

@@ -24,7 +24,7 @@ server {
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
     add_header X-Frame-Options "deny";
     add_header X-Content-Type-Options "nosniff";
-    add_header Content-Security-Policy "object-src 'self'; connect-src 'self' https://client.crisp.chat https://api-adresse.data.gouv.fr https://sentry.incubateur.net wss://client.relay.crisp.chat https://stats.data.gouv.fr; base-uri 'self'; default-src 'self'; script-src 'self' https://client.crisp.chat https://stats.data.gouv.fr https://survey.su'unsafe-eval' 'unsafe-inline'; img-src 'self' data: https://client.crisp.chat https://stats.data.gouv.fr https://storage.gra.cloud.ovh.net/v1/AUTH_8a2f745174054ce1b5ee7c6e79601088/mobilic/ https://res.cloudinary.com https://images.unsplash.com; style-src 'self' 'unsafe-inline' https://client.crisp.chat https://cdn.jsdelivr.net; font-src 'self' https://client.crisp.chat https://cdn.jsdelivr.net; frame-src https://metabase.mobilic.beta.gouv.fr https://www.slideshare.net https://cgu.mobilic.beta.gouv.fr; media-src https://storage.gra.cloud.ovh.net/v1/AUTH_8a2f745174054ce1b5ee7c6e79601088/mobilic/;";
+    add_header Content-Security-Policy "object-src 'self'; connect-src 'self' https://client.crisp.chat https://api-adresse.data.gouv.fr https://sentry.incubateur.net wss://client.relay.crisp.chat https://stats.data.gouv.fr; base-uri 'self'; default-src 'self'; script-src 'self' https://client.crisp.chat https://stats.data.gouv.fr https://survey.su'unsafe-eval' 'unsafe-inline'; img-src 'self' data: https://client.crisp.chat https://stats.data.gouv.fr https://res.cloudinary.com https://images.unsplash.com; style-src 'self' 'unsafe-inline' https://client.crisp.chat https://cdn.jsdelivr.net; font-src 'self' https://client.crisp.chat https://cdn.jsdelivr.net; frame-src https://metabase.mobilic.beta.gouv.fr https://www.slideshare.net https://cgu.mobilic.beta.gouv.fr;";
     add_header X-XSS-Protection "1; mode=block";
     add_header Cache-Control $cache_control;
 

web/landing/ResourcePage/AdminResourcePage.js

@@ -12,6 +12,12 @@ import { SlideshareCard } from "./SlideshareCard";
 import Box from "@mui/material/Box";
 import { resourcePagesClasses } from "./styles/ResourcePagesStyle";
 import { RESOURCES_DOCUMENT } from "./ResourcePage";
+import { DriverVideoSection } from "./DriverVideoSection";
+
+import GestionnaireInscriptionVideo from "common/assets/videos/gestionnaires/gestionnaire-inscription.mp4";
+import GestionnaireInscriptionPoster from "common/assets/videos/gestionnaires/gestionnaire-inscription.jpg";
+import GestionnaireUtilisationVideo from "common/assets/videos/gestionnaires/gestionnaire-utilisation.mp4";
+import GestionnaireUtilisationPoster from "common/assets/videos/gestionnaires/gestionnaire-utilisation.jpg";
 
 export function AdminResourcePage() {
   const classes = resourcePagesClasses();
@@ -38,13 +44,15 @@ export function AdminResourcePage() {
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Vous inscrire sur Mobilic"
-              videoKey="resources/videos/gestionnaires/gestionnaire-inscription.mp4"
+              video={GestionnaireInscriptionVideo}
+              poster={GestionnaireInscriptionPoster}
             />
           </Grid>
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Utiliser l'interface gestionnaire"
-              videoKey="resources/videos/gestionnaires/gestionnaire-utilisation.mp4"
+              video={GestionnaireUtilisationVideo}
+              poster={GestionnaireUtilisationPoster}
             />
           </Grid>
         </Grid>
@@ -93,42 +101,7 @@ export function AdminResourcePage() {
         <Typography variant={"h3"} className={classes.resourceSubtitle}>
           Je cherche une notice d'utilisation pour mes salariés
         </Typography>
-        <Grid container direction="row" alignItems="center" spacing={10}>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Inscription sur Mobilic"
-              videoKey="resources/videos/salaries/salarie-inscription.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Télécharger Mobilic sur Android"
-              videoKey="resources/videos/salaries/salarie-installation-appli-android.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Télécharger Mobilic sur iPhone"
-              videoKey="resources/videos/salaries/salarie-installation-appli-iphone.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Utiliser Mobilic au quotidien"
-              videoKey="resources/videos/salaries/salarie-usage-quotidien.mp4"
-            />
-          </Grid>
-        </Grid>
-        <Button
-          color="primary"
-          size="small"
-          className={classes.viewAllButton}
-          variant={"outlined"}
-          href="https://www.youtube.com/channel/UCqJlEoGiU1jcFjJWAr1BcVg"
-          target="_blank"
-        >
-          Voir toutes les vidéos
-        </Button>
+        <DriverVideoSection buttonStyle={classes.viewAllButton} />
         <Grid container direction="row" alignItems="stretch" spacing={10}>
           <Grid item xs={12} sm={6}>
             <Box>

web/landing/ResourcePage/ControllerResourcePage.js

@@ -13,6 +13,9 @@ import { resourcePagesClasses } from "./styles/ResourcePagesStyle";
 import { VideoCard } from "./VideoCard";
 import { RESOURCES_DOCUMENT } from "./ResourcePage";
 
+import TutoCttItVideo from "common/assets/videos/controleurs/tuto-ctt-it-juin-2023.mp4";
+import TutoPoliceVideo from "common/assets/videos/controleurs/tuto-police-juin-2023.mp4";
+
 export function ControllerResourcePage() {
   const classes = resourcePagesClasses();
 
@@ -65,7 +68,7 @@ export function ControllerResourcePage() {
             <Box>
               <VideoCard
                 description="Effectuer un contrôle en bord de route"
-                videoKey="resources/videos/controleurs/tuto-ctt-it-juin-2023.mp4"
+                video={TutoCttItVideo}
               />
             </Box>
             <Button
@@ -111,7 +114,7 @@ export function ControllerResourcePage() {
             <Box>
               <VideoCard
                 description="Effectuer un contrôle en bord de route"
-                videoKey="resources/videos/controleurs/tuto-police-juin-2023.mp4"
+                video={TutoPoliceVideo}
               />
             </Box>
             <Button

web/landing/ResourcePage/DriverResourcePage.js

@@ -5,8 +5,7 @@ import Grid from "@mui/material/Grid";
 import { Header } from "../../common/Header";
 import { Footer } from "../footer";
 import { PaperContainerTitle } from "../../common/PaperContainer";
-import Button from "@mui/material/Button";
-import { VideoCard } from "./VideoCard";
+import { DriverVideoSection } from "./DriverVideoSection";
 import { Breadcrumb, BreadcrumbItem } from "@dataesr/react-dsfr";
 import Box from "@mui/material/Box";
 import { SlideshareCard } from "./SlideshareCard";
@@ -57,41 +56,7 @@ export function DriverResourcePage() {
       maxWidth={false}
     >
       <Container maxWidth="lg" className={classes.inner}>
-        <Grid container direction="row" alignItems="center" spacing={10}>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Inscription sur Mobilic"
-              videoKey="resources/videos/salaries/salarie-inscription.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Télécharger Mobilic sur Android"
-              videoKey="resources/videos/salaries/salarie-installation-appli-android.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Télécharger Mobilic sur iPhone"
-              videoKey="resources/videos/salaries/salarie-installation-appli-iphone.mp4"
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <VideoCard
-              description="Utiliser Mobilic au quotidien"
-              videoKey="resources/videos/salaries/salarie-usage-quotidien.mp4"
-            />
-          </Grid>
-        </Grid>
-        <Button
-          color="primary"
-          size="small"
-          className={classes.viewAllButton}
-          variant={"outlined"}
-          href="https://www.youtube.com/channel/UCqJlEoGiU1jcFjJWAr1BcVg/videos"
-        >
-          Voir toutes les vidéos
-        </Button>
+        <DriverVideoSection buttonStyle={classes.viewAllButton} />
       </Container>
     </Container>,
     <Footer key={4} />

web/landing/ResourcePage/DriverVideoSection.js

@@ -0,0 +1,60 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import { VideoCard } from "./VideoCard";
+
+import SalarieInscriptionVideo from "common/assets/videos/salaries/salarie-inscription.mp4";
+import SalarieInscriptionPoster from "common/assets/videos/salaries/salarie-inscription.jpg";
+import SalarieInstallAndroidVideo from "common/assets/videos/salaries/salarie-installation-appli-android.mp4";
+import SalarieInstallAndroidPoster from "common/assets/videos/salaries/salarie-installation-appli-android.jpg";
+import SalarieInstallIphoneVideo from "common/assets/videos/salaries/salarie-installation-appli-iphone.mp4";
+import SalarieInstallIphonePoster from "common/assets/videos/salaries/salarie-installation-appli-iphone.jpg";
+import SalarieUsageQuotidienVideo from "common/assets/videos/salaries/salarie-usage-quotidien.mp4";
+import SalarieUsageQuotidienPoster from "common/assets/videos/salaries/salarie-usage-quotidien.jpg";
+
+export function DriverVideoSection({ buttonStyle }) {
+  return (
+    <>
+      <Grid container direction="row" alignItems="center" spacing={10}>
+        <Grid item xs={12} sm={6}>
+          <VideoCard
+            description="Inscription sur Mobilic"
+            video={SalarieInscriptionVideo}
+            poster={SalarieInscriptionPoster}
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <VideoCard
+            description="Télécharger Mobilic sur Android"
+            video={SalarieInstallAndroidVideo}
+            poster={SalarieInstallAndroidPoster}
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <VideoCard
+            description="Télécharger Mobilic sur iPhone"
+            video={SalarieInstallIphoneVideo}
+            poster={SalarieInstallIphonePoster}
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <VideoCard
+            description="Utiliser Mobilic au quotidien"
+            video={SalarieUsageQuotidienVideo}
+            poster={SalarieUsageQuotidienPoster}
+          />
+        </Grid>
+      </Grid>
+      <Button
+        color="primary"
+        size="small"
+        className={buttonStyle}
+        variant={"outlined"}
+        href="https://www.youtube.com/channel/UCqJlEoGiU1jcFjJWAr1BcVg/videos"
+        target="_blank"
+      >
+        Voir toutes les vidéos
+      </Button>
+    </>
+  );
+}

web/landing/ResourcePage/VideoCard.js

@@ -5,16 +5,7 @@ import { resourceCardsClasses } from "./styles/ResourceCardsStyle";
 import { useMatomo } from "@datapunt/matomo-tracker-react";
 import { PLAY_VIDEO } from "common/utils/matomoTags";
 
-const s3Root =
-  "https://storage.gra.cloud.ovh.net/v1/AUTH_8a2f745174054ce1b5ee7c6e79601088/mobilic/";
-
-export function VideoCard({
-  videoKey,
-  description,
-  posterKey,
-  matomoTag,
-  ...props
-}) {
+export function VideoCard({ video, description, poster, matomoTag, ...props }) {
   const classes = resourceCardsClasses();
   const { trackEvent } = useMatomo();
 
@@ -31,14 +22,14 @@ export function VideoCard({
         controls
         height="auto"
         width="100%"
-        poster={posterKey ? s3Root + posterKey : null}
+        poster={poster || null}
         preload="metadata"
         onPlay={clickEvent}
       >
-        <source src={s3Root + videoKey} type="video/mp4" />
+        <source src={video} type="video/mp4" />
         <p>
           Votre navigateur ne prend pas en charge les vidéos HTML5. Voici{" "}
-          <a href={s3Root + videoKey}>un lien pour télécharger la vidéo</a>
+          <a href={video}>un lien pour télécharger la vidéo</a>
         </p>
       </video>
     </Card>

web/landing/sections/IntroSection.js

@@ -10,19 +10,10 @@ import { makeStyles } from "@mui/styles";
 import { useIsWidthDown } from "common/utils/useWidth";
 import { VideoCard } from "../ResourcePage/VideoCard";
 
-const videos = [
-  {
-    title: "Mobilic, qu'est-ce que c'est ?",
-    videoKey: "resources/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4",
-    posterKey:
-      "resources/videos/accueil/accueil-qu-est-ce-que-mobilic-preview.jpg"
-  },
-  {
-    title: "Mobilic est-il conforme à la réglementation ?",
-    videoKey: "resources/videos/accueil/accueil-reglementaire.mp4",
-    posterKey: "resources/videos/accueil/accueil-reglementaire-preview.jpg"
-  }
-];
+import MobilicVideo from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4";
+import MobilicPoster from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic-preview.jpg";
+import ReglementationVideo from "common/assets/videos/accueil/accueil-reglementaire.mp4";
+import ReglementationPoster from "common/assets/videos/accueil/accueil-reglementaire-preview.jpg";
 
 const useStyles = makeStyles(theme => ({
   heroContainer: {
@@ -108,9 +99,9 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export function IntroSection() {
+const PhoneImageComponent = ({ isSmDown }) => {
   const classes = useStyles();
-  const PhoneImageComponent = () => (
+  return (
     <Grid item xs={12} sm={6} lg={8} className={classes.phoneImageContainer}>
       <img
         className={classes.phoneImage}
@@ -121,7 +112,11 @@ export function IntroSection() {
       />
     </Grid>
   );
-  const Explanation = () => (
+};
+
+const Explanation = () => {
+  const classes = useStyles();
+  return (
     <Grid item xs={12} sm={6} lg={4}>
       <Typography className={classes.explanation}>
         Mobilic est une alternative numérique au livret individuel de contrôle
@@ -137,7 +132,10 @@ export function IntroSection() {
       </Typography>
     </Grid>
   );
+};
 
+export function IntroSection() {
+  const classes = useStyles();
   const isSmDown = useIsWidthDown("sm");
 
   return (
@@ -168,28 +166,33 @@ export function IntroSection() {
           </Grid>
           {isSmDown ? (
             <>
-              <PhoneImageComponent />
+              <PhoneImageComponent isSmDown={isSmDown} />
               <Explanation />
             </>
           ) : (
             <>
               <Explanation />
-              <PhoneImageComponent />
+              <PhoneImageComponent isSmDown={isSmDown} />
             </>
           )}
         </Grid>
       </Container>
       <Container maxWidth="md" className={classes.videoSection}>
         <Grid container direction="row" alignItems="center" spacing={1}>
-          {videos.map(video => (
-            <Grid key={video.videoKey} item xs={12} sm={6}>
-              <VideoCard
-                description={video.title}
-                videoKey={video.videoKey}
-                posterKey={video.posterKey}
-              />
-            </Grid>
-          ))}
+          <Grid item xs={12} sm={6}>
+            <VideoCard
+              description="Mobilic, qu'est-ce que c'est ?"
+              video={MobilicVideo}
+              poster={MobilicPoster}
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <VideoCard
+              description="Mobilic est-il conforme à la réglementation ?"
+              video={ReglementationVideo}
+              poster={ReglementationPoster}
+            />
+          </Grid>
         </Grid>
       </Container>
     </Container>