From 035a2913575ee0ccb1b3f9a38c7f862c2d76d5b9 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Fri, 29 May 2020 10:59:06 -0300
Subject: [PATCH] now with vimeo player!
---
src/Pages/ResourcePage.js | 91 +++++++++++++++++++++++++++++++++------
1 file changed, 77 insertions(+), 14 deletions(-)
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 9fe104c5..b4e7803f 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;
+ }
`
--
GitLab