feat: video medecin (#251)

* feat: video medecin

* Update src/pages/medecins.tsx

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

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

public/images/Video-Medecin.mp4.vtt

@@ -0,0 +1,197 @@
+WEBVTT
+
+1
+00:00:13.720 --> 00:00:15.320
+En tant que médecin
+
+2
+00:00:15.480 --> 00:00:17.760
+qui connaît bien
+son patient,
+
+3
+00:00:17.920 --> 00:00:21.600
+c'est beaucoup plus facile
+d'estimer l'utilité
+
+4
+00:00:21.760 --> 00:00:23.920
+et l'urgence
+de voir un psychologue.
+
+5
+00:00:24.080 --> 00:00:25.480
+Si moi, je juge utile
+
+6
+00:00:25.640 --> 00:00:27.520
+de prendre
+cette solution-là,
+
+7
+00:00:27.680 --> 00:00:30.040
+les parents, les ados
+et les enfants
+
+8
+00:00:30.200 --> 00:00:31.240
+me font confiance
+
+9
+00:00:31.400 --> 00:00:32.480
+et vont beaucoup
+plus facilement
+
+10
+00:00:32.640 --> 00:00:33.440
+prendre ce chemin-là.
+
+11
+00:00:33.600 --> 00:00:35.640
+Cet adressage-là est
+forcément beaucoup,
+
+12
+00:00:35.800 --> 00:00:37.000
+beaucoup plus facile
+maintenant
+
+13
+00:00:37.160 --> 00:00:40.120
+parce que ce frein financier
+qu'on avait souvent avant,
+
+14
+00:00:40.280 --> 00:00:41.320
+il n'est plus présent.
+
+15
+00:00:46.480 --> 00:00:47.560
+Deux possibilités
+
+16
+00:00:47.720 --> 00:00:49.840
+pour rentrer
+dans ces dispositifs.
+
+17
+00:00:50.000 --> 00:00:52.520
+Soit il y a une demande
+de la part de la famille,
+
+18
+00:00:52.680 --> 00:00:54.280
+ou une demande
+de la part du patient,
+
+19
+00:00:54.440 --> 00:00:55.840
+soit moi, je propose.
+
+20
+00:00:56.000 --> 00:00:59.040
+Je prépare, à ce moment-là,
+un courrier d'adressage
+
+21
+00:00:59.200 --> 00:01:01.360
+que je donne au patient
+pour le remboursement
+
+22
+00:01:01.520 --> 00:01:03.880
+auprès de la Caisse primaire
+d'assurance maladie.
+
+23
+00:01:04.040 --> 00:01:05.680
+Le deuxième document
+que je prépare
+
+24
+00:01:05.840 --> 00:01:07.320
+est un document
+qui s'appelle
+
+25
+00:01:07.480 --> 00:01:08.840
+la lettre d'accompagnement,
+
+26
+00:01:09.000 --> 00:01:11.640
+qui, elle, va dans les mains
+du patient,
+
+27
+00:01:11.800 --> 00:01:13.920
+est destinée uniquement
+au psychologue
+
+28
+00:01:14.080 --> 00:01:16.240
+et dans laquelle j'expose
+pourquoi je l'adresse.
+
+29
+00:01:21.400 --> 00:01:25.320
+Le dispositif MonPsy
+représente un vrai progrès
+
+30
+00:01:25.480 --> 00:01:28.520
+de la collaboration entre
+les psychologues de ville
+
+31
+00:01:28.680 --> 00:01:30.720
+et les médecins de ville
+
+32
+00:01:30.880 --> 00:01:33.520
+et ceci nous permet,
+en fait,
+
+33
+00:01:33.680 --> 00:01:36.720
+d'éviter une prise en charge
+médicamenteuse.
+
+34
+00:01:36.880 --> 00:01:39.000
+L'écho que j'ai
+de la part de mes patients,
+
+35
+00:01:39.160 --> 00:01:41.080
+c'est vraiment
+un soulagement.
+
+36
+00:01:41.240 --> 00:01:42.280
+Enfin on a une possibilité
+
+37
+00:01:42.440 --> 00:01:43.840
+d'avoir
+cette prise en charge
+
+38
+00:01:44.000 --> 00:01:45.880
+et j'ai beaucoup,
+beaucoup de demandes.
+
+39
+00:01:46.040 --> 00:01:49.040
+Pour moi, ce dispositif est
+extrêmement important.
+
+40
+00:01:49.200 --> 00:01:51.920
+La possibilité
+d'un suivi psychologique
+
+41
+00:01:52.080 --> 00:01:55.440
+pour les patients est enfin
+actée en France.
+

src/pages/medecins.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 
 import HeadTag from "../components/HeadTag";
 
 const Page = () => {
+  const [video, setVideo] = useState<"hide" | "show">("hide");
   return (
     <>
       <HeadTag
@@ -36,7 +37,34 @@ const Page = () => {
                 height="360"
                 alt="Je suis médecin illustration"
               />
+              {video === "hide" && (
+                <div className="align-left">
+                  <button
+                    onClick={() => setVideo("show")}
+                    title="Découvrir MonPsy en vidéo, via le témoignage de M. Werner, médecin pédiatre"
+                    className="fr-btn fr-btn--lg fr-btn--secondary fr-fi-play-line fr-btn--icon-left fr-mt-4w"
+                  >
+                    Découvrez le témoignage de M. Werner, médecin pédiatre
+                  </button>
+                  <span className="d-block fr-mt-1w">Durée&nbsp;: 2min</span>
+                </div>
+              )}
             </div>
+            {video === "show" && (
+              <div className="fr-grid-row fr-grid-row--center fr-grid-row--middle fr-pb-8w">
+                <div className="fr-col-8">
+                  <video width="100%" controls autoPlay>
+                    <source type="video/mp4" src="/images/Video-Medecin.mp4" />
+                    <track
+                      kind="captions"
+                      srcLang="fr"
+                      src="/images/Video-Medecin.mp4.vtt"
+                      label="Activés"
+                    />
+                  </video>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </section>