Basic attachments, some retweet fixes.

src/components/attachment/attachment.js

@@ -0,0 +1,21 @@
+import nsfwImage from '../../assets/nsfw.jpg'
+
+const Attachment = {
+  props: [
+    'attachment',
+    'nsfw'
+  ],
+  data: () => ({ nsfwImage }),
+  computed: {
+    type () {
+      return 'image'
+    }
+  },
+  methods: {
+    showNsfw () {
+      this.nsfw = false
+    }
+  }
+}
+
+export default Attachment

src/components/attachment/attachment.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="attachment">
+    <a v-if="nsfw" v-on:click.prevent="showNsfw()">
+      <img :src="nsfwImage"></img>
+    </a>
+
+    <a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
+    <!-- <span ng-if="type === 'unknown'">Don't know how to display this...</span>
+
+
+         <div ng-if="type === 'html' && attachment.oembed" class="oembed">
+         <div ng-if="attachment.thumb_url" class="image">
+         <img ng-src="{{::attachment.thumb_url}}"></img>
+         </div>
+         <div class="text">
+         <h1><a href="{{::attachment.url}}">{{::attachment.oembed.title}}</a></h1>
+         <div ng-bind-html="attachment.oembed.oembedHTML"></div>
+         </div>
+         </div>
+
+         <video ng-if="type ==='webm'" ng-src="{{::videoUrl}}" controls></video> -->
+  </div>
+</template>
+
+<script src="./attachment.js"></script>

src/components/status/status.js

@@ -1,5 +1,24 @@
+import Attachment from '../attachment/attachment.vue'
+
 const Status = {
-  props: [ 'status' ]
+  props: [ 'statusoid' ],
+  data: () => ({
+    nsfw: true
+  }),
+  computed: {
+    retweet () { return !!this.statusoid.retweeted_status },
+    retweeter () { return this.statusoid.user.name },
+    status () {
+      if (this.retweet) {
+        return this.statusoid.retweeted_status
+      } else {
+        return this.statusoid
+      }
+    }
+  },
+  components: {
+    Attachment
+  }
 }
 
 export default Status

src/components/status/status.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="status-el">
-    <div ng-if="retweet" class="media container retweet-info">
+    <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
         <i class='fa fa-retweet'></i>
       </div>
       <div class="media-body">
-        Retweeted by {{status.user.screen_name}}
+        Retweeted by {{retweeter}}
       </div>
     </div>
     <div class="media status container" ng-class="{compact: compact, notify: notify}">
@@ -15,24 +15,22 @@
         </a>
       </div>
       <div class="media-body">
-        <h4 ng-if="!compact" class="media-heading">
+        <h4 class="media-heading">
           <strong>{{status.user.name}}</strong>
           <small>{{status.user.screen_name}}</small>
-          <small ng-if="status.in_reply_to_screen_name"> &gt; {{status.in_reply_to_screen_name}}</small>
+          <small v-if="status.in_reply_to_screen_name"> &gt; {{status.in_reply_to_screen_name}}</small>
           -
-          <small ng-click="goToConversation(status.statusnet_conversation_id)">{{status.created_at_parsed | date:'medium'}}</small>
+          <small>{{status.created_at_parsed}}</small>
         </h4>
 
-        <p>{{status.text}}</p>
+        <div v-html="status.statusnet_html"></div>
 
-        <div ng-if='status.attachments' class='attachments'>
-          <attachment nsfw="nsfw" attachment="attachment" ng-repeat="attachment in status.attachments">
+        <div v-if='status.attachments' class='attachments'>
+          <attachment :nsfw="nsfw" :attachment="attachment" v-for="attachment in status.attachments">
           </attachment>
         </div>
 
-        <div ng-if="!compact">
-          <p>
-          </p>
+        <div>
           <div class='status-actions'>
             <div ng-click="toggleReplying()">
               <i class='fa fa-reply'></i>

src/components/timeline/timeline.vue

@@ -7,7 +7,7 @@
         </p>
       </div>
     </a>
-    <status v-for="status in timeline.visibleStatuses" v-bind:status="status"></status>
+    <status v-for="status in timeline.visibleStatuses" v-bind:statusoid="status"></status>
   </div>
 </template>
 <script src="./timeline.js"></script>