Fix: add unsupported icon for resource can't that generate the thumbnail

Related Issues:
   - #25

src/api/resource/Dto.ts

@@ -14,6 +14,8 @@ export interface ResourceFileDto {
     path: string,
 
     ext: string,
+
+    media_type: string,
 }
 
 export interface ResourceResDto {

src/components/display/index.ts

@@ -1,8 +1,7 @@
 export * from './icons';
+export * from './thumbnail';
 export * from './ResponsiveImage';
-export * from './YoutubeThunbnail';
 export * from './EditableText';
-export * from './ResourceThumbnailDisplayer';
 export * from './DateTimeDisplayer';
 export * from './TagTypography';
 export * from './SubTitle';

src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { LocalImageThumbnail, LocalUnsupportThumbnail } from './file';
+import { LocalThumbnailProps } from './file/types';
+
+const LOCAL_MEDIA_TYPE = new Map<string, typeof LocalImageThumbnail>();
+
+LOCAL_MEDIA_TYPE.set('image/jpeg', LocalImageThumbnail);
+LOCAL_MEDIA_TYPE.set('image/png', LocalImageThumbnail);
+LOCAL_MEDIA_TYPE.set('image/gif', LocalImageThumbnail);
+
+interface LocalFileThumbnailDisplayerProps extends LocalThumbnailProps {
+    mediaType: string;
+}
+
+export function LocalFileThumbnailDisplayer(props: LocalFileThumbnailDisplayerProps) {
+    const { filePath, mediaType, ...imgProps } = props;
+
+    if (LOCAL_MEDIA_TYPE.has(mediaType) === false) {
+        return <LocalUnsupportThumbnail mediaType={mediaType} {...imgProps} />;
+    }
+
+    const Thumbnail = LOCAL_MEDIA_TYPE.get(mediaType)!;
+
+    return <Thumbnail filePath={filePath} {...imgProps} />;
+}

src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { ResponsiveImageProps } from '@components/display';
+
+import { YoutubeThumbnail } from './url';
+import { LocalFileThumbnailDisplayer } from './LocalFileThumbnailDisplayer';
+
+export interface ResourceThumbnailDisplayerProps extends ResponsiveImageProps {
+    url?: string | undefined | null;
+
+    filePath?: string | undefined | null;
+
+    mediaType?: string;
+}
+
+export function ResourceThumbnailDisplayer(props: ResourceThumbnailDisplayerProps) {
+    const { url, filePath, mediaType, ...imgProps } = props;
+
+    return (
+        url
+            ? <YoutubeThumbnail url={url!} {...imgProps} />
+            : (
+                <LocalFileThumbnailDisplayer
+                    mediaType={mediaType!}
+                    filePath={filePath!}
+                    {...imgProps}
+                />
+            )
+    );
+}

src/components/display/thumbnail/file/LocalImageThumbnail.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { convertFileSrc } from '@tauri-apps/api/tauri';
+import { ResponsiveImage } from '@components/display';
+import { LocalThumbnailProps } from './types';
+
+export function LocalImageThumbnail(props: LocalThumbnailProps) {
+    const { filePath, ...imgProps } = props;
+    return <ResponsiveImage src={convertFileSrc(filePath)} {...imgProps} />;
+}

src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { ResponsiveImage, ResponsiveImageProps } from '@components/display/ResponsiveImage';
+import UnsupportImage from '@assets/icons/not-supported-icon.png';
+
+export interface LocalUnsupportThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
+    mediaType: string;
+}
+
+export function LocalUnsupportThumbnail(props: LocalUnsupportThumbnailProps) {
+    const { mediaType, ...imgProps } = props;
+
+    return (<ResponsiveImage src={UnsupportImage} {...imgProps} alt={mediaType} />);
+}

src/components/display/thumbnail/file/index.ts

@@ -0,0 +1,2 @@
+export * from './LocalUnsupportThumbnail';
+export * from './LocalImageThumbnail';

src/components/display/thumbnail/file/types.ts

@@ -0,0 +1,5 @@
+import { ResponsiveImageProps } from '@components/display/ResponsiveImage';
+
+export interface LocalThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
+    filePath: string;
+}

src/components/display/thumbnail/index.ts

@@ -0,0 +1,3 @@
+export * from './file';
+export * from './url';
+export * from './ResourceThumbnailDisplayer';

src/components/display/YoutubeThunbnail.tsx → src/components/display/thumbnail/url/YoutubeThunbnail.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { useMemo, useRef, useState } from 'react';
 import { CiImageOff } from 'react-icons/ci';
 import { Center, Image } from '@mantine/core';
 import { getYoutubeVideoId } from '@utils/urlParser';
 import { useBackGroundImage } from '@hooks/ui-hooks';
-
-import { useMemo, useRef, useState } from 'react';
-import { ResponsiveImageProps } from './ResponsiveImage';
+import { ResponsiveImageProps } from '@components/display';
 
 export interface YoutubeThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
     url: string;

src/components/display/thumbnail/url/index.ts

@@ -0,0 +1 @@
+export * from './YoutubeThunbnail';

src/pages/category-list/components/CategoryCard.tsx

@@ -55,6 +55,7 @@ export function CategoryCard(props: CategoryCardProps) {
                                 key={data.id}
                                 url={data.url?.full}
                                 filePath={`${data.root_path}${data.file?.path}`}
+                                mediaType={data.file?.media_type}
                                 alt={data.name}
                                 useBackgoundImg
                             />

src/pages/resource-list/components/ResourceCard.tsx

@@ -49,7 +49,12 @@ export function ResourceCard(props: ResourceCardProps) {
                             </>
                         )}
                         <UnstyledButton>
-                            <ResourceThumbnailDisplayer url={data.url?.full} filePath={`${data.root_path}${data.file?.path}`} alt={data.name} />
+                            <ResourceThumbnailDisplayer
+                                url={data.url?.full}
+                                filePath={`${data.root_path}${data.file?.path}`}
+                                alt={data.name}
+                                mediaType={data.file?.media_type}
+                            />
                         </UnstyledButton>
                     </Box>
                 </Card.Section>