like functionality added

src/Components/Firulas.js

-import React from 'react'
+import React, {useState} from 'react'
+import axios from 'axios'
+import {apiUrl} from '../env';
 import styled from 'styled-components'
 import Rating from '@material-ui/lab/Rating';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
@@ -6,20 +8,41 @@ import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
 import FavoriteIcon from '@material-ui/icons/Favorite';
 
 export default function Firulas (props) {
+    const [liked, setLiked] = useState(props.liked)
+
+    const handleLike = () => {
+        let payload = {}
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                'Uid': sessionStorage.getItem('@portalmec/uid'),
+            }
+        }
+
+        axios.put( (`${apiUrl}/learning_objects/` + props.recursoId + '/like'),payload, config
+    ).then( (response) => {setLiked(!liked)}, (error) => {console.log(error)})
+    }
+
     return (
         <ConteinerFirulas>
             <Rating
               name="customized-empty"
               value={props.rating*10}
               precision={0.5}
+              readOnly
               style={{color:"#666", marginRight : "20px"}}
               emptyIcon={<StarBorderIcon fontSize="inherit" />}
             />
             <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}>
                 <span>{props.likesCount}</span>
-                <ButtonNoWidth>
-                    <FavoriteIcon style={{color : props.liked ? "red" : "#666" }}/>
+
+                <ButtonNoWidth onClick={handleLike}>
+                    <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
                 </ButtonNoWidth>
+
             </LikeCounter>
         </ConteinerFirulas>
     )

src/Components/ResourcePageComponents/VideoPlayer.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 from 'react'
+import styled from 'styled-components'
+
+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 VideoPlayer (props) {
+
+    return (
+        <>
+        {
+            props.urlVerified ?
+            (
+                <VideoContainer>
+                    <iframe
+                    src={GetEmbeddedLink(props.link)}
+                    frameBorder="0" allowFullScreen className="video"
+                    />
+                </VideoContainer>
+            )
+            :
+            (
+                <VideoContainer>
+                    <video controls className="video">
+                    <source src={props.videoUrl} type="video/webm"/>
+                    <source src={props.videoUrl} type="video/mp4"/>
+                    <p>Seu navegador não permite a exibição deste vídeo. É necessário baixar o vídeo para poder visualizá-lo.</p>
+                    </video>
+                </VideoContainer>
+
+            )
+        }
+        </>
+    )
+}
+
+const VideoContainer = styled.div`
+    position : relative;
+    width : 100%;
+    height : 0;
+    padding-bottom : 56.25%;
+
+    .video {
+        width : 100%;
+        height : 100%;
+        position : absolute;
+        top : 0;
+        left : 0;
+    }
+`