From 3f3d735f3c42f1daa586c586ac3574ef5fd958b8 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Fri, 8 Sep 2023 15:35:41 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20aper=C3=A7u=20Youtube=20dans=20les=20po?=
 =?UTF-8?q?pup=20de=20la=20carte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EmbeddedYoutube.tsx    |  6 +++--
 src/routes/Liste/Map/PopupContent.tsx | 36 +++++++++++++++++++--------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/EmbeddedYoutube.tsx b/src/components/EmbeddedYoutube.tsx
index c4a6089..eb94270 100644
--- a/src/components/EmbeddedYoutube.tsx
+++ b/src/components/EmbeddedYoutube.tsx
@@ -1,10 +1,11 @@
-import { ReactNode } from "react";
+import { IframeHTMLAttributes } from "react";
 
 interface Props {
   youtubeId: string;
   width: string;
   height: string;
   onClick: () => void;
+  style: IframeHTMLAttributes<HTMLIFrameElement>["style"];
 }
 
 export const EmbeddedYoutube = ({
@@ -12,6 +13,7 @@ export const EmbeddedYoutube = ({
   width,
   height,
   onClick,
+  style,
 }: Props) => (
   <div onClick={onClick}>
     <iframe
@@ -22,7 +24,7 @@ export const EmbeddedYoutube = ({
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowFullScreen
-      style={{ pointerEvents: "none" }}
+      style={{ pointerEvents: "none", ...style }}
     ></iframe>
   </div>
 );
diff --git a/src/routes/Liste/Map/PopupContent.tsx b/src/routes/Liste/Map/PopupContent.tsx
index a1db4c3..d9ad04d 100644
--- a/src/routes/Liste/Map/PopupContent.tsx
+++ b/src/routes/Liste/Map/PopupContent.tsx
@@ -5,6 +5,7 @@ import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
 import { HomeContext } from "../../../context/HomeContext";
 import { getResistantPageUrl } from "../../../getResistantPageUrl";
 import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule";
+import { EmbeddedYoutube } from "../../../components/EmbeddedYoutube";
 
 export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
   const navigate = useNavigate();
@@ -19,16 +20,31 @@ export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
           : navigate(resistant.id)
       }
     >
-      <img
-        src={getResistantPhotoUrl(resistant)}
-        style={{
-          ...getResistantGrayscaleRule(resistant),
-          float: "left",
-          maxHeight: "15em",
-          marginRight: "1em",
-        }}
-        alt={resistant.noms}
-      />
+      {resistant.video ? (
+        <EmbeddedYoutube
+          youtubeId={resistant.video}
+          width={"220"}
+          height={"120"}
+          onClick={() => {}}
+          style={{
+            float: "left",
+            maxHeight: "15em",
+            marginRight: "1em",
+            paddingBottom: "3em",
+          }}
+        />
+      ) : (
+        <img
+          src={getResistantPhotoUrl(resistant)}
+          style={{
+            ...getResistantGrayscaleRule(resistant),
+            float: "left",
+            maxHeight: "15em",
+            marginRight: "1em",
+          }}
+          alt={resistant.noms}
+        />
+      )}
       <strong style={{ overflow: "hidden" }}>{resistant.noms}</strong>
       <br />
       👨‍👩‍👧‍👦 Parent(s) de {resistant.enfants} <br />