Change design of edit media modal in web UI (#33516)

mastodon · Jan 21, 2025 · 11786f1 · 11786f1
1 parent 4ebdfed
commit 11786f1
Show file tree

Hide file tree

Showing 42 changed files with 919 additions and 900 deletions.
diff --git a/app/javascript/images/reticle.png b/app/javascript/images/reticle.png
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
@@ -414,7 +414,7 @@ export function initMediaEditModal(id) {
 
     dispatch(openModal({
       modalType: 'FOCAL_POINT',
-      modalProps: { id },
+      modalProps: { mediaId: id },
     }));
   };
 }

diff --git a/app/javascript/mastodon/actions/compose_typed.ts b/app/javascript/mastodon/actions/compose_typed.ts
@@ -0,0 +1,70 @@
+import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
+
+import { apiUpdateMedia } from 'mastodon/api/compose';
+import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
+import type { MediaAttachment } from 'mastodon/models/media_attachment';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+type SimulatedMediaAttachmentJSON = ApiMediaAttachmentJSON & {
+  unattached?: boolean;
+};
+
+const simulateModifiedApiResponse = (
+  media: MediaAttachment,
+  params: { description?: string; focus?: string },
+): SimulatedMediaAttachmentJSON => {
+  const [x, y] = (params.focus ?? '').split(',');
+
+  const data = {
+    ...media.toJS(),
+    ...params,
+    meta: {
+      focus: {
+        x: parseFloat(x ?? '0'),
+        y: parseFloat(y ?? '0'),
+      },
+    },
+  } as unknown as SimulatedMediaAttachmentJSON;
+
+  return data;
+};
+
+export const changeUploadCompose = createDataLoadingThunk(
+  'compose/changeUpload',
+  async (
+    {
+      id,
+      ...params
+    }: {
+      id: string;
+      description: string;
+      focus: string;
+    },
+    { getState },
+  ) => {
+    const media = (
+      (getState().compose as ImmutableMap<string, unknown>).get(
+        'media_attachments',
+      ) as ImmutableList<MediaAttachment>
+    ).find((item) => item.get('id') === id);
+
+    // Editing already-attached media is deferred to editing the post itself.
+    // For simplicity's sake, fake an API reply.
+    if (media && !media.get('unattached')) {
+      return new Promise<SimulatedMediaAttachmentJSON>((resolve) => {
+        resolve(simulateModifiedApiResponse(media, params));
+      });
+    }
+
+    return apiUpdateMedia(id, params);
+  },
+  (media: SimulatedMediaAttachmentJSON) => {
+    return {
+      media,
+      attached: typeof media.unattached !== 'undefined' && !media.unattached,
+    };
+  },
+  {
+    useLoadingBar: false,
+  },
+);
diff --git a/app/javascript/mastodon/actions/modal.ts b/app/javascript/mastodon/actions/modal.ts
@@ -9,6 +9,7 @@ export type ModalType = keyof typeof MODAL_COMPONENTS;
 interface OpenModalPayload {
   modalType: ModalType;
   modalProps: ModalProps;
+  previousModalProps?: ModalProps;
 }
 export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
 

diff --git a/app/javascript/mastodon/api/compose.ts b/app/javascript/mastodon/api/compose.ts
@@ -0,0 +1,7 @@
+import { apiRequestPut } from 'mastodon/api';
+import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
+
+export const apiUpdateMedia = (
+  id: string,
+  params?: { description?: string; focus?: string },
+) => apiRequestPut<ApiMediaAttachmentJSON>(`v1/media/${id}`, params);
diff --git a/app/javascript/mastodon/components/button.tsx b/app/javascript/mastodon/components/button.tsx
@@ -7,6 +7,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  compact?: boolean;
   dangerous?: boolean;
 }
 
@@ -27,6 +28,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  compact,
   dangerous,
   className,
   title,
