Merge commit '9d664f87a04b6a5157ddbe60ee33b5b7a960198e' into glitch-s…

…oc/merge-upstream
glitch-soc · Sep 29, 2024 · 7ef25ae · 7ef25ae
2 parents 437cecc + 9d664f8
commit 7ef25ae
Show file tree

Hide file tree

Showing 212 changed files with 1,842 additions and 810 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -134,7 +134,7 @@ GEM
     bindata (2.5.0)
     binding_of_caller (1.0.1)
       debug_inspector (>= 1.2.0)
-    blurhash (0.1.7)
+    blurhash (0.1.8)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
     brakeman (6.2.1)

diff --git a/app/controllers/api/v1/domain_blocks/previews_controller.rb b/app/controllers/api/v1/domain_blocks/previews_controller.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Api::V1::DomainBlocks::PreviewsController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :follow, :write, :'write:blocks' }
+  before_action :require_user!
+  before_action :set_domain
+  before_action :set_domain_block_preview
+
+  def show
+    render json: @domain_block_preview, serializer: REST::DomainBlockPreviewSerializer
+  end
+
+  private
+
+  def set_domain
+    @domain = TagManager.instance.normalize_domain(params[:domain])
+  end
+
+  def set_domain_block_preview
+    @domain_block_preview = with_read_replica do
+      DomainBlockPreviewPresenter.new(
+        following_count: current_account.following.where(domain: @domain).count,
+        followers_count: current_account.followers.where(domain: @domain).count
+      )
+    end
+  end
+end
diff --git a/app/helpers/settings_helper.rb b/app/helpers/settings_helper.rb
@@ -10,16 +10,17 @@ def ui_languages
   end
 
   def featured_tags_hint(recently_used_tags)
-    safe_join(
-      [
-        t('simple_form.hints.featured_tag.name'),
-        safe_join(
-          links_for_featured_tags(recently_used_tags),
-          ', '
-        ),
-      ],
-      ' '
-    )
+    recently_used_tags.present? &&
+      safe_join(
+        [
+          t('simple_form.hints.featured_tag.name'),
+          safe_join(
+            links_for_featured_tags(recently_used_tags),
+            ', '
+          ),
+        ],
+        ' '
+      )
   end
 
   def session_device_icon(session)

