diff --git a/src/app/components/Embed.js b/src/app/components/Embed.js
new file mode 100644
index 0000000000000000000000000000000000000000..c341b5247b616ed82f5f50014285dd3b0cc33a33
--- /dev/null
+++ b/src/app/components/Embed.js
@@ -0,0 +1,62 @@
+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 >
+ );
+}
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index 1ce83a62821825fc4fc6cd1df81208061bb07ba5..ba6ff02e3d58b95b2c41c06e5db14c5822d7156a 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -1,7 +1,9 @@
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 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
@@ -20,14 +23,16 @@ export default function ShareModal({ open, onClose, title, type, id }) {
}, [open]);
const shareLink = () => {
- navigator.share({
- title: title,
- url: link,
- })
+ navigator.share({
+ title: title,
+ url: link,
+ })
.then(() => console.log("Compartilhamento realizado com sucesso"))
.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">
@@ -74,7 +92,7 @@ export default function ShareModal({ open, onClose, title, type, id }) {
<span>Enviar</span>
</Button>
</div>
- ) : ""}
+ ) : ""}
</div>
<div className="flex justify-center">
<button
diff --git a/src/app/embed/[id]/components/OverlayEmbed.js b/src/app/embed/[id]/components/OverlayEmbed.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8b94cde0c173011318fc758c017bc5138aefbc4
--- /dev/null
+++ b/src/app/embed/[id]/components/OverlayEmbed.js
@@ -0,0 +1,63 @@
+"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
diff --git a/src/app/embed/[id]/page.js b/src/app/embed/[id]/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ee1a476a2bab636363ca9e173fa6c05ec8dd062
--- /dev/null
+++ b/src/app/embed/[id]/page.js
@@ -0,0 +1,24 @@
+"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
diff --git a/src/app/recurso/[id]/components/actionButtons.js b/src/app/recurso/[id]/components/actionButtons.js
index 696a511ec6c4432f1aac97099e7e96840fe68403..88a92b853e0c43d252da21a5eb1de496c74892f3 100644
--- a/src/app/recurso/[id]/components/actionButtons.js
+++ b/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}
diff --git a/src/app/recurso/[id]/components/description.js b/src/app/recurso/[id]/components/description.js
index eca549de410e668fe0915725b6daa88714244f96..81f327543eb4bbefad2bf4b8cf33d455bcc5ea31 100644
--- a/src/app/recurso/[id]/components/description.js
+++ b/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>
);
}
diff --git a/src/app/recurso/[id]/components/metrics.js b/src/app/recurso/[id]/components/metrics.js
index 2a6274e612d118cc121ea125a495f0f8266b6049..6da9c36d632adcb6bf9b050e744d224f1c215bb7 100644
--- a/src/app/recurso/[id]/components/metrics.js
+++ b/src/app/recurso/[id]/components/metrics.js
@@ -1,6 +1,7 @@
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">
diff --git a/src/app/recurso/[id]/components/resourcePreview.js b/src/app/recurso/[id]/components/resourcePreview.js
index 179169427943ed2a6246d7d62d7b592bc67b5fa8..eafaaf9be9dcb6ab9ca4537c70f246297174daac 100644
--- a/src/app/recurso/[id]/components/resourcePreview.js
+++ b/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>
);
@@ -89,8 +89,8 @@ export default function ResourcePreview({ learningObject }) {
className="rounded-xl aspect-video"
data={uri}
type="application/pdf"
- width="100%"
- height="100%"
+ width="100%"
+ height="100%"
/>
);
} else if (videoType(learningObject?.default_mime_type)) {
@@ -150,7 +150,7 @@ export default function ResourcePreview({ learningObject }) {
src={mecredURL + learningObject.thumbnail}
alt={learningObject.name}
/>
-
+
{/* Overlay cinza e Ícone */}
<div className="absolute inset-0 bg-gray-500/50 opacity-100 md:opacity-0 md:hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<OpenInNewOutlinedIcon className="text-white-HC-dark-underline text-[100px]" />
@@ -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>;
}