Issue #222: ADD page embed resource and button embed on resources pages

src/app/components/Embed.js

+import { LeakAddOutlined } from "@mui/icons-material";
+import { Button, Modal } from "@mui/material";
+import { useState } from "react";
+import ResourcePreview from "../recurso/[id]/components/resourcePreview";
+import mecredApi, { mecredURL } from "@/axiosConfig";
+
+export default function Embed({ open, onClose, learningObject }) {
+
+    const [copied, setCopied] = useState(false)
+    const [source, setSource] = useState(null)
+    const width = 560;
+    const height = 315;
+
+    //const uri = mecredURL + "inline/" + learningObject.id;
+
+    const iframe =
+        `<iframe 
+            width="${width}" 
+            height="${height}" 
+            src="https://www.mecred.mec.gov.br/embed/${learningObject.id}" 
+            title="${learningObject?.name}" 
+            frameBorder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+            referrerpolicy="strict-origin-when-cross-origin" 
+            allowFullScreen>
+        </iframe>`
+
+    return (
+        <Modal
+            open={open}
+            onClose={onClose}
+            className="flex justify-center place-items-center m-6"
+        >
+            <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg outline outline-1 outline-ice-HC-white">
+                <div className="flex justify-center text-xl font-bold text-darkGray-HC-white m-5">Recurso Incorporado</div>
+
+                <div className="flex flex-row justify-center">
+                    <ResourcePreview learningObject={learningObject} setSource={setSource} />
+                    <div className="flex w-[600px] items-center text-darkGray-HC-white justify-center m-5 outline outline-1 outline-darkGray-HC-white rounded-lg p-5">
+                        {iframe}
+                    </div>
+                </div>
+
+                <div className="flex flex-col p-3 justify-end">
+                    <div className="flex text-base font-bold text-darkGray-HC-white justify-end">
+                        <Button
+                            disableElevation
+                            variant="outlined"
+                            className="border text-lg normal-case text-darkGray-HC-white hover:bg-darkGray-HC-white hover:text-white-HC-dark border-lightGray-HC-white"
+                            onClick={() => {
+                                navigator.clipboard.writeText(iframe);
+                                setCopied(true);
+                            }}
+                        >
+                            {copied ? <span>Copiado!</span> : <span>Copiar</span>}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Modal >
+    );
+}

src/app/components/ShareModal.js

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { Button, Modal } from "@mui/material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
+import Embed from './Embed';
+import CodeIcon from '@mui/icons-material/Code';
 
 /**
  * @param {Object} props
@@ -10,8 +12,9 @@ import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
  * @param {String} props.title Título do compartilhamento
  * @param {String} props.link URL a ser compartilhada
  */
