now with vimeo player!

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;
+    }
 `