Mercurial > xmpp-account-manager
annotate avatar.js @ 52:2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
| author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
|---|---|
| date | Sat, 23 May 2020 21:24:34 +0200 |
| parents | aff7caa10489 |
| children | 6d861d881b96 |
| rev | line source |
|---|---|
| 0 | 1 'use strict'; |
| 2 | |
| 3 function initAvatar(connection) { | |
|
43
aff7caa10489
Encode the default avatar using encodeURIComponent().
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
22
diff
changeset
|
4 const DEFAULT_AVATAR = 'data:image/svg+xml,' + encodeURIComponent('<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 150"><rect width="150" height="150" fill="#888" stroke-width="1" stroke="#000"/><text x="75" y="100" text-anchor="middle" font-size="100">?</text></svg>'); |
| 0 | 5 |
| 6 const avatar_data = {}; | |
| 7 const avatar_img = document.getElementById('avatar'); | |
| 8 const avatar_size = document.getElementById('avatar-size'); | |
| 9 const avatar_file = document.getElementById('avatar-file'); | |
| 10 const avatar_upload = document.getElementById('avatar-upload'); | |
| 11 const avatar_change = document.getElementById('avatar-change'); | |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
12 const avatar_access = document.getElementById('avatar-access'); |
|
11
aedf80eefc19
Also use a spinner on avatar get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
13 const spinner_img = document.getElementById('avatar-spinner'); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
14 const access_spinner_img = document.getElementById('access-model-avatar-spinner'); |
| 0 | 15 |
| 16 avatar_img.src = DEFAULT_AVATAR; | |
| 17 const iq = $iq({type: 'get'}) | |
| 18 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) | |
| 19 .c('items', {node: 'urn:xmpp:avatar:metadata'}); | |
| 20 connection.sendIQ(iq, onAvatarMetadata, onAvatarRetrievalError.bind(null, 'PubSub metadata query failed.')); | |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
21 displaySpinner(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
22 getAccessModel(); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
23 |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
24 function getAccessModel() |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
25 { |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
26 avatar_access.disabled = true; |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
27 displaySpinner(access_spinner_img); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
28 retrieveConfiguration(connection, 'urn:xmpp:avatar:metadata').then((access_model) => { |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
29 if (access_model !== null) { |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
30 if (access_model === 'open') |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
31 avatar_access.value = 'open'; |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
32 else if (access_model === 'presence') |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
33 avatar_access.value = 'presence'; |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
34 else |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
35 console.log('Unsupported avatar access model: ' + access_model); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
36 avatar_access.disabled = false; |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
37 } |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
38 hideSpinner(access_spinner_img); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
39 }, (reason) => { |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
40 console.log('Failed to retrieve avatar configuration: ' + reason); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
41 hideSpinner(access_spinner_img); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
42 }); |
|
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
43 } |
| 0 | 44 |
| 45 function onAvatarMetadata(result_iq) | |
| 46 { | |
| 47 const item = parseXPath(result_iq, './pubsub:pubsub/pubsub:items/pubsub:item'); | |
| 48 if (item == null) | |
| 49 return onAvatarRetrievalError('no item found.'); | |
| 50 const id = item.getAttributeNS(null, 'id'); | |
| 51 const info = parseXPath(item, './avatar_metadata:metadata/avatar_metadata:info'); | |
| 52 if (info == null) | |
| 53 return onAvatarRetrievalError('no info found, your avatar metadata node is broken.'); | |
| 54 if (id != info.getAttributeNS(null, 'id')) | |
| 55 return onAvatarRetrievalError('invalid id in metadata.'); | |
| 56 | |
| 57 const parsed_info = { | |
| 58 id: id, | |
| 59 type: info.getAttributeNS(null, 'type'), | |
| 60 bytes: info.getAttributeNS(null, 'bytes'), | |
| 61 width: info.getAttributeNS(null, 'width'), | |
| 62 height: info.getAttributeNS(null, 'height'), | |
| 63 }; | |
| 64 const iq = $iq({type: 'get'}) | |
| 65 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) | |
| 66 .c('items', {node: 'urn:xmpp:avatar:data'}) | |
| 67 .c('item', {id: id}); | |
| 68 connection.sendIQ(iq, onAvatarData.bind(null, parsed_info), onAvatarRetrievalError.bind(null, 'PubSub data query failed.')); | |
| 69 } | |
| 70 | |
| 71 function onAvatarData(info, result_iq) | |
| 72 { | |
| 73 const item = parseXPath(result_iq, './pubsub:pubsub/pubsub:items/pubsub:item'); | |
| 74 if (item == null) | |
| 75 return onAvatarRetrievalError('no item found.'); | |
| 76 if (info.id != item.getAttributeNS(null, 'id')) | |
| 77 return onAvatarRetrievalError('invalid id in data.'); | |
| 78 | |
| 79 const data = parseXPath(item, './avatar_data:data').textContent; | |
| 80 const url = 'data:' + info.type + ';base64,' + data; | |
| 81 // TODO: validate the bytes too. | |
| 82 /* | |
| 83 // TODO: figure out why this didn’t work. | |
| 84 avatar_img.onload = function (evt) { | |
| 85 const img = evt.target; | |
| 86 if (img.naturalWidth != info.width || img.naturalHeight != info.height) | |
| 87 return onAvatarRetrievalError('invalid width or height in image data.'); | |
| 88 avatar_img.onload = null; | |
| 89 }; | |
| 90 */ | |
| 91 avatar_img.src = url; | |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
92 hideSpinner(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
93 getAccessModel(); |
| 0 | 94 } |
| 95 | |
| 96 function onAvatarRetrievalError(string) | |
| 97 { | |
| 98 console.log('Failed to retrieve avatar, an empty one is displayed instead: ' + string); | |
| 99 avatar_img.src = DEFAULT_AVATAR; | |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
100 hideSpinner(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
101 avatar_access.disabled = true; |
| 0 | 102 } |
| 103 | |
| 104 avatar_upload.addEventListener('click', function (evt) { | |
| 105 avatar_file.click(); | |
| 106 }); | |
| 107 | |
| 108 avatar_change.addEventListener('click', function (evt) { | |
| 109 const metadata_iq = $iq({type: 'set'}) | |
| 110 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) | |
| 111 .c('publish', {node: 'urn:xmpp:avatar:metadata'}) | |
| 112 .c('item', {id: avatar_data.id}) | |
| 113 .c('metadata', {xmlns: 'urn:xmpp:avatar:metadata'}) | |
| 114 .c('info', { | |
| 115 id: avatar_data.id, | |
| 116 type: avatar_data.type, | |
| 117 bytes: avatar_data.bytes, | |
| 118 width: avatar_img.naturalWidth, | |
| 119 height: avatar_img.naturalHeight, | |
| 120 }); | |
| 121 connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError); | |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
122 displaySpinner(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
123 avatar_access.disabled = true; |
|
11
aedf80eefc19
Also use a spinner on avatar get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
124 }); |
|
aedf80eefc19
Also use a spinner on avatar get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
125 |
|
aedf80eefc19
Also use a spinner on avatar get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
126 function onAvatarMetadataUpload(iq) |
|
aedf80eefc19
Also use a spinner on avatar get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
127 { |
| 0 | 128 const data_iq = $iq({type: 'set'}) |
| 129 .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'}) | |
| 130 .c('publish', {node: 'urn:xmpp:avatar:data'}) | |
| 131 .c('item', {id: avatar_data.id}) | |
| 132 .c('data', {xmlns: 'urn:xmpp:avatar:data'}) | |
| 133 .t(avatar_data.data); | |
| 134 connection.sendIQ(data_iq, onAvatarDataUpload, onAvatarUploadError); | |
| 135 } | |
| 136 | |
| 137 function onAvatarDataUpload(iq) | |
| 138 { | |
| 139 console.log('Avatar successfully uploaded!', iq); | |
|
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
11
diff
changeset
|
140 avatar_change.hidden = true; |
| 0 | 141 avatar_size.innerHTML = ''; |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
142 spinnerOk(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
143 getAccessModel(); |
| 0 | 144 } |
| 145 | |
| 146 function onAvatarUploadError(iq) | |
| 147 { | |
| 148 console.log("onAvatarUploadError", iq); | |
|
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
149 spinnerError(spinner_img); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
150 avatar_access.disabled = true; |
| 0 | 151 } |
| 152 | |
| 153 avatar_file.addEventListener('change', function (evt) { | |
| 154 const file = evt.target.files[0]; | |
| 155 avatar_data.type = file.type; | |
| 156 avatar_data.bytes = file.size; | |
| 157 | |
| 158 // Set the preview. | |
| 159 avatar_img.src = URL.createObjectURL(file); | |
| 160 const [size, unit] = friendlyDataSize(file.size); | |
| 161 avatar_size.innerHTML = Math.round(size) + ' ' + unit; | |
| 162 | |
| 163 // Obtain the base64 version of this file. | |
| 164 const base64_reader = new FileReader(); | |
| 165 base64_reader.onload = function (evt) { | |
| 166 const data = evt.target.result; | |
| 167 avatar_data.data = data.substr(data.indexOf(',') + 1); | |
| 168 } | |
| 169 base64_reader.readAsDataURL(file); | |
| 170 | |
| 171 // Compute the sha1 of this file. | |
| 172 const sha1_reader = new FileReader(); | |
| 173 sha1_reader.onload = async function (evt) { | |
| 174 const data = evt.target.result; | |
| 175 const digest = await window.crypto.subtle.digest('SHA-1', data); | |
| 176 const sha1 = (Array | |
| 177 .from(new Uint8Array(digest)) | |
| 178 .map(b => b.toString(16).padStart(2, "0")) | |
| 179 .join("")); | |
| 180 avatar_data.id = sha1; | |
|
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
11
diff
changeset
|
181 avatar_change.hidden = false; |
| 0 | 182 } |
| 183 sha1_reader.readAsArrayBuffer(file); | |
| 184 }); | |
| 185 | |
| 186 function friendlyDataSize(bytes) { | |
| 187 let unit = 'B' | |
| 188 if (bytes >= 1024) { | |
| 189 bytes /= 1024; | |
| 190 unit = 'KiB'; | |
| 191 } | |
| 192 if (bytes >= 1024) { | |
| 193 bytes /= 1024; | |
| 194 unit = 'MiB'; | |
| 195 } | |
| 196 if (bytes >= 1024) { | |
| 197 bytes /= 1024; | |
| 198 unit = 'GiB'; | |
| 199 } | |
| 200 if (bytes >= 1024) { | |
| 201 bytes /= 1024; | |
| 202 unit = 'TiB'; | |
| 203 } | |
| 204 return [bytes, unit]; | |
| 205 } | |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
206 |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
207 avatar_access.addEventListener('change', function (evt) { |
|
3
5aa1bf7154b0
Add a simple PEP node viewer and editor.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
2
diff
changeset
|
208 const iq = configurePEPField('urn:xmpp:avatar:metadata', 'pubsub#access_model', evt.target.value); |
|
21
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
209 connection.sendIQ(iq, onAvatarMetadataConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration of metadata failed.')); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
210 displaySpinner(access_spinner_img); |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
211 }); |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
212 |
|
21
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
213 function onAvatarMetadataConfigured(result_iq) |
|
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
214 { |
|
22
07e33207e598
Fixup for an unitialised variable in the previous commit.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
21
diff
changeset
|
215 const iq = configurePEPField('urn:xmpp:avatar:data', 'pubsub#access_model', avatar_access.value); |
|
21
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
216 connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration of data failed.')); |
|
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
217 } |
|
cd35420457ac
Also configure the avatar data node’s access model.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
15
diff
changeset
|
218 |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
219 function onAvatarConfigured(result_iq) |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
220 { |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
221 console.log('Successfully set avatar access model.') |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
222 spinnerOk(access_spinner_img); |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
223 } |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
224 |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
225 function onAvatarConfigureError(string) |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
226 { |
|
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
227 console.log('Failed to configure avatar node: ' + string); |
|
52
2f45bee88b47
Add pubsub#access_model retrieval for the avatar node.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
43
diff
changeset
|
228 spinnerError(access_spinner_img); |
|
2
db033e5eabcb
Add pubsub#access_model configuration for avatars.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
229 } |
| 0 | 230 } |