now with audio player...

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

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*/}