git ssb

1
<template>
2
  <div class="media mt-3 col-sm-12 message">
3
    <img class="pr-3 rounded " style="max-width: 60px; " :src="image_url">
4
    <div class="media-body">
5
      <h5 class="mt-0">
6
        <router-link :to="{ params: { hash: message.value.author() }}">{{ author }}</router-link>
7
8
        <span class="text-muted">
9
          {{ message.value.content.type() }}
10
          <span class="text-dark" v-if="message.value.content.channel()">#{{ message.value.content.channel() }}</span>
11
        </span>
12
      </h5>
13
14
      <p v-html="content_text_md()"></p>
15
16
      <p v-if="raw">
17
        <pre v-html="content_json()"></pre>
18
      </p>
19
20
      <div class="float-right text-muted">
21
        <timeago v-if="message.value.timestamp()" :since="message.value.timestamp()" :auto-update="60"></timeago>
22
23
        <span v-if="relatedMessages.length > 0">| {{ relatedMessages.length }} replies</span>
24
        <a class="" @click="raw = !raw">Raw</a>
25
      </div>
26
      <!-- {{ relatedMessages }} -->
27
      <!-- <message v-for="mess in relatedMessages" :message="mess">
28
      </message> -->
29
30
    </div>
31
32
33
  </div>
34
</template>
35
36
<script>
37
38
// var pull = require('pull-stream')
39
import Rx from 'rxjs/RX'
40
import { Observable } from 'rxjs/Observable'
41
const nn = require('nevernull')
42
const md = require('ssb-markdown')
43
44
export default {
45
  name: 'message',
46
  props: ['message'],
47
  data () {
48
    return {
49
      author: "...",
50
      image_url: "http://via.placeholder.com/90x90",
51
      relatedMessages: [],
52
      raw: false
53
    }
54
  },
55
56
  methods: {
57
    setAuthor(err, a) {
58
      if(a[0] == null)
59
        return
60
      this.author = nn( a[0] ).name()
61
    },
62
63
    setRelatedMessages(err, a, rel) {
64
      if(err) {
65
        console.log('message.vue.setRelatedMessages.err', err)
66
      }
67
      if(a.length > 1) {
68
        // console.log(a)
69
        // remove last item as it's a ref to this message
70
        a = a.splice(-1,1)
71
        this.relatedMessages = a//.map(function(e){ return nn(e) })
72
      }
73
    },
74
75
    // Get raw pretty printed json version of message
76
    content_json() {
77
      return JSON.stringify(this.message.value(), null, 2)
78
    },
79
80
    // Get markdown formatted version of message content
81
    content_text_md() {
82
      return md.block( this.message.value.content.text() )
83
    }
84
85
  },
86
  updated() {
87
    this.image_url = this.$dethrashed_avatar_image(
88
      this.message.value.author()
89
    )
90
  },
91
  mounted() {
92
    // author name
93
    this.$dethrashed_signifier(
94
      this.message.value.author(), this.setAuthor
95
    )
96
97
    // if(this.message.key())
98
    // {
99
    //   this.$depject_api.getThread[0](
100
    //     this.message.key(), this.setRelatedMessages
101
    //   )
102
    // }
103
104
105
    // this.content_text_md = this.$depject_api.markdown[0](this.message.value.content())
106
  }
107
}
108
109
</script>
110
111
<style scoped>
112
.media-body p {
113
  white-space: wrap;
114
  text-overflow: ellipsis;
115
}
116
</style>
117