git ssb

1
2
<template>
3
  <div class="media mt-3 col-sm-12 message">
4
    <img class="pr-3 rounded " style="max-width: 60px; " :src="image_url">
5
    <div class="media-body">
6
      <h5 class="mt-0">
7
        {{ author }}
8
        <span class="text-muted">
9
          {{ message.value.content.type() }}
10
          <strong v-if="message.value.content.channel()">#{{ message.value.content.channel() }}</strong>
11
        </span>
12
      </h5>
13
14
      <p v-html="content_text()"></p>
15
16
    </div>
17
18
    {{ relatedMessages.length }}
19
    <message v-for="message in relatedMessages" :message="message">
20
    </message>
21
22
  </div>
23
</template>
24
25
<script>
26
27
// var pull = require('pull-stream')
28
import Rx from 'rxjs/RX'
29
import { Observable } from 'rxjs/Observable'
30
const nn = require('nevernull')
31
const md = require('ssb-markdown')
32
33
export default {
34
  name: 'message',
35
  props: ['message'],
36
  data () {
37
    return {
38
      author: "...",
39
      image_url: "http://via.placeholder.com/90x90",
40
      relatedMessages: []
41
    }
42
  },
43
44
  methods: {
45
    setAuthor(err, a){
46
      if(a[0] == null)
47
        return
48
      this.author = nn( a[0] ).name()
49
    },
50
51
    setRelatedMessages(err, a){
52
      if(err) {
53
        console.log('message.vue.setRelatedMessages.err', err)
54
      }
55
      if(a)
56
        this.relatedMessages = a.every(function(e){ return nn(e) })
57
    },
58
59
    // Get markdown formatted version of message content
60
    content_text()
61
    {
62
      return md.block( this.message.value.content.text() )
63
    }
64
  },
65
  updated() {
66
    // author name
67
    this.$depject_api.signifier[0](
68
      this.message.value.author(), this.setAuthor
69
    )
70
71
    if(this.message.key())
72
    {
73
      this.$depject_api.getThread[0](
74
        this.message.key(), this.setRelatedMessages
75
      )
76
    }
77
    this.image_url = this.$depject_api.avatar_image[0](
78
      this.message.value.author()
79
    )
80
  }
81
}
82
83
</script>
84
85
<style scoped>
86
.media-body p{
87
88
  white-space: wrap;
89
  text-overflow: ellipsis;
90
}
91
.message{
92
93
}
94
</style>
95