From 9ea4a64b4cde87e5e88a982f69414c0c8ae815bd Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Sat, 20 Jul 2024 01:33:07 +0300 Subject: [PATCH] [ENG-1825] Show thumb image if original is not available (#2617) * show thumb image if original is not available * remove space * formatting --- .../$libraryId/Explorer/FilePath/Thumb.tsx | 11 +- .../Explorer/QuickPreview/index.tsx | 126 ++++++++++++------ interface/locales/ar/common.json | 2 + interface/locales/be/common.json | 2 + interface/locales/de/common.json | 6 +- interface/locales/en/common.json | 2 + interface/locales/es/common.json | 2 + interface/locales/fr/common.json | 2 + interface/locales/it/common.json | 2 + interface/locales/ja/common.json | 2 + interface/locales/nl/common.json | 2 + interface/locales/ru/common.json | 2 + interface/locales/tr/common.json | 2 + interface/locales/zh-CN/common.json | 2 + interface/locales/zh-TW/common.json | 2 + 15 files changed, 122 insertions(+), 45 deletions(-) diff --git a/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx b/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx index afd71e3476f6..fca626e7ce74 100644 --- a/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx @@ -44,6 +44,9 @@ export interface ThumbProps { } type ThumbType = { variant: 'original' } | { variant: 'thumbnail' } | { variant: 'icon' }; +type LoadState = { + [K in 'original' | 'thumbnail' | 'icon']: 'notLoaded' | 'loaded' | 'error'; +}; export const FileThumb = forwardRef((props, ref) => { const isDark = useIsDark(); @@ -55,9 +58,11 @@ export const FileThumb = forwardRef((props, ref) = const { library } = useLibraryContext(); - const [loadState, setLoadState] = useState<{ - [K in 'original' | 'thumbnail' | 'icon']: 'notLoaded' | 'loaded' | 'error'; - }>({ original: 'notLoaded', thumbnail: 'notLoaded', icon: 'notLoaded' }); + const [loadState, setLoadState] = useState({ + original: 'notLoaded', + thumbnail: 'notLoaded', + icon: 'notLoaded' + }); const childClassName = 'max-h-full max-w-full object-contain'; const frameClassName = clsx(frame.className, props.frameClassName); diff --git a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx index 78138cfe3b47..7527d1ac6141 100644 --- a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx +++ b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx @@ -7,6 +7,8 @@ import { Plus, SidebarSimple, Slideshow, + Warning, + WarningCircle, X } from '@phosphor-icons/react'; import * as Dialog from '@radix-ui/react-dialog'; @@ -15,6 +17,7 @@ import { ButtonHTMLAttributes, createContext, createRef, + EventHandler, useCallback, useContext, useEffect, @@ -87,6 +90,9 @@ export const QuickPreview = () => { const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [isRenaming, setIsRenaming] = useState(false); const [newName, setNewName] = useState(null); + const [thumbnailLoading, setThumbnailLoading] = useState<'notLoaded' | 'loaded' | 'error'>( + 'notLoaded' + ); const { t } = useLocale(); @@ -156,6 +162,7 @@ export const QuickPreview = () => { if (open || item) return; + setThumbnailLoading('notLoaded'); getQuickPreviewStore().open = false; getQuickPreviewStore().itemIndex = 0; setShowMetadata(false); @@ -247,7 +254,6 @@ export const QuickPreview = () => { const background = !withoutBackgroundKinds.includes(kind); const icon = iconKinds.includes(kind); - return ( (getQuickPreviewStore().open = open)}> @@ -277,21 +283,23 @@ export const QuickPreview = () => { >
-
- {background && ( -
- -
-
- )} +
+ {thumbnailLoading !== 'error' && + thumbnailLoading !== 'notLoaded' && + background && ( +
+ +
+
+ )}
{ + {thumbnailLoading === 'error' && ( + +
+ +

+ {t('quickpreview_thumbnail_error_message')} +

+
+ + )} + {items.length > 1 && (
@@ -550,33 +573,56 @@ export const QuickPreview = () => {
- - type.variant === 'original' && setThumbErrorToast(undefined) - } - onError={(type, error) => - type.variant === 'original' && - setThumbErrorToast({ - title: t('error_loading_original_file'), - body: error.message - }) - } - loadOriginal - frameClassName="!border-0" - mediaControls - className={clsx( - 'm-3 !w-auto flex-1 !overflow-hidden rounded', - !background && !icon && 'bg-app-box shadow' - )} - childClassName={clsx( - 'rounded', - kind === 'Text' && 'p-3', - !icon && 'h-full', - textKinds.includes(kind) && 'select-text' - )} - magnification={magnification} - /> + {thumbnailLoading === 'error' ? ( + <> + + + ) : ( + { + setThumbnailLoading('loaded'); + type.variant === 'original' && + setThumbErrorToast(undefined); + }} + onError={(type, error) => { + setThumbnailLoading('error'); + type.variant === 'original' && + setThumbErrorToast({ + title: t('error_loading_original_file'), + body: error.message + }); + }} + loadOriginal + frameClassName="!border-0" + mediaControls + className={clsx( + thumbnailLoading === 'notLoaded' && 'hidden', + 'm-3 !w-auto flex-1 !overflow-hidden rounded', + !background && !icon && 'bg-app-box shadow' + )} + childClassName={clsx( + 'rounded', + kind === 'Text' && 'p-3', + !icon && 'h-full', + textKinds.includes(kind) && 'select-text' + )} + magnification={magnification} + /> + )} {explorerLayoutStore.showImageSlider && activeItem && ( diff --git a/interface/locales/ar/common.json b/interface/locales/ar/common.json index 8b7bbf72da3d..8b96852a48b8 100644 --- a/interface/locales/ar/common.json +++ b/interface/locales/ar/common.json @@ -560,6 +560,8 @@ "quick_preview": "معاينة سريعة", "quick_rescan_started": "Quick rescan started", "quick_view": "عرض سريع", + "quickpreview_thumbnail_error_message": "غير قادر على تحميل الصورة ذات الدقة الكاملة", + "quickpreview_thumbnail_error_tip": "تعذر العثور على الصورة. ولذلك، يتم عرض الصورة المصغرة.", "random": "عشوائي", "receiver": "المتلقي", "receiver_description": "تتلقى هذه العملية العمليات من Spacedrive Cloud وتخزنها.", diff --git a/interface/locales/be/common.json b/interface/locales/be/common.json index a99137e3e9fc..314c5d117db7 100644 --- a/interface/locales/be/common.json +++ b/interface/locales/be/common.json @@ -551,6 +551,8 @@ "quick_preview": "Хуткі прагляд", "quick_rescan_started": "Пачата хуткае сканіраванне", "quick_view": "Хуткі прагляд", + "quickpreview_thumbnail_error_message": "Немагчыма загрузіць выяву ў поўным раздзяленні", + "quickpreview_thumbnail_error_tip": "Выяву не ўдалося знайсці. Такім чынам, паказана мініяцюра.", "random": "Выпадковы", "receiver": "Атрымальнік", "receiver_description": "Гэты працэс атрымлівае і захоўвае аперацыі з Spacedrive Cloud.", diff --git a/interface/locales/de/common.json b/interface/locales/de/common.json index f1a1fc392eaf..7e1a1670b680 100644 --- a/interface/locales/de/common.json +++ b/interface/locales/de/common.json @@ -170,8 +170,8 @@ "dialog": "Dialog", "dialog_shortcut_description": "Um Aktionen und Operationen auszuführen", "direction": "Richtung", - "directory": "Verzeichnis", "directories": "Verzeichnisse", + "directory": "Verzeichnis", "disabled": "Deaktiviert", "disconnected": "Getrennt", "display_formats": "Anzeigeformate", @@ -548,6 +548,8 @@ "quick_preview": "Schnellvorschau", "quick_rescan_started": "Schnellsuche gestartet", "quick_view": "Schnellansicht", + "quickpreview_thumbnail_error_message": "Bild in voller Auflösung kann nicht geladen werden", + "quickpreview_thumbnail_error_tip": "Das Bild konnte nicht gefunden werden. Daher wird das Miniaturbild angezeigt.", "random": "Zufällig", "receiver": "Empfänger", "receiver_description": "Dieser Prozess empfängt und speichert Vorgänge von Spacedrive Cloud.", @@ -600,8 +602,8 @@ "secure_delete": "Sicheres Löschen", "security": "Sicherheit", "security_description": "Halten deinen Client sicher.", - "see_more": "Mehr anzeigen", "see_less": "Weniger anzeigen", + "see_more": "Mehr anzeigen", "send": "Senden", "send_report": "Send Report", "sender": "Absender", diff --git a/interface/locales/en/common.json b/interface/locales/en/common.json index eaf2e95c2e0d..21136f0ac188 100644 --- a/interface/locales/en/common.json +++ b/interface/locales/en/common.json @@ -554,6 +554,8 @@ "quick_preview": "Quick Preview", "quick_rescan_started": "Quick rescan started", "quick_view": "Quick view", + "quickpreview_thumbnail_error_message": "Unable to load full resolution image", + "quickpreview_thumbnail_error_tip": "The image was unable to be found. Therefore, the thumbnail is shown.", "random": "Random", "receiver": "Receiver", "receiver_description": "This process receives and stores operations from Spacedrive Cloud.", diff --git a/interface/locales/es/common.json b/interface/locales/es/common.json index d8ffaac9bc73..c2423fe54a5e 100644 --- a/interface/locales/es/common.json +++ b/interface/locales/es/common.json @@ -550,6 +550,8 @@ "quick_preview": "Vista rápida", "quick_rescan_started": "Quick rescan started", "quick_view": "Vista rápida", + "quickpreview_thumbnail_error_message": "No se puede cargar la imagen en resolución completa", + "quickpreview_thumbnail_error_tip": "No se pudo encontrar la imagen. Por lo tanto, se muestra la miniatura.", "random": "Aleatorio", "receiver": "Receptor", "receiver_description": "Este proceso recibe y almacena operaciones de Spacedrive Cloud.", diff --git a/interface/locales/fr/common.json b/interface/locales/fr/common.json index 4d1f36e4c26e..88c651e1819b 100644 --- a/interface/locales/fr/common.json +++ b/interface/locales/fr/common.json @@ -550,6 +550,8 @@ "quick_preview": "Aperçu rapide", "quick_rescan_started": "Quick rescan started", "quick_view": "Vue rapide", + "quickpreview_thumbnail_error_message": "Impossible de charger l'image en pleine résolution", + "quickpreview_thumbnail_error_tip": "L'image n'a pas pu être trouvée. Par conséquent, la vignette est affichée.", "random": "Aléatoire", "receiver": "Destinataire", "receiver_description": "Ce processus reçoit et stocke les opérations de Spacedrive Cloud.", diff --git a/interface/locales/it/common.json b/interface/locales/it/common.json index 188df3fd8f87..42da2532b8f5 100644 --- a/interface/locales/it/common.json +++ b/interface/locales/it/common.json @@ -550,6 +550,8 @@ "quick_preview": "Anteprima rapida", "quick_rescan_started": "Quick rescan started", "quick_view": "Visualizzazione rapida", + "quickpreview_thumbnail_error_message": "Impossibile caricare l'immagine a piena risoluzione", + "quickpreview_thumbnail_error_tip": "Impossibile trovare l'immagine. Pertanto, viene mostrata la miniatura.", "random": "Casuale", "receiver": "Ricevitore", "receiver_description": "Questo processo riceve e archivia le operazioni da Spacedrive Cloud.", diff --git a/interface/locales/ja/common.json b/interface/locales/ja/common.json index 2c5192abe846..e41c68a19a16 100644 --- a/interface/locales/ja/common.json +++ b/interface/locales/ja/common.json @@ -544,6 +544,8 @@ "quick_preview": "クイック プレビュー", "quick_rescan_started": "簡易再スキャンを開始", "quick_view": "クイック プレビュー", + "quickpreview_thumbnail_error_message": "フル解像度の画像を読み込めません", + "quickpreview_thumbnail_error_tip": "画像が見つかりませんでした。そのため、サムネイルが表示されます。", "random": "ランダム", "receiver": "受信機", "receiver_description": "このプロセスは、Spacedrive Cloud から操作を受信して​​保存します。", diff --git a/interface/locales/nl/common.json b/interface/locales/nl/common.json index 4d95d9fbd942..f7de23521e66 100644 --- a/interface/locales/nl/common.json +++ b/interface/locales/nl/common.json @@ -548,6 +548,8 @@ "quick_preview": "Snelle Voorvertoning", "quick_rescan_started": "Quick rescan started", "quick_view": "Geef snel weer", + "quickpreview_thumbnail_error_message": "Kan afbeelding met volledige resolutie niet laden", + "quickpreview_thumbnail_error_tip": "De afbeelding kon niet worden gevonden. Daarom wordt de miniatuur weergegeven.", "random": "Willekeurig", "receiver": "Ontvanger", "receiver_description": "Dit proces ontvangt en bewaart bewerkingen van Spacedrive Cloud.", diff --git a/interface/locales/ru/common.json b/interface/locales/ru/common.json index d98078ae0465..cfb05b4a6ac1 100644 --- a/interface/locales/ru/common.json +++ b/interface/locales/ru/common.json @@ -551,6 +551,8 @@ "quick_preview": "Быстрый просмотр", "quick_rescan_started": "Начато быстрое сканирование", "quick_view": "Быстрый просмотр", + "quickpreview_thumbnail_error_message": "Невозможно загрузить изображение в полном разрешении.", + "quickpreview_thumbnail_error_tip": "Изображение не удалось найти. Поэтому отображается миниатюра.", "random": "Случайный", "receiver": "Получатель", "receiver_description": "Этот процесс получает и сохраняет операции из Spacedrive Cloud.", diff --git a/interface/locales/tr/common.json b/interface/locales/tr/common.json index 301dc83757b3..1732cdd03d53 100644 --- a/interface/locales/tr/common.json +++ b/interface/locales/tr/common.json @@ -548,6 +548,8 @@ "quick_preview": "Hızlı Önizleme", "quick_rescan_started": "Quick rescan started", "quick_view": "Hızlı bakış", + "quickpreview_thumbnail_error_message": "Tam çözünürlüklü resim yüklenemiyor", + "quickpreview_thumbnail_error_tip": "Resim bulunamadı. Bu nedenle küçük resim gösterilir.", "random": "Rastgele", "receiver": "Alıcı", "receiver_description": "Bu süreç, işlemleri Spacedrive Cloud'dan alır ve saklar.", diff --git a/interface/locales/zh-CN/common.json b/interface/locales/zh-CN/common.json index 215cb4330495..2d7ad275427c 100644 --- a/interface/locales/zh-CN/common.json +++ b/interface/locales/zh-CN/common.json @@ -544,6 +544,8 @@ "quick_preview": "快速预览", "quick_rescan_started": "正在快速重新扫描目录。", "quick_view": "快速查看", + "quickpreview_thumbnail_error_message": "无法加载全分辨率图像", + "quickpreview_thumbnail_error_tip": "无法找到图像。因此显示缩略图。", "random": "随机的", "receiver": "接收者", "receiver_description": "该进程接收并存储来自 Spacedrive Cloud 的操作。", diff --git a/interface/locales/zh-TW/common.json b/interface/locales/zh-TW/common.json index 5f10e9c994fd..9e0eb65e6e00 100644 --- a/interface/locales/zh-TW/common.json +++ b/interface/locales/zh-TW/common.json @@ -544,6 +544,8 @@ "quick_preview": "快速預覽", "quick_rescan_started": "Quick rescan started", "quick_view": "快速查看", + "quickpreview_thumbnail_error_message": "無法載入全解析度影像", + "quickpreview_thumbnail_error_tip": "無法找到該圖像。因此，顯示縮圖。", "random": "隨機的", "receiver": "接收者", "receiver_description": "此進程接收並儲存來自 Spacedrive Cloud 的操作。",