Merge pull request #2860 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes up to 9d664f8
glitch-soc · Sep 29, 2024 · 9bf624b · 9bf624b
2 parents 437cecc + e80971e
commit 9bf624b
Show file tree

Hide file tree

Showing 240 changed files with 3,060 additions and 1,468 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/flavours/glitch/api.ts b/app/javascript/flavours/glitch/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/flavours/glitch/components/alt_text_badge.tsx b/app/javascript/flavours/glitch/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/flavours/glitch/components/button.tsx b/app/javascript/flavours/glitch/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/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx
@@ -10,7 +10,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { debounce } from 'lodash';
 
+import { AltTextBadge } from 'flavours/glitch/components/alt_text_badge';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
+import { formatTime } from 'flavours/glitch/features/video';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
@@ -58,7 +60,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) => {
@@ -97,7 +99,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');
@@ -152,10 +154,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 })}>
@@ -169,6 +176,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/flavours/glitch/components/navigation_portal.tsx b/app/javascript/flavours/glitch/components/navigation_portal.tsx
@@ -4,22 +4,22 @@ import AccountNavigation from 'flavours/glitch/features/account/navigation';
 import Trends from 'flavours/glitch/features/getting_started/containers/trends_container';
 import { showTrends } from 'flavours/glitch/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/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
@@ -648,6 +648,27 @@ class Status extends ImmutablePureComponent {
             media={status.get('media_attachments')}
           />,
         );
+      } else if (['image', 'gifv'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
+        media.push(
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
+            {Component => (
+              <Component
+                media={attachments}
+                lang={language}
+                sensitive={status.get('sensitive')}
+                letterbox={settings.getIn(['media', 'letterbox'])}
+                fullwidth={!rootId && settings.getIn(['media', 'fullwidth'])}
+                hidden={isCollapsed || !isExpanded}
+                onOpenMedia={this.handleOpenMedia}
+                cacheWidth={this.props.cacheMediaWidth}
+                defaultWidth={this.props.cachedMediaWidth}
+                visible={this.state.showMedia}
+                onToggleVisibility={this.handleToggleMediaVisibility}
+              />
+            )}
+          </Bundle>,
+        );
+        mediaIcons.push('picture-o');
       } else if (attachments.getIn([0, 'type']) === 'audio') {
         const attachment = status.getIn(['media_attachments', 0]);
         const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@@ -703,27 +724,6 @@ class Status extends ImmutablePureComponent {
           </Bundle>,
         );
         mediaIcons.push('video-camera');
-      } else {  //  Media type is 'image' or 'gifv'
-        media.push(
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {Component => (
-              <Component
-                media={attachments}
-                lang={language}
-                sensitive={status.get('sensitive')}
-                letterbox={settings.getIn(['media', 'letterbox'])}
-                fullwidth={!rootId && settings.getIn(['media', 'fullwidth'])}
-                hidden={isCollapsed || !isExpanded}
-                onOpenMedia={this.handleOpenMedia}
-                cacheWidth={this.props.cacheMediaWidth}
-                defaultWidth={this.props.cachedMediaWidth}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>,
-        );
-        mediaIcons.push('picture-o');
       }
 
       if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {

diff --git a/app/javascript/flavours/glitch/features/account/navigation.jsx b/app/javascript/flavours/glitch/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} />
     );
   }