src/timelines/MediaAttachmentGrid.css

@@ -6,34 +6,23 @@
   gap: 4px;
   contain: layout style;
 
-  >.cell {
+  > :where(img, video) {
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
+    object-fit: contain;
     max-width: 100%;
-    contain: strict;
-    content-visibility: auto;
     background-color: var(--media-color-accent, var(--tutu-color-surface-d));
     border-radius: 2px;
     border: 1px solid var(--tutu-color-surface-d);
     transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
+    contain: strict;
+    content-visibility: auto;
 
     &:hover,
     &:focus-visible {
       outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
       border-color: var(--media-color-accent, var(--tutu-color-surface-d));
     }
-
-    & > :where(img, video, .sensitive-placeholder) {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-
-    & > .sensitive-placeholder {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
   }
 }

src/timelines/MediaAttachmentGrid.tsx

@@ -1,6 +1,7 @@
 import type { mastodon } from "masto";
 import {
   type Component,
+  For,
   Index,
   Match,
   Switch,
@@ -8,7 +9,6 @@ import {
   createRenderEffect,
   createSignal,
   onCleanup,
-  untrack,
 } from "solid-js";
 import MediaViewer from "./MediaViewer";
 import { render } from "solid-js/web";
@@ -21,8 +21,6 @@ import { $settings } from "../settings/stores";
 import { averageColorHex } from "../platform/blurhash";
 import "./MediaAttachmentGrid.css";
 import cardStyle from "../material/cards.module.css";
-import { Preview } from "@suid/icons-material";
-import { IconButton } from "@suid/material";
 
 type ElementSize = { width: number; height: number };
 
@@ -46,30 +44,23 @@ function constraintedSize(
   };
 }
 
-function isolateCallback(event: Event) {
-  if (event.target !== event.currentTarget) {
-    event.stopPropagation();
-  }
-}
-
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
-  sensitive?: boolean;
 }> = (props) => {
   const [rootRef, setRootRef] = createSignal<HTMLElement>();
   const [viewerIndex, setViewerIndex] = createSignal<number>();
   const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const settings = useStore($settings);
   const windowSize = useWindowSize();
-  const [reveal, setReveal] = createSignal([] as number[]);
 
-  createRenderEffect(() => {
+  createRenderEffect((lastDispose?: () => void) => {
+    lastDispose?.();
     const vidx = viewerIndex();
     if (typeof vidx === "undefined") return;
     const container = document.createElement("div");
     container.setAttribute("role", "presentation");
     document.body.appendChild(container);
-    const dispose = render(() => {
+    return render(() => {
       onCleanup(() => {
         document.body.removeChild(container);
       });
@@ -84,8 +75,6 @@ const MediaAttachmentGrid: Component<{
         />
       );
     }, container);
-
-    onCleanup(dispose);
   });
 
   const openViewerFor = (index: number) => {
@@ -138,88 +127,73 @@ const MediaAttachmentGrid: Component<{
       accentColor ? { "--media-color-accent": accentColor } : {},
     );
   };
-
-  const isReveal = (idx: number) => {
-    return reveal().includes(idx);
-  };
-
-  const addReveal = (idx: number) => {
-    if (!untrack(() => isReveal(idx))) {
-      setReveal((x) => [...x, idx]);
-    }
-  };
   return (
     <section
       ref={setRootRef}
       class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
-      classList={{
-        sensitive: props.sensitive,
-      }}
       style={{ "column-count": columnCount() }}
-      onClick={isolateCallback}
+      onClick={(e) => {
+        if (e.target !== e.currentTarget) {
+          e.stopImmediatePropagation();
+        }
+      }}
     >
       <Index each={props.attachments}>
         {(item, index) => {
           const itemType = () => item().type;
           return (
-            <div
+            <Switch>
-              class="cell"
+              <Match when={itemType() === "image"}>
-              role="presentation"
+                <img
-              style={itemStyle(item())}
+                  data-sort={index}
-              data-sort={index}
+                  data-media-type={item().type}
-              data-media-type={item().type}
+                  src={item().previewUrl}
-            >
+                  width={item().meta?.small?.width}
-              <Switch>
+                  height={item().meta?.small?.height}
-                <Match when={props.sensitive && !isReveal(index)}>
+                  alt={item().description || undefined}
-                  <div class="sensitive-placeholder">
+                  onClick={[openViewerFor, index]}
-                    <IconButton
+                  loading="lazy"
-                      color="inherit"
+                  style={itemStyle(item())}
-                      size="large"
+                ></img>
-                      onClick={[addReveal, index]}
+              </Match>
-                      aria-label="Reveal this media"
+              <Match when={itemType() === "video"}>
-                    >
+                <video
-                      <Preview />
+                  data-sort={index}
-                    </IconButton>
+                  data-media-type={item().type}
-                  </div>
+                  src={item().url || undefined}
-                </Match>
+                  autoplay={settings().autoPlayVideos}
-                <Match when={itemType() === "image"}>
+                  playsinline={settings().autoPlayVideos ? true : undefined}
-                  <img
+                  controls
-                    src={item().previewUrl}
+                  poster={item().previewUrl}
-                    width={item().meta?.small?.width}
+                  width={item().meta?.small?.width}
-                    height={item().meta?.small?.height}
+                  height={item().meta?.small?.height}
-                    alt={item().description || undefined}
+                  style={itemStyle(item())}
-                    onClick={[openViewerFor, index]}
+                />
-                    loading="lazy"
+              </Match>
-                  ></img>
+              <Match when={itemType() === "gifv"}>
-                </Match>
+                <video
-                <Match when={itemType() === "video"}>
+                  data-sort={index}
-                  <video
+                  data-media-type={item().type}
-                    src={item().url || undefined}
+                  src={item().url || undefined}
-                    autoplay={!props.sensitive && settings().autoPlayVideos}
+                  autoplay={settings().autoPlayGIFs}
-                    playsinline={settings().autoPlayVideos ? true : undefined}
+                  controls
-                    controls
+                  playsinline /* or safari on iOS will play in full-screen */
-                    poster={item().previewUrl}
+                  loop
-                    width={item().meta?.small?.width}
+                  poster={item().previewUrl}
-                    height={item().meta?.small?.height}
+                  width={item().meta?.small?.width}
-                  />
+                  height={item().meta?.small?.height}
-                </Match>
+                  style={itemStyle(item())}
-                <Match when={itemType() === "gifv"}>
+                />
-                  <video
+              </Match>
-                    src={item().url || undefined}
+              <Match when={itemType() === "audio"}>
-                    autoplay={!props.sensitive && settings().autoPlayGIFs}
+                <audio
-                    controls
+                  data-sort={index}
-                    playsinline /* or safari on iOS will play in full-screen */
+                  data-media-type={item().type}
-                    loop
+                  src={item().url || undefined}
-                    poster={item().previewUrl}
+                  controls
-                    width={item().meta?.small?.width}
+                ></audio>
-                    height={item().meta?.small?.height}
+              </Match>
-                  />
+            </Switch>
-                </Match>
-                <Match when={itemType() === "audio"}>
-                  <audio src={item().url || undefined} controls></audio>
-                </Match>
-              </Switch>
-            </div>
           );
         }}
       </Index>

src/timelines/RegularToot.tsx

@@ -5,8 +5,6 @@ import {
   type JSX,
   Show,
   createRenderEffect,
-  createSignal,
-  type Setter,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
@@ -33,9 +31,9 @@ import MediaAttachmentGrid from "./MediaAttachmentGrid.js";
 import { useDateFnLocale } from "../platform/i18n";
 import { canShare, share } from "../platform/share";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
-import TootContent from "./toots/TootContent";
+import TootContent from "./toot-components/TootContent";
-import BoostIcon from "./toots/BoostIcon";
+import BoostIcon from "./toot-components/BoostIcon";
-import PreviewCard from "./toots/PreviewCard";
+import PreviewCard from "./toot-components/PreviewCard";
 
 type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
@@ -47,7 +45,7 @@ type TootActionGroupProps<T extends mastodon.v1.Status> = {
   ) => void;
 };
 
-type RegularTootProps = {
+type TootCardProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
@@ -202,11 +200,6 @@ export function findElementActionable(
   return current;
 }
 
-function onToggleReveal(setValue: Setter<boolean>, event: Event) {
-  event.stopPropagation();
-  setValue((x) => !x);
-}
-
 /**
  * Component for a toot.
  *
@@ -235,7 +228,7 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * You can extract the intent from the attributes of the "actionable" element.
  * The action type is the dataset's `action`.
  */
-const RegularToot: Component<RegularTootProps> = (props) => {
+const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
     props,
@@ -246,7 +239,6 @@ const RegularToot: Component<RegularTootProps> = (props) => {
   const status = () => managed.status;
   const toot = () => status().reblog ?? status();
   const session = useDefaultSession();
-  const [reveal, setReveal] = createSignal(false);
 
   css`
     .reply-sep {
@@ -293,7 +285,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
 
   return (
     <>
-      <article
+      <section
         classList={{
           [tootStyle.toot]: true,
           [tootStyle.expanded]: managed.evaluated,
@@ -334,23 +326,12 @@ const RegularToot: Component<RegularTootProps> = (props) => {
           emojis={toot().emojis}
           mentions={toot().mentions}
           class={cardStyle.cardNoPad}
-          sensitive={toot().sensitive}
-          spoilerText={toot().spoilerText}
-          reveal={reveal()}
-          onToggleReveal={[onToggleReveal, setReveal]}
         />
-        <Show
+        <Show when={toot().card}>
-          when={
-            toot().card && (!toot().sensitive || (toot().sensitive && reveal()))
-          }
-        >
           <PreviewCard src={toot().card!} />
         </Show>
         <Show when={toot().mediaAttachments.length > 0}>
-          <MediaAttachmentGrid
+          <MediaAttachmentGrid attachments={toot().mediaAttachments} />
-            attachments={toot().mediaAttachments}
-            sensitive={toot().sensitive}
-          />
         </Show>
         <Show when={managed.actionable}>
           <Divider
@@ -359,7 +340,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
           />
           <TootActionGroup value={toot()} {...managedActionGroup} />
         </Show>
-      </article>
+      </section>
     </>
   );
 };

src/timelines/toot-components/TootContent.css

@@ -4,10 +4,6 @@
   margin-right: var(--card-pad, 0);
   line-height: 1.5;
 
-  > .content {
-    display: contents;
-  }
-
   & * {
     user-select: text;
   }

src/timelines/toot-components/TootContent.tsx

@@ -0,0 +1,68 @@
+import type { mastodon } from "masto";
+import {
+  splitProps,
+  type Component,
+  type JSX,
+  createRenderEffect,
+  createMemo,
+} from "solid-js";
+import { resolveCustomEmoji } from "../../masto/toot.js";
+import { makeAcctText, useDefaultSession } from "../../masto/clients";
+import "./TootContent.css";
+
+function preventDefault(event: Event) {
+  event.preventDefault();
+}
+
+export type TootContentProps = {
+  source?: string;
+  emojis?: mastodon.v1.CustomEmoji[];
+  mentions: mastodon.v1.StatusMention[];
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+const TootContent: Component<TootContentProps> = (oprops) => {
+  const session = useDefaultSession();
+  const [props, rest] = splitProps(oprops, [
+    "source",
+    "emojis",
+    "mentions",
+    "class",
+  ]);
+
+  const clientFinder = createMemo(() =>
+    session() ? makeAcctText(session()!) : undefined,
+  );
+
+  return (
+    <div
+      ref={(ref) => {
+        createRenderEffect(() => {
+          ref.innerHTML = props.source
+            ? props.emojis
+              ? resolveCustomEmoji(props.source, props.emojis)
+              : props.source
+            : "";
+        });
+
+        createRenderEffect(() => {
+          const finder = clientFinder();
+          for (const mention of props.mentions) {
+            const elements = ref.querySelectorAll<HTMLAnchorElement>(
+              `a[href='${mention.url}']`,
+            );
+            for (const e of elements) {
+              e.onclick = preventDefault;
+              e.dataset.action = "acct";
+              e.dataset.client = finder;
+              e.dataset.acctId = mention.id.toString();
+            }
+          }
+        });
+      }}
+      class={`TootContent ${props.class || ""}`}
+      {...rest}
+    ></div>
+  );
+};
+
+export default TootContent;

src/timelines/toots/TootContent.tsx

@@ -1,115 +0,0 @@
-import type { mastodon } from "masto";
-import {
-  splitProps,
-  type Component,
-  type JSX,
-  createRenderEffect,
-  createMemo,
-  Show,
-} from "solid-js";
-import { resolveCustomEmoji } from "../../masto/toot.js";
-import { makeAcctText, useDefaultSession } from "../../masto/clients.js";
-import "./TootContent.css";
-import { Button } from "@suid/material";
-import { createTranslator } from "../../platform/i18n.jsx";
-
-function preventDefault(event: Event) {
-  event.preventDefault();
-}
-
-export type TootContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
-  source?: string;
-  emojis?: mastodon.v1.CustomEmoji[];
-  mentions: mastodon.v1.StatusMention[];
-  sensitive?: boolean;
-  spoilerText?: string;
-  reveal?: boolean;
-  onToggleReveal?: JSX.EventHandlerUnion<HTMLElement, Event>;
-};
-
-const TootContent: Component<TootContentProps> = (oprops) => {
-  const [t] = createTranslator(
-    (code) =>
-      import(`./i18n/${code}.json`) as Promise<{
-        default: {
-          cw: string;
-        };
-      }>,
-  );
-
-  const session = useDefaultSession();
-  const [props, rest] = splitProps(oprops, [
-    "source",
-    "emojis",
-    "mentions",
-    "class",
-    "sensitive",
-    "spoilerText",
-    "reveal",
-    "onToggleReveal",
-  ]);
-
-  const clientFinder = createMemo(() =>
-    session() ? makeAcctText(session()!) : undefined,
-  );
-
-  const shouldRevealContent = () => {
-    return !props.sensitive || (props.sensitive && props.reveal);
-  };
-
-  return (
-    <div
-      ref={(ref) => {
-        createRenderEffect(() => {
-          const finder = clientFinder();
-          for (const mention of props.mentions) {
-            const elements = ref.querySelectorAll<HTMLAnchorElement>(
-              `a[href='${mention.url}']`,
-            );
-            for (const e of elements) {
-              e.onclick = preventDefault;
-              e.dataset.action = "acct";
-              e.dataset.client = finder;
-              e.dataset.acctId = mention.id.toString();
-            }
-          }
-        });
-      }}
-      class={`TootContent ${props.class || ""}`}
-      {...rest}
-    >
-      <Show when={props.sensitive}>
-        <div>
-          <span
-            ref={(ref) => {
-              createRenderEffect(() => {
-                ref.innerHTML = props.spoilerText
-                  ? props.emojis
-                    ? resolveCustomEmoji(props.spoilerText, props.emojis)
-                    : props.spoilerText
-                  : "";
-              });
-            }}
-          ></span>
-          <Button onClick={props.onToggleReveal}>{t("cw")}</Button>
-        </div>
-      </Show>
-      <Show when={shouldRevealContent()}>
-        <div
-          class="content"
-          ref={(ref) =>
-            createRenderEffect(() => {
-              ref.innerHTML = props.source
-                ? props.emojis
-                  ? resolveCustomEmoji(props.source, props.emojis)
-                  : props.source
-                : "";
-            })
-          }
-        ></div>
-      </Show>
-    </div>
-  );
-};
-
-export default TootContent;

src/timelines/toots/i18n/en.json

@@ -1,3 +0,0 @@
-{
-  "cw": "\"Content Warning\""
-}

src/timelines/toots/i18n/zh-Hans.json

@@ -1,3 +0,0 @@
-{
-  "cw": "“内容警告”"
-}