+70 -19

api.js

··· 130 throw new URLError(`${error}`); 131 } 132 133 - if (url.protocol != 'https:') { 134 - throw new URLError('URL must start with https://'); 135 } 136 137 let parts = url.pathname.split('/'); ··· 197 this.cacheProfile(profile); 198 return profile; 199 } 0 0 0 0 0 0 0 200 } 201 202 /** @returns {Promise<json | undefined>} */ ··· 306 307 /** 308 * @param {number} days 309 - * @param {{ onPageLoad?: FetchAllOnPageLoad }} [options] 310 * @returns {Promise<json[]>} 311 */ 312 313 - async loadTimeline(days, options = {}) { 314 let now = new Date(); 315 let timeLimit = now.getTime() - days * 86400 * 1000; 316 317 return await this.fetchAll('app.bsky.feed.getTimeline', { 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 318 params: { 0 0 319 limit: 100 320 }, 321 field: 'feed', 322 - breakWhen: (x) => { 323 - let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt; 324 - return Date.parse(timestamp) < timeLimit; 0 0 0 0 0 0 0 0 0 0 325 }, 326 - onPageLoad: options.onPageLoad 327 }); 0 0 328 } 329 330 /** 331 - * @param {string} did 332 * @param {number} days 333 - * @param {{ onPageLoad?: FetchAllOnPageLoad }} [options] 334 * @returns {Promise<json[]>} 335 */ 336 337 - async loadUserTimeline(did, days, options = {}) { 338 let now = new Date(); 339 let timeLimit = now.getTime() - days * 86400 * 1000; 340 341 - return await this.fetchAll('app.bsky.feed.getAuthorFeed', { 342 params: { 343 - actor: did, 344 - filter: 'posts_no_replies', 345 limit: 100 346 }, 347 field: 'feed', 348 - breakWhen: (x) => { 349 - let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt; 350 - return Date.parse(timestamp) < timeLimit; 351 - }, 352 - onPageLoad: options.onPageLoad 353 }); 354 } 355

··· 130 throw new URLError(`${error}`); 131 } 132 133 + if (url.protocol != 'https:' && url.protocol != 'http:') { 134 + throw new URLError('URL must start with http(s)://'); 135 } 136 137 let parts = url.pathname.split('/'); ··· 197 this.cacheProfile(profile); 198 return profile; 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; 207 } 208 209 /** @returns {Promise<json | undefined>} */ ··· 313 314 /** 315 * @param {number} days 316 + * @param {{ onPageLoad?: FetchAllOnPageLoad, keepLastPage?: boolean }} [options] 317 * @returns {Promise<json[]>} 318 */ 319 320 + async loadHomeTimeline(days, options = {}) { 321 let now = new Date(); 322 let timeLimit = now.getTime() - days * 86400 * 1000; 323 324 return await this.fetchAll('app.bsky.feed.getTimeline', { 325 + params: { limit: 100 }, 326 + field: 'feed', 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 362 }, 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, 0 398 limit: 100 399 }, 400 field: 'feed', 401 + breakWhen: (x) => (feedPostTime(x) < timeLimit), 402 + onPageLoad: options.onPageLoad, 403 + keepLastPage: options.keepLastPage 0 0 404 }); 405 } 406

+14

async_lint.sh

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0

··· 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

+91 -17

index.html

··· 10 font-src 'self'; 11 script-src-attr 'none'; 12 style-src-attr 'none'; 13 - connect-src https:; 14 base-uri 'none'; 15 form-action 'none';"> 16 ··· 49 50 <li><a href="#" data-action="login">Log in</a></li> 51 <li><a href="#" data-action="logout">Log out</a></li> 0 0 0 0 0 0 52 </ul> 53 </div> 54 ··· 94 <form> 95 <p> 96 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> 0 0 0 0 0 0 0 101 </p> 102 103 <p> 104 Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label> 105 </p> 106 0 0 0 0 0 0 0 0 0 0 0 107 <p> 108 <input type="submit" value="Start scan"> <progress></progress> 109 </p> ··· 112 <p class="scan-info"></p> 113 114 <table class="scan-result"> 115 - <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> 124 - </thead> 125 - <tbody> 126 - </tbody> 127 </table> 128 </div> 129 ··· 155 </table> 156 </div> 157 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 158 <script src="lib/purify.min.js"></script> 159 <script src="minisky.js"></script> 160 <script src="api.js"></script> ··· 166 <script src="posting_stats_page.js"></script> 167 <script src="like_stats_page.js"></script> 168 <script src="notifications_page.js"></script> 0 169 <script src="embed_component.js"></script> 170 <script src="post_component.js"></script> 171 <script src="skythread.js"></script>

