src/platform/polyfills.ts

@@ -2,21 +2,7 @@
 //! 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(() => { // all target platforms supported, prepared to remove
+  import("web-animations-js").then(() => {
     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,13 +74,10 @@ 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 (
@@ -103,17 +100,7 @@ const MediaAttachmentGrid: Component<{
                   controls
                 />
               );
-            case "gifv": // Later we can handle the preview
-            return (
-              <video
-                src={item.url || undefined}
-                style={style()}
-                onLoadedMetadata={[setLoaded, true]}
-                autoplay={true}
-                controls
-              />
-            );
-
+            case "gifv":
             case "audio":
             case "unknown":
               return <div></div>;

src/timelines/ReplyEditor.tsx

@@ -1,7 +1,6 @@
 import {
   createEffect,
   createSignal,
-  createUniqueId,
   onMount,
   Show,
   type Component,
@@ -19,7 +18,6 @@ import {
   Radio,
   Switch,
   Divider,
-  CircularProgress,
 } from "@suid/material";
 import {
   ArrowDropDown,
@@ -38,7 +36,6 @@ 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";
 
@@ -180,19 +177,13 @@ 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");
@@ -208,14 +199,6 @@ 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()
       ? {
@@ -239,39 +222,6 @@ 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}
@@ -279,74 +229,51 @@ 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>
-        <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>
+        <IconButton sx={{marginRight: '-0.5em'}}>
+          <Send />
+        </IconButton>
       </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>
+      <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>
 
-        <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}
-        />
-      </Show>
+      <TootLanguagePickerDialog
+        open={langPickerOpen()}
+        onClose={() => setLangPickerOpen(false)}
+        code={language()}
+        onCodeChange={setLanguage}
+      />
     </div>
   );
 };

src/timelines/TootBottomSheet.tsx

@@ -84,7 +84,7 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  const [tootContext, {refetch: refetchContext}] = createResource(
+  const [tootContext] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).context.fetch();
@@ -171,18 +171,6 @@ 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;
@@ -249,16 +237,12 @@ const TootBottomSheet: Component = (props) => {
           </Show>
         </article>
 
-        <Show when={session()!.account}>
+        <Show when={profile()}>
           <ReplyEditor
             isTyping={isInTyping()}
             onTypingChange={setInTyping}
-            mentions={defaultMentions()}
-            profile={session().account!}
+            profile={profile()!}
             replyToDisplayName={toot()?.account?.displayName || ""}
-            client={session().client}
-            onSent={() => refetchContext()}
-            inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
           />
         </Show>
 
@@ -286,7 +270,6 @@ const TootBottomSheet: Component = (props) => {
           )}
         </For>
       </TimeSourceProvider>
-      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
     </Scaffold>
   );
 };