-
Notifications
You must be signed in to change notification settings - Fork 3
/
script.js
129 lines (118 loc) · 3.74 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
function main() {
// Kinto server url
var server = "https://kinto.dev.mozaws.net/v1";
// Basic Authentication
var headers = {};
// Bucket id
var bucket = "kintobot";
// Collection id
var collection = "wall";
// Pusher app key
var pusher_key = "01a9feaaf9ebb120d1a6";
// Max initial number of records
var limit = 100;
// Refresh rate
var refreshRate = 7000;
var contents = [];
var queue = [];
// Fetch from kinto.
var url = `${server}/buckets/${bucket}/collections/${collection}/records?_limit=${limit}`;
fetch(url, {headers: headers})
.then(function (response) {
return response.json();
})
.then(function (result) {
if (result.data) {
contents = result.data;
queue = contents.slice(1);
showContent(contents[0]);
}
})
.catch(function (error) {
document.getElementById("error").textContent = error.toString();
});
// Live changes.
var pusher = new Pusher(pusher_key, {
encrypted: true
});
var channelName = `${bucket}-${collection}-record`;
var channel = pusher.subscribe(channelName);
channel.bind('create', function(data) {
var newrecords = data.map(function (change) { return change.new; });
var wasEmpty = contents.length === 0;
contents = newrecords.concat(contents);
queue = newrecords.concat(queue);
if (wasEmpty) {
showContent(contents[0]);
queue = queue.slice(1);
}
});
channel.bind('delete', function(data) {
var deletedIds = data.map(function (change) { return change.old.id; });
contents = contents.filter(function (record) { return deletedIds.indexOf(record.id) < 0; });
queue = queue.filter(function (record) { return deletedIds.indexOf(record.id) < 0; });
});
// Preload media
function preload(record) {
var isURL = /^http(.*)(gif|jpg|jpeg)$/.test(record.text);
if (isURL || record.attachment) {
var location = isURL ? record.text : record.attachment.location;
if (isURL || /^image/.test(record.attachment.mimetype)) {
var image = new Image();
image.src = location;
}
}
}
// Render HTML.
function showContent(record) {
var entry;
var isURL = /^http(.*)(gif|jpg|jpeg)$/.test(record.text);
if (isURL || record.attachment) {
var location = isURL ? record.text : record.attachment.location;
var attr = "src";
var template;
if (isURL || /^image/.test(record.attachment.mimetype)) {
template = "image-tpl";
}
else if (/^audio/.test(record.attachment.mimetype)) {
template = "audio-tpl";
}
else if (/^video/.test(record.attachment.mimetype)) {
template = "video-tpl";
}
else {
template = "file-tpl";
attr = "href";
}
var tpl = document.getElementById(template);
entry = tpl.content.cloneNode(true);
entry.querySelector(".attachment").setAttribute(attr, location);
}
else {
var tpl = document.getElementById("text-tpl");
entry = tpl.content.cloneNode(true);
entry.querySelector(".msg").textContent = record.text;
}
entry.querySelector(".author").textContent = record.from.first_name;
// Replace current with new one.
var wall = document.querySelector("#wall");
wall.innerHTML = "";
wall.appendChild(entry);
// Consume queue.
if (queue.length > 0) {
record = queue[0];
queue = queue.slice(1);
}
// Restart with whole list when done.
if (queue.length === 0) {
queue = contents;
}
// Preload next record
preload(record);
// Auto-refresh.
setTimeout(showContent.bind(undefined, record), refreshRate);
// Toggle progress bar.
document.querySelector("#progress").classList.toggle('run');
}
}
window.addEventListener("DOMContentLoaded", main);