ReplyEditor: supports reply

src/platform/polyfills.ts

@@ -2,7 +2,21 @@
 //! It recommended to include the module by <script> tag.
 if (!document.body.animate) {
   // @ts-ignore: this file is polyfill, no exposed decls
-  import("web-animations-js").then(() => {
+  import("web-animations-js").then(() => { // all target platforms supported, prepared to remove
     console.warn("web animation polyfill is included");
   });
 }
+
+if (!window.crypto.randomUUID) { // Chrome/Edge 92+
+  // https://stackoverflow.com/a/2117523/2800218
+  // LICENSE: https://creativecommons.org/licenses/by-sa/4.0/legalcode
+  window.crypto.randomUUID =
+    function randomUUID(): `${string}-${string}-${string}-${string}-${string}` {
+      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
+        (
+          +c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
+        ).toString(16),
+      ) as `${string}-${string}-${string}-${string}-${string}`;
+    };
+}

src/timelines/MediaAttachmentGrid.tsx

@@ -64,7 +64,7 @@ const MediaAttachmentGrid: Component<{
     >
       <For each={props.attachments}>
         {(item, index) => {
-          const [loaded, setLoaded] = createSignal(false)
+          const [loaded, setLoaded] = createSignal(false);
           const width = item.meta?.small?.width;
           const height = item.meta?.small?.height;
           const aspectRatio = item.meta?.small?.aspect;
@@ -74,10 +74,13 @@ const MediaAttachmentGrid: Component<{
             width && height && height > maxHeight
               ? maxHeight / (aspectRatio ?? 1)
               : width;
-          const style = () => loaded() ? undefined : {
-            width: realWidth ? `${realWidth}px` : undefined,
-            height: realHeight ? `${realHeight}px` : undefined,
-          };
+          const style = () =>
+            loaded()
+              ? undefined
+              : {
+                  width: realWidth ? `${realWidth}px` : undefined,
+                  height: realHeight ? `${realHeight}px` : undefined,
+                };
           switch (item.type) {
             case "image":
               return (
@@ -100,7 +103,17 @@ const MediaAttachmentGrid: Component<{
                   controls
                 />
               );
-            case "gifv":
+            case "gifv": // Later we can handle the preview
+            return (
+              <video
+                src={item.url || undefined}
+                style={style()}
+                onLoadedMetadata={[setLoaded, true]}
+                autoplay={true}
+                controls
+              />
+            );
+
             case "audio":
             case "unknown":
               return <div></div>;

src/timelines/ReplyEditor.tsx

@@ -1,6 +1,7 @@
 import {
   createEffect,
   createSignal,
+  createUniqueId,
   onMount,
   Show,
   type Component,
@@ -18,6 +19,7 @@ import {
   Radio,
   Switch,
   Divider,
+  CircularProgress,
 } from "@suid/material";
 import {
   ArrowDropDown,
@@ -36,6 +38,7 @@ import BottomSheet from "../material/BottomSheet";
 import { useLanguage } from "../platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
+import type { mastodon } from "masto";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
@@ -177,13 +180,19 @@ const TootLanguagePickerDialog: Component<{
 const ReplyEditor: Component<{
   profile: Account;
   replyToDisplayName: string;
+  mentions?: readonly string[];
   isTyping?: boolean;
   onTypingChange: (value: boolean) => void;
+  client?: mastodon.rest.Client;
+  inReplyToId?: string;
+  onSent?: (status: mastodon.v1.Status) => void;
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
+  let sendKey: string | undefined;
 
   const typing = () => props.isTyping;
   const setTyping = (v: boolean) => props.onTypingChange(v);
+  const [sending, setSending] = createSignal(false);
   const [visibility, setVisibility] = createSignal<TootVisibility>("public");
   const [permPicker, setPermPicker] = createSignal(false);
   const [language, setLanguage] = createSignal("en");
@@ -199,6 +208,14 @@ const ReplyEditor: Component<{
     makeEventListener(inputRef, "focus", () => setTyping(true));
   });
 
+  createEffect(() => {
+    if (inputRef.value !== "") return;
+    if (props.mentions) {
+      const prepText = props.mentions.join(" ") + " ";
+      inputRef.value = prepText;
+    }
+  });
+
   const containerStyle = () =>
     typing() || permPicker()
       ? {
@@ -222,6 +239,39 @@ const ReplyEditor: Component<{
     }
   };
 
+  const getOrGenSendKey = () => {
+    if (sendKey === undefined) {
+      sendKey = window.crypto.randomUUID();
+    }
+    return sendKey;
+  };
+
+  const send = async () => {
+    setSending(true);
+    try {
+      const status = await props.client!.v1.statuses.create(
+        {
+          status: inputRef.value,
+          language: language(),
+          visibility: visibility(),
+          inReplyToId: props.inReplyToId,
+        },
+        {
+          requestInit: {
+            headers: {
+              ["Idempotency-Key"]: getOrGenSendKey(),
+            },
+          },
+        },
+      );
+
+      props.onSent?.(status);
+      inputRef.value = "";
+    } finally {
+      setSending(false);
+    }
+  };
+
   return (
     <div
       class={tootComposers.composer}
@@ -229,51 +279,74 @@ const ReplyEditor: Component<{
       onClick={(e) => inputRef.focus()}
     >
       <div class={tootComposers.replyInput}>
-        <Avatar src={props.profile.inf?.avatar} sx={{marginLeft: '-0.25em'}} />
+        <Avatar
+          src={props.profile.inf?.avatar}
+          sx={{ marginLeft: "-0.25em" }}
+        />
         <textarea
           ref={inputRef!}
           placeholder={`Reply to ${props.replyToDisplayName}...`}
           style={{ width: "100%", border: "none" }}
+          disabled={sending()}
         ></textarea>
-        <IconButton sx={{marginRight: '-0.5em'}}>
-          <Send />
-        </IconButton>
+        <Show when={props.client}>
+          <Show
+            when={!sending()}
+            fallback={
+              <div style={{ padding: "8px" }}>
+                <CircularProgress
+                  sx={{
+                    marginRight: "-0.5em",
+                    width: "1.5rem",
+                    height: "1.5rem",
+                  }}
+                />
+              </div>
+            }
+          >
+            <IconButton sx={{ marginRight: "-0.5em" }} onClick={send}>
+              <Send />
+            </IconButton>
+          </Show>
+        </Show>
       </div>
 
-      <div
-        style={{
-          display: "flex",
-          "justify-content": "flex-end",
-          "margin-top": "8px",
-          gap: "16px",
-          "flex-flow": "row wrap",
-        }}
-      >
-        <Button onClick={[setLangPickerOpen, true]}>
-          <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
-          {iso639_1.getNativeName(language())}
-          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
-        </Button>
-        <Button onClick={[setPermPicker, true]}>
-          <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
-          {visibilityText()}
-          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
-        </Button>
-      </div>
+      <Show when={typing()}>
+        <div
+          style={{
+            display: "flex",
+            "justify-content": "flex-end",
+            "margin-top": "8px",
+            gap: "16px",
+            "flex-flow": "row wrap",
+          }}
+        >
+          <Button onClick={[setLangPickerOpen, true]} disabled={sending()}>
+            <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
+            {iso639_1.getNativeName(language())}
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          </Button>
+          <Button onClick={[setPermPicker, true]} disabled={sending()}>
+            <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
+            {visibilityText()}
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          </Button>
+        </div>
 
-      <TootVisibilityPickerDialog
-        open={permPicker()}
-        onClose={() => setPermPicker(false)}
-        visibility={visibility()}
-        onVisibilityChange={setVisibility}
-      />
+        <TootVisibilityPickerDialog
+          open={permPicker()}
+          onClose={() => setPermPicker(false)}
+          visibility={visibility()}
+          onVisibilityChange={setVisibility}
+        />
 
-      <TootLanguagePickerDialog
-        open={langPickerOpen()}
-        onClose={() => setLangPickerOpen(false)}
-        code={language()}
-        onCodeChange={setLanguage}
-      />
+        <TootLanguagePickerDialog
+          open={langPickerOpen()}
+          onClose={() => setLangPickerOpen(false)}
+          code={language()}
+          onCodeChange={setLanguage}
+        />
+      </Show>
     </div>
   );
 };

src/timelines/TootBottomSheet.tsx

@@ -84,7 +84,7 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  const [tootContext] = createResource(
+  const [tootContext, {refetch: refetchContext}] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).context.fetch();
@@ -171,6 +171,18 @@ const TootBottomSheet: Component = (props) => {
     });
   };
 
+  const defaultMentions = () => {
+    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account
+    if (!tootAcct) {
+      return
+    }
+
+    const others = ancestors().map(x => x.account)
+
+    const values = [tootAcct, ...others].map(x => `@${x.acct}`)
+    return Array.from(new Set(values).keys())
+  }
+
   css`
     .name :global(img) {
       max-height: 1em;
@@ -237,12 +249,16 @@ const TootBottomSheet: Component = (props) => {
           </Show>
         </article>
 
-        <Show when={profile()}>
+        <Show when={session()!.account}>
           <ReplyEditor
             isTyping={isInTyping()}
             onTypingChange={setInTyping}
-            profile={profile()!}
+            mentions={defaultMentions()}
+            profile={session().account!}
             replyToDisplayName={toot()?.account?.displayName || ""}
+            client={session().client}
+            onSent={() => refetchContext()}
+            inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
           />
         </Show>
 
@@ -270,6 +286,7 @@ const TootBottomSheet: Component = (props) => {
           )}
         </For>
       </TimeSourceProvider>
+      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
     </Scaffold>
   );
 };