feat: gif embed play only on hover

packages/client/components/app/interface/channels/text/Message.tsx

@@ -291,7 +291,7 @@ export function Message(props: Props) {
       </Show>
       <Show when={props.message.embeds}>
         <For each={props.message.embeds}>
-          {(embed) => <Embed embed={embed} />}
+          {(embed) => <Embed embed={embed} hovering={isHovering()} />}
         </For>
       </Show>
       <Reactions

packages/client/components/app/interface/settings/UserSettings.tsx

@@ -10,6 +10,7 @@ import { useModals } from "@revolt/modal";
 import { ColouredText, Column, Text, iconSize } from "@revolt/ui";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
+import MdAccessibility from "@material-design-icons/svg/outlined/accessibility.svg?component-solid";
 import MdAccountCircle from "@material-design-icons/svg/outlined/account_circle.svg?component-solid";
 import MdCoffee from "@material-design-icons/svg/outlined/coffee.svg?component-solid";
 import MdLanguage from "@material-design-icons/svg/outlined/language.svg?component-solid";
@@ -26,6 +27,7 @@ import MdWorkspacePremium from "@material-design-icons/svg/outlined/workspace_pr
 import pkg from "../../../../../../package.json";
 
 import { SettingsConfiguration } from ".";
+import Accessibility from "./user/Accessibility";
 import { MyAccount } from "./user/Account";
 import AdvancedSettings from "./user/Advanced";
 import { Feedback } from "./user/Feedback";
@@ -75,6 +77,8 @@ const Config: SettingsConfiguration<{ server: Server }> = {
         return <MyAccount />;
       case "appearance":
         return <AppearanceMenu />;
+      case "accessibility":
+        return <Accessibility />;
       case "advanced":
         return <AdvancedSettings />;
       case "profile":
@@ -212,11 +216,11 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               icon: <MdPalette {...iconSize(20)} />,
               title: <Trans>Appearance</Trans>,
             },
-            // {
-            //   id: "accessibility",
-            //   icon: <MdAccessibility {...iconSize(20)} />,
-            //   title: t("app.settings.pages.accessibility.title"),
-            // },
+            {
+              id: "accessibility",
+              icon: <MdAccessibility {...iconSize(20)} />,
+              title: <Trans>Accessibility</Trans>,
+            },
             // {
             //   id: "plugins",
             //   icon: <MdExtension {...iconSize(20)} />,

packages/client/components/app/interface/settings/user/Accessibility.tsx

@@ -1,12 +1,55 @@
-import { Column } from "@revolt/ui";
+import { Trans } from "@lingui-solid/solid/macro";
+import { useState } from "@revolt/state";
+import { CategoryButton, Checkbox, Column } from "@revolt/ui";
+import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
 /**
  * Accessibility settings page
  */
 export default function Accessibility() {
+  const state = useState();
+
+  const autoplayGifOnHover = () =>
+    state.settings.getValue("accessibility:autoplay_gif_on_hover") ?? false;
+
   return (
     <Column gap="lg">
-      {/* <CategoryButtonGroup>
+      <CategoryButton.Group>
+        <CategoryButton
+          icon={<Symbol>gif_box</Symbol>}
+          action={
+            <div onClick={(e: MouseEvent) => e.stopPropagation()}>
+              <Checkbox
+                checked={autoplayGifOnHover()}
+                onChange={(e) =>
+                  state.settings.setValue(
+                    "accessibility:autoplay_gif_on_hover",
+                    e.currentTarget.checked,
+                  )
+                }
+              />
+            </div>
+          }
+          description={
+            <Trans>
+              Embeded Gif's will only play when the mouse hovers over them.
+            </Trans>
+          }
+          onClick={() =>
+            state.settings.setValue(
+              "accessibility:autoplay_gif_on_hover",
+              !autoplayGifOnHover(),
+            )
+          }
+        >
+          <Trans>Only play GIFs when mouse hovers over</Trans>
+        </CategoryButton>
+      </CategoryButton.Group>
+    </Column>
+  );
+}
+
+/* <CategoryButtonGroup>
         <FormGroup>
           <CategoryButton
             action={<Checkbox value onChange={(value) => void value} />}
@@ -22,7 +65,4 @@ export default function Accessibility() {
             <Trans>Reduced Motion</Trans>
           </CategoryButton>
         </FormGroup>
-      </CategoryButtonGroup> */}
-    </Column>
-  );
-}
+      </CategoryButtonGroup> */

packages/client/components/state/stores/Settings.ts

@@ -68,6 +68,11 @@ interface SettingsDefinition {
    * Last read changelog index
    */
   "changelog:last_index": number;
+
+  /**
+   * Whether to only autoplay GIFs on hover
+   */
+  "accessibility:autoplay_gif_on_hover": boolean;
 }
 
 /**
@@ -95,6 +100,7 @@ const EXPECTED_TYPES: { [K in keyof SettingsDefinition]: ValueType<K> } = {
   "advanced:copy_id": "boolean",
   "advanced:admin_panel": "boolean",
   "changelog:last_index": "number",
+  "accessibility:autoplay_gif_on_hover": "boolean",
 };
 
 /**
@@ -136,6 +142,7 @@ export class Settings extends AbstractStore<"settings", TypeSettings> {
       "appearance:compact_mode": false,
       "advanced:copy_id": false,
       "advanced:admin_panel": false,
+      "accessibility:autoplay_gif_on_hover": false,
     };
   }
 

packages/client/components/ui/components/features/messaging/elements/Embed.tsx

@@ -1,4 +1,4 @@
-import { Match, Switch } from "solid-js";
+import { Match, Switch, createEffect } from "solid-js";
 
 import {
   ImageEmbed,
@@ -10,15 +10,19 @@ import {
 import { css } from "styled-system/css";
 
 import { useModals } from "@revolt/modal";
+import { useState } from "@revolt/state";
 import { SizedContent } from "@revolt/ui/components/utils";
 
 import { TextEmbed } from "./TextEmbed";
 
 /**
  * Render a given embed
  */
-export function Embed(props: { embed: MessageEmbed }) {
+export function Embed(props: { embed: MessageEmbed; hovering?: boolean }) {
   const { openModal } = useModals();
+  const state = useState();
+
+  let videoRef: HTMLVideoElement | undefined;
 
   /**
    * Whether the embed is a GIF
@@ -46,6 +50,24 @@ export function Embed(props: { embed: MessageEmbed }) {
       ? (props.embed as ImageEmbed)
       : isGIF() && (props.embed as WebsiteEmbed).image) || undefined;
 
+  const hoverOnly = () =>
+    state.settings.getValue("accessibility:autoplay_gif_on_hover") ?? false;
+
+  createEffect(() => {
+    if (!videoRef || !isGIF()) return;
+
+    if (hoverOnly()) {
+      if (props.hovering) {
+        videoRef.play();
+      } else {
+        videoRef.pause();
+        videoRef.currentTime = 0;
+      }
+      return;
+    }
+    videoRef.play();
+  });
+
   return (
     <Switch fallback={`Could not render ${props.embed.type}!`}>
       <Match when={image()}>
@@ -67,9 +89,10 @@ export function Embed(props: { embed: MessageEmbed }) {
       <Match when={video()}>
         <SizedContent width={video()!.width} height={video()!.height}>
           <video
+            ref={videoRef}
             loop={isGIF()}
             muted={isGIF()}
-            autoplay={isGIF()}
+            autoplay={isGIF() && !hoverOnly()}
             controls={!isGIF()}
             preload="metadata"
             // bypass proxy for known GIF providers