-export default function ShareModal({ open, onClose, title, type, id }) {
+export default function ShareModal({ open, onClose, learningObject, title, type, id }) {
   const [clicked, setClicked] = useState(false);
+  const [embed, setEmbed] = useState(false);
   const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
   const link = `${baseUrl}/${type}/${id}`; // Gera o link dinâmico baseado no tipo e ID   
 
@@ -28,6 +31,8 @@ export default function ShareModal({ open, onClose, title, type, id }) {
       .catch((error) => console.error("Erro ao compartilhar:", error));
   }
 
+  //console.log ("teste", learningObject)
+
   return (
     <Modal
       open={open}
@@ -45,7 +50,7 @@ export default function ShareModal({ open, onClose, title, type, id }) {
         <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center outline outline-1 outline-ice-HC-white">
           <div className="text-xl font-bold text-darkGray-HC-white">{title}</div>
           <div className="p-3 mt-2 flex flex-col sm:flex-row">
-            <div>
+            <div className='flex flex-wrap gap-4 justify-center'>
               <Button
                 disableElevation
                 variant="outlined"
@@ -60,6 +65,19 @@ export default function ShareModal({ open, onClose, title, type, id }) {
                 <ContentCopyIcon className="p-[1px]" />
                 {clicked ? <span>Copiado!</span> : <span>Copiar link!</span>}
               </Button>
+              <Button
+                disableElevation
+                variant="outlined"
+                className="border text-lg normal-case text-darkGray-HC-white hover:bg-darkGray-HC-white hover:text-white-HC-dark border-lightGray-HC-white"
+                aria-label="Incorporar"
+                onClick={() => setEmbed(true)}
+              >
+                <CodeIcon className='mr-1' />
+                Incorporar
+              </Button>
+
+
+              <Embed open={embed} onClose={() => setEmbed(false)} learningObject={learningObject} />
             </div>
             {navigator.share ? (
               <div className="mt-2 sm:mt-0 sm:ml-2">

src/app/embed/[id]/components/OverlayEmbed.js

+"use client"
+import { Button, Link } from "@mui/material";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import ShareModal from "@/app/components/ShareModal";
+import { mecredURL } from "@/axiosConfig";
+import { useRef, useState, useEffect } from "react";
+
+export default function OverlayEmbed({ learningObject }) {
+    const [shareOpen, setShareOpen] = useState(false);
+
+    if (!learningObject)
+        return <></>;
+
+    return (
+        <div className={`flex fixed bottom-0 w-full h-[150px] pt-8 items-center z-20 left-0 gap-x-7 bg-gradient-to-b from-transparent to-black opacity-0 hover:opacity-100 transition-opacity duration-300`}>
+            <Link className="flex ml-[3%]" href="/">
+                <img
+                    className="w-[79px] h-[60px] bg-no-repeat bg-center bg-contain bg-logo-square invertLogo-HC-white pointer-events-auto cursor-pointer"
+                    src="/mecred_square.svg"
+                    alt="MECRED logo"
+                />
+            </Link>
+            <div className="flex flex-col">
+                <Link className="no-underline pointer-events-auto cursor-pointer" href={`/recurso/${learningObject.id}`}
+                >
+                    <h1 className="flex text-white-HC-dark font-bold text-2xl">
+                        {learningObject.name}
+                    </h1>
+                    <div className="flex flex-row gap-x-5">
+                        {learningObject?.noAvatar || !learningObject?.author ? (
+                            <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px]`}>
+                                {learningObject.author[0]}
+                            </div>
+                        ) : (
+                            <img
+                                src={mecredURL + learningObject.publisher.avatar}
+                                alt={learningObject.author}
+                                className="w-[33px] h-[33px] object-cover rounded-full"
+                            />
+                        )}
+                        <h1 className="flex text-white-HC-dark-underline text-lg">
+                            {learningObject.author}
+                        </h1>
+                    </div>
+                </Link>
+            </div>
+            <div className="flex fixed right-8">
+                <Button
+                    className="group first:bg-turquoise-HC-white first:hover:text-darkGray-HC-white first:text-darkGray-HC-dark first:hover:bg-darkTurquoise-HC-dark text-darkGray-HC-white group group/button shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold"
+                    onClick={() => { setShareOpen(true) }}
+
+                >
+                    <div className="p-1 text-darkGray-HC-white group-hover:text-darkGray-HC-dark-underline group-first:group-hover:text-white-HC-underline group-first:text-white-HC-dark-underline">
+                        <ShareOutlinedIcon />
+                    </div>
+                    <div className="p-1 text-darkGray-HC-white group-hover:text-darkGray-HC-dark-underline group-first:group-hover:text-white-HC-underline group-first:text-white-HC-dark-underline">Compartilhar</div>
+
+                </Button>
+                <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} learningObject={learningObject} title='Compartilhando recurso' id={learningObject.id} type='recurso'/>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file

src/app/embed/[id]/page.js

+"use client";
+
+import ResourcePreview from "@/app/recurso/[id]/components/resourcePreview";
+import mecredApi from "@/axiosConfig";
+import { mecredURL } from "@/axiosConfig";
+import OverlayEmbed from "./components/OverlayEmbed";
+import { useState, useEffect } from "react";
+
+export default async function Page({ params }) {
+
+    const [learningObject, setLearningObject] = useState(null)
+
+    useEffect(() => {
+        mecredApi.get("learning_objects/" + params.id)
+            .then(res => { setLearningObject(res.data) })
+    }, [])
+
+    return (
+        <>
+            <ResourcePreview learningObject={learningObject} noFixed />
+            <OverlayEmbed learningObject={learningObject} />
+        </>
+    )
+}
\ No newline at end of file

src/app/recurso/[id]/components/actionButtons.js

@@ -194,7 +194,7 @@ console.log(learningObject)
     <>
       <DeleteModal open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id}  />
       <HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setSubmitted}/>
-      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title='Compartilhando recurso' id={learningObject.id} type='recurso'/>
+      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} learningObject={learningObject} title='Compartilhando recurso' id={learningObject.id} type='recurso'/>
       <ReportModal
         learningObject={learningObject}
         open={reportOpen}

src/app/recurso/[id]/components/description.js

@@ -2,7 +2,7 @@ export default function Description({ data }) {
   return (
     <div className="flex flex-col p-1 text-darkGray-HC-white">
       <div className="font-bold text-lg">Descrição deste Recurso</div>
-      <div className="text-darkGray-HC-white p-3">{data}</div>
+      <div className="text-darkGray-HC-white pr-3 pt-3 pb-3">{data}</div>
     </div>
   );
 }

src/app/recurso/[id]/components/metrics.js

 import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
 import { IoMdShareAlt } from "react-icons/io";
 import IconViews from '@/app/MECRED_recursos_visualizacoes.svg';
+import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
 
 const images = [
   {
@@ -29,6 +30,9 @@ export default function Specifications({ learningObject }) {
     { icon: <IconViews className="text-2xl invertLogo-HC-white" />, name: "Visualizações", data: learningObject.views_count },
     { icon: <FavoriteOutlinedIcon />, name: "Curtidas", data: learningObject.likes_count },
     { icon: <IoMdShareAlt className="text-2xl" />, name: "Compartilhamentos", data: learningObject.shares_count },
+    ...(!learningObject?.link
+      ? [{ icon: <DownloadOutlinedIcon className="text-2xl" />, name: "Download", data: learningObject.downloads_count }]
+      : []),
   ];
   return (
     <div className="flex flex-col p-1 text-darkGray-HC-white">

src/app/recurso/[id]/components/resourcePreview.js

@@ -3,7 +3,6 @@ import { imageType, videoType, audioType } from "@/app/components/FileTypeUtilit
 import mecredApi, { mecredURL } from "@/axiosConfig";
 import OpenInNewOutlinedIcon from "@mui/icons-material/OpenInNewOutlined";
 
-
 const youtubeURLtoID = (url) => {
   if (!url) return null;
 
@@ -52,7 +51,7 @@ const getDefaultThumbnail = (type) => {
   return thumbnail_url;
 };
 
-export default function ResourcePreview({ learningObject }) {
+export default function ResourcePreview({ learningObject, setSource, noFixed }) {
   if (!learningObject?.id) return <></>;
 
   const uri = mecredURL + "inline/" + learningObject.id;
@@ -78,8 +77,9 @@ export default function ResourcePreview({ learningObject }) {
       <iframe
         src={"https://www.youtube.com/embed/" + youtubeID}
         width="100%"
-        frameborder="0"
-        allowfullscreen
+        height={noFixed ? "100%" : "auto"}
+        frameBorder="0"
+        allowFullScreen
         className="aspect-video"
       ></iframe>
     );
@@ -159,5 +159,5 @@ export default function ResourcePreview({ learningObject }) {
     );
   }
 
-  return <div className="w-full overflow-hidden rounded-xl">{content}</div>;
+    return <div className={noFixed ? "h-[100%] fixed w-full overflow-hidden" : " w-full overflow-hidden rounded-xl"}>{content}</div>;
 }