From 37ec22379c9ad8570629500fb5de054137d0a2f0 Mon Sep 17 00:00:00 2001 From: danidfra Date: Sat, 2 Nov 2024 19:09:44 -0300 Subject: [PATCH 1/5] Change placeholder-media-gallery to use only Tailwind --- .../placeholder/components/placeholder-media-gallery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/placeholder/components/placeholder-media-gallery.tsx b/src/features/placeholder/components/placeholder-media-gallery.tsx index 09dc505e7..247260d05 100644 --- a/src/features/placeholder/components/placeholder-media-gallery.tsx +++ b/src/features/placeholder/components/placeholder-media-gallery.tsx @@ -78,13 +78,13 @@ const PlaceholderMediaGallery: React.FC = ({ media, de const float = dimensions.float as any || 'left'; const position = dimensions.pos as any || 'relative'; - return
; + return
; }; const sizeData = getSizeData(media.size); return ( -
+
{media.take(4).map((_, i) => renderItem(sizeData.get('itemsDimensions')[i], i))}
); From 08fcb5ef979e83f589a9cb4e44f9efdd4da738b9 Mon Sep 17 00:00:00 2001 From: danidfra Date: Sat, 2 Nov 2024 19:10:09 -0300 Subject: [PATCH 2/5] Change attachment-thumbs to use only Tailwind --- src/components/attachment-thumbs.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx index c5a017408..6ac0c0e30 100644 --- a/src/components/attachment-thumbs.tsx +++ b/src/components/attachment-thumbs.tsx @@ -17,11 +17,11 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => { const { media, onClick, sensitive } = props; const dispatch = useAppDispatch(); - const fallback =
; + const fallback =
; const onOpenMedia = (media: ImmutableList, index: number) => dispatch(openModal('MEDIA', { media, index })); return ( -
+
{ {onClick && ( -
+
); From 362506d73864f34c7941a01125c4f908bfdec52f Mon Sep 17 00:00:00 2001 From: danidfra Date: Sat, 2 Nov 2024 19:11:27 -0300 Subject: [PATCH 3/5] Change classname "media-gallery_preview" in uplodad to use only Tailwind --- src/components/upload.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/upload.tsx b/src/components/upload.tsx index 910452ef0..aa61483bc 100644 --- a/src/components/upload.tsx +++ b/src/components/upload.tsx @@ -166,7 +166,7 @@ const Upload: React.FC = ({ onDragEnter={onDragEnter} onDragEnd={onDragEnd} > - + {({ scale }) => (
Date: Sat, 2 Nov 2024 19:27:18 -0300 Subject: [PATCH 4/5] Change media-gallery to use only Tailwind --- src/components/media-gallery.tsx | 77 ++++++++++++++++---------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx index aae7d3ca3..0edf7528c 100644 --- a/src/components/media-gallery.tsx +++ b/src/components/media-gallery.tsx @@ -2,7 +2,6 @@ import clsx from 'clsx'; import React, { useState, useRef, useLayoutEffect } from 'react'; 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, useSoapboxConfig } from 'soapbox/hooks'; @@ -12,6 +11,8 @@ import { truncateFilename } from 'soapbox/utils/media'; import { isIOS } from '../is-mobile'; import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio'; +import SvgIcon from './ui/icon/svg-icon'; + import type { Property } from 'csstype'; import type { List as ImmutableList } from 'immutable'; @@ -60,6 +61,7 @@ interface IItem { dimensions: Dimensions; last?: boolean; total: number; + compact?: boolean; } const Item: React.FC = ({ @@ -71,6 +73,7 @@ const Item: React.FC = ({ dimensions, last, total, + compact, }) => { const { autoPlayGif } = useSettings(); const { mediaPreview } = useSoapboxConfig(); @@ -111,16 +114,21 @@ const Item: React.FC = ({ e.stopPropagation(); }; - const handleVideoHover: React.MouseEventHandler = ({ currentTarget: video }) => { + const handleVideoHover = (event: React.SyntheticEvent) => { + const video = event.currentTarget; video.playbackRate = 3.0; video.play(); }; - const handleVideoLeave: React.MouseEventHandler = ({ currentTarget: video }) => { + const handleVideoLeave = (event: React.SyntheticEvent) => { + const video = event.currentTarget; video.pause(); video.currentTime = 0; }; + const handleFocus: React.FocusEventHandler = handleVideoHover; + const handleBlur: React.FocusEventHandler = handleVideoLeave; + let width: Dimensions['w'] = 100; let height: Dimensions['h'] = '100%'; let top: Dimensions['t'] = 'auto'; @@ -144,43 +152,29 @@ const Item: React.FC = ({ let thumbnail: React.ReactNode = ''; const ext = attachment.url.split('.').pop()?.toLowerCase(); - /*if (attachment.type === 'unknown' && ['gb', 'gbc'].includes(ext!)) { - return ( -
1, - })} - key={attachment.id} - style={{ position, float, left, top, right, bottom, height, width: `${width}%` }} - > - }> - - -
- ); - } else */if (attachment.type === 'unknown') { + if (attachment.type === 'unknown') { const filename = truncateFilename(attachment.url, MAX_FILENAME_LENGTH); const attachmentIcon = ( - ); return (
1, + '!size-[50px] !inset-auto !float-left !mr-[50px]': compact, })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }} > - - - {attachmentIcon} - {filename} + + + {attachmentIcon} + {filename}
); @@ -189,7 +183,7 @@ const Item: React.FC = ({ thumbnail = ( = ({ } thumbnail = ( -
+
); } else if (attachment.type === 'audio') { thumbnail = ( - - {ext} + + {ext} ); } else if (attachment.type === 'video') { thumbnail = ( - {ext} + {ext} ); } return (
1, + '!size-[50px] !inset-auto !float-left !mr-[50px]': compact, })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }} > {last && total > ATTACHMENT_LIMIT && ( -
{/* eslint-disable-line formatjs/no-literal-string-in-jsx */} +
{/* eslint-disable-line formatjs/no-literal-string-in-jsx */} +{total - ATTACHMENT_LIMIT + 1}
)} {visible && thumbnail}
@@ -561,6 +559,7 @@ const MediaGallery: React.FC = (props) => { dimensions={sizeData.itemsDimensions[i]} last={i === ATTACHMENT_LIMIT - 1} total={media.size} + compact={compact} /> )); @@ -578,7 +577,7 @@ const MediaGallery: React.FC = (props) => { return (
From 1000a1797a61979d2a5e1bfe9522a4d63bffd866 Mon Sep 17 00:00:00 2001 From: danidfra Date: Sat, 2 Nov 2024 19:27:46 -0300 Subject: [PATCH 5/5] Change media-item to use only Tailwind --- .../account-gallery/components/media-item.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx index 1df70c965..b7c77a7d3 100644 --- a/src/features/account-gallery/components/media-item.tsx +++ b/src/features/account-gallery/components/media-item.tsx @@ -2,8 +2,8 @@ import clsx from 'clsx'; import React, { useState } from 'react'; import Blurhash from 'soapbox/components/blurhash'; -import Icon from 'soapbox/components/icon'; import StillImage from 'soapbox/components/still-image'; +import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import { useSettings } from 'soapbox/hooks'; import { isIOS } from 'soapbox/is-mobile'; @@ -80,9 +80,9 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { conditionalAttributes.autoPlay = true; } thumbnail = ( -
+
); } else if (attachment.type === 'audio') { @@ -102,28 +102,28 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { const fileExtensionLastIndex = remoteURL.lastIndexOf('.'); const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase(); thumbnail = ( -
- - {fileExtension} +
+ + {fileExtension}
); } if (!visible) { icon = ( - - + + ); } return (