Fix up nsfw and some styling.

src/components/attachment/attachment.js

@@ -3,17 +3,32 @@ import nsfwImage from '../../assets/nsfw.jpg'
 const Attachment = {
   props: [
     'attachment',
-    'nsfw'
+    'nsfw',
+    'statusId'
   ],
   data: () => ({ nsfwImage }),
   computed: {
     type () {
-      return 'image'
+      let type = 'unknown'
+
+      if(this.attachment.mimetype.match(/text\/html/)) {
+        type = 'html';
+      }
+
+      if(this.attachment.mimetype.match(/image/)) {
+        type = 'image';
+      }
+
+      if(this.attachment.mimetype.match(/video\/webm/)) {
+        type = 'webm';
+      };
+
+      return type
     }
   },
   methods: {
     showNsfw () {
-      this.nsfw = false
+      this.$store.commit('setNsfw', { id: this.statusId, nsfw: false })
     }
   }
 }

src/components/attachment/attachment.vue

@@ -5,21 +5,29 @@
     </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>
 
+    <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
 
-         <div ng-if="type === 'html' && attachment.oembed" class="oembed">
-         <div ng-if="attachment.thumb_url" class="image">
-         <img ng-src="{{::attachment.thumb_url}}"></img>
+    <span v-if="type === 'unknown'">Don't know how to display this...</span>
+
+    <div v-if="type === 'html' && attachment.oembed" class="oembed">
+      <div v-if="attachment.thumb_url" class="image">
+        <img :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>
+        <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
+        <div v-html="attachment.oembed.oembedHTML"></div>
       </div>
     </div>
-
-         <video ng-if="type ==='webm'" ng-src="{{::videoUrl}}" controls></video> -->
   </div>
 </template>
 
 <script src="./attachment.js"></script>
+
+<style lang="scss">
+ .attachment {
+     video {
+         height: 100%;
+     }
+ }
+</style>

src/components/status/status.js

@@ -2,9 +2,6 @@ import Attachment from '../attachment/attachment.vue'
 
 const Status = {
   props: [ 'statusoid' ],
-  data: () => ({
-    nsfw: true
-  }),
   computed: {
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },

src/components/status/status.vue

@@ -26,7 +26,7 @@
         <div v-html="status.statusnet_html"></div>
 
         <div v-if='status.attachments' class='attachments'>
-          <attachment :nsfw="nsfw" :attachment="attachment" v-for="attachment in status.attachments">
+          <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
           </attachment>
         </div>
 
@@ -49,3 +49,13 @@
 </template>
 
 <script src="./status.js" ></script>
+
+<style lang="scss">
+ .status-el {
+     word-wrap: break-word;
+
+     a {
+         word-break: break-all;
+     }
+ }
+</style>

src/components/timeline/timeline.vue

@@ -11,3 +11,9 @@
   </div>
 </template>
 <script src="./timeline.js"></script>
+
+<style>
+ .timeline.panel {
+     flex: 1;
+ }
+</style>

src/modules/statuses.js

@@ -51,13 +51,18 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
 
   addedStatuses = statusesAndFaves['status'] || []
 
-  // Add some html to the statuses.
+  // Add some html and nsfw to the statuses.
   each(addedStatuses, (status) => {
     const statusoid = status.retweeted_status || status
     if (statusoid.parsedText === undefined) {
      // statusoid.parsedText =  statusParserService.parse(statusoid)
       statusoid.parsedText = statusoid.text
     }
+
+    if (statusoid.nsfw === undefined) {
+      const nsfwRegex = /#nsfw/i
+      statusoid.nsfw = statusoid.text.match(nsfwRegex)
+    }
   })
 
   const newStatuses = sortBy(
@@ -88,7 +93,9 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
 }
 
 const updateTimestampsInStatuses = (statuses) => {
-  return map(statuses, (status) => {
+  return map(statuses, (statusoid) => {
+    const status = statusoid.retweeted_status || statusoid
+
     // Parse date
     status.created_at_parsed = moment(status.created_at).fromNow()
     return status
@@ -110,6 +117,16 @@ const statuses = {
     },
     updateTimestamps (state) {
       updateTimestampsInStatuses(state.allStatuses)
+    },
+    setNsfw (state, { id, nsfw }) {
+      // For now, walk through all the statuses because the stuff might be in the replied_to_status
+      // TODO: Save the replied_tos as references.
+      each(state.allStatuses, (statusoid) => {
+        const status = statusoid.retweeted_status || statusoid
+        if (status.id === id) {
+          status.nsfw = nsfw
+        }
+      })
     }
   }
 }