git ssb

1
'use strict'
2
var dataurl = require('dataurl-')
3
var hyperfile = require('hyperfile')
4
var hypercrop = require('hypercrop')
5
var hyperlightbox = require('hyperlightbox')
6
var h = require('hyperscript')
7
var pull = require('pull-stream')
8
var getAvatar = require('ssb-avatar')
9
var ref = require('ssb-ref')
10
var visualize = require('visualize-buffer')
11
var self_id = require('../keys').id
12
13
function crop (d, cb) {
14
  var canvas = hypercrop(h('img', {src: d}))
15
16
  return h('div.column.avatar_pic',
17
    canvas,
18
    //canvas.selection,
19
    h('div.row.avatar_pic__controls',
20
      h('button', 'okay', {onclick: function () {
21
        cb(null, canvas.selection.toDataURL())
22
      }}),
23
      h('button', 'cancel', {onclick: function () {
24
        cb(new Error('canceled'))
25
      }})
26
    )
27
  )
28
}
29
30
exports.needs = {
31
  message_confirm: 'first',
32
  sbot_blobs_add: 'first',
33
  blob_url: 'first',
34
  sbot_links: 'first',
35
  avatar_name: 'first'
36
}
37
38
exports.gives = 'avatar_edit'
39
40
exports.create = function (api) {
41
  return function (id) {
42
43
    var img = visualize(new Buffer(id.substring(1), 'base64'), 256)
44
    img.classList.add('avatar--large')
45
46
    var lb = hyperlightbox()
47
    var name_input = h('input', {placeholder: 'rename'})
48
    var name = api.avatar_name(id)
49
    var selected = null
50
51
    getAvatar({links: api.sbot_links}, self_id, id, function (err, avatar) {
52
      if (err) return console.error(err)
53
      //don't show user has already selected an avatar.
54
      if(selected) return
55
      if(ref.isBlob(avatar.image))
56
        img.src = api.blob_url(avatar.image)
57
    })
58
59
    var also_pictured = h('div.profile__alsopicturedas.wrap')
60
61
    pull(
62
      api.sbot_links({dest: id, rel: 'about', values: true}),
63
      pull.map(function (e) {
64
        return e.value.content.image
65
      }),
66
      pull.filter(function (e) {
67
        return e && 'string' == typeof e.link
68
      }),
69
      pull.unique('link'),
70
      pull.drain(function (image) {
71
        also_pictured.appendChild(
72
          h('a', {href:'#', onclick: function (ev) {
73
              ev.stopPropagation()
74
              ev.preventDefault()
75
              selected = image
76
              img.src = api.blob_url(image.link || image)
77
            }},
78
            h('img.avatar--thumbnail', {src: api.blob_url(image)})
79
          )
80
        )
81
      })
82
    )
83
84
    return h('div.row.profile',
85
      lb,
86
      img,
87
      h('div.column.profile__info',
88
        h('strong', name),
89
        name_input,
90
91
        hyperfile.asDataURL(function (data) {
92
          var el = crop(data, function (err, data) {
93
            if(data) {
94
              img.src = data
95
              var _data = dataurl.parse(data)
96
              pull(
97
                pull.once(_data.data),
98
                api.sbot_blobs_add(function (err, hash) {
99
                  //TODO. Alerts are EVIL.
100
                  //I use them only in a moment of weakness.
101
102
                  if(err) return alert(err.stack)
103
                  selected = {
104
                    link: hash,
105
                    size: _data.data.length,
106
                    type: _data.mimetype,
107
                    width: 512,
108
                    height: 512
109
                  }
110
111
                })
112
              )
113
            }
114
            lb.close()
115
          })
116
          lb.show(el)
117
        }),
118
        h('button', 'update', {onclick: function () {
119
          if(name_input.value)
120
            name.textContent = name_input.value
121
122
          if(selected)
123
            api.message_confirm({
124
              type: 'about',
125
              about: id,
126
              name: name_input.value || undefined,
127
              image: selected
128
            })
129
          else if(name_input.value) //name only
130
            api.message_confirm({
131
              type: 'about',
132
              about: id,
133
              name: name_input.value || undefined,
134
            })
135
          else
136
            //another moment of weakness
137
            alert('must select a name or image')
138
        }}),
139
      also_pictured
140
      )
141
    )
142
  }
143
}
144