display media correctly-ish

lib/Trog/Data/DUMMY.pm

@@ -80,6 +80,7 @@ my $example_posts = [
         tags         => ['image', 'files', 'profile-image'],
         created      => time(),
         version      => 0,
+        preview      => '/img/avatar/humm.gif',
     },
     {
         content_type => "audio/mpeg",
@@ -92,6 +93,7 @@ my $example_posts = [
         tags         => ["audio", "files"],
         created      => time(),
         version      => 0,
+        preview      => '/img/sys/testpattern.jpg',
     },
     {
         content_type => "video/ogg",
@@ -104,6 +106,7 @@ my $example_posts = [
         tags         => ["video", "files"],
         created      => time(),
         version      => 0,
+        preview      => '/img/sys/testpattern.jpg',
     },
 ];
 
@@ -134,6 +137,8 @@ sub get ($self, %request) {
 
     # Next, go ahead and build the "post type"
     @filtered = _add_post_type(@filtered);
+    # Next, add the type of post this is
+    @filtered = _add_media_type(@filtered);
 
     return \@filtered;
 }
@@ -149,6 +154,16 @@ sub _add_post_type (@posts) {
     } @posts;
 }
 
+sub _add_media_type (@posts) {
+    return map {
+        my $post = $_;
+        $post->{is_video} = 1 if $post->{content_type} =~ m/^video\//;
+        $post->{is_audio} = 1 if $post->{content_type} =~ m/^audio\//;
+        $post->{is_image} = 1 if $post->{content_type} =~ m/^image\//;
+        $post
+    } @posts;
+}
+
 sub add ($self, @posts) {
     return 1;
 }

www/styles/config.css

@@ -44,14 +44,3 @@ a.topbar {
 #posttype, #subtitle {
     display: none;
 }
-
-iframe.responsive, video.responsive { /*Close enough to 16:9*/
-  width: 35rem;
-  height: 20rem;
-}
-@media(max-width: 35rem) {
-  iframe.responsive, video.responsive {
-    width: 100%;
-    height: 10rem;
-  }
-}

www/styles/post.css

@@ -40,14 +40,3 @@ section {
 a.topbar {
     margin-top: .5rem;
 }
-
-iframe.responsive, video.responsive { /*Close enough to 16:9*/
-  width: 35rem;
-  height: 20rem;
-}
-@media(max-width: 35rem) {
-  iframe.responsive, video.responsive {
-    width: 100%;
-    height: 10rem;
-  }
-}

www/styles/structure.css

@@ -98,3 +98,16 @@ blockquote {
 .inline {
     display: inline;
 }
+
+.responsive { /*Close enough to 16:9*/
+    width: 35rem;
+    height: 20rem;
+}
+@media(max-width: 35rem) {
+    .responsive {
+        width: 100%;
+        height: 10rem;
+    }
+}
+
+

www/templates/posts.tx

@@ -8,6 +8,21 @@
         <a href='<: $post.href :>'><: $post.title :></a>
         <a class='usericon <: $post.user :>' title='Posted by <: $post.user :>'></a>
     </h3>
+    : if ( $post.is_video ) {
+        <video class="responsive" controls poster="<: $post.preview :>" >
+            <source src="<: $post.href :>" type="<: $post.content_type :>" />
+            Your browser does not support the video tag.
+        </video>
+    : }
+    : if ( $post.is_audio ) {
+        <audio controls>
+            <source src="<: $post.href :>" type="<: $post.content_type :>" />
+            Your browser does not support the audio tag.
+        </audio>
+    : }
+    : if ( $post.is_image ) {
+        <img src="<: $post.href :>" alt="image" class="responsive" /><br />
+    : }
     : $post.data | mark_raw;
     : if ( $can_edit ) {
     <br />