diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index 9fe104c56d857f09871373d63e66400b6adc4ad0..b4e7803f9b8ce0c01f041e70760e18628c5fbd7e 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -16,7 +16,8 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {useEffect, useState} from 'react' +import React, {useEffect, useState, useContext} from 'react' +import {Store} from '../Store.js' import styled from 'styled-components' import axios from 'axios' import {apiUrl, apiDomain} from '../env'; @@ -33,22 +34,59 @@ export function Alert(props) { return <MuiAlert elevation={6} variant="filled" {...props} />; } +function GetEmbeddedLink (link) { + if (link.indexOf("youtube") != -1) { //plain youtebe.com/ link + if(link.indexOf("embed/") != -1) { //if it's already an embedded link, return it + return link + } + link = link.split("&")[0] //else remove features and other queries + var link = link.split("v=")[1] //get video id + var embed = "https://www.youtube.com/embed/" + link; //create embedded link + } + else if (link.indexOf("youtu.be") != -1) { //if it's a youtu.be link + link = link.split("&")[0].split("?")[0] //remove queries and features if existent + link = link.split(".be/")[1] //get video id + var embed = "https://www.youtube.com/embed/" + link; //create embedded link + } + else if (link.indexOf("vimeo") != -1) { //if the 13th character = o (vimeo videos) + link = link.split("?")[0].split("/") + console.log(link) //key # = from 19th character on + var embed = "https://player.vimeo.com/video/" + link.pop(); //Add vimeo link before key # + } + return embed +} + export default function LearningObjectPage (props){ + const {state} = useContext(Store) const id = props.match.params.recursoId const [carregando, toggle] = useState(true) const [recurso, setRecurso] = useState({}) + useEffect( () => { - axios.get( (`${apiUrl}/learning_objects/` + id ) - ).then( (response) => { - if ( response.headers['access-token'] ) { - sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token']) + let config = { + headers : { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + } + } + if (state.currentUser.id !== "") { + config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken'); + config.headers.Client = sessionStorage.getItem('@portalmec/clientToken') + config.headers.Uid = sessionStorage.getItem('@portalmec/uid') } - console.log(response) - setRecurso(response.data) + + axios.get( (`${apiUrl}/learning_objects/` + id), config + ).then( (response) => { + if ( response.headers['access-token'] ) { + sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token']) + } + console.log(response) + setRecurso(response.data) + }, (error) => {console.log(error)}) toggle(false) - }, (error) => {console.log(error)}) - }, []) + }, [, state.currentUser]) + const [snackbarOpen, toggleSnackbar] = useState(false) const handleSnackbar = (index) => {setIndex(index); toggleSnackbar(true)} @@ -80,6 +118,16 @@ export default function LearningObjectPage (props){ : ( <Grid container spacing={2}> + {(recurso.object_type === "VÃdeo" && recurso.link) && + <Grid item xs={12}> + <Card> + <div className="video-container"> + <iframe src={GetEmbeddedLink(recurso.link)} frameBorder="0" allowFullScreen className="video"></iframe> + </div> + </Card> + </Grid> + } + <Grid item xs={12}> <Card> <div> @@ -100,7 +148,7 @@ export default function LearningObjectPage (props){ educationalStages={recurso.educational_stages} viewCount={recurso.views_count} downloadCount={recurso.downloads_count} - id={recurso.publisher.id} + id={recurso.publisher ? recurso.publisher.id : undefined} stateRecurso={recurso.state} /> </div> @@ -124,9 +172,9 @@ export default function LearningObjectPage (props){ {/*add option to MoreVertIcon*/} {/*change render method on additional item info*/} <Sobre - avatar={recurso.publisher.avatar ? (apiDomain + recurso.publisher.avatar) : noAvatar} - publisher={recurso.publisher.name} - id={recurso.publisher.id} + avatar={recurso.publisher ? (recurso.publisher.avatar ? (apiDomain + recurso.publisher.avatar) : noAvatar) : noAvatar} + publisher={recurso.publisher ? recurso.publisher.name : undefined} + id={recurso.publisher ? recurso.publisher.id : undefined} description={recurso.description} author={recurso.author} tags={recurso.tags} @@ -140,7 +188,7 @@ export default function LearningObjectPage (props){ </Card> </Grid> - + <Grid item xs={12}> <Card> {/*adicionar funcionalidade ao botao de entrar*/} @@ -198,4 +246,19 @@ const Card = styled.div` width : 100%; } } + + .video-container { + position : relative; + width : 100%; + height : 0; + padding-bottom : 56.25%; + } + + .video { + width : 100%; + height : 100%; + position : absolute; + top : 0; + left : 0; + } `