diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index b4e7803f9b8ce0c01f041e70760e18628c5fbd7e..d39c72caf6c4a9d2fc332c50c251b445efd41373 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -29,31 +29,14 @@ import CommentsArea from '../Components/ResourcePageComponents/CommentsArea.js' import noAvatar from "../img/default_profile.png"; import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; +import VideoPlayer from '../Components/ResourcePageComponents/VideoPlayer.js' 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 +function urlVerify (url) { + return (url ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 : false) } export default function LearningObjectPage (props){ @@ -83,8 +66,8 @@ export default function LearningObjectPage (props){ } console.log(response) setRecurso(response.data) - }, (error) => {console.log(error)}) - toggle(false) + toggle(false) + }, (error) => {console.log(error); toggle(false)}) }, [, state.currentUser]) @@ -118,16 +101,32 @@ 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> + { + recurso.object_type === "VÃdeo" && + !recurso.link ? + ( + <Grid item xs={12}><Card> + <VideoPlayer + link={recurso.link} + urlVerified={false} + videoUrl = {recurso.default_attachment_location} + /> + </Card></Grid> + + ) + : + ( + urlVerify(recurso.link) && + <Grid item xs={12}><Card> + <VideoPlayer + link={recurso.link} + urlVerified={true} + /> + </Card></Grid> + ) } + <Grid item xs={12}> <Card> <div> @@ -141,6 +140,7 @@ export default function LearningObjectPage (props){ <TextoObjeto name={recurso.name} rating={recurso.rating} + recursoId={id} likesCount={recurso.likes_count} likedBool={recurso.liked} objType={recurso.object_type} @@ -163,6 +163,7 @@ export default function LearningObjectPage (props){ thumb={recurso.thumbnail} currPageLink={window.location.href} handleSnackbar={handleSnackbar} + complained={recurso.complained} /> </Card> </Grid> @@ -196,7 +197,7 @@ export default function LearningObjectPage (props){ recursoId = {id} handleSnackbar={handleSnackbar} objType={recurso.object_type} - + recurso={true} /> </Card> </Grid> @@ -246,19 +247,4 @@ 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; - } `