cory/tildefriends
4
5
Fork 1
Code Issues 28 Pull Requests 1 Actions Releases 27 Wiki Activity

ssb: Canceling loads, more mobile-friendly sidebar, and respond to channel subscription changes.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 16m30s
Details

Browse Source
This commit is contained in:
Cory McWilliams 2024-11-30 17:49:27 -05:00
parent 8e0d91dcf5
commit 3ca2b19502
4 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&ksxKqT3Bkp0Z2zV2dQU4ttVZ1k16zdWoJVv6R7m5yAQ=.sha256" "previous": "&NniJybtFHDaypdljDj1kbGIpwU8T5lX9m7+bA1YTu+M=.sha256"
} }

11
apps/ssb/tf-app.js
View File

@ -68,7 +68,10 @@ class TfElement extends LitElement {
let ids = (await tfrpc.rpc.getIdentities()) || []; let ids = (await tfrpc.rpc.getIdentities()) || [];
this.whoami = whoami ?? (ids.length ? ids[0] : undefined); this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
this.ids = ids; this.ids = ids;
await this.load_channels();
}
async load_channels() {
let channels = await tfrpc.rpc.query(` let channels = await tfrpc.rpc.query(`
SELECT SELECT
content ->> 'channel' AS channel, content ->> 'channel' AS channel,
@ -192,6 +195,14 @@ class TfElement extends LitElement {
`, `,
[JSON.stringify(this.following), id] [JSON.stringify(this.following), id]
); );
for (let message of messages) {
if (message.author == this.whoami) {
let content = JSON.parse(message.content);
if (content?.type == 'channel') {
this.load_channels();
}
}
}
if (messages && messages.length) { if (messages && messages.length) {
this.unread = [...this.unread, ...messages]; this.unread = [...this.unread, ...messages];
this.unread = this.unread.slice(this.unread.length - 1024); this.unread = this.unread.slice(this.unread.length - 1024);

10
apps/ssb/tf-tab-news-feed.js
View File

@ -146,9 +146,10 @@ class TfTabNewsFeedElement extends LitElement {
async load_more() { async load_more() {
this.loading++; this.loading++;
this.loading_canceled = false;
try { try {
let more = []; let more = [];
while (!more.length) { while (!more.length && !this.loading_canceled) {
let last_start_time = this.start_time; let last_start_time = this.start_time;
this.start_time = last_start_time - 7 * 24 * 60 * 60 * 1000; this.start_time = last_start_time - 7 * 24 * 60 * 60 * 1000;
more = await this.fetch_messages(this.start_time, last_start_time); more = await this.fetch_messages(this.start_time, last_start_time);
@ -160,6 +161,10 @@ class TfTabNewsFeedElement extends LitElement {
} }
} }
cancel_load() {
this.loading_canceled = true;
}
async decrypt(messages) { async decrypt(messages) {
console.log('decrypt'); console.log('decrypt');
let result = []; let result = [];
@ -254,6 +259,9 @@ class TfTabNewsFeedElement extends LitElement {
<button ?disabled=${this.loading} class="w3-button w3-theme-d1" @click=${this.load_more}> <button ?disabled=${this.loading} class="w3-button w3-theme-d1" @click=${this.load_more}>
Load More Load More
</button> </button>
<button class=${'w3-button w3-theme-d1' + (this.loading ? '' : ' w3-hide')} @click=${this.cancel_load}>
Cancel
</button>
<span>Showing ${new Date(this.time_range[0]).toLocaleDateString()} - ${new Date(this.time_range[1]).toLocaleDateString()}.</span> <span>Showing ${new Date(this.time_range[0]).toLocaleDateString()} - ${new Date(this.time_range[1]).toLocaleDateString()}.</span>
</p> </p>
`; `;

12
apps/ssb/tf-tab-news.js
View File

@ -122,14 +122,10 @@ class TfTabNewsElement extends LitElement {
show_sidebar() { show_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'block'; this.renderRoot.getElementById('sidebar').style.display = 'block';
this.renderRoot.getElementById('main').style.marginLeft = '2in';
this.renderRoot.getElementById('show_sidebar').style.display = 'none';
} }
hide_sidebar() { hide_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'none'; this.renderRoot.getElementById('sidebar').style.display = 'none';
this.renderRoot.getElementById('main').style.marginLeft = '0';
this.renderRoot.getElementById('show_sidebar').style.display = 'block';
} }
async channel_toggle_subscribed() { async channel_toggle_subscribed() {
@ -176,8 +172,8 @@ class TfTabNewsElement extends LitElement {
</div>`; </div>`;
} }
return html` return html`
<div class="w3-sidebar w3-bar-block w3-theme-d1" style="width: 2in; left: 0" id="sidebar"> <div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0" id="sidebar">
<div class="w3-right w3-button" @click=${this.hide_sidebar}>&times;</div> <div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div>
${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ? ${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ?
html` html`
<div class="w3-bar-item w3-theme-d2">Viewing</div> <div class="w3-bar-item w3-theme-d2">Viewing</div>
@ -193,8 +189,8 @@ class TfTabNewsElement extends LitElement {
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a> style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
`)} `)}
</div> </div>
<div style="margin-left: 2in; padding: 8px" id="main"> <div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
<div id="show_sidebar" class="w3-left w3-button" style="display: none" @click=${this.show_sidebar}>&#9776;</div> <div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
<p> <p>
<button <button
class="w3-button w3-theme-d1" class="w3-button w3-theme-d1"