··· 10 font-src 'self'; 11 script-src-attr 'none'; 12 style-src-attr 'none'; 13 + connect-src https: http://localhost:3000; 14 base-uri 'none'; 15 form-action 'none';"> 16 ··· 49 50 <li><a href="#" data-action="login">Log in</a></li> 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> 58 </ul> 59 </div> 60 ··· 100 <form> 101 <p> 102 Scan posts from: 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> 114 </p> 115 116 <p> 117 Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label> 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> 130 + 131 <p> 132 <input type="submit" value="Start scan"> <progress></progress> 133 </p> ··· 136 <p class="scan-info"></p> 137 138 <table class="scan-result"> 139 + <thead></thead> 140 + <tbody></tbody> 0 0 0 0 0 0 0 0 0 0 141 </table> 142 </div> 143 ··· 169 </table> 170 </div> 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 + 231 <script src="lib/purify.min.js"></script> 232 <script src="minisky.js"></script> 233 <script src="api.js"></script> ··· 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> 243 <script src="embed_component.js"></script> 244 <script src="post_component.js"></script> 245 <script src="skythread.js"></script>

+11 -9

like_stats_page.js

··· 27 e.preventDefault(); 28 29 if (!this.scanStartTime) { 30 - this.findLikes(); 31 } else { 32 this.stopScan(); 33 } ··· 110 field: 'records', 111 breakWhen: (x) => Date.parse(x['value']['createdAt']) < startTime - 86400 * requestedDays * 1000, 112 onPageLoad: (data) => { 113 - if (data.length == 0) { return } 0 0 114 115 - let last = data[data.length - 1]; 116 let lastDate = Date.parse(last.value.createdAt); 0 117 118 - let daysBack = (startTime - lastDate) / 86400 / 1000; 119 this.updateProgress({ likeRecords: Math.min(1.0, daysBack / requestedDays) }); 120 } 121 }); ··· 127 let startTime = /** @type {number} */ (this.scanStartTime); 128 129 let myPosts = await this.appView.loadUserTimeline(accountAPI.user.did, requestedDays, { 0 130 onPageLoad: (data) => { 131 - if (data.length == 0) { return } 132 133 - let last = data[data.length - 1]; 134 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 135 - let lastDate = Date.parse(lastTimestamp); 136 0 137 let daysBack = (startTime - lastDate) / 86400 / 1000; 0 138 this.updateProgress({ posts: Math.min(1.0, daysBack / requestedDays) }); 139 } 140 }); ··· 226 tr.append( 227 $tag('td.no', { text: i + 1 }), 228 $tag('td.handle', { 229 - html: `<img class="avatar" src="${user.avatar}"> ` + 230 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>` 231 }), 232 $tag('td.count', { text: user.count })

··· 27 e.preventDefault(); 28 29 if (!this.scanStartTime) { 30 + this.findLikes(); 31 } else { 32 this.stopScan(); 33 } ··· 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 0 117 let lastDate = Date.parse(last.value.createdAt); 118 + let daysBack = (startTime - lastDate) / 86400 / 1000; 119 0 120 this.updateProgress({ likeRecords: Math.min(1.0, daysBack / requestedDays) }); 121 } 122 }); ··· 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 } 0 0 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 }); ··· 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 })

+10 -3

menu.js

··· 11 12 html.addEventListener('click', (e) => { 13 this.menuElement.style.visibility = 'hidden'; 0 14 }); 0 0 0 15 16 this.icon.addEventListener('click', (e) => { 17 e.stopPropagation(); ··· 55 $(this.menuElement.querySelector('a[data-action=login]')).addEventListener('click', (e) => { 56 e.preventDefault(); 57 58 - toggleDialog(loginDialog); 59 this.menuElement.style.visibility = 'hidden'; 60 }); 61 ··· 66 } 67 68 toggleAccountMenu() { 69 - this.menuElement.style.visibility = (this.menuElement.style.visibility == 'visible') ? 'hidden' : 'visible'; 0 0 0 70 } 71 72 /** @param {string} buttonName */ ··· 124 async loadCurrentUserAvatar() { 125 try { 126 let url = await api.loadCurrentUserAvatar(); 127 - this.showLoggedInStatus(true, url); 128 } catch (error) { 129 console.log(error); 130 this.showLoggedInStatus(true, null);

··· 11 12 html.addEventListener('click', (e) => { 13 this.menuElement.style.visibility = 'hidden'; 14 + this.icon.classList.remove('active'); 15 }); 16 + 17 + let homeLink = $(this.menuElement.querySelector('a[href="?"]'), HTMLLinkElement); 18 + homeLink.href = location.origin + location.pathname; 19 20 this.icon.addEventListener('click', (e) => { 21 e.stopPropagation(); ··· 59 $(this.menuElement.querySelector('a[data-action=login]')).addEventListener('click', (e) => { 60 e.preventDefault(); 61 62 + showDialog(loginDialog); 63 this.menuElement.style.visibility = 'hidden'; 64 }); 65 ··· 70 } 71 72 toggleAccountMenu() { 73 + let isVisible = (this.menuElement.style.visibility == 'visible'); 74 + 75 + this.menuElement.style.visibility = isVisible ? 'hidden' : 'visible'; 76 + this.icon.classList.toggle('active', !isVisible); 77 } 78 79 /** @param {string} buttonName */ ··· 131 async loadCurrentUserAvatar() { 132 try { 133 let url = await api.loadCurrentUserAvatar(); 134 + this.showLoggedInStatus(true, url); 135 } catch (error) { 136 console.log(error); 137 this.showLoggedInStatus(true, null);

+6 -2

minisky.js

··· 186 * field: string, 187 * params?: json, 188 * breakWhen?: (obj: json) => boolean, 0 189 * onPageLoad?: FetchAllOnPageLoad | undefined 190 * }} FetchAllOptions 191 * ··· 213 let test = options.breakWhen; 214 215 if (items.some(x => test(x))) { 216 - items = items.filter(x => !test(x)); 0 0 0 217 cursor = null; 218 } 219 } ··· 297 let text = await response.text(); 298 let json = text.trim().length > 0 ? JSON.parse(text) : undefined; 299 300 - if (response.status == 200) { 301 return json; 302 } else { 303 throw new APIError(response.status, json);

··· 186 * field: string, 187 * params?: json, 188 * breakWhen?: (obj: json) => boolean, 189 + * keepLastPage?: boolean | undefined, 190 * onPageLoad?: FetchAllOnPageLoad | undefined 191 * }} FetchAllOptions 192 * ··· 214 let test = options.breakWhen; 215 216 if (items.some(x => test(x))) { 217 + if (!options.keepLastPage) { 218 + items = items.filter(x => !test(x)); 219 + } 220 + 221 cursor = null; 222 } 223 } ··· 301 let text = await response.text(); 302 let json = text.trim().length > 0 ? JSON.parse(text) : undefined; 303 304 + if (response.status >= 200 && response.status < 300) { 305 return json; 306 } else { 307 throw new APIError(response.status, json);

+23

models.js

··· 287 return -1; 288 } else if (a.author.did != this.author.did && b.author.did == this.author.did) { 289 return 1; 0 0 0 0 290 } else if (a.createdAt.getTime() < b.createdAt.getTime()) { 291 return -1; 292 } else if (a.createdAt.getTime() > b.createdAt.getTime()) { ··· 318 return this.record.bridgyOriginalText; 319 } 320 0 0 0 0 0 321 /** @returns {boolean} */ 322 get isRoot() { 323 // I AM ROOOT ··· 338 return this.record.text; 339 } 340 0 0 0 0 0 0 0 0 0 341 /** @returns {json} */ 342 get facets() { 343 return this.record.facets; ··· 380 let shouldHaveMoreReplies = (this.replyCount !== undefined && this.replyCount > this.replies.length); 381 382 return shouldHaveMoreReplies && (this.replies.length > 0 || (this.level !== undefined && this.level <= 4)); 0 0 0 0 0 383 } 384 385 /** @returns {number} */

··· 287 return -1; 288 } else if (a.author.did != this.author.did && b.author.did == this.author.did) { 289 return 1; 290 + } else if (a.text != "📌" && b.text == "📌") { 291 + return -1; 292 + } else if (a.text == "📌" && b.text != "📌") { 293 + return 1; 294 } else if (a.createdAt.getTime() < b.createdAt.getTime()) { 295 return -1; 296 } else if (a.createdAt.getTime() > b.createdAt.getTime()) { ··· 322 return this.record.bridgyOriginalText; 323 } 324 325 + /** @returns {string | undefined} */ 326 + get originalFediURL() { 327 + return this.record.bridgyOriginalUrl; 328 + } 329 + 330 /** @returns {boolean} */ 331 get isRoot() { 332 // I AM ROOOT ··· 347 return this.record.text; 348 } 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 + 359 /** @returns {json} */ 360 get facets() { 361 return this.record.facets; ··· 398 let shouldHaveMoreReplies = (this.replyCount !== undefined && this.replyCount > this.replies.length); 399 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); 406 } 407 408 /** @returns {number} */

+1 -1

notifications_page.js

··· 13 let finished = false; 14 let cursor; 15 16 - loadInPages((next) => { 17 if (isLoading || finished) { return; } 18 isLoading = true; 19

··· 13 let finished = false; 14 let cursor; 15 16 + Paginator.loadInPages((next) => { 17 if (isLoading || finished) { return; } 18 isLoading = true; 19

+82 -3

post_component.js

··· 162 if (this.post.embed) { 163 let embed = new EmbedComponent(this.post, this.post.embed).buildElement(); 164 wrapper.appendChild(embed); 0 0 0 0 0 0 0 0 0 0 0 0 0 165 } 166 167 if (this.post.likeCount !== undefined && this.post.repostCount !== undefined) { ··· 211 h.innerHTML = `${escapeHTML(this.authorName)} `; 212 213 if (this.post.isFediPost) { 214 - let handle = this.post.authorFediHandle; 215 - h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">@${handle}</a> ` + 216 `<img src="icons/mastodon.svg" class="mastodon"> `; 217 } else { 218 - h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">@${this.post.author.handle}</a> `; 0 219 } 220 221 h.innerHTML += `<span class="separator">&bull;</span> ` + ··· 300 return p; 301 } 302 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 303 /** @param {string[]} tags, @returns {HTMLElement} */ 304 305 buildTagsRow(tags) { ··· 347 stats.append(quotesLink); 348 } 349 0 0 0 0 0 350 return stats; 351 } 352 ··· 427 loadHiddenReplies(loadMoreButton) { 428 loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`; 429 this.loadHiddenSubtree(this.post, this.rootElement); 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 430 } 431 432 /** @param {HTMLLinkElement} authorLink */

··· 162 if (this.post.embed) { 163 let embed = new EmbedComponent(this.post, this.post.embed).buildElement(); 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 + } 178 } 179 180 if (this.post.likeCount !== undefined && this.post.repostCount !== undefined) { ··· 224 h.innerHTML = `${escapeHTML(this.authorName)} `; 225 226 if (this.post.isFediPost) { 227 + let handle = `@${this.post.authorFediHandle}`; 228 + h.innerHTML += `<a class="handle" href="${this.linkToAuthor}" target="_blank">${handle}</a> ` + 229 `<img src="icons/mastodon.svg" class="mastodon"> `; 230 } else { 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> `; 233 } 234 235 h.innerHTML += `<span class="separator">&bull;</span> ` + ··· 314 return p; 315 } 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 + 361 /** @param {string[]} tags, @returns {HTMLElement} */ 362 363 buildTagsRow(tags) { ··· 405 stats.append(quotesLink); 406 } 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 + 413 return stats; 414 } 415 ··· 490 loadHiddenReplies(loadMoreButton) { 491 loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`; 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 + } 509 } 510 511 /** @param {HTMLLinkElement} authorLink */

+479 -68

posting_stats_page.js

··· 7 /** @type {number | undefined} */ 8 scanStartTime; 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 constructor() { 11 this.pageElement = $id('posting_stats_page'); 0 12 13 this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement); 14 this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement); 15 this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement); 16 this.table = $(this.pageElement.querySelector('table.scan-result')); 0 0 0 0 0 0 0 0 0 0 0 0 17 18 this.setupEvents(); 19 } 20 21 setupEvents() { 22 - $(this.pageElement.querySelector('form')).addEventListener('submit', (e) => { 0 0 0 0 0 0 23 e.preventDefault(); 24 25 if (!this.scanStartTime) { 26 - this.scanPostingStats(); 27 } else { 28 this.stopScan(); 29 } ··· 31 32 this.rangeInput.addEventListener('input', (e) => { 33 let days = parseInt(this.rangeInput.value, 10); 34 - this.configurePostingStats({ days }); 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 35 }); 36 } 37 38 show() { 39 this.pageElement.style.display = 'block'; 0 40 } 41 42 /** @returns {number} */ ··· 45 return parseInt(this.rangeInput.value, 10); 46 } 47 48 - /** @param {{ days: number }} args */ 0 0 0 0 0 0 0 0 0 0 49 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`; 54 } 55 } 56 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 57 /** @returns {Promise<void>} */ 58 59 async scanPostingStats() { 60 - this.submitButton.value = 'Cancel'; 61 - 62 let requestedDays = this.selectedDaysRange(); 0 63 64 - this.progressBar.max = requestedDays; 65 - this.progressBar.value = 0; 66 - this.progressBar.style.display = 'inline'; 0 0 67 68 - this.table.style.display = 'none'; 0 0 0 0 0 0 0 0 0 69 70 - let tbody = $(this.table.querySelector('tbody')); 71 - tbody.innerHTML = ''; 0 0 0 0 0 72 73 - let startTime = new Date().getTime(); 74 - this.scanStartTime = startTime; 75 76 - let scanInfo = $(this.pageElement.querySelector('.scan-info')); 77 - scanInfo.style.display = 'none'; 0 0 78 79 - let items = await accountAPI.loadTimeline(requestedDays, { 80 - onPageLoad: (data) => { 81 - if (this.scanStartTime != startTime) { 82 - return { cancel: true }; 83 - } 84 85 - this.updateProgress(data, startTime); 0 86 } 87 - }); 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 88 89 - if (this.scanStartTime != startTime) { 90 - return; 91 - } 0 0 0 0 0 92 93 - this.updateResultsTable(items, startTime, requestedDays); 0 0 0 0 0 0 0 94 } 95 96 /** @param {json[]} dataPage, @param {number} startTime */ 97 98 updateProgress(dataPage, startTime) { 99 - if (dataPage.length == 0) { return } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 100 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); 104 0 0 0 0 0 0 105 let daysBack = (startTime - lastDate) / 86400 / 1000; 106 - this.progressBar.value = daysBack; 0 0 0 0 0 0 0 0 0 107 } 108 109 /** @param {json} a, @param {json} b, @returns {number} */ ··· 121 } 122 } 123 124 - /** @param {json[]} items, @param {number} startTime, @param {number} requestedDays */ 0 0 0 0 0 0 0 0 0 0 0 0 125 126 - updateResultsTable(items, startTime, requestedDays) { 0 0 0 0 0 0 0 0 0 0 0 127 let users = {}; 128 let total = 0; 129 let allReposts = 0; 130 let allNormalPosts = 0; 131 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; 0 0 0 0 0 0 0 0 136 137 - for (let item of items) { 138 - if (item.reply) { continue; } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 139 140 let user = item.reason ? item.reason.by : item.post.author; 141 let handle = user.handle; ··· 148 } else { 149 users[handle].own += 1; 150 allNormalPosts += 1; 0 151 } 152 } 153 154 - let tbody = $(this.table.querySelector('tbody')); 155 - let tr = $tag('tr.total'); 156 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 - ); 0 0 0 0 0 0 0 165 166 - tbody.append(tr); 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 167 168 let sorted = Object.values(users).sort(this.sortUserRows); 169 ··· 174 tr.append( 175 $tag('td.no', { text: i + 1 }), 176 $tag('td.handle', { 177 - html: `<img class="avatar" src="${user.avatar}"> ` + 178 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>` 179 }), 180 - $tag('td', { text: ((user.own + user.reposts) / daysBack).toFixed(1) }), 0 0 0 181 $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) + '%' }) 0 184 ); 185 186 - tbody.append(tr); 187 - } 0 188 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'; 193 } 194 195 this.table.style.display = 'table'; 196 - this.submitButton.value = 'Start scan'; 197 - this.progressBar.style.display = 'none'; 198 - this.scanStartTime = undefined; 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 199 } 200 201 stopScan() {

