diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 51f878342..992b02730 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -146,9 +146,9 @@ pages: docker: stage: deploy - image: docker:20.10.17 + image: docker:20.10.22 services: - - docker:20.10.17-dind + - docker:20.10.22-dind tags: - dind # https://medium.com/devops-with-valentine/how-to-build-a-docker-image-and-push-it-to-the-gitlab-container-registry-from-a-gitlab-ci-pipeline-acac0d1f26df diff --git a/.tool-versions b/.tool-versions index f0c37ee48..5686ee0db 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1 +1 @@ -nodejs 18.2.0 +nodejs 18.12.1 diff --git a/CHANGELOG.md b/CHANGELOG.md index df489f6a2..e9b420dd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Compatibility: rudimentary support for Takahē. - UI: added backdrop blur behind modals. +- Admin: let admins configure media preview for attachment thumbnails. ### Changed - Posts: letterbox images to 19:6 again. diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx index cd7cd2605..75ff9f798 100644 --- a/app/soapbox/components/media-gallery.tsx +++ b/app/soapbox/components/media-gallery.tsx @@ -5,7 +5,7 @@ import Blurhash from 'soapbox/components/blurhash'; import Icon from 'soapbox/components/icon'; import StillImage from 'soapbox/components/still-image'; import { MIMETYPE_ICONS } from 'soapbox/components/upload'; -import { useSettings } from 'soapbox/hooks'; +import { useSettings, useSoapboxConfig } from 'soapbox/hooks'; import { Attachment } from 'soapbox/types/entities'; import { truncateFilename } from 'soapbox/utils/media'; @@ -72,6 +72,7 @@ const Item: React.FC = ({ }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif') === true; + const { mediaPreview } = useSoapboxConfig(); const handleMouseEnter: React.MouseEventHandler = ({ currentTarget: video }) => { if (hoverToPlay()) { @@ -171,7 +172,7 @@ const Item: React.FC = ({ > void, onPinned?: (avatar: null | Avatar) => void }, - ref: any, + ref: React.ForwardedRef, ) => { const dispatch = useAppDispatch(); @@ -40,8 +40,11 @@ const CarouselItem = React.forwardRef(( onPinned(avatar); } - onViewed(avatar.account_id); - markAsSeen.mutate(avatar.account_id); + if (!seen) { + onViewed(avatar.account_id); + markAsSeen.mutate(avatar.account_id); + } + dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null }, () => setLoading(false))); } }; @@ -51,7 +54,7 @@ const CarouselItem = React.forwardRef(( ref={ref} aria-disabled={isFetching} onClick={handleClick} - className='cursor-pointer snap-start py-4' + className='cursor-pointer py-4' role='filter-feed-by-user' data-testid='carousel-item' > @@ -87,6 +90,7 @@ const FeedCarousel = () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [_ref, setContainerRef, { width }] = useDimensions(); + const carouselItemRef = useRef(null); const [seenAccountIds, setSeenAccountIds] = useState([]); const [pageSize, setPageSize] = useState(0); @@ -151,18 +155,18 @@ const FeedCarousel = () => { data-testid='feed-carousel' > -
+
-
+
{pinnedAvatar ? (
{ seen={seenAccountIds?.includes(pinnedAvatar.account_id)} onViewed={markAsSeen} onPinned={(avatar) => setPinnedAvatar(avatar)} + ref={carouselItemRef} />
) : null} @@ -203,7 +208,11 @@ const FeedCarousel = () => { }} > {avatar === null ? ( - +
@@ -227,11 +236,11 @@ const FeedCarousel = () => {
-
+