diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js index abe871ced0e39ba2cd84641b2a867dc3e2dbee00..68d6fec4ff81098a14947ca7a51fb054c7e5fed9 100644 --- a/src/Components/ResourcePageComponents/TextoObjeto.js +++ b/src/Components/ResourcePageComponents/TextoObjeto.js @@ -105,6 +105,16 @@ export default function TextoObjeto (props) { <span className={"dado-recurso"}>{props.downloadCount}</span> </span> + { + (props.attachments[0].mime_type==="/audio/mpeg" || + props.attachments[0].format === "audio") && + <div className="recurso-container-audio"> + <audio controls className="audio audio-objeto"> + <source src={props.audioUrl} type="audio/mp3"/> + </audio> + </div> + } + {/*|| checkUserRole('publisher')*/} { props.stateRecurso === "submitted" && @@ -191,4 +201,21 @@ const TextoObjetoDiv = styled.div` border-radius: 4px; font-size : 14px; } + + .recurso-container-audio { + width : 100%; + margin-top : 20px; + + .audio-objeto { + height : 32px; + width : 100%; + margin : 10px 0 8px 0; + background-color : #e5e5e5; + } + + .audio { + display : inline-block; + vertical-align : baseline; + } + } ` diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index d39c72caf6c4a9d2fc332c50c251b445efd41373..9c4f9541def5c5d6524813e809434e4c2b6e4203 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -30,6 +30,8 @@ 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' +import LoadingSpinner from '../Components/LoadingSpinner.js' + export function Alert(props) { return <MuiAlert elevation={6} variant="filled" {...props} />; @@ -96,7 +98,7 @@ export default function LearningObjectPage (props){ { carregando ? ( - <span>carregando</span> + <LoadingSpinner text={"Carregando Recurso"}/> ) : ( @@ -150,6 +152,8 @@ export default function LearningObjectPage (props){ downloadCount={recurso.downloads_count} id={recurso.publisher ? recurso.publisher.id : undefined} stateRecurso={recurso.state} + attachments={recurso.attachments} + audioUrl={recurso.default_attachment_location} /> </div> {/*adicionar funcionalidade nos botoes do footer*/}