Compare commits

...

2 commits

6 changed files with 78 additions and 39 deletions

View file

@ -0,0 +1,28 @@
<script>
export let message;
</script>
<style>
.message {
overflow-x: none;
word-break: break-all;
}
.message-content {
color: var(--foreground-color-2);
}
.pending {
color: var(--foreground-color-3);
}
.author {
font-weight: bold;
margin-right: var(--space-xxs);
}
</style>
<div class="message">
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
</div>

View file

@ -1,27 +1,25 @@
<script> <script>
import { afterUpdate, beforeUpdate } from "svelte"; import { afterUpdate, beforeUpdate, onMount } from "svelte";
import { messagesStoreProvider } from "../../../stores.js"; import { messagesStoreProvider } from "../../../stores.js";
import Message from "./Message.svelte";
export let channelId; export let channelId;
let scrollTarget; let scrollTarget;
let shouldAutoscroll = false; let scrollAnchor;
let shouldAutoscroll = true;
let lastScrollHeight = null; let lastScrollHeight = null;
$: messages = messagesStoreProvider.getStore(channelId); $: messages = messagesStoreProvider.getStore(channelId);
beforeUpdate(() => {
shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
});
afterUpdate(() => { afterUpdate(() => {
// hacky way to preserve scroll position when messages are pushed back // hacky way to preserve scroll position when messages are pushed back
if (lastScrollHeight) { if (lastScrollHeight) {
scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight; scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
lastScrollHeight = null; lastScrollHeight = null;
return; return;
} }
if (shouldAutoscroll && scrollTarget) { if (shouldAutoscroll && scrollAnchor) {
scrollTarget.scrollTo(0, scrollTarget.scrollHeight); scrollAnchor.scrollIntoView(false);
} }
}); });
@ -29,7 +27,9 @@
const { scrollTop, offsetHeight, scrollHeight } = e.target; const { scrollTop, offsetHeight, scrollHeight } = e.target;
if ((scrollTop + offsetHeight) >= scrollHeight) { // user scrolled to bottom if ((scrollTop + offsetHeight) >= scrollHeight) { // user scrolled to bottom
messages.setIsCollectingOldMessages(true); messages.setIsCollectingOldMessages(true);
shouldAutoscroll = true;
} else { } else {
shouldAutoscroll = false;
if (scrollTop === 0) { if (scrollTop === 0) {
// load older messages if the user scrolls to the top. // load older messages if the user scrolls to the top.
// save the current scroll height if the server returned any messages, // save the current scroll height if the server returned any messages,
@ -57,31 +57,11 @@
overflow-x: hidden; overflow-x: hidden;
background-color: var(--background-color-1); background-color: var(--background-color-1);
} }
.message {
overflow-x: none;
word-break: break-all;
}
.message-content {
color: var(--foreground-color-2);
}
.pending {
color: var(--foreground-color-3);
}
.author {
font-weight: bold;
margin-right: var(--space-xxs);
}
</style> </style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }> <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)} {#each $messages as message (message.id)}
<div class="message"> <Message message={message} />
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
</div>
{/each} {/each}
<div bind:this={ scrollAnchor } />
</div> </div>

View file

@ -1,3 +1,4 @@
import logging from "./logging";
import { getAuthToken, getItem } from "./storage"; import { getAuthToken, getItem } from "./storage";
export const GatewayPayloadType = { export const GatewayPayloadType = {
@ -22,6 +23,8 @@ export const GatewayEventType = {
Close: -4 Close: -4
} }
const log = logging.logger("Gateway");
export default { export default {
ws: null, ws: null,
authenticated: false, authenticated: false,
@ -33,8 +36,6 @@ export default {
reconnectTimeout: null, reconnectTimeout: null,
handlers: new Map(), handlers: new Map(),
init() { init() {
window.__WAFFLE_GATEWAY = this;
const token = getAuthToken(); const token = getAuthToken();
if (!token) { if (!token) {
return false; return false;
@ -46,7 +47,7 @@ export default {
} }
this.open = true; this.open = true;
this.dispatch(GatewayEventType.Open, null); this.dispatch(GatewayEventType.Open, null);
console.log("[gateway] open"); log("open");
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
const payload = JSON.parse(event.data); const payload = JSON.parse(event.data);
@ -65,7 +66,7 @@ export default {
}); });
}, payload.d.pingInterval); }, payload.d.pingInterval);
console.log("[gateway] hello"); log("hello");
break; break;
} }
case GatewayPayloadType.Ready: { case GatewayPayloadType.Ready: {
@ -74,7 +75,7 @@ export default {
this.reconnectDelay = 400; this.reconnectDelay = 400;
console.log("[gateway] ready"); log("ready");
break; break;
} }
} }
@ -98,7 +99,7 @@ export default {
this.dispatch(GatewayEventType.Close, null); this.dispatch(GatewayEventType.Close, null);
console.log("[gateway] close"); log("close");
}; };
return true; return true;

21
frontend/src/logging.js Normal file
View file

@ -0,0 +1,21 @@
export default {
sinks: new Map(),
logger(sink, enabled=false) {
this.sinks.set(sink, enabled);
return (...args) => {
if (this.sinks.get(sink)) {
console.log(
`%c[${sink}]`,
"color: #8f3f71; font-weight: bold;",
...args
);
}
};
},
enableSink(sink) {
this.sinks.set(sink, true);
},
disableSink(sink) {
this.sinks.set(sink, false);
}
};

View file

@ -1,6 +1,12 @@
import App from './components/App.svelte'; import App from './components/App.svelte';
import gateway from './gateway'; import gateway from './gateway';
import { initStorageDefaults } from './storage'; import { initStorageDefaults } from './storage';
import logging from "./logging";
window.__waffle = {
logging,
gateway
};
initStorageDefaults(); initStorageDefaults();
gateway.init(); gateway.init();

View file

@ -1,8 +1,11 @@
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import gateway, { GatewayEventType } from "./gateway"; import gateway, { GatewayEventType } from "./gateway";
import logging from "./logging";
import request from "./request"; import request from "./request";
import { apiRoute } from "./storage"; import { apiRoute } from "./storage";
const storeLog = logging.logger("Store");
class Store { class Store {
constructor(value=null) { constructor(value=null) {
this._handlers = []; this._handlers = [];
@ -13,14 +16,14 @@ class Store {
const newLength = this._handlers.push(handler); const newLength = this._handlers.push(handler);
const handlerIndex = newLength - 1; const handlerIndex = newLength - 1;
handler(this.value); handler(this.value);
console.log(this.value); storeLog("Subscription initialized with value", this.value);
return () => { return () => {
this._handlers.splice(handlerIndex, 1); this._handlers.splice(handlerIndex, 1);
}; };
} }
updated() { updated() {
console.log(this.value); storeLog(`updated(): calling ${this._handlers.length} handlers - value changed`, this.value);
this._handlers.forEach(e => { this._handlers.forEach(e => {
e(this.value); e(this.value);
}); });