@@ -47,6 +49,7 @@ export const Button: React.FC<Props> = ({
     <button
       className={classNames('button', className, {
         'button-secondary': secondary,
+        'button--compact': compact,
         'button--block': block,
         'button--dangerous': dangerous,
       })}

diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx
@@ -2,6 +2,8 @@ import { useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
+import classNames from 'classnames';
+
 import { useIdentity } from '@/mastodon/identity_context';
 import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
@@ -20,7 +22,8 @@ const messages = defineMessages({
 
 export const FollowButton: React.FC<{
   accountId?: string;
-}> = ({ accountId }) => {
+  compact?: boolean;
+}> = ({ accountId, compact }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { signedIn } = useIdentity();
@@ -89,7 +92,9 @@ export const FollowButton: React.FC<{
         href='/settings/profile'
         target='_blank'
         rel='noopener'
-        className='button button-secondary'
+        className={classNames('button button-secondary', {
+          'button--compact': compact,
+        })}
       >
         {label}
       </a>
@@ -106,6 +111,7 @@ export const FollowButton: React.FC<{
           (account?.suspended || !!account?.moved))
       }
       secondary={following}
+      compact={compact}
       className={following ? 'button--destructive' : undefined}
     >
       {label}

diff --git a/app/javascript/mastodon/components/gifv.tsx b/app/javascript/mastodon/components/gifv.tsx
@@ -1,70 +1,70 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, forwardRef } from 'react';
 
 interface Props {
   src: string;
-  key: string;
   alt?: string;
   lang?: string;
-  width: number;
-  height: number;
-  onClick?: () => void;
+  width?: number;
+  height?: number;
+  onClick?: React.MouseEventHandler;
+  onMouseDown?: React.MouseEventHandler;
+  onTouchStart?: React.TouchEventHandler;
 }
 
-export const GIFV: React.FC<Props> = ({
-  src,
-  alt,
-  lang,
-  width,
-  height,
-  onClick,
-}) => {
-  const [loading, setLoading] = useState(true);
+export const GIFV = forwardRef<HTMLVideoElement, Props>(
+  (
+    { src, alt, lang, width, height, onClick, onMouseDown, onTouchStart },
+    ref,
+  ) => {
+    const [loading, setLoading] = useState(true);
 
-  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
-    useCallback(() => {
+    const handleLoadedData = useCallback(() => {
       setLoading(false);
     }, [setLoading]);
 
-  const handleClick: React.MouseEventHandler = useCallback(
-    (e) => {
-      if (onClick) {
+    const handleClick = useCallback(
+      (e: React.MouseEvent) => {
         e.stopPropagation();
-        onClick();
-      }
-    },
-    [onClick],
-  );
+        onClick?.(e);
+      },
+      [onClick],
+    );
 
-  return (
-    <div className='gifv' style={{ position: 'relative' }}>
-      {loading && (
-        <canvas
-          width={width}
-          height={height}
+    return (
+      <div className='gifv'>
+        {loading && (
+          <canvas
+            role='button'
+            tabIndex={0}
+            aria-label={alt}
+            title={alt}
+            lang={lang}
+            onClick={handleClick}
+          />
+        )}
+
+        <video
+          ref={ref}
+          src={src}
           role='button'
           tabIndex={0}
           aria-label={alt}
           title={alt}
           lang={lang}
+          width={width}
+          height={height}
+          muted
+          loop
+          autoPlay
+          playsInline
           onClick={handleClick}
+          onLoadedData={handleLoadedData}
+          onMouseDown={onMouseDown}
+          onTouchStart={onTouchStart}
         />
-      )}
+      </div>
+    );
+  },
+);
 
-      <video
-        src={src}
-        role='button'
-        tabIndex={0}
-        aria-label={alt}
-        title={alt}
-        lang={lang}
-        muted
-        loop
-        autoPlay
-        playsInline
-        onClick={handleClick}
-        onLoadedData={handleLoadedData}
-        style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
-      />
-    </div>
-  );
-};
+GIFV.displayName = 'GIFV';