mackuba.eu
+108
-26
api.js
+108
-26
api.js
···
130
130
throw new URLError(`${error}`);
131
131
}
132
132
133
-
if (url.protocol != 'https:') {
134
-
throw new URLError('URL must start with https://');
133
+
if (url.protocol != 'https:' && url.protocol != 'http:') {
134
+
throw new URLError('URL must start with http(s)://');
135
135
}
136
136
137
137
let parts = url.pathname.split('/');
···
197
197
this.cacheProfile(profile);
198
198
return profile;
199
199
}
200
+
}
201
+
202
+
/** @param {string} query, @returns {Promise<json[]>} */
203
+
204
+
async autocompleteUsers(query) {
205
+
let json = await this.getRequest('app.bsky.actor.searchActorsTypeahead', { q: query });
206
+
return json.actors;
200
207
}
201
208
202
209
/** @returns {Promise<json | undefined>} */
···
278
285
return await this.getRequest('app.bsky.feed.searchPosts', params);
279
286
}
280
287
281
-
/** @param {string} [cursor], @returns {Promise<json>} */
282
-
283
-
async loadNotifications(cursor) {
284
-
let params = { limit: 100 };
285
-
286
-
if (cursor) {
287
-
params.cursor = cursor;
288
-
}
288
+
/** @param {json} [params], @returns {Promise<json>} */
289
289
290
-
return await this.getRequest('app.bsky.notification.listNotifications', params);
290
+
async loadNotifications(params) {
291
+
return await this.getRequest('app.bsky.notification.listNotifications', params || {});
291
292
}
292
293
293
-
/** @param {string} [cursor], @returns {Promise<{ cursor: string | undefined, posts: json[] }>} */
294
+
/**
295
+
* @param {string} [cursor]
296
+
* @returns {Promise<{ cursor: string | undefined, posts: json[] }>}
297
+
*/
294
298
295
299
async loadMentions(cursor) {
296
-
let response = await this.loadNotifications(cursor);
297
-
let mentions = response.notifications.filter(x => ['reply', 'mention'].includes(x.reason));
298
-
let uris = mentions.map(x => x['uri']);
299
-
let posts = [];
300
+
let response = await this.loadNotifications({ cursor: cursor ?? '', limit: 100, reasons: ['reply', 'mention'] });
301
+
let uris = response.notifications.map(x => x.uri);
302
+
let batches = [];
300
303
301
304
for (let i = 0; i < uris.length; i += 25) {
302
-
let batch = await this.loadPosts(uris.slice(i, i + 25));
303
-
posts = posts.concat(batch);
305
+
let batch = this.loadPosts(uris.slice(i, i + 25));
306
+
batches.push(batch);
304
307
}
305
308
306
-
return { cursor: response.cursor, posts };
309
+
let postGroups = await Promise.all(batches);
310
+
311
+
return { cursor: response.cursor, posts: postGroups.flat() };
307
312
}
308
313
309
-
/** @param {number} days, @returns {Promise<json[]>} */
314
+
/**
315
+
* @param {number} days
316
+
* @param {{ onPageLoad?: FetchAllOnPageLoad, keepLastPage?: boolean }} [options]
317
+
* @returns {Promise<json[]>}
318
+
*/
310
319
311
-
async loadTimeline(days, options = {}) {
320
+
async loadHomeTimeline(days, options = {}) {
312
321
let now = new Date();
313
322
let timeLimit = now.getTime() - days * 86400 * 1000;
314
323
315
-
return await this.fetchAll('app.bsky.feed.getTimeline', { limit: 100 }, {
324
+
return await this.fetchAll('app.bsky.feed.getTimeline', {
325
+
params: { limit: 100 },
316
326
field: 'feed',
317
-
breakWhen: (x) => {
318
-
let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt;
319
-
return Date.parse(timestamp) < timeLimit;
327
+
breakWhen: (x) => (feedPostTime(x) < timeLimit),
328
+
onPageLoad: options.onPageLoad,
329
+
keepLastPage: options.keepLastPage
330
+
});
331
+
}
332
+
333
+
/**
334
+
@typedef
335
+
{'posts_with_replies' | 'posts_no_replies' | 'posts_and_author_threads' | 'posts_with_media' | 'posts_with_video'}
336
+
AuthorFeedFilter
337
+
338
+
Filters:
339
+
- posts_with_replies: posts, replies and reposts (default)
340
+
- posts_no_replies: posts and reposts (no replies)
341
+
- posts_and_author_threads: posts, reposts, and replies in your own threads
342
+
- posts_with_media: posts and replies, but only with images (no reposts)
343
+
- posts_with_video: posts and replies, but only with videos (no reposts)
344
+
*/
345
+
346
+
/**
347
+
* @param {string} did
348
+
* @param {number} days
349
+
* @param {{ filter: AuthorFeedFilter, onPageLoad?: FetchAllOnPageLoad, keepLastPage?: boolean }} options
350
+
* @returns {Promise<json[]>}
351
+
*/
352
+
353
+
async loadUserTimeline(did, days, options) {
354
+
let now = new Date();
355
+
let timeLimit = now.getTime() - days * 86400 * 1000;
356
+
357
+
return await this.fetchAll('app.bsky.feed.getAuthorFeed', {
358
+
params: {
359
+
actor: did,
360
+
filter: options.filter,
361
+
limit: 100
320
362
},
321
-
onPageLoad: options.onPageLoad
363
+
field: 'feed',
364
+
breakWhen: (x) => (feedPostTime(x) < timeLimit),
365
+
onPageLoad: options.onPageLoad,
366
+
keepLastPage: options.keepLastPage
367
+
});
368
+
}
369
+
370
+
/** @returns {Promise<json[]>} */
371
+
372
+
async loadUserLists() {
373
+
let lists = await this.fetchAll('app.bsky.graph.getLists', {
374
+
params: {
375
+
actor: this.user.did,
376
+
limit: 100
377
+
},
378
+
field: 'lists'
379
+
});
380
+
381
+
return lists.filter(x => x.purpose == "app.bsky.graph.defs#curatelist");
382
+
}
383
+
384
+
/**
385
+
* @param {string} list
386
+
* @param {number} days
387
+
* @param {{ onPageLoad?: FetchAllOnPageLoad, keepLastPage?: boolean }} [options]
388
+
* @returns {Promise<json[]>}
389
+
*/
390
+
391
+
async loadListTimeline(list, days, options = {}) {
392
+
let now = new Date();
393
+
let timeLimit = now.getTime() - days * 86400 * 1000;
394
+
395
+
return await this.fetchAll('app.bsky.feed.getListFeed', {
396
+
params: {
397
+
list: list,
398
+
limit: 100
399
+
},
400
+
field: 'feed',
401
+
breakWhen: (x) => (feedPostTime(x) < timeLimit),
402
+
onPageLoad: options.onPageLoad,
403
+
keepLastPage: options.keepLastPage
322
404
});
323
405
}
324
406
+14
async_lint.sh
+14
async_lint.sh
···
1
+
#!/bin/bash
2
+
3
+
scan() {
4
+
local identifier=$1
5
+
grep "\b$identifier(" *.js | grep -Ev "await |async |return |\.then\(|\.map"
6
+
}
7
+
8
+
for name in $(grep -oE "async \w+\(" *.js | grep -oE "\w+\(" | sed -e "s/(//"); do
9
+
scan $name
10
+
done
11
+
12
+
for name in $(grep -oE "async function \w+\(" *.js | grep -oE "\w+\(" | sed -e "s/(//"); do
13
+
scan $name
14
+
done
+47
embed_component.js
+47
embed_component.js
···
125
125
126
126
a.append(box);
127
127
128
+
if (hostname == 'media.tenor.com') {
129
+
a.addEventListener('click', (e) => {
130
+
e.preventDefault();
131
+
this.displayGIFInline(a, embed);
132
+
});
133
+
}
134
+
128
135
return a;
136
+
}
137
+
138
+
/** @param {HTMLElement} a, @param {RawLinkEmbed | InlineLinkEmbed} embed */
139
+
140
+
displayGIFInline(a, embed) {
141
+
let gifDiv = $tag('div.gif');
142
+
let img = $tag('img', { src: embed.url }, HTMLImageElement);
143
+
img.style.opacity = '0';
144
+
img.style.maxHeight = '200px';
145
+
gifDiv.append(img);
146
+
a.replaceWith(gifDiv);
147
+
148
+
img.addEventListener('load', (e) => {
149
+
if (img.naturalWidth > img.naturalHeight) {
150
+
img.style.maxHeight = '200px';
151
+
} else {
152
+
img.style.maxWidth = '200px';
153
+
img.style.maxHeight = '400px';
154
+
}
155
+
156
+
img.style.opacity = '';
157
+
});
158
+
159
+
let staticPic;
160
+
161
+
if (typeof embed.thumb == 'string') {
162
+
staticPic = embed.thumb;
163
+
} else {
164
+
staticPic = `https://cdn.bsky.app/img/avatar/plain/${this.post.author.did}/${embed.thumb.ref.$link}@jpeg`;
165
+
}
166
+
167
+
img.addEventListener('click', (e) => {
168
+
if (img.classList.contains('static')) {
169
+
img.src = embed.url;
170
+
img.classList.remove('static');
171
+
} else {
172
+
img.src = staticPic;
173
+
img.classList.add('static');
174
+
}
175
+
});
129
176
}
130
177
131
178
/** @param {FeedGeneratorRecord} feedgen, @returns {HTMLElement} */
+120
-15
index.html
+120
-15
index.html
···
10
10
font-src 'self';
11
11
script-src-attr 'none';
12
12
style-src-attr 'none';
13
-
connect-src https:;
13
+
connect-src https: http://localhost:3000;
14
14
base-uri 'none';
15
15
form-action 'none';">
16
16
···
49
49
50
50
<li><a href="#" data-action="login">Log in</a></li>
51
51
<li><a href="#" data-action="logout">Log out</a></li>
52
+
53
+
<li class="link"><a href="?">Home</a></li>
54
+
<li class="link"><a href="?page=posting_stats">Posting stats</a></li>
55
+
<li class="link"><a href="?page=like_stats">Like stats</a></li>
56
+
<li class="link"><a href="?page=search">Timeline search</a></li>
57
+
<li class="link"><a href="?page=search&mode=likes">Archive search</a></li>
52
58
</ul>
53
59
</div>
54
60
···
94
100
<form>
95
101
<p>
96
102
Scan posts from:
97
-
<input type="radio" name="scan_type" id="scan_type_timeline" value="timeline" checked>
98
-
<label for="scan_type_timeline">Your timeline</label>
99
-
<input type="radio" name="scan_type" id="scan_type_users" value="users" disabled>
100
-
<label for="scan_type_users">Selected users (coming soon)</label>
103
+
<input type="radio" name="scan_type" id="scan_type_timeline" value="home" checked>
104
+
<label for="scan_type_timeline">Home timeline</label>
105
+
106
+
<input type="radio" name="scan_type" id="scan_type_list" value="list">
107
+
<label for="scan_type_list">List feed</label>
108
+
109
+
<input type="radio" name="scan_type" id="scan_type_users" value="users">
110
+
<label for="scan_type_users">Selected users</label>
111
+
112
+
<input type="radio" name="scan_type" id="scan_type_you" value="you">
113
+
<label for="scan_type_you">Your profile</label>
101
114
</p>
102
115
103
116
<p>
104
117
Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
105
118
</p>
119
+
120
+
<p class="list-choice">
121
+
<label>Select list:</label>
122
+
<select name="scan_list"></select>
123
+
</p>
124
+
125
+
<div class="user-choice">
126
+
<input type="text" placeholder="Add user" autocomplete="off">
127
+
<div class="autocomplete"></div>
128
+
<div class="selected-users"></div>
129
+
</div>
106
130
107
131
<p>
108
132
<input type="submit" value="Start scan"> <progress></progress>
···
112
136
<p class="scan-info"></p>
113
137
114
138
<table class="scan-result">
139
+
<thead></thead>
140
+
<tbody></tbody>
141
+
</table>
142
+
</div>
143
+
144
+
<div id="like_stats_page">
145
+
<h2>Like statistics</h2>
146
+
147
+
<form>
148
+
<p>
149
+
Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
150
+
</p>
151
+
152
+
<p>
153
+
<input type="submit" value="Start scan"> <progress></progress>
154
+
</p>
155
+
</form>
156
+
157
+
<table class="scan-result given-likes">
158
+
<thead>
159
+
<tr><th colspan="3">❤️ Likes from you:</th></tr>
160
+
</thead>
161
+
<tbody></tbody>
162
+
</table>
163
+
164
+
<table class="scan-result received-likes">
115
165
<thead>
116
-
<tr>
117
-
<th>#</th>
118
-
<th>Handle</th>
119
-
<th>All posts /d</th>
120
-
<th>Own posts /d</th>
121
-
<th>Reposts /d</th>
122
-
<th>% of all</th>
123
-
</tr>
166
+
<tr><th colspan="3">💛 Likes on your posts:</th></tr>
124
167
</thead>
125
-
<tbody>
126
-
</tbody>
168
+
<tbody></tbody>
127
169
</table>
128
170
</div>
129
171
172
+
<div id="private_search_page">
173
+
<h2>Archive search</h2>
174
+
175
+
<div class="timeline-search">
176
+
<form>
177
+
<p>
178
+
Fetch timeline posts: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
179
+
</p>
180
+
181
+
<p>
182
+
<input type="submit" value="Fetch timeline"> <progress></progress>
183
+
</p>
184
+
</form>
185
+
186
+
<p class="archive-status"></p>
187
+
188
+
<hr>
189
+
</div>
190
+
191
+
<form class="search-form">
192
+
<p class="search">Search: <input type="text" class="search-query" autocomplete="off"></p>
193
+
194
+
<div class="search-collections">
195
+
<input type="radio" name="collection" value="likes" id="collection-likes" checked> <label for="collection-likes">Likes</label>
196
+
<input type="radio" name="collection" value="reposts" id="collection-reposts"> <label for="collection-reposts">Reposts</label>
197
+
<input type="radio" name="collection" value="quotes" id="collection-quotes"> <label for="collection-quotes">Quotes</label>
198
+
<input type="radio" name="collection" value="pins" id="collection-pins"> <label for="collection-pins">Pins</label>
199
+
</div>
200
+
</form>
201
+
202
+
<div class="lycan-import">
203
+
<form>
204
+
<h4>Data not imported yet</h4>
205
+
206
+
<p>
207
+
In order to search within your likes and bookmarks, the posts you've liked or saved need to be imported into a database.
208
+
This is a one-time process, but it can take several minutes or more, depending on the age of your account.
209
+
</p>
210
+
<p>
211
+
To start the import, press the button below. You can then wait until it finishes, or close this tab and come back a bit later.
212
+
After the import is complete, the database will be kept up to date automatically going forward.
213
+
</p>
214
+
<p>
215
+
<input type="submit" value="Start import">
216
+
</p>
217
+
</form>
218
+
219
+
<div class="import-progress">
220
+
<h4>Import in progress</h4>
221
+
222
+
<p class="import-status"></p>
223
+
<p><progress></progress> <output></output></p>
224
+
</div>
225
+
</div>
226
+
227
+
<div class="results">
228
+
</div>
229
+
</div>
230
+
130
231
<script src="lib/purify.min.js"></script>
131
232
<script src="minisky.js"></script>
132
233
<script src="api.js"></script>
133
234
<script src="utils.js"></script>
134
235
<script src="rich_text_lite.js"></script>
135
236
<script src="models.js"></script>
237
+
<script src="menu.js"></script>
136
238
<script src="thread_page.js"></script>
137
239
<script src="posting_stats_page.js"></script>
240
+
<script src="like_stats_page.js"></script>
241
+
<script src="notifications_page.js"></script>
242
+
<script src="private_search_page.js"></script>
138
243
<script src="embed_component.js"></script>
139
244
<script src="post_component.js"></script>
140
245
<script src="skythread.js"></script>
+289
like_stats_page.js
+289
like_stats_page.js
···
1
+
class LikeStatsPage {
2
+
3
+
/** @type {number | undefined} */
4
+
scanStartTime;
5
+
6
+
constructor() {
7
+
this.pageElement = $id('like_stats_page');
8
+
9
+
this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
10
+
this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
11
+
this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement);
12
+
13
+
this.receivedTable = $(this.pageElement.querySelector('.received-likes'), HTMLTableElement);
14
+
this.givenTable = $(this.pageElement.querySelector('.given-likes'), HTMLTableElement);
15
+
16
+
this.appView = new BlueskyAPI('public.api.bsky.app', false);
17
+
18
+
this.setupEvents();
19
+
20
+
this.progressPosts = 0;
21
+
this.progressLikeRecords = 0;
22
+
this.progressPostLikes = 0;
23
+
}
24
+
25
+
setupEvents() {
26
+
$(this.pageElement.querySelector('form')).addEventListener('submit', (e) => {
27
+
e.preventDefault();
28
+
29
+
if (!this.scanStartTime) {
30
+
this.findLikes();
31
+
} else {
32
+
this.stopScan();
33
+
}
34
+
});
35
+
36
+
this.rangeInput.addEventListener('input', (e) => {
37
+
let days = parseInt(this.rangeInput.value, 10);
38
+
let label = $(this.pageElement.querySelector('input[type=range] + label'));
39
+
label.innerText = (days == 1) ? '1 day' : `${days} days`;
40
+
});
41
+
}
42
+
43
+
/** @returns {number} */
44
+
45
+
selectedDaysRange() {
46
+
return parseInt(this.rangeInput.value, 10);
47
+
}
48
+
49
+
show() {
50
+
this.pageElement.style.display = 'block';
51
+
}
52
+
53
+
/** @returns {Promise<void>} */
54
+
55
+
async findLikes() {
56
+
this.submitButton.value = 'Cancel';
57
+
58
+
let requestedDays = this.selectedDaysRange();
59
+
60
+
this.resetProgress();
61
+
this.progressBar.style.display = 'inline';
62
+
63
+
let startTime = new Date().getTime();
64
+
this.scanStartTime = startTime;
65
+
66
+
this.receivedTable.style.display = 'none';
67
+
this.givenTable.style.display = 'none';
68
+
69
+
let fetchGivenLikes = this.fetchGivenLikes(requestedDays);
70
+
71
+
let receivedLikes = await this.fetchReceivedLikes(requestedDays);
72
+
let receivedStats = this.sumUpReceivedLikes(receivedLikes);
73
+
let topReceived = this.getTopEntries(receivedStats);
74
+
75
+
await this.renderResults(topReceived, this.receivedTable);
76
+
77
+
let givenLikes = await fetchGivenLikes;
78
+
let givenStats = this.sumUpGivenLikes(givenLikes);
79
+
let topGiven = this.getTopEntries(givenStats);
80
+
81
+
let profileInfo = await appView.getRequest('app.bsky.actor.getProfiles', { actors: topGiven.map(x => x.did) });
82
+
83
+
for (let profile of profileInfo.profiles) {
84
+
let user = /** @type {LikeStat} */ (topGiven.find(x => x.did == profile.did));
85
+
user.handle = profile.handle;
86
+
user.avatar = profile.avatar;
87
+
}
88
+
89
+
await this.renderResults(topGiven, this.givenTable);
90
+
91
+
this.receivedTable.style.display = 'table';
92
+
this.givenTable.style.display = 'table';
93
+
94
+
this.submitButton.value = 'Start scan';
95
+
this.progressBar.style.display = 'none';
96
+
this.scanStartTime = undefined;
97
+
}
98
+
99
+
/** @param {number} requestedDays, @returns {Promise<json[]>} */
100
+
101
+
async fetchGivenLikes(requestedDays) {
102
+
let startTime = /** @type {number} */ (this.scanStartTime);
103
+
104
+
return await accountAPI.fetchAll('com.atproto.repo.listRecords', {
105
+
params: {
106
+
repo: accountAPI.user.did,
107
+
collection: 'app.bsky.feed.like',
108
+
limit: 100
109
+
},
110
+
field: 'records',
111
+
breakWhen: (x) => Date.parse(x['value']['createdAt']) < startTime - 86400 * requestedDays * 1000,
112
+
onPageLoad: (data) => {
113
+
let last = data.at(-1);
114
+
115
+
if (!last) { return }
116
+
117
+
let lastDate = Date.parse(last.value.createdAt);
118
+
let daysBack = (startTime - lastDate) / 86400 / 1000;
119
+
120
+
this.updateProgress({ likeRecords: Math.min(1.0, daysBack / requestedDays) });
121
+
}
122
+
});
123
+
}
124
+
125
+
/** @param {number} requestedDays, @returns {Promise<json[]>} */
126
+
127
+
async fetchReceivedLikes(requestedDays) {
128
+
let startTime = /** @type {number} */ (this.scanStartTime);
129
+
130
+
let myPosts = await this.appView.loadUserTimeline(accountAPI.user.did, requestedDays, {
131
+
filter: 'posts_with_replies',
132
+
onPageLoad: (data) => {
133
+
let last = data.at(-1);
134
+
135
+
if (!last) { return }
136
+
137
+
let lastDate = feedPostTime(last);
138
+
let daysBack = (startTime - lastDate) / 86400 / 1000;
139
+
140
+
this.updateProgress({ posts: Math.min(1.0, daysBack / requestedDays) });
141
+
}
142
+
});
143
+
144
+
let likedPosts = myPosts.filter(x => !x['reason'] && x['post']['likeCount'] > 0);
145
+
146
+
let results = [];
147
+
148
+
for (let i = 0; i < likedPosts.length; i += 10) {
149
+
let batch = likedPosts.slice(i, i + 10);
150
+
this.updateProgress({ postLikes: i / likedPosts.length });
151
+
152
+
let fetchBatch = batch.map(x => {
153
+
return this.appView.fetchAll('app.bsky.feed.getLikes', {
154
+
params: {
155
+
uri: x['post']['uri'],
156
+
limit: 100
157
+
},
158
+
field: 'likes'
159
+
});
160
+
});
161
+
162
+
let batchResults = await Promise.all(fetchBatch);
163
+
results = results.concat(batchResults);
164
+
}
165
+
166
+
this.updateProgress({ postLikes: 1.0 });
167
+
168
+
return results.flat();
169
+
}
170
+
171
+
/**
172
+
* @typedef {{ handle?: string, did?: string, avatar?: string, count: number }} LikeStat
173
+
* @typedef {Record<string, LikeStat>} LikeStatHash
174
+
*/
175
+
176
+
/** @param {json[]} likes, @returns {LikeStatHash} */
177
+
178
+
sumUpReceivedLikes(likes) {
179
+
/** @type {LikeStatHash} */
180
+
let stats = {};
181
+
182
+
for (let like of likes) {
183
+
let handle = like.actor.handle;
184
+
185
+
if (!stats[handle]) {
186
+
stats[handle] = { handle: handle, count: 0, avatar: like.actor.avatar };
187
+
}
188
+
189
+
stats[handle].count += 1;
190
+
}
191
+
192
+
return stats;
193
+
}
194
+
195
+
/** @param {json[]} likes, @returns {LikeStatHash} */
196
+
197
+
sumUpGivenLikes(likes) {
198
+
/** @type {LikeStatHash} */
199
+
let stats = {};
200
+
201
+
for (let like of likes) {
202
+
let did = atURI(like.value.subject.uri).repo;
203
+
204
+
if (!stats[did]) {
205
+
stats[did] = { did: did, count: 0 };
206
+
}
207
+
208
+
stats[did].count += 1;
209
+
}
210
+
211
+
return stats;
212
+
}
213
+
214
+
/** @param {LikeStatHash} counts, @returns {LikeStat[]} */
215
+
216
+
getTopEntries(counts) {
217
+
return Object.entries(counts).sort(this.sortResults).map(x => x[1]).slice(0, 25);
218
+
}
219
+
220
+
/** @param {LikeStat[]} topUsers, @param {HTMLTableElement} table, @returns {Promise<void>} */
221
+
222
+
async renderResults(topUsers, table) {
223
+
let tableBody = $(table.querySelector('tbody'));
224
+
tableBody.innerHTML = '';
225
+
226
+
for (let [i, user] of topUsers.entries()) {
227
+
let tr = $tag('tr');
228
+
tr.append(
229
+
$tag('td.no', { text: i + 1 }),
230
+
$tag('td.handle', {
231
+
html: `<img class="avatar" src="${user.avatar}"> ` +
232
+
`<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>`
233
+
}),
234
+
$tag('td.count', { text: user.count })
235
+
);
236
+
237
+
tableBody.append(tr);
238
+
};
239
+
}
240
+
241
+
resetProgress() {
242
+
this.progressBar.value = 0;
243
+
this.progressPosts = 0;
244
+
this.progressLikeRecords = 0;
245
+
this.progressPostLikes = 0;
246
+
}
247
+
248
+
/** @param {{ posts?: number, likeRecords?: number, postLikes?: number }} data */
249
+
250
+
updateProgress(data) {
251
+
if (data.posts) {
252
+
this.progressPosts = data.posts;
253
+
}
254
+
255
+
if (data.likeRecords) {
256
+
this.progressLikeRecords = data.likeRecords;
257
+
}
258
+
259
+
if (data.postLikes) {
260
+
this.progressPostLikes = data.postLikes;
261
+
}
262
+
263
+
let totalProgress = (
264
+
0.1 * this.progressPosts +
265
+
0.65 * this.progressLikeRecords +
266
+
0.25 * this.progressPostLikes
267
+
);
268
+
269
+
this.progressBar.value = totalProgress;
270
+
}
271
+
272
+
/** @param {[string, LikeStat]} a, @param {[string, LikeStat]} b, @returns {-1|1|0} */
273
+
274
+
sortResults(a, b) {
275
+
if (a[1].count < b[1].count) {
276
+
return 1;
277
+
} else if (a[1].count > b[1].count) {
278
+
return -1;
279
+
} else {
280
+
return 0;
281
+
}
282
+
}
283
+
284
+
stopScan() {
285
+
this.submitButton.value = 'Start scan';
286
+
this.progressBar.style.display = 'none';
287
+
this.scanStartTime = undefined;
288
+
}
289
+
}
+12
-6
minisky.js
+12
-6
minisky.js
···
180
180
}
181
181
182
182
/**
183
+
* @typedef {(obj: json[]) => { cancel: true } | void} FetchAllOnPageLoad
184
+
*
183
185
* @typedef {MiniskyOptions & {
184
186
* field: string,
187
+
* params?: json,
185
188
* breakWhen?: (obj: json) => boolean,
186
-
* onPageLoad?: (obj: json[]) => { cancel: true },
189
+
* keepLastPage?: boolean | undefined,
190
+
* onPageLoad?: FetchAllOnPageLoad | undefined
187
191
* }} FetchAllOptions
188
192
*
189
193
* @param {string} method
190
-
* @param {json | null} params
191
194
* @param {FetchAllOptions} [options]
192
195
* @returns {Promise<json[]>}
193
196
*/
194
197
195
-
async fetchAll(method, params, options) {
198
+
async fetchAll(method, options) {
196
199
if (!options || !options.field) {
197
200
throw new RequestError("'field' option is required");
198
201
}
199
202
200
203
let data = [];
201
-
let reqParams = params ?? {};
204
+
let reqParams = options.params ?? {};
202
205
let reqOptions = this.sliceOptions(options, ['auth', 'headers']);
203
206
204
207
for (;;) {
···
211
214
let test = options.breakWhen;
212
215
213
216
if (items.some(x => test(x))) {
214
-
items = items.filter(x => !test(x));
217
+
if (!options.keepLastPage) {
218
+
items = items.filter(x => !test(x));
219
+
}
220
+
215
221
cursor = null;
216
222
}
217
223
}
···
295
301
let text = await response.text();
296
302
let json = text.trim().length > 0 ? JSON.parse(text) : undefined;
297
303
298
-
if (response.status == 200) {
304
+
if (response.status >= 200 && response.status < 300) {
299
305
return json;
300
306
} else {
301
307
throw new APIError(response.status, json);
+25
models.js
+25
models.js
···
287
287
return -1;
288
288
} else if (a.author.did != this.author.did && b.author.did == this.author.did) {
289
289
return 1;
290
+
} else if (a.text != "📌" && b.text == "📌") {
291
+
return -1;
292
+
} else if (a.text == "📌" && b.text != "📌") {
293
+
return 1;
290
294
} else if (a.createdAt.getTime() < b.createdAt.getTime()) {
291
295
return -1;
292
296
} else if (a.createdAt.getTime() > b.createdAt.getTime()) {
···
318
322
return this.record.bridgyOriginalText;
319
323
}
320
324
325
+
/** @returns {string | undefined} */
326
+
get originalFediURL() {
327
+
return this.record.bridgyOriginalUrl;
328
+
}
329
+
321
330
/** @returns {boolean} */
322
331
get isRoot() {
323
332
// I AM ROOOT
···
338
347
return this.record.text;
339
348
}
340
349
350
+
/** @returns {string} */
351
+
get lowercaseText() {
352
+
if (!this._lowercaseText) {
353
+
this._lowercaseText = this.record.text.toLowerCase();
354
+
}
355
+
356
+
return this._lowercaseText;
357
+
}
358
+
341
359
/** @returns {json} */
342
360
get facets() {
343
361
return this.record.facets;
···
380
398
let shouldHaveMoreReplies = (this.replyCount !== undefined && this.replyCount > this.replies.length);
381
399
382
400
return shouldHaveMoreReplies && (this.replies.length > 0 || (this.level !== undefined && this.level <= 4));
401
+
}
402
+
403
+
/** @returns {boolean} */
404
+
get isRestrictingReplies() {
405
+
return !!(this.data.threadgate && this.data.threadgate.record.allow);
383
406
}
384
407
385
408
/** @returns {number} */
···
650
673
651
674
this.url = json.external.uri;
652
675
this.title = json.external.title;
676
+
this.thumb = json.external.thumb;
653
677
}
654
678
}
655
679
···
718
742
this.url = json.external.uri;
719
743
this.title = json.external.title;
720
744
this.description = json.external.description;
745
+
this.thumb = json.external.thumb;
721
746
}
722
747
}
723
748
+78
notifications_page.js
+78
notifications_page.js
···
1
+
class NotificationsPage {
2
+
3
+
constructor() {
4
+
this.pageElement = $id('thread');
5
+
}
6
+
7
+
show() {
8
+
document.title = `Notifications - Skythread`;
9
+
showLoader();
10
+
11
+
let isLoading = false;
12
+
let firstPageLoaded = false;
13
+
let finished = false;
14
+
let cursor;
15
+
16
+
Paginator.loadInPages((next) => {
17
+
if (isLoading || finished) { return; }
18
+
isLoading = true;
19
+
20
+
accountAPI.loadMentions(cursor).then(data => {
21
+
let posts = data.posts.map(x => new Post(x));
22
+
23
+
if (posts.length > 0) {
24
+
if (!firstPageLoaded) {
25
+
hideLoader();
26
+
firstPageLoaded = true;
27
+
28
+
let header = $tag('header');
29
+
let h2 = $tag('h2', { text: "Replies & Mentions:" });
30
+
header.append(h2);
31
+
32
+
this.pageElement.appendChild(header);
33
+
this.pageElement.classList.add('notifications');
34
+
}
35
+
36
+
for (let post of posts) {
37
+
if (post.parentReference) {
38
+
let p = $tag('p.back');
39
+
p.innerHTML = `<i class="fa-solid fa-reply"></i> `;
40
+
41
+
let { repo, rkey } = atURI(post.parentReference.uri);
42
+
let url = linkToPostById(repo, rkey);
43
+
let parentLink = $tag('a', { href: url });
44
+
p.append(parentLink);
45
+
46
+
if (repo == accountAPI.user.did) {
47
+
parentLink.innerText = 'Reply to you';
48
+
} else {
49
+
parentLink.innerText = 'Reply';
50
+
api.fetchHandleForDid(repo).then(handle => {
51
+
parentLink.innerText = `Reply to @${handle}`;
52
+
});
53
+
}
54
+
55
+
this.pageElement.appendChild(p);
56
+
}
57
+
58
+
let postView = new PostComponent(post, 'feed').buildElement();
59
+
this.pageElement.appendChild(postView);
60
+
}
61
+
}
62
+
63
+
isLoading = false;
64
+
cursor = data.cursor;
65
+
66
+
if (!cursor) {
67
+
finished = true;
68
+
} else if (posts.length == 0) {
69
+
next();
70
+
}
71
+
}).catch(error => {
72
+
hideLoader();
73
+
console.log(error);
74
+
isLoading = false;
75
+
});
76
+
});
77
+
}
78
+
}
+82
-3
post_component.js
+82
-3
post_component.js
···
162
162
if (this.post.embed) {
163
163
let embed = new EmbedComponent(this.post, this.post.embed).buildElement();
164
164
wrapper.appendChild(embed);
165
+
166
+
if (this.post.originalFediURL) {
167
+
if (this.post.embed instanceof InlineLinkEmbed && this.post.embed.title.startsWith('Original post on ')) {
168
+
embed.remove();
169
+
}
170
+
}
171
+
}
172
+
173
+
if (this.post.originalFediURL) {
174
+
let link = this.buildFediSourceLink(this.post.originalFediURL);
175
+
if (link) {
176
+
wrapper.appendChild(link);
177
+
}
165
178
}
166
179
167
180
if (this.post.likeCount !== undefined && this.post.repostCount !== undefined) {
···
211
224
h.innerHTML = `${escapeHTML(this.authorName)} `;
212
225
213
226
if (this.post.isFediPost) {
214
-
let handle = this.post.authorFediHandle;
215
-
h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">@${handle}</a> ` +
227
+
let handle = `@${this.post.authorFediHandle}`;
228
+
h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">${handle}</a> ` +
216
229
`<img src="icons/mastodon.svg" class="mastodon"> `;
217
230
} else {
218
-
h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">@${this.post.author.handle}</a> `;
231
+
let handle = (this.post.author.handle != 'handle.invalid') ? `@${this.post.author.handle}` : '[invalid handle]';
232
+
h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">${handle}</a> `;
219
233
}
220
234
221
235
h.innerHTML += `<span class="separator">•</span> ` +
···
300
314
return p;
301
315
}
302
316
317
+
/** @param {string[]} terms */
318
+
319
+
highlightSearchResults(terms) {
320
+
let regexp = new RegExp(`\\b(${terms.join('|')})\\b`, 'gi');
321
+
322
+
let root = this.rootElement;
323
+
let body = $(root.querySelector(':scope > .content > .body, :scope > .content > details .body'));
324
+
let walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT);
325
+
let textNodes = [];
326
+
327
+
while (walker.nextNode()) {
328
+
textNodes.push(walker.currentNode);
329
+
}
330
+
331
+
for (let node of textNodes) {
332
+
if (!node.textContent) { continue; }
333
+
334
+
let markedText = document.createDocumentFragment();
335
+
let currentPosition = 0;
336
+
337
+
for (;;) {
338
+
let match = regexp.exec(node.textContent);
339
+
if (match === null) break;
340
+
341
+
if (match.index > currentPosition) {
342
+
let earlierText = node.textContent.slice(currentPosition, match.index);
343
+
markedText.appendChild(document.createTextNode(earlierText));
344
+
}
345
+
346
+
let span = $tag('span.highlight', { text: match[0] });
347
+
markedText.appendChild(span);
348
+
349
+
currentPosition = match.index + match[0].length;
350
+
}
351
+
352
+
if (currentPosition < node.textContent.length) {
353
+
let remainingText = node.textContent.slice(currentPosition);
354
+
markedText.appendChild(document.createTextNode(remainingText));
355
+
}
356
+
357
+
$(node.parentNode).replaceChild(markedText, node);
358
+
}
359
+
}
360
+
303
361
/** @param {string[]} tags, @returns {HTMLElement} */
304
362
305
363
buildTagsRow(tags) {
···
347
405
stats.append(quotesLink);
348
406
}
349
407
408
+
if (this.context == 'thread' && this.post.isRestrictingReplies) {
409
+
let span = $tag('span', { html: `<i class="fa-solid fa-ban"></i> Limited replies` });
410
+
stats.append(span);
411
+
}
412
+
350
413
return stats;
351
414
}
352
415
···
427
490
loadHiddenReplies(loadMoreButton) {
428
491
loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`;
429
492
this.loadHiddenSubtree(this.post, this.rootElement);
493
+
}
494
+
495
+
/** @param {string} url, @returns {HTMLElement | undefined} */
496
+
497
+
buildFediSourceLink(url) {
498
+
try {
499
+
let hostname = new URL(url).hostname;
500
+
let a = $tag('a.fedi-link', { href: url, target: '_blank' });
501
+
502
+
let box = $tag('div', { html: `<i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on ${hostname}` });
503
+
a.append(box);
504
+
return a;
505
+
} catch (error) {
506
+
console.log("Invalid Fedi URL:" + error);
507
+
return undefined;
508
+
}
430
509
}
431
510
432
511
/** @param {HTMLLinkElement} authorLink */
+479
-68
posting_stats_page.js
+479
-68
posting_stats_page.js
···
7
7
/** @type {number | undefined} */
8
8
scanStartTime;
9
9
10
+
/** @type {Record<string, { pages: number, progress: number }>} */
11
+
userProgress;
12
+
13
+
/** @type {number | undefined} */
14
+
autocompleteTimer;
15
+
16
+
/** @type {number} */
17
+
autocompleteIndex = -1;
18
+
19
+
/** @type {json[]} */
20
+
autocompleteResults = [];
21
+
22
+
/** @type {Record<string, json>} */
23
+
selectedUsers = {};
24
+
10
25
constructor() {
11
26
this.pageElement = $id('posting_stats_page');
27
+
this.form = $(this.pageElement.querySelector('form'), HTMLFormElement);
12
28
13
29
this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
14
30
this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
15
31
this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement);
16
32
this.table = $(this.pageElement.querySelector('table.scan-result'));
33
+
this.tableHead = $(this.table.querySelector('thead'));
34
+
this.tableBody = $(this.table.querySelector('tbody'));
35
+
this.listSelect = $(this.pageElement.querySelector('.list-choice select'), HTMLSelectElement);
36
+
this.scanInfo = $(this.pageElement.querySelector('.scan-info'));
37
+
this.scanType = this.form.elements['scan_type'];
38
+
39
+
this.userField = $(this.pageElement.querySelector('.user-choice input'), HTMLInputElement);
40
+
this.userList = $(this.pageElement.querySelector('.selected-users'));
41
+
this.autocomplete = $(this.pageElement.querySelector('.autocomplete'));
42
+
43
+
this.userProgress = {};
44
+
this.appView = new BlueskyAPI('public.api.bsky.app', false);
17
45
18
46
this.setupEvents();
19
47
}
20
48
21
49
setupEvents() {
22
-
$(this.pageElement.querySelector('form')).addEventListener('submit', (e) => {
50
+
let html = $(document.body.parentNode);
51
+
52
+
html.addEventListener('click', (e) => {
53
+
this.hideAutocomplete();
54
+
});
55
+
56
+
this.form.addEventListener('submit', (e) => {
23
57
e.preventDefault();
24
58
25
59
if (!this.scanStartTime) {
26
-
this.scanPostingStats();
60
+
this.scanPostingStats();
27
61
} else {
28
62
this.stopScan();
29
63
}
···
31
65
32
66
this.rangeInput.addEventListener('input', (e) => {
33
67
let days = parseInt(this.rangeInput.value, 10);
34
-
this.configurePostingStats({ days });
68
+
let label = $(this.pageElement.querySelector('input[type=range] + label'));
69
+
label.innerText = (days == 1) ? '1 day' : `${days} days`;
70
+
});
71
+
72
+
this.scanType.forEach(r => {
73
+
r.addEventListener('click', (e) => {
74
+
let value = $(r, HTMLInputElement).value;
75
+
76
+
$(this.pageElement.querySelector('.list-choice')).style.display = (value == 'list') ? 'block' : 'none';
77
+
$(this.pageElement.querySelector('.user-choice')).style.display = (value == 'users') ? 'block' : 'none';
78
+
79
+
if (value == 'users') {
80
+
this.userField.focus();
81
+
}
82
+
83
+
this.table.style.display = 'none';
84
+
});
85
+
});
86
+
87
+
this.userField.addEventListener('input', () => {
88
+
this.onUserInput();
89
+
});
90
+
91
+
this.userField.addEventListener('keydown', (e) => {
92
+
this.onUserKeyDown(e);
35
93
});
36
94
}
37
95
38
96
show() {
39
97
this.pageElement.style.display = 'block';
98
+
this.fetchLists();
40
99
}
41
100
42
101
/** @returns {number} */
···
45
104
return parseInt(this.rangeInput.value, 10);
46
105
}
47
106
48
-
/** @param {{ days: number }} args */
107
+
/** @returns {Promise<void>} */
108
+
109
+
async fetchLists() {
110
+
let lists = await accountAPI.loadUserLists();
111
+
112
+
let sorted = lists.sort((a, b) => {
113
+
let aName = a.name.toLocaleLowerCase();
114
+
let bName = b.name.toLocaleLowerCase();
115
+
116
+
return aName.localeCompare(bName);
117
+
});
49
118
50
-
configurePostingStats(args) {
51
-
if (args.days) {
52
-
let label = $(this.pageElement.querySelector('input[type=range] + label'));
53
-
label.innerText = (args.days == 1) ? '1 day' : `${args.days} days`;
119
+
for (let list of lists) {
120
+
this.listSelect.append(
121
+
$tag('option', { value: list.uri, text: list.name + ' ' })
122
+
);
54
123
}
55
124
}
56
125
126
+
onUserInput() {
127
+
if (this.autocompleteTimer) {
128
+
clearTimeout(this.autocompleteTimer);
129
+
}
130
+
131
+
let query = this.userField.value.trim();
132
+
133
+
if (query.length == 0) {
134
+
this.hideAutocomplete();
135
+
this.autocompleteTimer = undefined;
136
+
return;
137
+
}
138
+
139
+
this.autocompleteTimer = setTimeout(() => this.fetchAutocomplete(query), 100);
140
+
}
141
+
142
+
/** @param {KeyboardEvent} e */
143
+
144
+
onUserKeyDown(e) {
145
+
if (e.key == 'Enter') {
146
+
e.preventDefault();
147
+
148
+
if (this.autocompleteIndex >= 0) {
149
+
this.selectUser(this.autocompleteIndex);
150
+
}
151
+
} else if (e.key == 'Escape') {
152
+
this.hideAutocomplete();
153
+
} else if (e.key == 'ArrowDown' && this.autocompleteResults.length > 0) {
154
+
e.preventDefault();
155
+
this.moveAutocomplete(1);
156
+
} else if (e.key == 'ArrowUp' && this.autocompleteResults.length > 0) {
157
+
e.preventDefault();
158
+
this.moveAutocomplete(-1);
159
+
}
160
+
}
161
+
162
+
/** @param {string} query, @returns {Promise<void>} */
163
+
164
+
async fetchAutocomplete(query) {
165
+
let users = await accountAPI.autocompleteUsers(query);
166
+
167
+
let selectedDIDs = new Set(Object.keys(this.selectedUsers));
168
+
users = users.filter(u => !selectedDIDs.has(u.did));
169
+
170
+
this.autocompleteResults = users;
171
+
this.autocompleteIndex = -1;
172
+
this.showAutocomplete();
173
+
}
174
+
175
+
showAutocomplete() {
176
+
this.autocomplete.innerHTML = '';
177
+
this.autocomplete.scrollTop = 0;
178
+
179
+
if (this.autocompleteResults.length == 0) {
180
+
this.hideAutocomplete();
181
+
return;
182
+
}
183
+
184
+
for (let [i, user] of this.autocompleteResults.entries()) {
185
+
let row = this.makeUserRow(user);
186
+
187
+
row.addEventListener('mouseenter', () => {
188
+
this.highlightAutocomplete(i);
189
+
});
190
+
191
+
row.addEventListener('mousedown', (e) => {
192
+
e.preventDefault();
193
+
this.selectUser(i);
194
+
});
195
+
196
+
this.autocomplete.append(row);
197
+
};
198
+
199
+
this.autocomplete.style.top = this.userField.offsetHeight + 'px';
200
+
this.autocomplete.style.display = 'block';
201
+
this.highlightAutocomplete(0);
202
+
}
203
+
204
+
hideAutocomplete() {
205
+
this.autocomplete.style.display = 'none';
206
+
this.autocompleteResults = [];
207
+
this.autocompleteIndex = -1;
208
+
}
209
+
210
+
/** @param {number} change */
211
+
212
+
moveAutocomplete(change) {
213
+
if (this.autocompleteResults.length == 0) {
214
+
return;
215
+
}
216
+
217
+
let newIndex = this.autocompleteIndex + change;
218
+
219
+
if (newIndex < 0) {
220
+
newIndex = this.autocompleteResults.length - 1;
221
+
} else if (newIndex >= this.autocompleteResults.length) {
222
+
newIndex = 0;
223
+
}
224
+
225
+
this.highlightAutocomplete(newIndex);
226
+
}
227
+
228
+
/** @param {number} index */
229
+
230
+
highlightAutocomplete(index) {
231
+
this.autocompleteIndex = index;
232
+
233
+
let rows = this.autocomplete.querySelectorAll('.user-row');
234
+
235
+
rows.forEach((row, i) => {
236
+
row.classList.toggle('hover', i == index);
237
+
});
238
+
}
239
+
240
+
/** @param {number} index */
241
+
242
+
selectUser(index) {
243
+
let user = this.autocompleteResults[index];
244
+
245
+
if (!user) {
246
+
return;
247
+
}
248
+
249
+
this.selectedUsers[user.did] = user;
250
+
251
+
let row = this.makeUserRow(user, true);
252
+
this.userList.append(row);
253
+
254
+
this.userField.value = '';
255
+
this.hideAutocomplete();
256
+
}
257
+
258
+
/** @param {json} user, @param {boolean} [withRemove], @returns HTMLElement */
259
+
260
+
makeUserRow(user, withRemove = false) {
261
+
let row = $tag('div.user-row');
262
+
row.dataset.did = user.did;
263
+
row.append(
264
+
$tag('img.avatar', { src: user.avatar }),
265
+
$tag('span.name', { text: user.displayName || '–' }),
266
+
$tag('span.handle', { text: user.handle })
267
+
);
268
+
269
+
if (withRemove) {
270
+
let remove = $tag('a.remove', { href: '#', text: '✕' });
271
+
272
+
remove.addEventListener('click', (e) => {
273
+
e.preventDefault();
274
+
row.remove();
275
+
delete this.selectedUsers[user.did];
276
+
});
277
+
278
+
row.append(remove);
279
+
}
280
+
281
+
return row;
282
+
}
283
+
57
284
/** @returns {Promise<void>} */
58
285
59
286
async scanPostingStats() {
60
-
this.submitButton.value = 'Cancel';
61
-
287
+
let startTime = new Date().getTime();
62
288
let requestedDays = this.selectedDaysRange();
289
+
let scanType = this.scanType.value;
63
290
64
-
this.progressBar.max = requestedDays;
65
-
this.progressBar.value = 0;
66
-
this.progressBar.style.display = 'inline';
291
+
/** @type {FetchAllOnPageLoad} */
292
+
let onPageLoad = (data) => {
293
+
if (this.scanStartTime != startTime) {
294
+
return { cancel: true };
295
+
}
67
296
68
-
this.table.style.display = 'none';
297
+
this.updateProgress(data, startTime);
298
+
};
299
+
300
+
if (scanType == 'home') {
301
+
this.startScan(startTime, requestedDays);
302
+
303
+
let posts = await accountAPI.loadHomeTimeline(requestedDays, {
304
+
onPageLoad: onPageLoad,
305
+
keepLastPage: true
306
+
});
69
307
70
-
let tbody = $(this.table.querySelector('tbody'));
71
-
tbody.innerHTML = '';
308
+
this.updateResultsTable(posts, startTime, requestedDays);
309
+
} else if (scanType == 'list') {
310
+
let list = this.listSelect.value;
311
+
312
+
if (!list) {
313
+
return;
314
+
}
72
315
73
-
let startTime = new Date().getTime();
74
-
this.scanStartTime = startTime;
316
+
this.startScan(startTime, requestedDays);
75
317
76
-
let scanInfo = $(this.pageElement.querySelector('.scan-info'));
77
-
scanInfo.style.display = 'none';
318
+
let posts = await accountAPI.loadListTimeline(list, requestedDays, {
319
+
onPageLoad: onPageLoad,
320
+
keepLastPage: true
321
+
});
78
322
79
-
let items = await accountAPI.loadTimeline(requestedDays, {
80
-
onPageLoad: (data) => {
81
-
if (this.scanStartTime != startTime) {
82
-
return { cancel: true };
83
-
}
323
+
this.updateResultsTable(posts, startTime, requestedDays, { showReposts: false });
324
+
} else if (scanType == 'users') {
325
+
let dids = Object.keys(this.selectedUsers);
84
326
85
-
this.updateProgress(data, startTime);
327
+
if (dids.length == 0) {
328
+
return;
86
329
}
87
-
});
330
+
331
+
this.startScan(startTime, requestedDays);
332
+
this.resetUserProgress(dids);
333
+
334
+
let requests = dids.map(did => this.appView.loadUserTimeline(did, requestedDays, {
335
+
filter: 'posts_and_author_threads',
336
+
onPageLoad: (data) => {
337
+
if (this.scanStartTime != startTime) {
338
+
return { cancel: true };
339
+
}
340
+
341
+
this.updateUserProgress(did, data, startTime, requestedDays);
342
+
},
343
+
keepLastPage: true
344
+
}));
345
+
346
+
let datasets = await Promise.all(requests);
347
+
let posts = datasets.flat();
88
348
89
-
if (this.scanStartTime != startTime) {
90
-
return;
91
-
}
349
+
this.updateResultsTable(posts, startTime, requestedDays, {
350
+
showTotal: false,
351
+
showPercentages: false,
352
+
countFetchedDays: false,
353
+
users: Object.values(this.selectedUsers)
354
+
});
355
+
} else {
356
+
this.startScan(startTime, requestedDays);
92
357
93
-
this.updateResultsTable(items, startTime, requestedDays);
358
+
let posts = await accountAPI.loadUserTimeline(accountAPI.user.did, requestedDays, {
359
+
filter: 'posts_no_replies',
360
+
onPageLoad: onPageLoad,
361
+
keepLastPage: true
362
+
});
363
+
364
+
this.updateResultsTable(posts, startTime, requestedDays, { showTotal: false, showPercentages: false });
365
+
}
94
366
}
95
367
96
368
/** @param {json[]} dataPage, @param {number} startTime */
97
369
98
370
updateProgress(dataPage, startTime) {
99
-
if (dataPage.length == 0) { return }
371
+
let last = dataPage.at(-1);
372
+
373
+
if (!last) { return }
374
+
375
+
let lastDate = feedPostTime(last);
376
+
let daysBack = (startTime - lastDate) / 86400 / 1000;
377
+
378
+
this.progressBar.value = daysBack;
379
+
}
380
+
381
+
/** @param {string[]} dids */
382
+
383
+
resetUserProgress(dids) {
384
+
this.userProgress = {};
385
+
386
+
for (let did of dids) {
387
+
this.userProgress[did] = { pages: 0, progress: 0 };
388
+
}
389
+
}
100
390
101
-
let last = dataPage[dataPage.length - 1];
102
-
let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
103
-
let lastDate = Date.parse(lastTimestamp);
391
+
/** @param {string} did, @param {json[]} dataPage, @param {number} startTime, @param {number} requestedDays */
104
392
393
+
updateUserProgress(did, dataPage, startTime, requestedDays) {
394
+
let last = dataPage.at(-1);
395
+
396
+
if (!last) { return }
397
+
398
+
let lastDate = feedPostTime(last);
105
399
let daysBack = (startTime - lastDate) / 86400 / 1000;
106
-
this.progressBar.value = daysBack;
400
+
401
+
this.userProgress[did].pages += 1;
402
+
this.userProgress[did].progress = Math.min(daysBack / requestedDays, 1.0);
403
+
404
+
let expectedPages = Object.values(this.userProgress).map(x => x.pages / x.progress);
405
+
let known = expectedPages.filter(x => !isNaN(x));
406
+
let expectedTotalPages = known.reduce((a, b) => a + b) / known.length * expectedPages.length;
407
+
let fetchedPages = Object.values(this.userProgress).map(x => x.pages).reduce((a, b) => a + b);
408
+
409
+
this.progressBar.value = Math.max(this.progressBar.value, (fetchedPages / expectedTotalPages) * requestedDays);
107
410
}
108
411
109
412
/** @param {json} a, @param {json} b, @returns {number} */
···
121
424
}
122
425
}
123
426
124
-
/** @param {json[]} items, @param {number} startTime, @param {number} requestedDays */
427
+
/**
428
+
* @param {json[]} posts
429
+
* @param {number} startTime
430
+
* @param {number} requestedDays
431
+
* @param {{
432
+
* showTotal?: boolean,
433
+
* showPercentages?: boolean,
434
+
* showReposts?: boolean,
435
+
* countFetchedDays?: boolean,
436
+
* users?: json[]
437
+
* }} [options]
438
+
* @returns {Promise<void>}
439
+
*/
125
440
126
-
updateResultsTable(items, startTime, requestedDays) {
441
+
async updateResultsTable(posts, startTime, requestedDays, options = {}) {
442
+
if (this.scanStartTime != startTime) {
443
+
return;
444
+
}
445
+
446
+
let now = new Date().getTime();
447
+
448
+
if (now - startTime < 100) {
449
+
// artificial UI delay in case scan finishes immediately
450
+
await new Promise(resolve => setTimeout(resolve, 100));
451
+
}
452
+
127
453
let users = {};
128
454
let total = 0;
129
455
let allReposts = 0;
130
456
let allNormalPosts = 0;
131
457
132
-
let last = items[items.length - 1];
133
-
let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
134
-
let lastDate = Date.parse(lastTimestamp);
135
-
let daysBack = (startTime - lastDate) / 86400 / 1000;
458
+
let last = posts.at(-1);
459
+
460
+
if (!last) {
461
+
this.stopScan();
462
+
return;
463
+
}
464
+
465
+
let daysBack;
466
+
467
+
if (options.countFetchedDays !== false) {
468
+
let lastDate = feedPostTime(last);
469
+
let fetchedDays = (startTime - lastDate) / 86400 / 1000;
136
470
137
-
for (let item of items) {
138
-
if (item.reply) { continue; }
471
+
if (Math.ceil(fetchedDays) < requestedDays) {
472
+
this.scanInfo.innerText = `🕓 Showing data from ${Math.round(fetchedDays)} days (the timeline only goes that far):`;
473
+
this.scanInfo.style.display = 'block';
474
+
}
475
+
476
+
daysBack = Math.min(requestedDays, fetchedDays);
477
+
} else {
478
+
daysBack = requestedDays;
479
+
}
480
+
481
+
let timeLimit = startTime - requestedDays * 86400 * 1000;
482
+
posts = posts.filter(x => (feedPostTime(x) > timeLimit));
483
+
posts.reverse();
484
+
485
+
if (options.users) {
486
+
for (let user of options.users) {
487
+
users[user.handle] = { handle: user.handle, own: 0, reposts: 0, avatar: user.avatar };
488
+
}
489
+
}
490
+
491
+
let ownThreads = new Set();
492
+
493
+
for (let item of posts) {
494
+
if (item.reply) {
495
+
if (!ownThreads.has(item.reply.parent.uri)) {
496
+
continue;
497
+
}
498
+
}
139
499
140
500
let user = item.reason ? item.reason.by : item.post.author;
141
501
let handle = user.handle;
···
148
508
} else {
149
509
users[handle].own += 1;
150
510
allNormalPosts += 1;
511
+
ownThreads.add(item.post.uri);
151
512
}
152
513
}
153
514
154
-
let tbody = $(this.table.querySelector('tbody'));
155
-
let tr = $tag('tr.total');
515
+
let headRow = $tag('tr');
156
516
157
-
tr.append(
158
-
$tag('td.no', { text: '' }),
159
-
$tag('td.handle', { text: 'Total:' }),
160
-
$tag('td', { text: (total / daysBack).toFixed(1) }),
161
-
$tag('td', { text: (allNormalPosts / daysBack).toFixed(1) }),
162
-
$tag('td', { text: (allReposts / daysBack).toFixed(1) }),
163
-
$tag('td.percent', { text: '' })
164
-
);
517
+
if (options.showReposts !== false) {
518
+
headRow.append(
519
+
$tag('th', { text: '#' }),
520
+
$tag('th', { text: 'Handle' }),
521
+
$tag('th', { text: 'All posts /d' }),
522
+
$tag('th', { text: 'Own posts /d' }),
523
+
$tag('th', { text: 'Reposts /d' })
524
+
);
525
+
} else {
526
+
headRow.append(
527
+
$tag('th', { text: '#' }),
528
+
$tag('th', { text: 'Handle' }),
529
+
$tag('th', { text: 'Posts /d' }),
530
+
);
531
+
}
165
532
166
-
tbody.append(tr);
533
+
if (options.showPercentages !== false) {
534
+
headRow.append($tag('th', { text: '% of timeline' }));
535
+
}
536
+
537
+
this.tableHead.append(headRow);
538
+
539
+
if (options.showTotal !== false) {
540
+
let tr = $tag('tr.total');
541
+
542
+
tr.append(
543
+
$tag('td.no', { text: '' }),
544
+
$tag('td.handle', { text: 'Total:' }),
545
+
546
+
(options.showReposts !== false) ?
547
+
$tag('td', { text: (total / daysBack).toFixed(1) }) : '',
548
+
549
+
$tag('td', { text: (allNormalPosts / daysBack).toFixed(1) }),
550
+
551
+
(options.showReposts !== false) ?
552
+
$tag('td', { text: (allReposts / daysBack).toFixed(1) }) : ''
553
+
);
554
+
555
+
if (options.showPercentages !== false) {
556
+
tr.append($tag('td.percent', { text: '' }));
557
+
}
558
+
559
+
this.tableBody.append(tr);
560
+
}
167
561
168
562
let sorted = Object.values(users).sort(this.sortUserRows);
169
563
···
174
568
tr.append(
175
569
$tag('td.no', { text: i + 1 }),
176
570
$tag('td.handle', {
177
-
html: `<img class="avatar" src="${user.avatar}"> ` +
571
+
html: `<img class="avatar" src="${user.avatar}"> ` +
178
572
`<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>`
179
573
}),
180
-
$tag('td', { text: ((user.own + user.reposts) / daysBack).toFixed(1) }),
574
+
575
+
(options.showReposts !== false) ?
576
+
$tag('td', { text: ((user.own + user.reposts) / daysBack).toFixed(1) }) : '',
577
+
181
578
$tag('td', { text: user.own > 0 ? (user.own / daysBack).toFixed(1) : '–' }),
182
-
$tag('td', { text: user.reposts > 0 ? (user.reposts / daysBack).toFixed(1) : '–' }),
183
-
$tag('td.percent', { text: ((user.own + user.reposts) * 100 / total).toFixed(1) + '%' })
579
+
580
+
(options.showReposts !== false) ?
581
+
$tag('td', { text: user.reposts > 0 ? (user.reposts / daysBack).toFixed(1) : '–' }) : ''
184
582
);
185
583
186
-
tbody.append(tr);
187
-
}
584
+
if (options.showPercentages !== false) {
585
+
tr.append($tag('td.percent', { text: ((user.own + user.reposts) * 100 / total).toFixed(1) + '%' }));
586
+
}
188
587
189
-
if (Math.ceil(daysBack) < requestedDays) {
190
-
let scanInfo = $(this.pageElement.querySelector('.scan-info'));
191
-
scanInfo.innerText = `🕓 Showing data from ${Math.round(daysBack)} days (your timeline only goes that far):`;
192
-
scanInfo.style.display = 'block';
588
+
this.tableBody.append(tr);
193
589
}
194
590
195
591
this.table.style.display = 'table';
196
-
this.submitButton.value = 'Start scan';
197
-
this.progressBar.style.display = 'none';
198
-
this.scanStartTime = undefined;
592
+
this.stopScan();
593
+
}
594
+
595
+
/** @param {number} startTime, @param {number} requestedDays */
596
+
597
+
startScan(startTime, requestedDays) {
598
+
this.submitButton.value = 'Cancel';
599
+
600
+
this.progressBar.max = requestedDays;
601
+
this.progressBar.value = 0;
602
+
this.progressBar.style.display = 'inline';
603
+
604
+
this.table.style.display = 'none';
605
+
this.tableHead.innerHTML = '';
606
+
this.tableBody.innerHTML = '';
607
+
608
+
this.scanStartTime = startTime;
609
+
this.scanInfo.style.display = 'none';
199
610
}
200
611
201
612
stopScan() {
+423
private_search_page.js
+423
private_search_page.js
···
1
+
class PrivateSearchPage {
2
+
3
+
/** @type {number | undefined} */
4
+
fetchStartTime;
5
+
6
+
/** @type {number | undefined} */
7
+
importTimer;
8
+
9
+
/** @type {string | undefined} */
10
+
lycanImportStatus;
11
+
12
+
constructor() {
13
+
this.pageElement = $id('private_search_page');
14
+
15
+
this.header = $(this.pageElement.querySelector('h2'));
16
+
17
+
this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
18
+
this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
19
+
this.progressBar = $(this.pageElement.querySelector('input[type="submit"] + progress'), HTMLProgressElement);
20
+
this.archiveStatus = $(this.pageElement.querySelector('.archive-status'));
21
+
22
+
this.searchLine = $(this.pageElement.querySelector('.search'));
23
+
this.searchField = $(this.pageElement.querySelector('.search-query'), HTMLInputElement);
24
+
this.searchForm = $(this.pageElement.querySelector('.search-form'), HTMLFormElement);
25
+
this.results = $(this.pageElement.querySelector('.results'));
26
+
27
+
this.timelineSearch = $(this.pageElement.querySelector('.timeline-search'));
28
+
this.timelineSearchForm = $(this.pageElement.querySelector('.timeline-search form'), HTMLFormElement);
29
+
this.searchCollections = $(this.pageElement.querySelector('.search-collections'));
30
+
31
+
this.lycanImportSection = $(this.pageElement.querySelector('.lycan-import'));
32
+
this.lycanImportForm = $(this.pageElement.querySelector('.lycan-import form'), HTMLFormElement);
33
+
this.importProgress = $(this.pageElement.querySelector('.import-progress'));
34
+
this.importProgressBar = $(this.pageElement.querySelector('.import-progress progress'), HTMLProgressElement);
35
+
this.importStatusLabel = $(this.pageElement.querySelector('.import-status'));
36
+
this.importStatusPosition = $(this.pageElement.querySelector('.import-progress output'));
37
+
38
+
this.isCheckingStatus = false;
39
+
this.timelinePosts = [];
40
+
41
+
this.setupEvents();
42
+
43
+
let params = new URLSearchParams(location.search);
44
+
this.mode = params.get('mode');
45
+
let lycan = params.get('lycan');
46
+
47
+
if (lycan == 'local') {
48
+
this.localLycan = new BlueskyAPI('http://localhost:3000', false);
49
+
} else if (lycan) {
50
+
this.lycanAddress = `did:web:${lycan}#lycan`;
51
+
} else {
52
+
this.lycanAddress = 'did:web:lycan.feeds.blue#lycan';
53
+
}
54
+
}
55
+
56
+
setupEvents() {
57
+
this.timelineSearchForm.addEventListener('submit', (e) => {
58
+
e.preventDefault();
59
+
60
+
if (!this.fetchStartTime) {
61
+
this.fetchTimeline();
62
+
} else {
63
+
this.stopFetch();
64
+
}
65
+
});
66
+
67
+
this.rangeInput.addEventListener('input', (e) => {
68
+
let days = parseInt(this.rangeInput.value, 10);
69
+
let label = $(this.pageElement.querySelector('input[type=range] + label'));
70
+
label.innerText = (days == 1) ? '1 day' : `${days} days`;
71
+
});
72
+
73
+
this.searchField.addEventListener('keydown', (e) => {
74
+
if (e.key == 'Enter') {
75
+
e.preventDefault();
76
+
77
+
let query = this.searchField.value.trim().toLowerCase();
78
+
79
+
if (this.mode == 'likes') {
80
+
this.searchInLycan(query);
81
+
} else {
82
+
this.searchInTimeline(query);
83
+
}
84
+
}
85
+
});
86
+
87
+
this.lycanImportForm.addEventListener('submit', (e) => {
88
+
e.preventDefault();
89
+
this.startLycanImport();
90
+
});
91
+
}
92
+
93
+
/** @returns {number} */
94
+
95
+
selectedDaysRange() {
96
+
return parseInt(this.rangeInput.value, 10);
97
+
}
98
+
99
+
show() {
100
+
this.pageElement.style.display = 'block';
101
+
102
+
if (this.mode == 'likes') {
103
+
this.header.innerText = 'Archive search';
104
+
this.timelineSearch.style.display = 'none';
105
+
this.searchCollections.style.display = 'block';
106
+
this.searchLine.style.display = 'block';
107
+
this.lycanImportSection.style.display = 'none';
108
+
this.checkLycanImportStatus();
109
+
} else {
110
+
this.header.innerText = 'Timeline search';
111
+
this.timelineSearch.style.display = 'block';
112
+
this.searchCollections.style.display = 'none';
113
+
this.lycanImportSection.style.display = 'none';
114
+
}
115
+
}
116
+
117
+
/** @returns {Promise<void>} */
118
+
119
+
async checkLycanImportStatus() {
120
+
if (this.isCheckingStatus) {
121
+
return;
122
+
}
123
+
124
+
this.isCheckingStatus = true;
125
+
126
+
try {
127
+
let response = await this.getImportStatus();
128
+
this.showImportStatus(response);
129
+
} catch (error) {
130
+
this.showImportError(`Couldn't check import status: ${error}`);
131
+
} finally {
132
+
this.isCheckingStatus = false;
133
+
}
134
+
}
135
+
136
+
/** @returns {Promise<json>} */
137
+
138
+
async getImportStatus() {
139
+
if (this.localLycan) {
140
+
return await this.localLycan.getRequest('blue.feeds.lycan.getImportStatus', { user: accountAPI.user.did });
141
+
} else {
142
+
return await accountAPI.getRequest('blue.feeds.lycan.getImportStatus', null, {
143
+
headers: { 'atproto-proxy': this.lycanAddress }
144
+
});
145
+
}
146
+
}
147
+
148
+
/** @param {json} info */
149
+
150
+
showImportStatus(info) {
151
+
console.log(info);
152
+
153
+
if (!info.status) {
154
+
this.showImportError("Error checking import status");
155
+
return;
156
+
}
157
+
158
+
this.lycanImportStatus = info.status;
159
+
160
+
if (info.status == 'not_started') {
161
+
this.lycanImportSection.style.display = 'block';
162
+
this.lycanImportForm.style.display = 'block';
163
+
this.importProgress.style.display = 'none';
164
+
this.searchField.disabled = true;
165
+
166
+
this.stopImportTimer();
167
+
} else if (info.status == 'in_progress' || info.status == 'scheduled' || info.status == 'requested') {
168
+
this.lycanImportSection.style.display = 'block';
169
+
this.lycanImportForm.style.display = 'none';
170
+
this.importProgress.style.display = 'block';
171
+
this.searchField.disabled = true;
172
+
173
+
this.showImportProgress(info);
174
+
this.startImportTimer();
175
+
} else if (info.status == 'finished') {
176
+
this.lycanImportForm.style.display = 'none';
177
+
this.importProgress.style.display = 'block';
178
+
this.searchField.disabled = false;
179
+
180
+
this.showImportProgress({ status: 'finished', progress: 1.0 });
181
+
this.stopImportTimer();
182
+
} else {
183
+
this.showImportError("Error checking import status");
184
+
this.stopImportTimer();
185
+
}
186
+
}
187
+
188
+
/** @param {json} info */
189
+
190
+
showImportProgress(info) {
191
+
let progress = Math.max(0, Math.min(info.progress || 0));
192
+
this.importProgressBar.value = progress;
193
+
this.importProgressBar.style.display = 'inline';
194
+
195
+
let percent = Math.round(progress * 100);
196
+
this.importStatusPosition.innerText = `${percent}%`;
197
+
198
+
if (info.progress == 1.0) {
199
+
this.importStatusLabel.innerText = `Import complete ✓`;
200
+
} else if (info.position) {
201
+
let date = new Date(info.position).toLocaleString(window.dateLocale, { day: 'numeric', month: 'short', year: 'numeric' });
202
+
this.importStatusLabel.innerText = `Downloaded data until: ${date}`;
203
+
} else if (info.status == 'requested') {
204
+
this.importStatusLabel.innerText = 'Requesting import…';
205
+
} else {
206
+
this.importStatusLabel.innerText = 'Import started…';
207
+
}
208
+
}
209
+
210
+
/** @param {string} message */
211
+
212
+
showImportError(message) {
213
+
this.lycanImportSection.style.display = 'block';
214
+
this.lycanImportForm.style.display = 'none';
215
+
this.importProgress.style.display = 'block';
216
+
this.searchField.disabled = true;
217
+
218
+
this.importStatusLabel.innerText = message;
219
+
this.stopImportTimer();
220
+
}
221
+
222
+
startImportTimer() {
223
+
if (this.importTimer) {
224
+
return;
225
+
}
226
+
227
+
this.importTimer = setInterval(() => {
228
+
this.checkLycanImportStatus();
229
+
}, 3000);
230
+
}
231
+
232
+
stopImportTimer() {
233
+
if (this.importTimer) {
234
+
clearInterval(this.importTimer);
235
+
this.importTimer = undefined;
236
+
}
237
+
}
238
+
239
+
/** @returns {Promise<void>} */
240
+
241
+
async startLycanImport() {
242
+
this.showImportStatus({ status: 'requested' });
243
+
244
+
try {
245
+
if (this.localLycan) {
246
+
await this.localLycan.postRequest('blue.feeds.lycan.startImport', {
247
+
user: accountAPI.user.did
248
+
});
249
+
} else {
250
+
await accountAPI.postRequest('blue.feeds.lycan.startImport', null, {
251
+
headers: { 'atproto-proxy': this.lycanAddress }
252
+
});
253
+
}
254
+
255
+
this.startImportTimer();
256
+
} catch (err) {
257
+
console.error('Failed to start Lycan import', err);
258
+
this.showImportError(`Import failed: ${err}`);
259
+
}
260
+
}
261
+
262
+
/** @returns {Promise<void>} */
263
+
264
+
async fetchTimeline() {
265
+
this.submitButton.value = 'Cancel';
266
+
267
+
let requestedDays = this.selectedDaysRange();
268
+
269
+
this.progressBar.max = requestedDays;
270
+
this.progressBar.value = 0;
271
+
this.progressBar.style.display = 'inline';
272
+
273
+
let startTime = new Date().getTime();
274
+
this.fetchStartTime = startTime;
275
+
276
+
let timeline = await accountAPI.loadHomeTimeline(requestedDays, {
277
+
onPageLoad: (data) => {
278
+
if (this.fetchStartTime != startTime) {
279
+
return { cancel: true };
280
+
}
281
+
282
+
this.updateProgress(data, startTime);
283
+
}
284
+
});
285
+
286
+
if (this.fetchStartTime != startTime) {
287
+
return;
288
+
}
289
+
290
+
let last = timeline.at(-1);
291
+
let daysBack;
292
+
293
+
if (last) {
294
+
let lastDate = feedPostTime(last);
295
+
daysBack = Math.round((startTime - lastDate) / 86400 / 1000);
296
+
} else {
297
+
daysBack = 0;
298
+
}
299
+
300
+
this.timelinePosts = timeline;
301
+
302
+
this.archiveStatus.innerText = "Timeline archive fetched: " + ((daysBack == 1) ? '1 day' : `${daysBack} days`);
303
+
this.searchLine.style.display = 'block';
304
+
305
+
this.submitButton.value = 'Fetch timeline';
306
+
this.progressBar.style.display = 'none';
307
+
this.fetchStartTime = undefined;
308
+
}
309
+
310
+
/** @param {string} query */
311
+
312
+
searchInTimeline(query) {
313
+
this.results.innerHTML = '';
314
+
315
+
if (query.length == 0) {
316
+
return;
317
+
}
318
+
319
+
let matching = this.timelinePosts
320
+
.filter(x => x.post.record.text.toLowerCase().includes(query))
321
+
.map(x => Post.parseFeedPost(x));
322
+
323
+
for (let post of matching) {
324
+
let postView = new PostComponent(post, 'feed').buildElement();
325
+
this.results.appendChild(postView);
326
+
}
327
+
}
328
+
329
+
/** @param {string} query */
330
+
331
+
searchInLycan(query) {
332
+
if (query.length == 0 || this.lycanImportStatus != 'finished') {
333
+
return;
334
+
}
335
+
336
+
this.results.innerHTML = '';
337
+
this.lycanImportSection.style.display = 'none';
338
+
339
+
let collection = this.searchForm.elements['collection'].value;
340
+
341
+
let loading = $tag('p', { text: "..." });
342
+
this.results.append(loading);
343
+
344
+
let isLoading = false;
345
+
let firstPageLoaded = false;
346
+
let cursor;
347
+
let finished = false;
348
+
349
+
Paginator.loadInPages(async () => {
350
+
if (isLoading || finished) { return; }
351
+
isLoading = true;
352
+
353
+
let response;
354
+
355
+
if (this.localLycan) {
356
+
let params = { collection, query, user: accountAPI.user.did };
357
+
if (cursor) params.cursor = cursor;
358
+
359
+
response = await this.localLycan.getRequest('blue.feeds.lycan.searchPosts', params);
360
+
} else {
361
+
let params = { collection, query };
362
+
if (cursor) params.cursor = cursor;
363
+
364
+
response = await accountAPI.getRequest('blue.feeds.lycan.searchPosts', params, {
365
+
headers: { 'atproto-proxy': this.lycanAddress }
366
+
});
367
+
}
368
+
369
+
if (response.posts.length == 0) {
370
+
let p = $tag('p.results-end', { text: firstPageLoaded ? "No more results." : "No results." });
371
+
loading.remove();
372
+
this.results.append(p);
373
+
374
+
isLoading = false;
375
+
finished = true;
376
+
return;
377
+
}
378
+
379
+
let records = await accountAPI.loadPosts(response.posts);
380
+
let posts = records.map(x => new Post(x));
381
+
382
+
if (!firstPageLoaded) {
383
+
loading.remove();
384
+
firstPageLoaded = true;
385
+
}
386
+
387
+
for (let post of posts) {
388
+
let component = new PostComponent(post, 'feed');
389
+
let postView = component.buildElement();
390
+
this.results.appendChild(postView);
391
+
392
+
component.highlightSearchResults(response.terms);
393
+
}
394
+
395
+
isLoading = false;
396
+
cursor = response.cursor;
397
+
398
+
if (!cursor) {
399
+
finished = true;
400
+
this.results.append("No more results.");
401
+
}
402
+
});
403
+
}
404
+
405
+
/** @param {json[]} dataPage, @param {number} startTime */
406
+
407
+
updateProgress(dataPage, startTime) {
408
+
let last = dataPage.at(-1);
409
+
410
+
if (!last) { return }
411
+
412
+
let lastDate = feedPostTime(last);
413
+
let daysBack = (startTime - lastDate) / 86400 / 1000;
414
+
415
+
this.progressBar.value = daysBack;
416
+
}
417
+
418
+
stopFetch() {
419
+
this.submitButton.value = 'Fetch timeline';
420
+
this.progressBar.style.display = 'none';
421
+
this.fetchStartTime = undefined;
422
+
}
423
+
}
+46
-242
skythread.js
+46
-242
skythread.js
···
1
1
function init() {
2
-
let html = $(document.body.parentNode);
3
-
4
2
window.dateLocale = localStorage.getItem('locale') || undefined;
5
3
window.isIncognito = !!localStorage.getItem('incognito');
6
4
window.biohazardEnabled = JSON.parse(localStorage.getItem('biohazard') ?? 'null');
7
5
8
6
window.loginDialog = $(document.querySelector('#login'));
9
-
window.accountMenu = $(document.querySelector('#account_menu'));
10
7
11
8
window.avatarPreloader = buildAvatarPreloader();
12
9
10
+
window.accountMenu = new Menu();
13
11
window.threadPage = new ThreadPage();
14
12
window.postingStatsPage = new PostingStatsPage();
15
-
16
-
html.addEventListener('click', (e) => {
17
-
$id('account_menu').style.visibility = 'hidden';
18
-
});
13
+
window.likeStatsPage = new LikeStatsPage();
14
+
window.notificationsPage = new NotificationsPage();
15
+
window.privateSearchPage = new PrivateSearchPage();
19
16
20
17
$(document.querySelector('#search form')).addEventListener('submit', (e) => {
21
18
e.preventDefault();
···
23
20
});
24
21
25
22
for (let dialog of document.querySelectorAll('.dialog')) {
23
+
let close = $(dialog.querySelector('.close'));
24
+
26
25
dialog.addEventListener('click', (e) => {
27
-
if (e.target === e.currentTarget) {
26
+
if (e.target === e.currentTarget && close && close.offsetHeight > 0) {
28
27
hideDialog(dialog);
29
28
} else {
30
29
e.stopPropagation();
31
30
}
32
31
});
33
32
34
-
dialog.querySelector('.close')?.addEventListener('click', (e) => {
33
+
close?.addEventListener('click', (e) => {
35
34
hideDialog(dialog);
36
35
});
37
36
}
···
67
66
68
67
window.biohazardEnabled = false;
69
68
localStorage.setItem('biohazard', 'false');
70
-
toggleMenuButton('biohazard', false);
69
+
accountMenu.toggleMenuButtonCheck('biohazard', false);
71
70
72
71
for (let p of document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post')) {
73
72
$(p).style.display = 'none';
···
78
77
hideDialog(target.closest('.dialog'));
79
78
});
80
79
81
-
$(document.querySelector('#account')).addEventListener('click', (e) => {
82
-
toggleAccountMenu();
83
-
e.stopPropagation();
84
-
});
85
-
86
-
accountMenu.addEventListener('click', (e) => {
87
-
e.stopPropagation();
88
-
});
89
-
90
-
$(accountMenu.querySelector('a[data-action=biohazard]')).addEventListener('click', (e) => {
91
-
e.preventDefault();
92
-
93
-
let hazards = document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post');
94
-
95
-
if (window.biohazardEnabled === false) {
96
-
window.biohazardEnabled = true;
97
-
localStorage.setItem('biohazard', 'true');
98
-
toggleMenuButton('biohazard', true);
99
-
Array.from(hazards).forEach(p => { $(p).style.display = 'block' });
100
-
} else {
101
-
window.biohazardEnabled = false;
102
-
localStorage.setItem('biohazard', 'false');
103
-
toggleMenuButton('biohazard', false);
104
-
Array.from(hazards).forEach(p => { $(p).style.display = 'none' });
105
-
}
106
-
});
107
-
108
-
$(accountMenu.querySelector('a[data-action=incognito]')).addEventListener('click', (e) => {
109
-
e.preventDefault();
110
-
111
-
if (isIncognito) {
112
-
localStorage.removeItem('incognito');
113
-
} else {
114
-
localStorage.setItem('incognito', '1');
115
-
}
116
-
117
-
location.reload();
118
-
});
119
-
120
-
$(accountMenu.querySelector('a[data-action=login]')).addEventListener('click', (e) => {
121
-
e.preventDefault();
122
-
toggleDialog(loginDialog);
123
-
$id('account_menu').style.visibility = 'hidden';
124
-
});
125
-
126
-
$(accountMenu.querySelector('a[data-action=logout]')).addEventListener('click', (e) => {
127
-
e.preventDefault();
128
-
logOut();
129
-
});
130
-
131
80
window.appView = new BlueskyAPI('api.bsky.app', false);
132
81
window.blueAPI = new BlueskyAPI('blue.mackuba.eu', false);
133
82
window.accountAPI = new BlueskyAPI(undefined, true);
134
83
135
84
if (accountAPI.isLoggedIn) {
136
85
accountAPI.host = accountAPI.user.pdsEndpoint;
137
-
hideMenuButton('login');
86
+
accountMenu.hideMenuButton('login');
138
87
139
88
if (!isIncognito) {
140
89
window.api = accountAPI;
141
-
showLoggedInStatus(true, api.user.avatar);
90
+
accountMenu.showLoggedInStatus(true, api.user.avatar);
142
91
} else {
143
92
window.api = appView;
144
-
showLoggedInStatus('incognito');
145
-
toggleMenuButton('incognito', true);
93
+
accountMenu.showLoggedInStatus('incognito');
94
+
accountMenu.toggleMenuButtonCheck('incognito', true);
146
95
}
147
96
} else {
148
97
window.api = appView;
149
-
hideMenuButton('logout');
150
-
hideMenuButton('incognito');
98
+
accountMenu.hideMenuButton('logout');
99
+
accountMenu.hideMenuButton('incognito');
151
100
}
152
101
153
-
toggleMenuButton('biohazard', window.biohazardEnabled !== false);
102
+
accountMenu.toggleMenuButtonCheck('biohazard', window.biohazardEnabled !== false);
154
103
155
104
parseQueryParams();
156
105
}
157
106
158
107
function parseQueryParams() {
159
108
let params = new URLSearchParams(location.search);
160
-
let query = params.get('q');
161
-
let author = params.get('author');
162
-
let post = params.get('post');
163
-
let quotes = params.get('quotes');
164
-
let hash = params.get('hash');
165
-
let page = params.get('page');
109
+
let { q, author, post, quotes, hash, page } = Object.fromEntries(params);
166
110
167
111
if (quotes) {
168
112
showLoader();
···
170
114
} else if (hash) {
171
115
showLoader();
172
116
loadHashtagPage(decodeURIComponent(hash));
173
-
} else if (query) {
117
+
} else if (q) {
174
118
showLoader();
175
-
threadPage.loadThreadByURL(decodeURIComponent(query));
119
+
threadPage.loadThreadByURL(decodeURIComponent(q));
176
120
} else if (author && post) {
177
121
showLoader();
178
122
threadPage.loadThreadById(decodeURIComponent(author), decodeURIComponent(post));
···
244
188
}
245
189
}
246
190
247
-
function toggleLoginInfo(event) {
191
+
function toggleLoginInfo() {
248
192
$id('login').classList.toggle('expanded');
249
193
}
250
194
251
-
function toggleAccountMenu() {
252
-
let menu = $id('account_menu');
253
-
menu.style.visibility = (menu.style.visibility == 'visible') ? 'hidden' : 'visible';
254
-
}
255
-
256
-
/** @param {string} buttonName */
257
-
258
-
function showMenuButton(buttonName) {
259
-
let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
260
-
let item = $(button.parentNode);
261
-
item.style.display = 'list-item';
262
-
}
263
-
264
-
/** @param {string} buttonName */
265
-
266
-
function hideMenuButton(buttonName) {
267
-
let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
268
-
let item = $(button.parentNode);
269
-
item.style.display = 'none';
270
-
}
271
-
272
-
/** @param {string} buttonName, @param {boolean} state */
273
-
274
-
function toggleMenuButton(buttonName, state) {
275
-
let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
276
-
let check = $(button.querySelector('.check'));
277
-
check.style.display = (state) ? 'inline' : 'none';
278
-
}
279
-
280
-
/** @param {boolean | 'incognito'} loggedIn, @param {string | undefined | null} [avatar] */
281
-
282
-
function showLoggedInStatus(loggedIn, avatar) {
283
-
let account = $id('account');
284
-
285
-
if (loggedIn === true && avatar) {
286
-
let button = $(account.querySelector('i'));
287
-
288
-
let img = $tag('img.avatar', { src: avatar });
289
-
img.style.display = 'none';
290
-
img.addEventListener('load', () => {
291
-
button.remove();
292
-
img.style.display = 'inline';
293
-
});
294
-
img.addEventListener('error', () => {
295
-
showLoggedInStatus(true, null);
296
-
})
297
-
298
-
account.append(img);
299
-
} else if (loggedIn === false) {
300
-
$id('account').innerHTML = `<i class="fa-regular fa-user-circle fa-xl"></i>`;
301
-
} else if (loggedIn === 'incognito') {
302
-
$id('account').innerHTML = `<i class="fa-solid fa-user-secret fa-lg"></i>`;
303
-
} else {
304
-
account.innerHTML = `<i class="fa-solid fa-user-circle fa-xl"></i>`;
305
-
}
306
-
}
307
-
308
195
function submitLogin() {
309
-
let handle = $id('login_handle', HTMLInputElement);
310
-
let password = $id('login_password', HTMLInputElement);
196
+
let handleField = $id('login_handle', HTMLInputElement);
197
+
let passwordField = $id('login_password', HTMLInputElement);
311
198
let submit = $id('login_submit');
312
199
let cloudy = $id('cloudy');
200
+
let close = $(loginDialog.querySelector('.close'));
313
201
314
202
if (submit.style.display == 'none') { return }
315
203
316
-
handle.blur();
317
-
password.blur();
204
+
handleField.blur();
205
+
passwordField.blur();
318
206
319
207
submit.style.display = 'none';
320
208
cloudy.style.display = 'inline-block';
321
209
322
-
logIn(handle.value, password.value).then((pds) => {
210
+
let handle = handleField.value.trim();
211
+
let password = passwordField.value.trim();
212
+
213
+
logIn(handle, password).then((pds) => {
323
214
window.api = pds;
324
215
window.accountAPI = pds;
325
216
326
217
hideDialog(loginDialog);
327
218
submit.style.display = 'inline';
328
219
cloudy.style.display = 'none';
220
+
close.style.display = 'inline';
329
221
330
-
loadCurrentUserAvatar();
331
-
showMenuButton('logout');
332
-
showMenuButton('incognito');
333
-
hideMenuButton('login');
222
+
accountMenu.loadCurrentUserAvatar();
223
+
224
+
accountMenu.showMenuButton('logout');
225
+
accountMenu.showMenuButton('incognito');
226
+
accountMenu.hideMenuButton('login');
334
227
335
228
let params = new URLSearchParams(location.search);
336
229
let page = params.get('page');
···
373
266
return pds;
374
267
}
375
268
376
-
function loadCurrentUserAvatar() {
377
-
api.loadCurrentUserAvatar().then((url) => {
378
-
showLoggedInStatus(true, url);
379
-
}).catch((error) => {
380
-
console.log(error);
381
-
showLoggedInStatus(true, null);
382
-
});
383
-
}
384
-
385
269
function logOut() {
386
270
accountAPI.resetTokens();
387
271
localStorage.removeItem('incognito');
···
420
304
}
421
305
}
422
306
307
+
/** @param {string} page */
308
+
423
309
function openPage(page) {
424
310
if (!accountAPI.isLoggedIn) {
425
-
toggleDialog(loginDialog);
311
+
showDialog(loginDialog);
312
+
$(loginDialog.querySelector('.close')).style.display = 'none';
426
313
return;
427
314
}
428
315
429
316
if (page == 'notif') {
430
-
showLoader();
431
-
showNotificationsPage();
317
+
window.notificationsPage.show();
432
318
} else if (page == 'posting_stats') {
433
319
window.postingStatsPage.show();
320
+
} else if (page == 'like_stats') {
321
+
window.likeStatsPage.show();
322
+
} else if (page == 'search') {
323
+
window.privateSearchPage.show();
434
324
}
435
325
}
436
326
437
-
function showNotificationsPage() {
438
-
document.title = `Notifications - Skythread`;
439
-
440
-
let isLoading = false;
441
-
let firstPageLoaded = false;
442
-
let finished = false;
443
-
let cursor;
444
-
445
-
loadInPages((next) => {
446
-
if (isLoading || finished) { return; }
447
-
isLoading = true;
448
-
449
-
accountAPI.loadMentions(cursor).then(data => {
450
-
let posts = data.posts.map(x => new Post(x));
451
-
452
-
if (posts.length > 0) {
453
-
if (!firstPageLoaded) {
454
-
hideLoader();
455
-
firstPageLoaded = true;
456
-
457
-
let header = $tag('header');
458
-
let h2 = $tag('h2', { text: "Replies & Mentions:" });
459
-
header.append(h2);
460
-
$id('thread').appendChild(header);
461
-
$id('thread').classList.add('notifications');
462
-
}
463
-
464
-
for (let post of posts) {
465
-
if (post.parentReference) {
466
-
let p = $tag('p.back');
467
-
p.innerHTML = `<i class="fa-solid fa-reply"></i> `;
468
-
469
-
let { repo, rkey } = atURI(post.parentReference.uri);
470
-
let url = linkToPostById(repo, rkey);
471
-
let parentLink = $tag('a', { href: url });
472
-
p.append(parentLink);
473
-
474
-
if (repo == api.user.did) {
475
-
parentLink.innerText = 'Reply to you';
476
-
} else {
477
-
parentLink.innerText = 'Reply';
478
-
api.fetchHandleForDid(repo).then(handle => {
479
-
parentLink.innerText = `Reply to @${handle}`;
480
-
});
481
-
}
482
-
483
-
$id('thread').appendChild(p);
484
-
}
485
-
486
-
let postView = new PostComponent(post, 'feed').buildElement();
487
-
$id('thread').appendChild(postView);
488
-
}
489
-
}
490
-
491
-
isLoading = false;
492
-
cursor = data.cursor;
493
-
494
-
if (!cursor) {
495
-
finished = true;
496
-
} else if (posts.length == 0) {
497
-
next();
498
-
}
499
-
}).catch(error => {
500
-
hideLoader();
501
-
console.log(error);
502
-
isLoading = false;
503
-
});
504
-
});
505
-
}
506
-
507
327
/** @param {Post} post */
508
328
509
329
function setPageTitle(post) {
···
521
341
let finished = false;
522
342
let cursor;
523
343
524
-
loadInPages(() => {
344
+
Paginator.loadInPages(() => {
525
345
if (isLoading || finished) { return; }
526
346
isLoading = true;
527
347
···
569
389
let cursor;
570
390
let finished = false;
571
391
572
-
loadInPages(() => {
392
+
Paginator.loadInPages(() => {
573
393
if (isLoading || finished) { return; }
574
394
isLoading = true;
575
395
···
620
440
});
621
441
});
622
442
}
623
-
624
-
/** @param {Function} callback */
625
-
626
-
function loadInPages(callback) {
627
-
let loadIfNeeded = () => {
628
-
if (window.pageYOffset + window.innerHeight > document.body.offsetHeight - 500) {
629
-
callback(loadIfNeeded);
630
-
}
631
-
};
632
-
633
-
callback(loadIfNeeded);
634
-
635
-
document.addEventListener('scroll', loadIfNeeded);
636
-
const resizeObserver = new ResizeObserver(loadIfNeeded);
637
-
resizeObserver.observe(document.body);
638
-
}
+420
-8
style.css
+420
-8
style.css
···
127
127
padding: 6px 11px;
128
128
}
129
129
130
-
#account_menu li a {
130
+
#account_menu li a[data-action] {
131
131
display: inline-block;
132
132
color: #333;
133
133
font-size: 11pt;
···
138
138
background-color: hsla(210, 100%, 4%, 0.12);
139
139
}
140
140
141
-
#account_menu li a:hover {
141
+
#account_menu li a[data-action]:hover {
142
142
background-color: hsla(210, 100%, 4%, 0.2);
143
143
text-decoration: none;
144
+
}
145
+
146
+
#account_menu li:not(.link) + li.link {
147
+
margin-top: 16px;
148
+
padding-top: 10px;
149
+
border-top: 1px solid #ccc;
150
+
}
151
+
152
+
#account_menu li.link {
153
+
margin-top: 8px;
154
+
margin-left: 2px;
155
+
}
156
+
157
+
#account_menu li.link a {
158
+
font-size: 11pt;
159
+
color: #333;
144
160
}
145
161
146
162
#account_menu li .check {
···
486
502
margin-top: 18px;
487
503
}
488
504
505
+
.post .body .highlight {
506
+
background-color: rgba(255, 255, 0, 0.75);
507
+
padding: 1px 2px;
508
+
margin-left: -1px;
509
+
margin-right: -1px;
510
+
}
511
+
489
512
.post .quote-embed {
490
513
border: 1px solid #ddd;
491
514
border-radius: 8px;
···
640
663
color: #aaa;
641
664
}
642
665
666
+
.post a.fedi-link {
667
+
display: inline-block;
668
+
margin-bottom: 6px;
669
+
margin-top: 2px;
670
+
}
671
+
672
+
.post a.fedi-link:hover {
673
+
text-decoration: none;
674
+
}
675
+
676
+
.post a.fedi-link > div {
677
+
border: 1px solid #d0d0d0;
678
+
border-radius: 8px;
679
+
padding: 5px 9px;
680
+
color: #555;
681
+
font-size: 10pt;
682
+
}
683
+
684
+
.post a.fedi-link i {
685
+
margin-right: 3px;
686
+
}
687
+
688
+
.post a.fedi-link:hover > div {
689
+
background-color: #f6f7f8;
690
+
border: 1px solid #c8c8c8;
691
+
}
692
+
693
+
.post div.gif img {
694
+
user-select: none;
695
+
-webkit-user-select: none;
696
+
}
697
+
698
+
.post div.gif img.static {
699
+
opacity: 0.75;
700
+
}
701
+
643
702
.post .stats {
644
703
font-size: 10pt;
645
704
color: #666;
···
730
789
#posting_stats_page input[type="radio"] {
731
790
position: relative;
732
791
top: -1px;
792
+
margin-left: 5px;
733
793
}
734
794
735
-
#posting_stats_page label {
795
+
#posting_stats_page input[type="radio"] + label {
736
796
user-select: none;
737
797
-webkit-user-select: none;
738
798
}
739
799
740
-
#posting_stats_page input:disabled + label {
800
+
#posting_stats_page input[type="radio"]:disabled + label {
741
801
color: #999;
742
802
}
743
803
···
752
812
padding: 5px 10px;
753
813
}
754
814
815
+
#posting_stats_page select {
816
+
font-size: 12pt;
817
+
margin-left: 5px;
818
+
}
819
+
755
820
#posting_stats_page progress {
756
821
width: 300px;
757
822
margin-left: 10px;
···
759
824
display: none;
760
825
}
761
826
827
+
#posting_stats_page .list-choice {
828
+
display: none;
829
+
}
830
+
831
+
#posting_stats_page .user-choice {
832
+
display: none;
833
+
position: relative;
834
+
}
835
+
836
+
#posting_stats_page .user-choice input {
837
+
width: 260px;
838
+
font-size: 11pt;
839
+
}
840
+
841
+
#posting_stats_page .user-choice .autocomplete {
842
+
display: none;
843
+
position: absolute;
844
+
left: 0;
845
+
top: 0;
846
+
margin-top: 4px;
847
+
width: 350px;
848
+
max-height: 250px;
849
+
overflow-y: auto;
850
+
background-color: white;
851
+
border: 1px solid #ccc;
852
+
z-index: 10;
853
+
}
854
+
855
+
#posting_stats_page .user-choice .selected-users {
856
+
width: 275px;
857
+
height: 150px;
858
+
overflow-y: auto;
859
+
border: 1px solid #aaa;
860
+
padding: 4px;
861
+
margin-top: 20px;
862
+
}
863
+
864
+
#posting_stats_page .user-choice .user-row {
865
+
position: relative;
866
+
padding: 2px 4px 2px 37px;
867
+
cursor: pointer;
868
+
}
869
+
870
+
#posting_stats_page .user-choice .user-row .avatar {
871
+
position: absolute;
872
+
left: 6px;
873
+
top: 8px;
874
+
width: 24px;
875
+
border-radius: 12px;
876
+
}
877
+
878
+
#posting_stats_page .user-choice .user-row span {
879
+
display: block;
880
+
overflow-x: hidden;
881
+
text-overflow: ellipsis;
882
+
}
883
+
884
+
#posting_stats_page .user-choice .user-row .name {
885
+
font-size: 11pt;
886
+
margin-top: 1px;
887
+
margin-bottom: 1px;
888
+
}
889
+
890
+
#posting_stats_page .user-choice .user-row .handle {
891
+
font-size: 10pt;
892
+
margin-bottom: 2px;
893
+
color: #666;
894
+
}
895
+
896
+
#posting_stats_page .user-choice .autocomplete .user-row {
897
+
cursor: pointer;
898
+
}
899
+
900
+
#posting_stats_page .user-choice .autocomplete .user-row.hover {
901
+
background-color: hsl(207, 100%, 85%);
902
+
}
903
+
904
+
#posting_stats_page .user-choice .selected-users .user-row span {
905
+
padding-right: 14px;
906
+
}
907
+
908
+
#posting_stats_page .user-choice .selected-users .user-row .remove {
909
+
position: absolute;
910
+
right: 4px;
911
+
top: 11px;
912
+
padding: 0px 4px;
913
+
color: #333;
914
+
line-height: 17px;
915
+
}
916
+
917
+
#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
918
+
text-decoration: none;
919
+
background-color: #ddd;
920
+
border-radius: 8px;
921
+
}
922
+
762
923
#posting_stats_page .scan-info {
763
924
display: none;
764
925
font-weight: 600;
···
774
935
775
936
#posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
776
937
border: 1px solid #333;
777
-
padding: 5px 8px;
778
938
}
779
939
780
940
#posting_stats_page .scan-result td {
781
941
text-align: right;
942
+
padding: 5px 8px;
782
943
}
783
944
784
945
#posting_stats_page .scan-result th {
···
808
969
809
970
#posting_stats_page .scan-result .avatar {
810
971
width: 24px;
972
+
height: 24px;
811
973
border-radius: 14px;
812
974
vertical-align: middle;
813
975
margin-right: 2px;
814
-
padding: 2px;
976
+
padding: 2px;
815
977
}
816
978
817
979
#posting_stats_page .scan-result td.no {
···
822
984
min-width: 70px;
823
985
}
824
986
987
+
#like_stats_page {
988
+
display: none;
989
+
}
990
+
991
+
#like_stats_page input[type="range"] {
992
+
width: 250px;
993
+
vertical-align: middle;
994
+
}
995
+
996
+
#like_stats_page input[type="submit"] {
997
+
font-size: 12pt;
998
+
margin: 5px 0px;
999
+
padding: 5px 10px;
1000
+
}
1001
+
1002
+
#like_stats_page progress {
1003
+
width: 300px;
1004
+
margin-left: 10px;
1005
+
vertical-align: middle;
1006
+
display: none;
1007
+
}
1008
+
1009
+
#like_stats_page .scan-result {
1010
+
border: 1px solid #333;
1011
+
border-collapse: collapse;
1012
+
display: none;
1013
+
float: left;
1014
+
margin-top: 20px;
1015
+
margin-bottom: 40px;
1016
+
}
1017
+
1018
+
#like_stats_page .given-likes {
1019
+
margin-right: 100px;
1020
+
}
1021
+
1022
+
#like_stats_page .scan-result td, #like_stats_page .scan-result th {
1023
+
border: 1px solid #333;
1024
+
padding: 5px 10px;
1025
+
}
1026
+
1027
+
#like_stats_page .scan-result th {
1028
+
text-align: center;
1029
+
background-color: hsl(207, 100%, 86%);
1030
+
padding: 12px 10px;
1031
+
}
1032
+
1033
+
#like_stats_page .scan-result td.no {
1034
+
font-weight: bold;
1035
+
text-align: right;
1036
+
}
1037
+
1038
+
#like_stats_page .scan-result td.handle {
1039
+
width: 280px;
1040
+
}
1041
+
1042
+
#like_stats_page .scan-result td.count {
1043
+
padding: 5px 15px;
1044
+
}
1045
+
1046
+
#like_stats_page .scan-result .avatar {
1047
+
width: 24px;
1048
+
height: 24px;
1049
+
border-radius: 14px;
1050
+
vertical-align: middle;
1051
+
margin-right: 2px;
1052
+
padding: 2px;
1053
+
}
1054
+
1055
+
#private_search_page {
1056
+
display: none;
1057
+
}
1058
+
1059
+
#private_search_page input[type="range"] {
1060
+
width: 250px;
1061
+
vertical-align: middle;
1062
+
}
1063
+
1064
+
#private_search_page input[type="submit"] {
1065
+
font-size: 12pt;
1066
+
margin: 5px 0px;
1067
+
padding: 5px 10px;
1068
+
}
1069
+
1070
+
#private_search_page progress {
1071
+
width: 300px;
1072
+
margin-left: 10px;
1073
+
vertical-align: middle;
1074
+
display: none;
1075
+
}
1076
+
1077
+
#private_search_page .search {
1078
+
display: none;
1079
+
}
1080
+
1081
+
#private_search_page .search-query {
1082
+
font-size: 12pt;
1083
+
border: 1px solid #ccc;
1084
+
border-radius: 6px;
1085
+
padding: 5px 6px;
1086
+
margin-left: 8px;
1087
+
}
1088
+
1089
+
#private_search_page .search-collections label {
1090
+
vertical-align: middle;
1091
+
}
1092
+
1093
+
#private_search_page .lycan-import {
1094
+
display: none;
1095
+
1096
+
margin-top: 30px;
1097
+
border-top: 1px solid #ccc;
1098
+
padding-top: 5px;
1099
+
}
1100
+
1101
+
#private_search_page .lycan-import form p {
1102
+
line-height: 135%;
1103
+
}
1104
+
1105
+
#private_search_page .lycan-import .import-progress progress {
1106
+
margin-left: 0;
1107
+
margin-right: 6px;
1108
+
}
1109
+
1110
+
#private_search_page .lycan-import .import-progress progress + output {
1111
+
font-size: 11pt;
1112
+
}
1113
+
1114
+
#private_search_page .results {
1115
+
margin-top: 30px;
1116
+
}
1117
+
1118
+
#private_search_page .results > .post {
1119
+
margin-left: -15px;
1120
+
padding-left: 15px;
1121
+
border-bottom: 1px solid #ddd;
1122
+
padding-bottom: 10px;
1123
+
margin-top: 24px;
1124
+
}
1125
+
1126
+
#private_search_page .results-end {
1127
+
font-size: 12pt;
1128
+
color: #333;
1129
+
}
1130
+
1131
+
#private_search_page .post + .results-end {
1132
+
font-size: 11pt;
1133
+
}
1134
+
825
1135
@media (prefers-color-scheme: dark) {
826
1136
body {
827
1137
background-color: rgb(39, 39, 37);
···
848
1158
background-color: transparent;
849
1159
}
850
1160
1161
+
#account.active {
1162
+
color: #333;
1163
+
}
1164
+
851
1165
#account_menu {
852
1166
background: hsl(210, 33.33%, 94.0%);
853
1167
border-color: #ccc;
854
1168
}
855
1169
856
-
#account_menu li a {
1170
+
#account_menu li a[data-action] {
857
1171
color: #333;
858
1172
border-color: #bbb;
859
1173
background-color: hsla(210, 100%, 4%, 0.12);
860
1174
}
861
1175
862
-
#account_menu li a:hover {
1176
+
#account_menu li a[data-action]:hover {
863
1177
background-color: hsla(210, 100%, 4%, 0.2);
864
1178
}
865
1179
···
941
1255
color: #888;
942
1256
}
943
1257
1258
+
.post .body .highlight {
1259
+
background-color: rgba(255, 255, 0, 0.35);
1260
+
}
1261
+
944
1262
.post .quote-embed {
945
1263
background-color: #303030;
946
1264
border-color: #606060;
···
990
1308
color: #ff7070;
991
1309
}
992
1310
1311
+
.post a.link-card > div {
1312
+
background-color: #303030;
1313
+
border-color: #606060;
1314
+
}
1315
+
1316
+
.post a.link-card:hover > div {
1317
+
background-color: #383838;
1318
+
border-color: #707070;
1319
+
}
1320
+
1321
+
.post a.link-card p.domain {
1322
+
color: #666;
1323
+
}
1324
+
1325
+
.post a.link-card h2 {
1326
+
color: #ccc;
1327
+
}
1328
+
1329
+
.post a.link-card p.description {
1330
+
color: #888;
1331
+
}
1332
+
1333
+
.post a.link-card.record .handle {
1334
+
color: #666;
1335
+
}
1336
+
1337
+
.post a.link-card.record .avatar {
1338
+
border-color: #888;
1339
+
}
1340
+
1341
+
.post a.link-card.record .stats i.fa-heart:hover {
1342
+
color: #eee;
1343
+
}
1344
+
1345
+
.post a.fedi-link > div {
1346
+
border-color: #606060;
1347
+
color: #909090;
1348
+
}
1349
+
1350
+
.post a.fedi-link:hover > div {
1351
+
background-color: #444;
1352
+
border-color: #909090;
1353
+
}
1354
+
993
1355
#posting_stats_page input:disabled + label {
994
1356
color: #777;
995
1357
}
996
1358
1359
+
#posting_stats_page .user-choice .autocomplete {
1360
+
background-color: hsl(210, 5%, 18%);
1361
+
border-color: #4b4b4b;
1362
+
}
1363
+
1364
+
#posting_stats_page .user-choice .selected-users {
1365
+
border-color: #666;
1366
+
}
1367
+
1368
+
#posting_stats_page .user-choice .user-row .handle {
1369
+
color: #888;
1370
+
}
1371
+
1372
+
#posting_stats_page .user-choice .autocomplete .user-row.hover {
1373
+
background-color: hsl(207, 90%, 25%);
1374
+
}
1375
+
1376
+
#posting_stats_page .user-choice .selected-users .user-row .remove {
1377
+
color: #aaa;
1378
+
}
1379
+
1380
+
#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
1381
+
background-color: #555;
1382
+
color: #bbb;
1383
+
}
1384
+
997
1385
#posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
998
1386
border-color: #888;
999
1387
}
···
1004
1392
1005
1393
#posting_stats_page .scan-result tr.total td {
1006
1394
background-color: hsla(207, 90%, 25%, 0.4);
1395
+
}
1396
+
1397
+
#like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
1398
+
border-color: #888;
1399
+
}
1400
+
1401
+
#like_stats_page .scan-result th {
1402
+
background-color: hsl(207, 90%, 25%);
1403
+
}
1404
+
1405
+
#private_search_page .search-query {
1406
+
border: 1px solid #666;
1407
+
}
1408
+
1409
+
#private_search_page .lycan-import {
1410
+
border-top-color: #888;
1411
+
}
1412
+
1413
+
#private_search_page .results-end {
1414
+
color: #888;
1415
+
}
1416
+
1417
+
#private_search_page .results > .post {
1418
+
border-bottom: 1px solid #555;
1007
1419
}
1008
1420
}
+1
-1
test/ts_test.js
+1
-1
test/ts_test.js
+10
-1
thread_page.js
+10
-1
thread_page.js
···
23
23
}
24
24
25
25
return p;
26
-
}
26
+
}
27
27
28
28
/** @param {string} url, @returns {Promise<void>} */
29
29
···
64
64
65
65
if (root.parent) {
66
66
let p = this.buildParentLink(root.parent);
67
+
$id('thread').appendChild(p);
68
+
} else if (root.parentReference) {
69
+
let { repo, rkey } = atURI(root.parentReference.uri);
70
+
let url = linkToPostById(repo, rkey);
71
+
72
+
let handle = api.findHandleByDid(repo);
73
+
let link = handle ? `See parent post (@${handle})` : "See parent post";
74
+
75
+
let p = $tag('p.back', { html: `<i class="fa-solid fa-reply"></i><a href="${url}">${link}</a>` });
67
76
$id('thread').appendChild(p);
68
77
}
69
78
}
+6
-1
types.d.ts
+6
-1
types.d.ts
···
12
12
declare var isIncognito: boolean;
13
13
declare var biohazardEnabled: boolean;
14
14
declare var loginDialog: HTMLElement;
15
-
declare var accountMenu: HTMLElement;
15
+
declare var accountMenu: Menu;
16
16
declare var avatarPreloader: IntersectionObserver;
17
17
declare var threadPage: ThreadPage;
18
18
declare var postingStatsPage: PostingStatsPage;
19
+
declare var likeStatsPage: LikeStatsPage;
20
+
declare var notificationsPage: NotificationsPage;
21
+
declare var privateSearchPage: PrivateSearchPage;
22
+
23
+
declare var Paginator: PaginatorType;
19
24
20
25
type json = Record<string, any>;
21
26
+41
utils.js
+41
utils.js
···
18
18
}
19
19
20
20
/**
21
+
* @typedef {object} PaginatorType
22
+
* @property {(callback: (boolean) => void) => void} loadInPages
23
+
* @property {(() => void)=} scrollHandler
24
+
* @property {ResizeObserver=} resizeObserver
25
+
*/
26
+
27
+
window.Paginator = {
28
+
loadInPages(callback) {
29
+
if (this.scrollHandler) {
30
+
document.removeEventListener('scroll', this.scrollHandler);
31
+
}
32
+
33
+
if (this.resizeObserver) {
34
+
this.resizeObserver.disconnect();
35
+
}
36
+
37
+
let loadIfNeeded = () => {
38
+
if (window.pageYOffset + window.innerHeight > document.body.offsetHeight - 500) {
39
+
callback(loadIfNeeded);
40
+
}
41
+
};
42
+
43
+
callback(loadIfNeeded);
44
+
45
+
document.addEventListener('scroll', loadIfNeeded);
46
+
const resizeObserver = new ResizeObserver(loadIfNeeded);
47
+
resizeObserver.observe(document.body);
48
+
49
+
this.scrollHandler = loadIfNeeded;
50
+
this.resizeObserver = resizeObserver;
51
+
}
52
+
};
53
+
54
+
/**
21
55
* @template T
22
56
* @param {string} tag
23
57
* @param {string | object} params
···
96
130
return html.replace(/&/g, '&')
97
131
.replace(/</g, '<')
98
132
.replace(/>/g,'>');
133
+
}
134
+
135
+
/** @param {json} feedPost, @returns {number} */
136
+
137
+
function feedPostTime(feedPost) {
138
+
let timestamp = feedPost.reason ? feedPost.reason.indexedAt : feedPost.post.record.createdAt;
139
+
return Date.parse(timestamp);
99
140
}
100
141
101
142
/** @param {string} html, @returns {string} */