··· 7 /** @type {number | undefined} */ 8 scanStartTime; 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 + 25 constructor() { 26 this.pageElement = $id('posting_stats_page'); 27 + this.form = $(this.pageElement.querySelector('form'), HTMLFormElement); 28 29 this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement); 30 this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement); 31 this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement); 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); 45 46 this.setupEvents(); 47 } 48 49 setupEvents() { 50 + let html = $(document.body.parentNode); 51 + 52 + html.addEventListener('click', (e) => { 53 + this.hideAutocomplete(); 54 + }); 55 + 56 + this.form.addEventListener('submit', (e) => { 57 e.preventDefault(); 58 59 if (!this.scanStartTime) { 60 + this.scanPostingStats(); 61 } else { 62 this.stopScan(); 63 } ··· 65 66 this.rangeInput.addEventListener('input', (e) => { 67 let days = parseInt(this.rangeInput.value, 10); 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); 93 }); 94 } 95 96 show() { 97 this.pageElement.style.display = 'block'; 98 + this.fetchLists(); 99 } 100 101 /** @returns {number} */ ··· 104 return parseInt(this.rangeInput.value, 10); 105 } 106 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 + }); 118 119 + for (let list of lists) { 120 + this.listSelect.append( 121 + $tag('option', { value: list.uri, text: list.name + ' ' }) 122 + ); 123 } 124 } 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 + 284 /** @returns {Promise<void>} */ 285 286 async scanPostingStats() { 287 + let startTime = new Date().getTime(); 0 288 let requestedDays = this.selectedDaysRange(); 289 + let scanType = this.scanType.value; 290 291 + /** @type {FetchAllOnPageLoad} */ 292 + let onPageLoad = (data) => { 293 + if (this.scanStartTime != startTime) { 294 + return { cancel: true }; 295 + } 296 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 + }); 307 308 + this.updateResultsTable(posts, startTime, requestedDays); 309 + } else if (scanType == 'list') { 310 + let list = this.listSelect.value; 311 + 312 + if (!list) { 313 + return; 314 + } 315 316 + this.startScan(startTime, requestedDays); 0 317 318 + let posts = await accountAPI.loadListTimeline(list, requestedDays, { 319 + onPageLoad: onPageLoad, 320 + keepLastPage: true 321 + }); 322 323 + this.updateResultsTable(posts, startTime, requestedDays, { showReposts: false }); 324 + } else if (scanType == 'users') { 325 + let dids = Object.keys(this.selectedUsers); 0 0 326 327 + if (dids.length == 0) { 328 + return; 329 } 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(); 348 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); 357 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 + } 366 } 367 368 /** @param {json[]} dataPage, @param {number} startTime */ 369 370 updateProgress(dataPage, startTime) { 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 + } 390 391 + /** @param {string} did, @param {json[]} dataPage, @param {number} startTime, @param {number} requestedDays */ 0 0 392 393 + updateUserProgress(did, dataPage, startTime, requestedDays) { 394 + let last = dataPage.at(-1); 395 + 396 + if (!last) { return } 397 + 398 + let lastDate = feedPostTime(last); 399 let daysBack = (startTime - lastDate) / 86400 / 1000; 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); 410 } 411 412 /** @param {json} a, @param {json} b, @returns {number} */ ··· 424 } 425 } 426 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 + */ 440 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 + 453 let users = {}; 454 let total = 0; 455 let allReposts = 0; 456 let allNormalPosts = 0; 457 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; 470 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 + } 499 500 let user = item.reason ? item.reason.by : item.post.author; 501 let handle = user.handle; ··· 508 } else { 509 users[handle].own += 1; 510 allNormalPosts += 1; 511 + ownThreads.add(item.post.uri); 512 } 513 } 514 515 + let headRow = $tag('tr'); 0 516 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 + } 532 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 + } 561 562 let sorted = Object.values(users).sort(this.sortUserRows); 563 ··· 568 tr.append( 569 $tag('td.no', { text: i + 1 }), 570 $tag('td.handle', { 571 + html: `<img class="avatar" src="${user.avatar}"> ` + 572 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>` 573 }), 574 + 575 + (options.showReposts !== false) ? 576 + $tag('td', { text: ((user.own + user.reposts) / daysBack).toFixed(1) }) : '', 577 + 578 $tag('td', { text: user.own > 0 ? (user.own / daysBack).toFixed(1) : '–' }), 579 + 580 + (options.showReposts !== false) ? 581 + $tag('td', { text: user.reposts > 0 ? (user.reposts / daysBack).toFixed(1) : '–' }) : '' 582 ); 583 584 + if (options.showPercentages !== false) { 585 + tr.append($tag('td.percent', { text: ((user.own + user.reposts) * 100 / total).toFixed(1) + '%' })); 586 + } 587 588 + this.tableBody.append(tr); 0 0 0 589 } 590 591 this.table.style.display = 'table'; 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'; 610 } 611 612 stopScan() {

+423

private_search_page.js

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

··· 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 + }

+27 -35

skythread.js

··· 12 window.postingStatsPage = new PostingStatsPage(); 13 window.likeStatsPage = new LikeStatsPage(); 14 window.notificationsPage = new NotificationsPage(); 0 15 16 $(document.querySelector('#search form')).addEventListener('submit', (e) => { 17 e.preventDefault(); ··· 19 }); 20 21 for (let dialog of document.querySelectorAll('.dialog')) { 0 0 22 dialog.addEventListener('click', (e) => { 23 - if (e.target === e.currentTarget) { 24 hideDialog(dialog); 25 } else { 26 e.stopPropagation(); 27 } 28 }); 29 30 - dialog.querySelector('.close')?.addEventListener('click', (e) => { 31 hideDialog(dialog); 32 }); 33 } ··· 103 104 function parseQueryParams() { 105 let params = new URLSearchParams(location.search); 106 - let query = params.get('q'); 107 - let author = params.get('author'); 108 - let post = params.get('post'); 109 - let quotes = params.get('quotes'); 110 - let hash = params.get('hash'); 111 - let page = params.get('page'); 112 113 if (quotes) { 114 showLoader(); ··· 116 } else if (hash) { 117 showLoader(); 118 loadHashtagPage(decodeURIComponent(hash)); 119 - } else if (query) { 120 showLoader(); 121 - threadPage.loadThreadByURL(decodeURIComponent(query)); 122 } else if (author && post) { 123 showLoader(); 124 threadPage.loadThreadById(decodeURIComponent(author), decodeURIComponent(post)); ··· 190 } 191 } 192 193 - function toggleLoginInfo(event) { 194 $id('login').classList.toggle('expanded'); 195 } 196 197 function submitLogin() { 198 - let handle = $id('login_handle', HTMLInputElement); 199 - let password = $id('login_password', HTMLInputElement); 200 let submit = $id('login_submit'); 201 let cloudy = $id('cloudy'); 0 202 203 if (submit.style.display == 'none') { return } 204 205 - handle.blur(); 206 - password.blur(); 207 208 submit.style.display = 'none'; 209 cloudy.style.display = 'inline-block'; 210 211 - logIn(handle.value, password.value).then((pds) => { 0 0 0 212 window.api = pds; 213 window.accountAPI = pds; 214 215 hideDialog(loginDialog); 216 submit.style.display = 'inline'; 217 cloudy.style.display = 'none'; 0 218 219 accountMenu.loadCurrentUserAvatar(); 220 ··· 301 } 302 } 303 0 0 304 function openPage(page) { 305 if (!accountAPI.isLoggedIn) { 306 - toggleDialog(loginDialog); 0 307 return; 308 } 309 ··· 313 window.postingStatsPage.show(); 314 } else if (page == 'like_stats') { 315 window.likeStatsPage.show(); 0 0 316 } 317 } 318 ··· 333 let finished = false; 334 let cursor; 335 336 - loadInPages(() => { 337 if (isLoading || finished) { return; } 338 isLoading = true; 339 ··· 381 let cursor; 382 let finished = false; 383 384 - loadInPages(() => { 385 if (isLoading || finished) { return; } 386 isLoading = true; 387 ··· 432 }); 433 }); 434 } 435 - 436 - /** @param {Function} callback */ 437 - 438 - function loadInPages(callback) { 439 - let loadIfNeeded = () => { 440 - if (window.pageYOffset + window.innerHeight > document.body.offsetHeight - 500) { 441 - callback(loadIfNeeded); 442 - } 443 - }; 444 - 445 - callback(loadIfNeeded); 446 - 447 - document.addEventListener('scroll', loadIfNeeded); 448 - const resizeObserver = new ResizeObserver(loadIfNeeded); 449 - resizeObserver.observe(document.body); 450 - }

··· 12 window.postingStatsPage = new PostingStatsPage(); 13 window.likeStatsPage = new LikeStatsPage(); 14 window.notificationsPage = new NotificationsPage(); 15 + window.privateSearchPage = new PrivateSearchPage(); 16 17 $(document.querySelector('#search form')).addEventListener('submit', (e) => { 18 e.preventDefault(); ··· 20 }); 21 22 for (let dialog of document.querySelectorAll('.dialog')) { 23 + let close = $(dialog.querySelector('.close')); 24 + 25 dialog.addEventListener('click', (e) => { 26 + if (e.target === e.currentTarget && close && close.offsetHeight > 0) { 27 hideDialog(dialog); 28 } else { 29 e.stopPropagation(); 30 } 31 }); 32 33 + close?.addEventListener('click', (e) => { 34 hideDialog(dialog); 35 }); 36 } ··· 106 107 function parseQueryParams() { 108 let params = new URLSearchParams(location.search); 109 + let { q, author, post, quotes, hash, page } = Object.fromEntries(params); 0 0 0 0 0 110 111 if (quotes) { 112 showLoader(); ··· 114 } else if (hash) { 115 showLoader(); 116 loadHashtagPage(decodeURIComponent(hash)); 117 + } else if (q) { 118 showLoader(); 119 + threadPage.loadThreadByURL(decodeURIComponent(q)); 120 } else if (author && post) { 121 showLoader(); 122 threadPage.loadThreadById(decodeURIComponent(author), decodeURIComponent(post)); ··· 188 } 189 } 190 191 + function toggleLoginInfo() { 192 $id('login').classList.toggle('expanded'); 193 } 194 195 function submitLogin() { 196 + let handleField = $id('login_handle', HTMLInputElement); 197 + let passwordField = $id('login_password', HTMLInputElement); 198 let submit = $id('login_submit'); 199 let cloudy = $id('cloudy'); 200 + let close = $(loginDialog.querySelector('.close')); 201 202 if (submit.style.display == 'none') { return } 203 204 + handleField.blur(); 205 + passwordField.blur(); 206 207 submit.style.display = 'none'; 208 cloudy.style.display = 'inline-block'; 209 210 + let handle = handleField.value.trim(); 211 + let password = passwordField.value.trim(); 212 + 213 + logIn(handle, password).then((pds) => { 214 window.api = pds; 215 window.accountAPI = pds; 216 217 hideDialog(loginDialog); 218 submit.style.display = 'inline'; 219 cloudy.style.display = 'none'; 220 + close.style.display = 'inline'; 221 222 accountMenu.loadCurrentUserAvatar(); 223 ··· 304 } 305 } 306 307 + /** @param {string} page */ 308 + 309 function openPage(page) { 310 if (!accountAPI.isLoggedIn) { 311 + showDialog(loginDialog); 312 + $(loginDialog.querySelector('.close')).style.display = 'none'; 313 return; 314 } 315 ··· 319 window.postingStatsPage.show(); 320 } else if (page == 'like_stats') { 321 window.likeStatsPage.show(); 322 + } else if (page == 'search') { 323 + window.privateSearchPage.show(); 324 } 325 } 326 ··· 341 let finished = false; 342 let cursor; 343 344 + Paginator.loadInPages(() => { 345 if (isLoading || finished) { return; } 346 isLoading = true; 347 ··· 389 let cursor; 390 let finished = false; 391 392 + Paginator.loadInPages(() => { 393 if (isLoading || finished) { return; } 394 isLoading = true; 395 ··· 440 }); 441 }); 442 } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

+336 -8

style.css

··· 127 padding: 6px 11px; 128 } 129 130 - #account_menu li a { 131 display: inline-block; 132 color: #333; 133 font-size: 11pt; ··· 138 background-color: hsla(210, 100%, 4%, 0.12); 139 } 140 141 - #account_menu li a:hover { 142 background-color: hsla(210, 100%, 4%, 0.2); 143 text-decoration: none; 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 144 } 145 146 #account_menu li .check { ··· 486 margin-top: 18px; 487 } 488 0 0 0 0 0 0 0 489 .post .quote-embed { 490 border: 1px solid #ddd; 491 border-radius: 8px; ··· 640 color: #aaa; 641 } 642 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 643 .post div.gif img { 644 user-select: none; 645 -webkit-user-select: none; ··· 739 #posting_stats_page input[type="radio"] { 740 position: relative; 741 top: -1px; 0 742 } 743 744 - #posting_stats_page label { 745 user-select: none; 746 -webkit-user-select: none; 747 } 748 749 - #posting_stats_page input:disabled + label { 750 color: #999; 751 } 752 ··· 761 padding: 5px 10px; 762 } 763 0 0 0 0 0 764 #posting_stats_page progress { 765 width: 300px; 766 margin-left: 10px; ··· 768 display: none; 769 } 770 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 771 #posting_stats_page .scan-info { 772 display: none; 773 font-weight: 600; ··· 817 818 #posting_stats_page .scan-result .avatar { 819 width: 24px; 0 820 border-radius: 14px; 821 vertical-align: middle; 822 margin-right: 2px; 823 - padding: 2px; 824 } 825 826 #posting_stats_page .scan-result td.no { ··· 892 893 #like_stats_page .scan-result .avatar { 894 width: 24px; 0 895 border-radius: 14px; 896 vertical-align: middle; 897 margin-right: 2px; 898 - padding: 2px; 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 899 } 900 901 @media (prefers-color-scheme: dark) { ··· 924 background-color: transparent; 925 } 926 0 0 0 0 927 #account_menu { 928 background: hsl(210, 33.33%, 94.0%); 929 border-color: #ccc; 930 } 931 932 - #account_menu li a { 933 color: #333; 934 border-color: #bbb; 935 background-color: hsla(210, 100%, 4%, 0.12); 936 } 937 938 - #account_menu li a:hover { 939 background-color: hsla(210, 100%, 4%, 0.2); 940 } 941 ··· 1015 1016 .post h2 .action { 1017 color: #888; 0 0 0 0 1018 } 1019 1020 .post .quote-embed { ··· 1066 color: #ff7070; 1067 } 1068 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1069 #posting_stats_page input:disabled + label { 1070 color: #777; 1071 } 1072 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1073 #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th { 1074 border-color: #888; 1075 } ··· 1088 1089 #like_stats_page .scan-result th { 1090 background-color: hsl(207, 90%, 25%); 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1091 } 1092 }

··· 127 padding: 6px 11px; 128 } 129 130 + #account_menu li a[data-action] { 131 display: inline-block; 132 color: #333; 133 font-size: 11pt; ··· 138 background-color: hsla(210, 100%, 4%, 0.12); 139 } 140 141 + #account_menu li a[data-action]:hover { 142 background-color: hsla(210, 100%, 4%, 0.2); 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; 160 } 161 162 #account_menu li .check { ··· 502 margin-top: 18px; 503 } 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 + 512 .post .quote-embed { 513 border: 1px solid #ddd; 514 border-radius: 8px; ··· 663 color: #aaa; 664 } 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; ··· 789 #posting_stats_page input[type="radio"] { 790 position: relative; 791 top: -1px; 792 + margin-left: 5px; 793 } 794 795 + #posting_stats_page input[type="radio"] + label { 796 user-select: none; 797 -webkit-user-select: none; 798 } 799 800 + #posting_stats_page input[type="radio"]:disabled + label { 801 color: #999; 802 } 803 ··· 812 padding: 5px 10px; 813 } 814 815 + #posting_stats_page select { 816 + font-size: 12pt; 817 + margin-left: 5px; 818 + } 819 + 820 #posting_stats_page progress { 821 width: 300px; 822 margin-left: 10px; ··· 824 display: none; 825 } 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 + 923 #posting_stats_page .scan-info { 924 display: none; 925 font-weight: 600; ··· 969 970 #posting_stats_page .scan-result .avatar { 971 width: 24px; 972 + height: 24px; 973 border-radius: 14px; 974 vertical-align: middle; 975 margin-right: 2px; 976 + padding: 2px; 977 } 978 979 #posting_stats_page .scan-result td.no { ··· 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 1135 @media (prefers-color-scheme: dark) { ··· 1158 background-color: transparent; 1159 } 1160 1161 + #account.active { 1162 + color: #333; 1163 + } 1164 + 1165 #account_menu { 1166 background: hsl(210, 33.33%, 94.0%); 1167 border-color: #ccc; 1168 } 1169 1170 + #account_menu li a[data-action] { 1171 color: #333; 1172 border-color: #bbb; 1173 background-color: hsla(210, 100%, 4%, 0.12); 1174 } 1175 1176 + #account_menu li a[data-action]:hover { 1177 background-color: hsla(210, 100%, 4%, 0.2); 1178 } 1179 ··· 1253 1254 .post h2 .action { 1255 color: #888; 1256 + } 1257 + 1258 + .post .body .highlight { 1259 + background-color: rgba(255, 255, 0, 0.35); 1260 } 1261 1262 .post .quote-embed { ··· 1308 color: #ff7070; 1309 } 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 + 1355 #posting_stats_page input:disabled + label { 1356 color: #777; 1357 } 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 + 1385 #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th { 1386 border-color: #888; 1387 } ··· 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; 1419 } 1420 }

+1 -1

test/ts_test.js

··· 19 /** @type {never} */ let x3 = html; 20 21 document.addEventListener('click', (e) => { 22 - let target = $(e.target); 23 /** @type {never} */ let x4 = target; 24 }); 25

··· 19 /** @type {never} */ let x3 = html; 20 21 document.addEventListener('click', (e) => { 22 + let target = $(e.target); 23 /** @type {never} */ let x4 = target; 24 }); 25

+10 -1

thread_page.js

··· 23 } 24 25 return p; 26 - } 27 28 /** @param {string} url, @returns {Promise<void>} */ 29 ··· 64 65 if (root.parent) { 66 let p = this.buildParentLink(root.parent); 0 0 0 0 0 0 0 0 0 67 $id('thread').appendChild(p); 68 } 69 }

··· 23 } 24 25 return p; 26 + } 27 28 /** @param {string} url, @returns {Promise<void>} */ 29 ··· 64 65 if (root.parent) { 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>` }); 76 $id('thread').appendChild(p); 77 } 78 }

+3

types.d.ts

··· 18 declare var postingStatsPage: PostingStatsPage; 19 declare var likeStatsPage: LikeStatsPage; 20 declare var notificationsPage: NotificationsPage; 0 0 0 21 22 type json = Record<string, any>; 23

··· 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; 24 25 type json = Record<string, any>; 26

+41

utils.js

··· 18 } 19 20 /** 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 21 * @template T 22 * @param {string} tag 23 * @param {string | object} params ··· 96 return html.replace(/&/g, '&amp;') 97 .replace(/</g, '&lt;') 98 .replace(/>/g,'&gt;'); 0 0 0 0 0 0 0 99 } 100 101 /** @param {string} html, @returns {string} */

··· 18 } 19 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 + /** 55 * @template T 56 * @param {string} tag 57 * @param {string | object} params ··· 130 return html.replace(/&/g, '&amp;') 131 .replace(/</g, '&lt;') 132 .replace(/>/g,'&gt;'); 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); 140 } 141 142 /** @param {string} html, @returns {string} */