add video and audio visualization in learning object show

app/assets/stylesheets/application/learning_objects.scss

@@ -87,9 +87,24 @@ $background-grey: #e7e7e8;
 }
 
 .learning-object {
-  .thumbnail {
+  .view {
     width: 530px;
     height: 298px;
+    audio {
+      width: inherit;
+      position: relative;
+    	top: 50%;
+    	transform: translateY(-50%);
+    }
+    img {
+      width: inherit;
+      height: inherit;
+      border: 0;
+    }
+    video {
+      width: inherit;
+      height: inherit;
+    }
   }
   .stats {
     text-align: right;

app/views/learning_objects/show.html.erb

@@ -25,7 +25,15 @@
 
 <div class="row learning-object">
   <div class="col-md-7">
-    <%= learning_object_thumbnail @learning_object, "large" %>
+    <div class="view">
+      <%=
+        case @learning_object.type
+        when 'Áudio' then audio_tag(@learning_object.get_retrievelink, controls: true)
+        when 'Vídeo' then video_tag(@learning_object.get_retrievelink, controls: true, autobuffer: true, poster: @learning_object.thumbnail)
+        else learning_object_thumbnail @learning_object, "large"
+        end
+      %>
+    </div>
     <div class="pull-right" style="padding-right:122px">
       <span class="glyphicon glyphicon-eye-open"><%= @learning_object.views %>&nbsp;</span>
       <span class="glyphicon glyphicon-star"><%= @learning_object.likes %>&nbsp;</span>