Compare commits
No commits in common. "e0fe175566f582d1e5f9a20e1bc9863771a78103" and "a1bd44ffb3880036e3aaf0a850e3979ebc288236" have entirely different histories.
e0fe175566
...
a1bd44ffb3
8
package-lock.json
generated
8
package-lock.json
generated
@ -13,7 +13,7 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/svelte-fontawesome": "^0.2.0",
|
||||
"detect-it": "^4.0.1",
|
||||
"fedwave-chat-client": "^0.0.2",
|
||||
"fedwave-chat-client": "^0.0.1",
|
||||
"jose": "^4.11.2",
|
||||
"svrollbar": "^0.12.0"
|
||||
},
|
||||
@ -1605,9 +1605,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/fedwave-chat-client": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/fedwave-chat-client/-/fedwave-chat-client-0.0.2.tgz",
|
||||
"integrity": "sha512-r4rvOGVEvb09LrIrWOF4D1yEd/9duxameFlnJltOZxXagPkzS5RhJagIOKO0L+37moUHOVv/cMu3Gg+YFDA0Pg==",
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fedwave-chat-client/-/fedwave-chat-client-0.0.1.tgz",
|
||||
"integrity": "sha512-VP7OJELCx1V0c26QbgF+mLoMq4EyPLbrjIylAvS12hv2XVlmGJRqnrh6kCVHqSr6ZwirjlM/eLSDgJ2jWXMiyw==",
|
||||
"dependencies": {
|
||||
"socket.io-client": "^3.1.3"
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/svelte-fontawesome": "^0.2.0",
|
||||
"detect-it": "^4.0.1",
|
||||
"fedwave-chat-client": "^0.0.2",
|
||||
"fedwave-chat-client": "^0.0.1",
|
||||
"jose": "^4.11.2",
|
||||
"svrollbar": "^0.12.0"
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
export let size: string = 'var(--avatar-size)';
|
||||
</script>
|
||||
|
||||
<button class="avatar pa-0 border-0 shrink-0" style:--color="{color}" style:--size="{size}" on:click>
|
||||
<button class="avatar pa-0 border-0" style:--color="{color}" style:--size="{size}" on:click>
|
||||
<img src="{avatar}" alt="{`${username}'s avatar`}">
|
||||
</button>
|
||||
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { Message } from "fedwave-chat-client";
|
||||
import { room } from "./chat";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
import { room, username } from "./chat";
|
||||
export let globalMode = false;
|
||||
export let message: Message;
|
||||
export let isHeader: boolean = true;
|
||||
@ -12,11 +8,7 @@
|
||||
|
||||
<div class="message d-flex p-relative pl-8 pr-24" class:subseq="{!isHeader}">
|
||||
{#if isHeader}
|
||||
<!-- TODO: Use <Avatar/> here -->
|
||||
<div class="avatar radius-pill overflow-hidden no-select clickable"
|
||||
on:click="{() => dispatch('avatar:click', message)}"
|
||||
on:dblclick="{() => dispatch('avatar:dblclick', message)}"
|
||||
style="background-color: {message.color}">
|
||||
<div class="avatar radius-pill overflow-hidden no-select" style="background-color: {message.color}">
|
||||
<img class="w-100" alt="{message.username}'s avatar" src="{message.avatar || '/troll_haz2.png'}">
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -18,8 +18,6 @@
|
||||
let viewport: Element, contents: Element;
|
||||
let tweet: HTMLAudioElement;
|
||||
|
||||
let input: string = '';
|
||||
|
||||
shouldTweet.subscribe((should) => {
|
||||
if (should) {
|
||||
if (tweet) {
|
||||
@ -93,10 +91,6 @@
|
||||
bind:viewport
|
||||
bind:contents
|
||||
on:scroll={onScroll}
|
||||
on:avatar:click={(e) => (
|
||||
(input += ` @${e.detail.username}#${e.detail.unum} `), (input = input.trim())
|
||||
)}
|
||||
on:avatar:dblclick={(e) => (input = `/w ${e.detail.username}#${e.detail.unum} `)}
|
||||
/>
|
||||
{#if !stickToBottom}
|
||||
<FAB --background={'var(--base-700)'} on:click={() => scrollToBottom()}
|
||||
@ -104,7 +98,7 @@
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<Input bind:input />
|
||||
<Input />
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { tick } from "svelte"
|
||||
import { send, whisper } from "./chat";
|
||||
import { send } from "./chat";
|
||||
|
||||
export let input = "";
|
||||
let input = "";
|
||||
async function keydown(e: KeyboardEvent) {
|
||||
if(e.key === "Enter") {
|
||||
console.log(e);
|
||||
const tokens = input.trim().split(" ");
|
||||
|
||||
if(tokens[0] === '/w') {
|
||||
const who = tokens[1];
|
||||
const m = tokens.slice(2).join(' ');
|
||||
whisper(who, m);
|
||||
} else {
|
||||
send(input);
|
||||
}
|
||||
send(input);
|
||||
e.preventDefault();
|
||||
await tick();
|
||||
input = "";
|
||||
|
||||
@ -12,10 +12,7 @@
|
||||
<div class="viewport" bind:this={viewport} on:scroll>
|
||||
<div class="contents" bind:this={contents}>
|
||||
{#each messages as message}
|
||||
<ChatMessage message={message.m}
|
||||
isHeader={message.isHeader}
|
||||
globalMode={showChannel}
|
||||
on:avatar:click on:avatar:dblclick />
|
||||
<ChatMessage message={message.m} isHeader={message.isHeader} globalMode={showChannel} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,54 +3,19 @@
|
||||
export let mobile = false;
|
||||
|
||||
import { FontAwesomeIcon as FA } from '@fortawesome/svelte-fontawesome';
|
||||
import { faHome, faPerson, faCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { channels, room } from './chat';
|
||||
import Avatar from './Avatar.svelte';
|
||||
|
||||
let selected = "channels";
|
||||
import { faHome, faPerson } from '@fortawesome/free-solid-svg-icons';
|
||||
</script>
|
||||
|
||||
<div class="sidebar h-100vh d-flex" bind:clientWidth class:mobile="{mobile}">
|
||||
<div class="overlay" />
|
||||
<div class="servers shrink-0 d-flex col">
|
||||
<button
|
||||
class:selected="{selected === 'whispers'}"
|
||||
on:click="{() => selected = 'whispers'}">
|
||||
<div class="servers d-flex col">
|
||||
<button class="selected">
|
||||
<FA size="2x" icon="{faPerson}" />
|
||||
</button>
|
||||
<button
|
||||
class:selected="{selected === 'channels'}"
|
||||
on:click="{() => selected = 'channels'}">
|
||||
<button>
|
||||
<FA size="2x" icon="{faHome}" />
|
||||
</button>
|
||||
</div>
|
||||
{#if selected === 'whispers'}
|
||||
<div class="whispers grow-1 mw-0"></div>
|
||||
{:else if selected === 'channels'}
|
||||
<div class="channels grow-1 d-flex col mw-0 py-8">
|
||||
{#each $channels.sort((a, b) => b.viewCount - a.viewCount) as channel}
|
||||
<a href="{channel.name}"
|
||||
class="channel d-flex align-center mb-8 mx-8 pa-6 radius-12"
|
||||
class:selected="{$room === channel.name.toLowerCase()}">
|
||||
<Avatar username="{channel.name}"
|
||||
avatar="{channel.avatar}" />
|
||||
<div class="channel-name mw-0 ellipsis ml-8">
|
||||
{channel.name}
|
||||
</div>
|
||||
{#if false && channel.live}
|
||||
<div class="channel-live ml-2 mt-8 color-red">
|
||||
<FA icon="{faCircle}" size="xs" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="spacer"/>
|
||||
<div class="channel-viewers px-6 py-2 radius-pill">
|
||||
{channel.viewCount + channel.viewCountRTC}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@ -83,15 +48,6 @@
|
||||
pointer-events: var(--should-display);
|
||||
}
|
||||
|
||||
.channel-live {
|
||||
align-self: normal;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.channel-viewers {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.servers {
|
||||
width: var(--sidebar-server-select-width);
|
||||
background-color: var(--base-500);
|
||||
@ -119,29 +75,6 @@
|
||||
background-color: var(--base-700);
|
||||
color: var(--base-300);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: var(--base-400);
|
||||
color: var(--base-700);
|
||||
|
||||
transition-property: background-color, color, border-radius;
|
||||
transition-duration: 80ms;
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--base-300);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--base-700);
|
||||
color: var(--base-300);
|
||||
|
||||
& .channel-viewers {
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,10 +20,6 @@ export function send(m: string | OutgoingMessage) {
|
||||
chat.sendMessage(m);
|
||||
}
|
||||
|
||||
export function whisper(who: string, m: string) {
|
||||
chat.sendWhisper(who, m);
|
||||
}
|
||||
|
||||
let setConnected: Subscriber<boolean> | undefined;
|
||||
export const connected = readable<boolean>(false, (setf) => {
|
||||
setConnected = setf;
|
||||
@ -101,46 +97,10 @@ globalMode.subscribe((v) => {
|
||||
|
||||
export const shouldTweet = writable(false);
|
||||
|
||||
export type User = {
|
||||
color: string;
|
||||
page: string;
|
||||
username: string;
|
||||
unum: number;
|
||||
};
|
||||
|
||||
export type Channel = Record<
|
||||
| 'avatar'
|
||||
| 'channel'
|
||||
| 'cover'
|
||||
| 'desc'
|
||||
| 'name'
|
||||
| 'src'
|
||||
| 'thumbnail'
|
||||
| 'title'
|
||||
| 'type'
|
||||
| 'url'
|
||||
| 'user',
|
||||
string
|
||||
> &
|
||||
Record<'live' | 'nsfw', boolean> &
|
||||
Record<'viewCount' | 'viewCountRTC', number> & {
|
||||
users: Record<string, { watching: string[]; data: User }>[];
|
||||
};
|
||||
|
||||
let setChannels: Subscriber<any> | undefined;
|
||||
export const channels = readable<Channel[]>(chat.channelViewers, (setf) => {
|
||||
setChannels = setf;
|
||||
return () => {
|
||||
setChannels = undefined;
|
||||
};
|
||||
});
|
||||
chat.onUpdateUsernames = (vs) => setChannels?.(vs) as any;
|
||||
|
||||
// Essentially a shared_ptr idiom. When nobody is subscribed to this, the chat
|
||||
// d/c's.
|
||||
export const chat_lock = readable(null, () => {
|
||||
const release_connected = connected.subscribe(() => {});
|
||||
const release_channels = channels.subscribe(() => {});
|
||||
|
||||
const creds = get(credentials);
|
||||
|
||||
@ -151,7 +111,6 @@ export const chat_lock = readable(null, () => {
|
||||
setConnected?.(false);
|
||||
|
||||
release_connected();
|
||||
release_channels();
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -37,10 +37,6 @@
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basis-0 {
|
||||
flex-basis: 0;
|
||||
}
|
||||
@ -66,10 +62,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $i in (block, inline, inline-block, flex, grid, contents) {
|
||||
.d-#{$i} {
|
||||
display: #{$i};
|
||||
}
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.col {
|
||||
@ -88,16 +82,9 @@
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.mw-0 { min-width: 0 }
|
||||
|
||||
.w-100 { width: 100%; }
|
||||
.h-100 { height: 100%; }
|
||||
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
/* hide scrollbar */
|
||||
-ms-overflow-style: none !important;
|
||||
|
||||
@ -60,9 +60,7 @@
|
||||
updateCredentials(undefined);
|
||||
}
|
||||
|
||||
let viewportWidth;
|
||||
let mobile: boolean;
|
||||
$: mobile = (primaryInput === 'touch' || viewportWidth <= 550);
|
||||
let mobile = primaryInput === 'touch';
|
||||
|
||||
let scrolledToTop = false, scrolledToBottom = false,
|
||||
scrolledToLeft = false, scrolledToRight = false;
|
||||
@ -156,7 +154,6 @@
|
||||
</script>
|
||||
|
||||
<svelte:body use:updateTheme="{$theme}" />
|
||||
<svelte:window bind:innerWidth={viewportWidth}/>
|
||||
|
||||
<div class="container hide-scrollbar snap-y h-100vh"
|
||||
class:mobile="{mobile}"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user