git ssb

2+

ev / mvd



Commit 072843e1788c3cdbb773ca4e7524a92b3f0ef002

Browse Files

add scat backchannel

Ev Bogue committed on 6/26/2018, 11:58:22 AM
Parent: d6914dbe5e8bd7707b7d27b048ea0a056dd496e9

Files changed

render.jschanged
style.csschanged
style.css.jsonchanged
views.jschanged
render.jsView
@@ -22,9 +22,12 @@
2222 … var muted = h('span', ' muted')
2323 … message.appendChild(tools.mini(msg, muted))
2424 … return message
2525 … }
26-
26 …+ else if (msg.value.content.type == 'scat_message') {
27 …+ message.appendChild(tools.mini(msg, ' ' + msg.value.content.text))
28 …+ return message
29 …+ }
2730 … else if (msg.value.content.type == 'contact') {
2831 … var contact = h('a', {href: '#' + msg.value.content.contact}, avatar.name(msg.value.content.contact))
2932 … if (msg.value.content.following == true) {
3033 … var following = h('span', ' follows ', contact)
style.cssView
@@ -203,9 +203,9 @@
203203 … .compose:focus {
204204 … outline: none;
205205 … }
206206 …
207-.btn .emoji {
207 …+.emoji {
208208 … padding: .2em;
209209 … }
210210 …
211211 … .right {
@@ -252,9 +252,11 @@
252252 … font-size: 13px;
253253 … line-height: 20px;
254254 … }
255255 …
256 …+button {margin: 0; margin-top: -.2em;}
256257 …
258 …+input {width: 88%; }
257259 …
258260 … .btn {
259261 … display: inline-block;
260262 … *display: inline;
style.css.jsonView
@@ -1,1 +1,1 @@
1-"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n/*a {\n color: #00aaff;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #0088cc;\n text-decoration: underline;\n}*/\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\nimg {\n border-radius: 3px;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.btn .emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n *float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #ccc;\n}\n\ncode {\n color: #ccc;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n}\n\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"
1 …+"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n/*a {\n color: #00aaff;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #0088cc;\n text-decoration: underline;\n}*/\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\nimg {\n border-radius: 3px;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n *float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #ccc;\n}\n\ncode {\n color: #ccc;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n}\n\nbutton {margin: 0; margin-top: -.2em;}\n\ninput {width: 88%; }\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"
views.jsView
@@ -295,9 +295,75 @@
295295 … stream.top(content)
296296 … )
297297 … }
298298 …
299 …+function backchannel () {
299300 …
301 …+ var screen = document.getElementById('screen')
302 …+ var content = h('div.content')
303 …+
304 …+ screen.appendChild(hyperscroll(content))
305 …+
306 …+ var chatbox = h('input', {placeholder: 'Backchannel'})
307 …+
308 …+ var chat = h('div.content')
309 …+
310 …+ var publish = h('button.btn', 'Publish', {
311 …+ onclick: function () {
312 …+ if (chatbox.value) {
313 …+ var content = {
314 …+ text: chatbox.value,
315 …+ type: 'scat_message'
316 …+ }
317 …+ sbot.publish(content, function (err, msg) {
318 …+ if (err) throw err
319 …+ console.log('Published!', msg)
320 …+ })
321 …+ }
322 …+ }
323 …+ })
324 …+
325 …+ chat.appendChild(h('div.message', chatbox, publish))
326 …+
327 …+ if (screen.firstChild.firstChild) {
328 …+ screen.firstChild.insertBefore(chat, screen.firstChild.firstChild)
329 …+ } else {
330 …+ screen.firstChild.appendChild(chat)
331 …+ }
332 …+
333 …+ function createStream (opts) {
334 …+ return pull(
335 …+ Next(sbot.query, opts, ['value', 'timestamp']),
336 …+ pull.map(function (msg) {
337 …+ if (msg.value) {
338 …+ return render(msg)
339 …+ }
340 …+ })
341 …+ )
342 …+ }
343 …+
344 …+ pull(
345 …+ createStream({
346 …+ limit: 10,
347 …+ reverse: true,
348 …+ live: false,
349 …+ query: [{$filter: { value: { content: {type: 'scat_message'}, timestamp: { $gt: 0 }}}}]
350 …+ }),
351 …+ stream.bottom(content)
352 …+ )
353 …+
354 …+ pull(
355 …+ createStream({
356 …+ limit: 10,
357 …+ old: false,
358 …+ live: true,
359 …+ query: [{$filter: { value: { content: {type: 'scat_message'}, timestamp: { $gt: 0 }}}}]
360 …+ }),
361 …+ stream.top(content)
362 …+ )
363 …+}
364 …+
365 …+
300366 … function hash () {
301367 … return window.location.hash.substring(1)
302368 … }
303369 …
@@ -311,8 +377,10 @@
311377 … } else if (src == 'mentions') {
312378 … mentionsStream()
313379 … } else if (src == 'about') {
314380 … about()
381 …+ } else if (src == 'backchannel') {
382 …+ backchannel()
315383 … } else if (src == 'private') {
316384 … privateStream()
317385 … } else if (src == 'key') {
318386 … keyPage()

Built with git-ssb-web