Merge branch 'master' into 'cleanup'

# Conflicts: # src/components/common/LocaleSelector.tsx
2021-07-05 10:17:57 +00:00
parent 9deeea3884 b2d73f2382
commit c4b9950514
28 changed files with 322 additions and 208 deletions
--- a/src/components/common/LocaleSelector.tsx
+++ b/src/components/common/LocaleSelector.tsx
@@ -1,9 +1,9 @@
 import ComboBox from "../ui/ComboBox";
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { WithDispatcher } from "../../redux/reducers";
 import { Language, LanguageEntry, Languages } from "../../context/Locale";

-type Props = WithDispatcher & {
+type Props = {
    locale: string;
 };

@@ -12,8 +12,7 @@ export function LocaleSelector(props: Props) {
        <ComboBox
            value={props.locale}
            onChange={e =>
-                props.dispatcher &&
-                props.dispatcher({
+                dispatch({
                    type: "SET_LOCALE",
                    locale: e.currentTarget.value as Language
                })
@@ -37,6 +36,5 @@ export default connectState(
        return {
            locale: state.locale
        };
-    },
-    true
+    }
 );
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -1,11 +1,11 @@
 import { ulid } from "ulid";
 import { Text } from "preact-i18n";
-import Tooltip, { PermissionTooltip } from "../Tooltip";
 import { Channel } from "revolt.js";
 import styled from "styled-components";
+import { dispatch } from "../../../redux";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
-import { X } from '@styled-icons/boxicons-regular';
+import { PermissionTooltip } from "../Tooltip";
 import { Send } from '@styled-icons/boxicons-solid';
 import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
@@ -13,7 +13,6 @@ import { useTranslation } from "../../../lib/i18n";
 import { Reply } from "../../../redux/reducers/queue";
 import { connectState } from "../../../redux/connector";
 import { SoundContext } from "../../../context/Settings";
-import { WithDispatcher } from "../../../redux/reducers";
 import { takeError } from "../../../context/revoltjs/util";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
@@ -30,9 +29,8 @@ import { ShieldX } from "@styled-icons/boxicons-regular";

 import ReplyBar from "./bars/ReplyBar";
 import FilePreview from './bars/FilePreview';
-import { Styleshare } from "@styled-icons/simple-icons";

-type Props = WithDispatcher & {
+type Props = {
    channel: Channel;
    draft?: string;
 };
@@ -77,7 +75,7 @@ const Action = styled.div`
 // ! FIXME: add to app config and load from app config
 export const CAN_UPLOAD_AT_ONCE = 5;

-function MessageBox({ channel, draft, dispatcher }: Props) {
+function MessageBox({ channel, draft }: Props) {
    const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
    const [ typing, setTyping ] = useState<boolean | number>(false);
    const [ replies, setReplies ] = useState<Reply[]>([]);
@@ -102,13 +100,13 @@ function MessageBox({ channel, draft, dispatcher }: Props) {

    function setMessage(content?: string) {
        if (content) {
-            dispatcher({
+            dispatch({
                type: "SET_DRAFT",
                channel: channel._id,
                content
            });
        } else {
-            dispatcher({
+            dispatch({
                type: "CLEAR_DRAFT",
                channel: channel._id
            });
@@ -148,7 +146,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
        playSound('outbound');

        const nonce = ulid();
-        dispatcher({
+        dispatch({
            type: "QUEUE_ADD",
            nonce,
            channel: channel._id,
@@ -171,7 +169,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                replies
            });
        } catch (error) {
-            dispatcher({
+            dispatch({
                type: "QUEUE_FAIL",
                error: takeError(error),
                nonce
@@ -383,7 +381,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
    )
 }

-export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
+export default connectState<Omit<Props, "dispatch" | "draft">>(MessageBox, (state, { channel }) => {
    return {
        draft: state.drafts[channel._id]
    }
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -1,14 +1,13 @@
 .attachment {
+    display: grid;
+    grid-auto-columns: min(100%, 480px);
+    grid-auto-flow: row dense;
+    
+    width: max-content;
+    
    border-radius: 6px;
    margin: .125rem 0 .125rem;
    
-    height: auto;
-    
-    max-height: 640px;
-    max-width: min(480px, 100%);
-    
-    object-fit: contain;
-    
    &[data-spoiler="true"] {
        filter: blur(30px);
        pointer-events: none;
@@ -20,6 +19,16 @@

    &.image {
        cursor: pointer;
+        
+        max-height: 640px;
+        max-width: min(480px, 100%);
+        
+        object-fit: contain;
+
+        &.loaded {
+            width: auto;
+            height: auto;
+        }
    }

    &.video {        
@@ -29,8 +38,15 @@
        }

        video {
-            width: 100%;
            border-radius: 0 0 6px 6px;
+            
+            max-height: 640px;
+            max-width: min(480px, 100%);
+        }
+
+        video.loaded {
+            width: auto;
+            height: auto;
        }
    }

@@ -59,11 +75,12 @@
    }

    &.text {
-        display: flex;
-        overflow: hidden;
+        width: 100%;
        max-width: 800px;
+        overflow: hidden;
+        grid-auto-columns: unset;
+
        border-radius: 6px;
-        flex-direction: column;

        .textContent {
            height: 140px;
@@ -92,35 +109,48 @@
    }
 }

+.actions.imageAction {
+    grid-template: 
+        "name icon download" auto
+        "size icon download" auto
+        / minmax(20px, 1fr) min-content min-content;
+}
+
 .actions {
-    gap: 8px;
-    padding: 8px;
-    display: flex;
-    overflow: none;
-    max-width: 100%;
+    display: grid;
+    grid-template: 
+        "icon name download" auto
+        "icon size download" auto
+        / min-content minmax(20px, 1fr) min-content;
+
    align-items: center;
-    flex-direction: row;
+    column-gap: 8px;
+    
+    width: 100%;
+    padding: 8px;
+    overflow: none;
+
    color: var(--foreground);
    background: var(--secondary-background);

-    > svg {
-        flex-shrink: 0;
+    span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
    }
    
-    .info {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
+    .filesize {
+        grid-area: size;

-        > span {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-        }
+        font-size: 10px;
+        color: var(--secondary-foreground);
+    }

-        .filesize {
-            font-size: 10px;
-            color: var(--secondary-foreground);
-        }
+    .downloadIcon {
+        grid-area: download;
+    }
+
+    .iconType {
+        grid-area: icon;
    }
 }
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -21,6 +21,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
    const { openScreen } = useIntermediate();
    const { filename, metadata } = attachment;
    const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
+    const [ loaded, setLoaded ] = useState(false)

    const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);

@@ -44,7 +45,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                        height={metadata.height}
                        data-spoiler={spoiler}
                        data-has-content={hasContent}
-                        className={classNames(styles.attachment, styles.image)}
+                        className={classNames(styles.attachment, styles.image, loaded && styles.loaded)}
                        onClick={() =>
                            openScreen({ id: "image_viewer", attachment })
                        }
@@ -52,6 +53,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                            ev.button === 1 &&
                            window.open(url, "_blank")
                        }
+                        onLoad={() => setLoaded(true)}
                    />
                </div>
            );
@@ -85,11 +87,15 @@ export default function Attachment({ attachment, hasContent }: Props) {
                        <AttachmentActions attachment={attachment} />
                        <video
                            src={url}
+                            width={metadata.width}
+                            height={metadata.height}
+                            className={classNames(loaded && styles.loaded)}
                            controls
                            onMouseDown={ev =>
                                ev.button === 1 &&
                                window.open(url, "_blank")
                            }
+                            onLoadedMetadata={() => setLoaded(true)}
                        />
                    </div>
                </div>
--- a/src/components/common/messaging/attachments/AttachmentActions.tsx
+++ b/src/components/common/messaging/attachments/AttachmentActions.tsx
@@ -5,6 +5,7 @@ import { Attachment } from "revolt.js/dist/api/objects";
 import { determineFileSize } from '../../../../lib/fileSize';
 import { AppContext } from '../../../../context/revoltjs/RevoltClient';
 import { Download, LinkExternal, File, Headphone, Video } from '@styled-icons/boxicons-regular';
+import classNames from 'classnames';

 interface Props {
    attachment: Attachment;
@@ -24,17 +25,15 @@ export default function AttachmentActions({ attachment }: Props) {
    switch (metadata.type) {
        case 'Image':
            return (
-                <div className={styles.actions}>
-                    <div className={styles.info}>
-                        <span className={styles.filename}>{filename}</span>
-                        <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
-                    </div>
-                    <a href={open_url} target="_blank">
+                <div className={classNames(styles.actions, styles.imageAction)}>
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
+                    <a href={open_url} target="_blank" className={styles.iconType} >
                        <IconButton>
                            <LinkExternal size={24} />
                        </IconButton>
                    </a>
-                    <a href={download_url} download target="_blank">
+                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -43,13 +42,11 @@ export default function AttachmentActions({ attachment }: Props) {
            )
        case 'Audio':
            return (
-                <div className={styles.actions}>
-                    <Headphone size={24} />
-                    <div className={styles.info}>
-                        <span className={styles.filename}>{filename}</span>
-                        <span className={styles.filesize}>{filesize}</span>
-                    </div>
-                    <a href={download_url} download target="_blank">
+                <div className={classNames(styles.actions, styles.audioAction)}>
+                    <Headphone size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{filesize}</span>
+                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -58,13 +55,11 @@ export default function AttachmentActions({ attachment }: Props) {
            )
        case 'Video':
            return (
-                <div className={styles.actions}>
-                    <Video size={24} />
-                    <div className={styles.info}>
-                        <span className={styles.filename}>{filename}</span>
-                        <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
-                    </div>
-                    <a href={download_url} download target="_blank">
+                <div className={classNames(styles.actions, styles.videoAction)}>
+                    <Video size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
+                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -74,12 +69,10 @@ export default function AttachmentActions({ attachment }: Props) {
        default:
            return (
                <div className={styles.actions}>
-                    <File size={24} />
-                    <div className={styles.info}>
-                        <span className={styles.filename}>{filename}</span>
-                        <span className={styles.filesize}>{filesize}</span>
-                    </div>
-                    <a href={download_url} download target="_blank">
+                    <File size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{filesize}</span>
+                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -3,12 +3,12 @@ import { useContext, useEffect } from "preact/hooks";
 import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";

 import Category from '../../ui/Category';
+import { dispatch } from "../../../redux";
 import PaintCounter from "../../../lib/PaintCounter";
 import UserHeader from "../../common/user/UserHeader";
 import { Channels } from "revolt.js/dist/api/objects";
 import { connectState } from "../../../redux/connector";
 import ConnectionStatus from '../items/ConnectionStatus';
-import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import { mapChannelWithUnread, useUnreads } from "./common";
@@ -23,7 +23,7 @@ import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hook

 import placeholderSVG from "../items/placeholder.svg";

-type Props = WithDispatcher & {
+type Props = {
    unreads: Unreads;
 }

@@ -43,7 +43,7 @@ function HomeSidebar(props: Props) {
    useEffect(() => {
        if (!channel) return;

-        props.dispatcher({
+        dispatch({
            type: 'LAST_OPENED_SET',
            parent: 'home',
            child: channel
@@ -148,6 +148,5 @@ export default connectState(
            unreads: state.unreads
        };
    },
-    true,
    true
 );
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -2,7 +2,6 @@ import { Redirect, useParams } from "react-router";
 import { ChannelButton } from "../items/ButtonItem";
 import { Channels } from "revolt.js/dist/api/objects";
 import { Unreads } from "../../../redux/reducers/unreads";
-import { WithDispatcher } from "../../../redux/reducers";
 import { useChannels, useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
 import { mapChannelWithUnread, useUnreads } from "./common";
 import ConnectionStatus from '../items/ConnectionStatus';
@@ -13,6 +12,7 @@ import { attachContextMenu } from 'preact-context-menu';
 import ServerHeader from "../../common/ServerHeader";
 import { useEffect } from "preact/hooks";
 import Category from "../../ui/Category";
+import { dispatch } from "../../../redux";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import CollapsibleSection from "../../common/CollapsibleSection";

@@ -43,7 +43,7 @@ const ServerList = styled.div`
    }
 `;

-function ServerSidebar(props: Props & WithDispatcher) {
+function ServerSidebar(props: Props) {
    const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
    const ctx = useForceUpdate();

@@ -61,7 +61,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
    useEffect(() => {
        if (!channel_id) return;

-        props.dispatcher({
+        dispatch({
            type: 'LAST_OPENED_SET',
            parent: server_id!,
            child: channel_id!
@@ -130,6 +130,5 @@ export default connectState(
        return {
            unreads: state.unreads
        };
-    },
-    true
+    }
 );
--- a/src/components/navigation/left/common.ts
+++ b/src/components/navigation/left/common.ts
@@ -1,15 +1,15 @@
 import { Channel } from "revolt.js";
+import { dispatch } from "../../../redux";
 import { useLayoutEffect } from "preact/hooks";
-import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
 import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";

-type UnreadProps = WithDispatcher & {
+type UnreadProps = {
    channel: Channel;
    unreads: Unreads;
 }

-export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
+export function useUnreads({ channel, unreads }: UnreadProps, context?: HookContext) {
    const ctx = useForceUpdate(context);

    useLayoutEffect(() => {
@@ -23,7 +23,7 @@ export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, contex
            if (target.last_message) {
                const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
                if (!unread || (unread && message.localeCompare(unread) > 0)) {
-                    dispatcher({
+                    dispatch({
                        type: "UNREADS_MARK_READ",
                        channel: channel._id,
                        message
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -2,7 +2,6 @@ import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

 import { User } from "revolt.js";
-import Details from "../../../components/ui/Details";
 import Category from "../../ui/Category";
 import { useParams } from "react-router";
 import { UserButton } from "../items/ButtonItem";
@@ -15,6 +14,7 @@ import { AppContext, ClientStatus, StatusContext } from "../../../context/revolt
 import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";

 import placeholderSVG from "../items/placeholder.svg";
+import Preloader from "../../ui/Preloader";

 interface Props {
    ctx: HookContext
@@ -126,6 +126,7 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
 export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
    const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
+    const { openScreen } = useIntermediate();
    const status = useContext(StatusContext);
    const client = useContext(AppContext);

@@ -180,17 +181,16 @@ export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channel
                        </span>
                    }
                />
-                {users.length === 0 && <img src={placeholderSVG} />}
+                {!members && <Preloader type="ring" />}
+                {members && users.length === 0 && <img src={placeholderSVG} />}
                {users.map(
                    user =>
                        user && (
-                            // <LinkProfile user_id={user._id}>
-                                <UserButton
-                                    key={user._id}
-                                    user={user}
-                                    context={channel}
-                                />
-                            // </LinkProfile>
+                            <UserButton
+                                key={user._id}
+                                user={user}
+                                context={channel}
+                                onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
                        )
                )}
            </GenericSidebarList>