diff --git a/app/javascript/mastodon/api.ts b/app/javascript/mastodon/api.ts
@@ -70,6 +70,7 @@ export async function apiRequest<ApiResponse = unknown>(
   args: {
     params?: RequestParamsOrData;
     data?: RequestParamsOrData;
+    timeout?: number;
   } = {},
 ) {
   const { data } = await api().request<ApiResponse>({

diff --git a/app/javascript/mastodon/components/alt_text_badge.tsx b/app/javascript/mastodon/components/alt_text_badge.tsx
@@ -0,0 +1,67 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import Overlay from 'react-overlays/Overlay';
+import type {
+  OffsetValue,
+  UsePopperOptions,
+} from 'react-overlays/esm/usePopper';
+
+const offset = [0, 4] as OffsetValue;
+const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
+
+export const AltTextBadge: React.FC<{
+  description: string;
+}> = ({ description }) => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setOpen((v) => !v);
+  }, [setOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <>
+      <button
+        ref={anchorRef}
+        className='media-gallery__alt__label'
+        onClick={handleClick}
+      >
+        ALT
+      </button>
+
+      <Overlay
+        rootClose
+        onHide={handleClose}
+        show={open}
+        target={anchorRef.current}
+        placement='top-end'
+        flip
+        offset={offset}
+        popperConfig={popperConfig}
+      >
+        {({ props }) => (
+          <div {...props} className='hover-card-controller'>
+            <div
+              className='media-gallery__alt__popover dropdown-animation'
+              role='tooltip'
+            >
+              <h4>
+                <FormattedMessage
+                  id='alt_text_badge.title'
+                  defaultMessage='Alt text'
+                />
+              </h4>
+              <p>{description}</p>
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+};
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;
+  dangerous?: boolean;
 }
 
 interface PropsChildren extends PropsWithChildren<BaseProps> {
@@ -26,6 +27,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  dangerous,
   className,
   title,
   text,
@@ -46,6 +48,7 @@ export const Button: React.FC<Props> = ({
       className={classNames('button', className, {
         'button-secondary': secondary,
         'button--block': block,
+        'button--dangerous': dangerous,
       })}
       disabled={disabled}
       onClick={handleClick}

diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
@@ -10,7 +10,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { debounce } from 'lodash';
 
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
+import { formatTime } from 'mastodon/features/video';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
@@ -57,7 +59,7 @@ class Item extends PureComponent {
 
   hoverToPlay () {
     const { attachment } = this.props;
-    return !this.getAutoPlay() && attachment.get('type') === 'gifv';
+    return !this.getAutoPlay() && ['gifv', 'video'].includes(attachment.get('type'));
   }
 
   handleClick = (e) => {
@@ -96,7 +98,7 @@ class Item extends PureComponent {
     }
 
     if (attachment.get('description')?.length > 0) {
-      badges.push(<span key='alt' className='media-gallery__alt__label'>ALT</span>);
+      badges.push(<AltTextBadge key='alt' description={attachment.get('description')} />);
     }
 
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@@ -150,10 +152,15 @@ class Item extends PureComponent {
           />
         </a>
       );
-    } else if (attachment.get('type') === 'gifv') {
+    } else if (['gifv', 'video'].includes(attachment.get('type'))) {
       const autoPlay = this.getAutoPlay();
+      const duration = attachment.getIn(['meta', 'original', 'duration']);
 
-      badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
+      if (attachment.get('type') === 'gifv') {
+        badges.push(<span key='gif' className='media-gallery__alt__label media-gallery__alt__label--non-interactive'>GIF</span>);
+      } else {
+        badges.push(<span key='video' className='media-gallery__alt__label media-gallery__alt__label--non-interactive'>{formatTime(Math.floor(duration))}</span>);
+      }
 
       thumbnail = (
         <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
@@ -167,6 +174,7 @@ class Item extends PureComponent {
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
+            onLoadedData={this.handleImageLoad}
             autoPlay={autoPlay}
             playsInline
             loop

diff --git a/app/javascript/mastodon/components/navigation_portal.tsx b/app/javascript/mastodon/components/navigation_portal.tsx
@@ -4,22 +4,22 @@ import AccountNavigation from 'mastodon/features/account/navigation';
 import Trends from 'mastodon/features/getting_started/containers/trends_container';
 import { showTrends } from 'mastodon/initial_state';
 
-const DefaultNavigation: React.FC = () =>
-  showTrends ? (
-    <>
-      <div className='flex-spacer' />
-      <Trends />
-    </>
-  ) : null;
+const DefaultNavigation: React.FC = () => (showTrends ? <Trends /> : null);
 
 export const NavigationPortal: React.FC = () => (
-  <Switch>
-    <Route path='/@:acct' exact component={AccountNavigation} />
-    <Route path='/@:acct/tagged/:tagged?' exact component={AccountNavigation} />
-    <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
-    <Route path='/@:acct/followers' exact component={AccountNavigation} />
-    <Route path='/@:acct/following' exact component={AccountNavigation} />
-    <Route path='/@:acct/media' exact component={AccountNavigation} />
-    <Route component={DefaultNavigation} />
-  </Switch>
+  <div className='navigation-panel__portal'>
+    <Switch>
+      <Route path='/@:acct' exact component={AccountNavigation} />
+      <Route
+        path='/@:acct/tagged/:tagged?'
+        exact
+        component={AccountNavigation}
+      />
+      <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
+      <Route path='/@:acct/followers' exact component={AccountNavigation} />
+      <Route path='/@:acct/following' exact component={AccountNavigation} />
+      <Route path='/@:acct/media' exact component={AccountNavigation} />
+      <Route component={DefaultNavigation} />
+    </Switch>
+  </div>
 );
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
@@ -449,7 +449,25 @@ class Status extends ImmutablePureComponent {
     } else if (status.get('media_attachments').size > 0) {
       const language = status.getIn(['translation', 'language']) || status.get('language');
 
-      if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+      if (['image', 'gifv'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
+        media = (
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
+            {Component => (
+              <Component
+                media={status.get('media_attachments')}
+                lang={language}
+                sensitive={status.get('sensitive')}
+                height={110}
+                onOpenMedia={this.handleOpenMedia}
+                cacheWidth={this.props.cacheMediaWidth}
+                defaultWidth={this.props.cachedMediaWidth}
+                visible={this.state.showMedia}
+                onToggleVisibility={this.handleToggleMediaVisibility}
+              />
+            )}
+          </Bundle>
+        );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
         const attachment = status.getIn(['media_attachments', 0]);
         const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
@@ -501,24 +519,6 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
-      } else {
-        media = (
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {Component => (
-              <Component
-                media={status.get('media_attachments')}
-                lang={language}
-                sensitive={status.get('sensitive')}
-                height={110}
-                onOpenMedia={this.handleOpenMedia}
-                cacheWidth={this.props.cacheMediaWidth}
-                defaultWidth={this.props.cachedMediaWidth}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
-        );
       }
     } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
       media = (

diff --git a/app/javascript/mastodon/features/account/navigation.jsx b/app/javascript/mastodon/features/account/navigation.jsx
@@ -43,10 +43,7 @@ class AccountNavigation extends PureComponent {
     }
 
     return (
-      <>
-        <div className='flex-spacer' />
-        <FeaturedTags accountId={accountId} tagged={tagged} />
-      </>
+      <FeaturedTags accountId={accountId} tagged={tagged} />
     );
   }