14 files changed, 172 insertions, 7 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 161c6b2b..85d924d0 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -19,8 +19,8 @@ const Attachment = {
         type = 'image';
       }
 
-      if(this.attachment.mimetype.match(/video\/webm/)) {
-        type = 'webm';
+      if(this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
+        type = 'video';
       };
 
       return type
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index b8c55a1a..8c088cf1 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -6,7 +6,7 @@
 
     <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
 
-    <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
+    <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
 
     <span v-if="type === 'unknown'">Don't know how to display this...</span>
 
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
new file mode 100644
index 00000000..c24c71e9
--- /dev/null
+++ b/src/components/media_upload/media_upload.js
@@ -0,0 +1,22 @@
+/* eslint-env browser */
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+
+const mediaUpload = {
+  mounted () {
+    const store = this.$store
+    const input = this.$el.querySelector('input')
+    const self = this
+
+    input.addEventListener('change', ({target}) => {
+      const file = target.files[0];
+      const formData = new FormData();
+      formData.append('media', file);
+      statusPosterService.uploadMedia({ store, formData })
+        .then((fileData) => {
+          self.$emit('uploaded', fileData)
+        })
+    })
+  }
+}
+
+export default mediaUpload
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
new file mode 100644
index 00000000..a62d8316
--- /dev/null
+++ b/src/components/media_upload/media_upload.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="media-upload">
+    <label class="btn btn-default">
+      <i class="fa icon-upload"></i>
+      <input type=file style="position: fixed; top: -100em"></input>
+    </label>
+  </div>
+</template>
+
+<script src="./media_upload.js" ></script>
+
+<style>
+ .media-upload {
+     font-size: 26px;
+     flex: 1;
+ }
+</style>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
new file mode 100644
index 00000000..318d30cc
--- /dev/null
+++ b/src/components/nav_panel/nav_panel.js
@@ -0,0 +1,4 @@
+const NavPanel = {
+}
+
+export default NavPanel
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
new file mode 100644
index 00000000..d493fad3
--- /dev/null
+++ b/src/components/nav_panel/nav_panel.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="nav-panel">
+    <div class="panel panel-default">
+      <ul>
+        <li ng-if='currentUser'>
+          <router-link to='/main/friends'>
+            Timeline
+          </router-link>
+        </li>
+        <li>
+          <router-link to='/main/public'>
+            Public Timeline
+          </router-link>
+        </li>
+        <li>
+          <router-link to='/main/all'>
+            The Whole Known Network
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./nav_panel.js" ></script>
+
+<style lang="scss">
+
+ .nav-panel ul {
+     list-style: none;
+     margin: 0;
+     padding: 0;
+ }
+
+ .nav-panel li {
+     border-bottom: 1px solid silver;
+     padding: 0.5em;
+     padding-left: 1em;
+ }
+
+ .nav-panel li:last-child {
+     border: none;
+ }
+
+ .nav-panel a {
+     display: block;
+     width: 100%;
+
+     &.router-link-active {
+         font-weight: bold
+     }
+ }
+
+</style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 2c015154..30a7cd40 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,4 +1,6 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
+import MediaUpload from '../media_upload/media_upload.vue'
+
 import { reject, map, uniqBy } from 'lodash';
 
 const buildMentionsString = ({user, attentions}, currentUser) => {
@@ -23,6 +25,9 @@ const PostStatusForm = {
     'repliedUser',
     'attentions'
   ],
+  components: {
+    MediaUpload
+  },
   data () {
     let statusText = ''
 
@@ -33,7 +38,8 @@ const PostStatusForm = {
 
     return {
       newStatus: {
-        status: statusText
+        status: statusText,
+        files: []
       }
     }
   },
@@ -41,11 +47,18 @@ const PostStatusForm = {
     postStatus (newStatus) {
       statusPoster.postStatus({
         status: newStatus.status,
+        media: newStatus.files,
         store: this.$store,
         inReplyToStatusId: this.replyTo
       })
-      this.newStatus = { }
+      this.newStatus = {
+        status: '',
+        files: []
+      }
       this.$emit('posted')
+    },
+    addMediaFile (fileInfo) {
+      this.newStatus.files.push(fileInfo)
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d2106d5a..943bf422 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload files="newStatus.files"></media-upload>
+        <media-upload v-on:uploaded="addMediaFile"></media-upload>
         <button type="submit" class="btn btn-default" >Submit</button>
       </div>
     </form>
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js
new file mode 100644
index 00000000..138118ad
--- /dev/null
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@@ -0,0 +1,11 @@
+import Timeline from '../timeline/timeline.vue'
+const PublicAndExternalTimeline = {
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.publicAndExternal }
+  }
+}
+
+export default PublicAndExternalTimeline
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
new file mode 100644
index 00000000..94cdaf17
--- /dev/null
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
+    <div class="panel-body">
+      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
+    </div>
+  </div>
+</template>
+
+<script src="./public_and_external_timeline.js"></script>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 2e6565e8..6253d334 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -16,6 +16,9 @@ const Status = {
       } else {
         return this.statusoid
       }
+    },
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
     }
   },
   components: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8361aa52..1c5dc458 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -32,7 +32,7 @@
           </attachment>
         </div>
 
-        <div>
+        <div v-if="loggedIn">
           <div class='status-actions'>
             <div>
               <a href="#" v-on:click.prevent="toggleReplying">
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 433bca11..e0c75d76 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 
 const Timeline = {
   props: [
@@ -8,9 +9,32 @@ const Timeline = {
   components: {
     Status
   },
+  created () {
+    const store = this.$store
+    const credentials = store.state.users.currentUser.credentials
+
+    timelineFetcher.fetchAndUpdate({
+      store,
+      credentials,
+      timeline: this.timelineName,
+      showImmediately: true
+    })
+  },
   methods: {
     showNewStatuses () {
       this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+    },
+    fetchOlderStatuses () {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+      store.commit('setLoading', { timeline: this.timelineName, value: true });
+      timelineFetcher.fetchAndUpdate({
+        store,
+        credentials,
+        timeline: this.timelineName,
+        older: true,
+        showImmediately: true
+      }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
     }
   }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1e779638..2f1b8c28 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -8,6 +8,13 @@
       </div>
     </a>
     <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
+    <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+      <div class="new-status-notification">
+        <p class="text-center" >
+          Load older statuses.
+        </p>
+      </div>
+    </a>
   </div>
 </template>
 <script src="./timeline.js"></script>