diff --git a/package-lock.json b/package-lock.json index e8e5990d..ece72e39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "date-fns": "^3.3.1", "dayjs": "^1.11.10", "embla-carousel-react": "^7.1.0", + "file-type": "^19.0.0", "i18next": "^23.9.0", "immer": "^10.0.3", "mantine-contextmenu": "^7.5.0", @@ -2958,6 +2959,11 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@tokenizer/token": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz", + "integrity": "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==" + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -5892,6 +5898,22 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-type": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-19.0.0.tgz", + "integrity": "sha512-s7cxa7/leUWLiXO78DVVfBVse+milos9FitauDLG1pI7lNaJ2+5lzPnr2N24ym+84HVwJL6hVuGfgVE+ALvU8Q==", + "dependencies": { + "readable-web-to-node-stream": "^3.0.2", + "strtok3": "^7.0.0", + "token-types": "^5.0.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sindresorhus/file-type?sponsor=1" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -6433,6 +6455,25 @@ "node": ">=0.10.0" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -6516,8 +6557,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/internal-slot": { "version": "1.0.5", @@ -10228,6 +10268,18 @@ "node": ">=8" } }, + "node_modules/peek-readable": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-5.0.0.tgz", + "integrity": "sha512-YtCKvLUOvwtMGmrniQPdO7MwPjgkFBtFIrmfSbYmYuq3tKDV/mcfAhBth1+C3ru7uXIZasc/pHnb+YDYNkkj4A==", + "engines": { + "node": ">=14.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -10828,6 +10880,34 @@ "react-dom": ">=16.6.0" } }, + "node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/readable-web-to-node-stream": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz", + "integrity": "sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==", + "dependencies": { + "readable-stream": "^3.6.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -11180,6 +11260,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/safe-regex-test": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz", @@ -11459,6 +11558,14 @@ "node": ">= 0.4" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/string-argv": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", @@ -11619,6 +11726,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strtok3": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-7.0.0.tgz", + "integrity": "sha512-pQ+V+nYQdC5H3Q7qBZAz/MO6lwGhoC2gOAjuouGf/VO0m7vQRh8QNMl2Uf6SwAtzZ9bOw3UIeBukEGNJl5dtXQ==", + "dependencies": { + "@tokenizer/token": "^0.3.0", + "peek-readable": "^5.0.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -11728,6 +11851,22 @@ "node": ">=8.0" } }, + "node_modules/token-types": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/token-types/-/token-types-5.0.1.tgz", + "integrity": "sha512-Y2fmSnZjQdDb9W4w4r1tswlMHylzWIeOKpx0aZH9BgGtACHhrk3OkT52AzwcuqTRBZtvvnTjDBh8eynMulu8Vg==", + "dependencies": { + "@tokenizer/token": "^0.3.0", + "ieee754": "^1.2.1" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", @@ -12194,8 +12333,7 @@ "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "dev": true + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/v8-compile-cache-lib": { "version": "3.0.1", diff --git a/package.json b/package.json index 8cf4489a..d346bc51 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "date-fns": "^3.3.1", "dayjs": "^1.11.10", "embla-carousel-react": "^7.1.0", + "file-type": "^19.0.0", "i18next": "^23.9.0", "immer": "^10.0.3", "mantine-contextmenu": "^7.5.0", diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 26153e91..fa927e12 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -1712,6 +1712,12 @@ dependencies = [ "rustc_version", ] +[[package]] +name = "file-format" +version = "0.24.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4ba1b81b3c213cf1c071f8bf3b83531f310df99642e58c48247272eef006cae5" + [[package]] name = "filetime" version = "0.2.23" @@ -3127,6 +3133,7 @@ dependencies = [ "cargo-nextest", "cargo-tarpaulin", "chrono", + "file-format", "log", "once_cell", "paste", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 9cf0f645..47c2fdc8 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -38,6 +38,7 @@ regex = "1.10.3" paste = "1.0.14" strum_macros = "0.26.1" strum = "0.26.1" +file-format = { version = "0.24.0", features = [ "reader" ] } [features] # this feature is used for production builds or when `devPath` points to the filesystem diff --git a/src-tauri/src/modules/resource/application/dto/response.rs b/src-tauri/src/modules/resource/application/dto/response.rs index 731b95e1..da69b990 100644 --- a/src-tauri/src/modules/resource/application/dto/response.rs +++ b/src-tauri/src/modules/resource/application/dto/response.rs @@ -19,6 +19,8 @@ pub struct ResourceFileDto { pub path: String, pub ext: Option, + + pub media_type: String, } #[derive(Debug, Deserialize, Serialize)] diff --git a/src-tauri/src/modules/resource/domain/mod.rs b/src-tauri/src/modules/resource/domain/mod.rs index 14784227..1edf510d 100644 --- a/src-tauri/src/modules/resource/domain/mod.rs +++ b/src-tauri/src/modules/resource/domain/mod.rs @@ -62,7 +62,7 @@ impl Resource { // get new name let new_name = new_name.unwrap_or(self.name.clone()); - let ResourceFileVO { uuid, name, path, ext } = self.file.to_owned().unwrap(); + let ResourceFileVO { uuid, name, path, ext, media_type } = self.file.to_owned().unwrap(); // if same as new, do nothing if name == new_name { @@ -96,6 +96,7 @@ impl Resource { path: new_path, uuid: uuid, ext: ext, + media_type: media_type, }); self.name = new_name; diff --git a/src-tauri/src/modules/resource/domain/valueobj/filevo.rs b/src-tauri/src/modules/resource/domain/valueobj/filevo.rs index f09865d0..b21e8a14 100644 --- a/src-tauri/src/modules/resource/domain/valueobj/filevo.rs +++ b/src-tauri/src/modules/resource/domain/valueobj/filevo.rs @@ -1,5 +1,6 @@ use std::path::Path; +use file_format::FileFormat; use serde::Serialize; use crate::modules::resource::domain::ResourceGenericError; @@ -11,6 +12,7 @@ pub struct ResourceFileVO { pub name: String, pub path: String, pub ext: Option, + pub media_type: String, } impl ResourceFileVO { @@ -26,32 +28,53 @@ impl ResourceFileVO { if path.exists() == false { return Err(ResourceGenericError::FilePathNotExist()); } - + if path.file_name().is_none() { return Err(ResourceGenericError::FileNameIsEmpty()); } - let ext = match path.is_file() { - true => path.extension() - .map(|osr| Some(String::from(osr.to_str().unwrap()))) - .unwrap_or(None), - false => Some("folder".to_string()), - }; + let obj = match path.is_file() { + true => Self::handle_file(main_path, path), + false => Self::handle_folder(main_path, path), + }?; + + Ok(obj) + } + + + fn handle_folder(main_path: &str, path: &Path) -> Result { + let name = String::from(path.file_name().unwrap().to_str().unwrap()); + + Ok(ResourceFileVO { + uuid: String::from("id"), + name: name, + ext: None, + path: main_path.to_string(), + media_type: "application/folder".to_string(), + }) + } + + fn handle_file(main_path: &str, path: &Path) -> Result { + let filefmt = FileFormat::from_file(path) + .or(Err(ResourceGenericError::FilePathNotExist()))?; + + let media_type = filefmt.media_type().to_string(); + let ext = path.extension() + .map(|osr| Some(String::from(osr.to_str().unwrap()))) + .unwrap_or(None); let name = String::from(path.file_name().unwrap().to_str().unwrap()); - let name = match path.is_file() { - true if ext.is_none()=> name, - true => String::from(name.slice(..name.chars().count() - ext.as_ref().unwrap().chars().count() - 1)), - false => name, + let name = match ext.is_none() { + true => name, + false => String::from(name.slice(..name.chars().count() - ext.as_ref().unwrap().chars().count() - 1)), }; - Ok( - ResourceFileVO { - uuid: String::from("id"), - name: name, - ext: ext, - path: String::from(main_path), - } - ) + Ok(ResourceFileVO { + uuid: String::from("id"), + name: name, + ext: ext, + path: main_path.to_string(), + media_type: media_type, + }) } } diff --git a/src-tauri/src/modules/resource/infrastructure/domapper.rs b/src-tauri/src/modules/resource/infrastructure/domapper.rs index d647c02d..e1e08f86 100644 --- a/src-tauri/src/modules/resource/infrastructure/domapper.rs +++ b/src-tauri/src/modules/resource/infrastructure/domapper.rs @@ -48,12 +48,12 @@ impl DomainModelMapper for ResourceTaggingDo { // ==================================================================== impl DomainModelMapper for ResourceFileDo { fn to_domain(self) -> ResourceFileVO { - let Self { uuid, name, path, ext } = self; - ResourceFileVO { uuid, name, path, ext } + let Self { uuid, name, path, ext, media_type } = self; + ResourceFileVO { uuid, name, path, ext, media_type } } fn from_domain(value: ResourceFileVO) -> Self { - let ResourceFileVO { uuid, name, path, ext } = value; - Self { uuid, name, path, ext } + let ResourceFileVO { uuid, name, path, ext, media_type } = value; + Self { uuid, name, path, ext, media_type } } } diff --git a/src-tauri/src/modules/resource/repository/data_model.rs b/src-tauri/src/modules/resource/repository/data_model.rs index a4b3a90d..b3713628 100644 --- a/src-tauri/src/modules/resource/repository/data_model.rs +++ b/src-tauri/src/modules/resource/repository/data_model.rs @@ -7,6 +7,7 @@ pub struct ResourceFileDo { pub name: String, pub path: String, pub ext: Option, + pub media_type: String, } #[derive(Debug, Clone, Deserialize, Serialize)] diff --git a/src/api/resource/Dto.ts b/src/api/resource/Dto.ts index 7faaa799..5fb698bb 100644 --- a/src/api/resource/Dto.ts +++ b/src/api/resource/Dto.ts @@ -14,6 +14,8 @@ export interface ResourceFileDto { path: string, ext: string, + + media_type: string, } export interface ResourceResDto { diff --git a/src/assets/icons/not-supported-icon.png b/src/assets/icons/not-supported-icon.png new file mode 100644 index 00000000..b56f12ab Binary files /dev/null and b/src/assets/icons/not-supported-icon.png differ diff --git a/src/components/display/ResourceThumbnailDisplayer.tsx b/src/components/display/ResourceThumbnailDisplayer.tsx deleted file mode 100644 index 3e7cdbe4..00000000 --- a/src/components/display/ResourceThumbnailDisplayer.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import { convertFileSrc } from '@tauri-apps/api/tauri'; - -import { YoutubeThumbnail } from './YoutubeThunbnail'; -import { ResponsiveImage, ResponsiveImageProps } from './ResponsiveImage'; - -interface ResourceThumbnailDisplayerProps extends ResponsiveImageProps { - url?: string | undefined | null; - - filePath?: string | undefined | null; -} - -export function ResourceThumbnailDisplayer(props: ResourceThumbnailDisplayerProps) { - const { url, filePath, ...imgProps } = props; - - return ( - url - ? - : - ); -} diff --git a/src/components/display/index.ts b/src/components/display/index.ts index f7922b87..98742cc6 100644 --- a/src/components/display/index.ts +++ b/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'; diff --git a/src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx b/src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx new file mode 100644 index 00000000..9f6e11e8 --- /dev/null +++ b/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(); + +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 ; + } + + const Thumbnail = LOCAL_MEDIA_TYPE.get(mediaType)!; + + return ; +} diff --git a/src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx b/src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx new file mode 100644 index 00000000..11f30757 --- /dev/null +++ b/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 + ? + : ( + + ) + ); +} diff --git a/src/components/display/thumbnail/file/LocalImageThumbnail.tsx b/src/components/display/thumbnail/file/LocalImageThumbnail.tsx new file mode 100644 index 00000000..b3b1d6de --- /dev/null +++ b/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 ; +} diff --git a/src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx b/src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx new file mode 100644 index 00000000..d8e96b6d --- /dev/null +++ b/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 { + mediaType: string; +} + +export function LocalUnsupportThumbnail(props: LocalUnsupportThumbnailProps) { + const { mediaType, ...imgProps } = props; + + return (); +} diff --git a/src/components/display/thumbnail/file/index.ts b/src/components/display/thumbnail/file/index.ts new file mode 100644 index 00000000..aadbac03 --- /dev/null +++ b/src/components/display/thumbnail/file/index.ts @@ -0,0 +1,2 @@ +export * from './LocalUnsupportThumbnail'; +export * from './LocalImageThumbnail'; diff --git a/src/components/display/thumbnail/file/types.ts b/src/components/display/thumbnail/file/types.ts new file mode 100644 index 00000000..b2369ec5 --- /dev/null +++ b/src/components/display/thumbnail/file/types.ts @@ -0,0 +1,5 @@ +import { ResponsiveImageProps } from '@components/display/ResponsiveImage'; + +export interface LocalThumbnailProps extends Omit { + filePath: string; +} diff --git a/src/components/display/thumbnail/index.ts b/src/components/display/thumbnail/index.ts new file mode 100644 index 00000000..7c856b8b --- /dev/null +++ b/src/components/display/thumbnail/index.ts @@ -0,0 +1,3 @@ +export * from './file'; +export * from './url'; +export * from './ResourceThumbnailDisplayer'; diff --git a/src/components/display/YoutubeThunbnail.tsx b/src/components/display/thumbnail/url/YoutubeThunbnail.tsx similarity index 97% rename from src/components/display/YoutubeThunbnail.tsx rename to src/components/display/thumbnail/url/YoutubeThunbnail.tsx index 4f54ba37..0c4b213d 100644 --- a/src/components/display/YoutubeThunbnail.tsx +++ b/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 { url: string; diff --git a/src/components/display/thumbnail/url/index.ts b/src/components/display/thumbnail/url/index.ts new file mode 100644 index 00000000..2c4edaf0 --- /dev/null +++ b/src/components/display/thumbnail/url/index.ts @@ -0,0 +1 @@ +export * from './YoutubeThunbnail'; diff --git a/src/pages/category-list/components/CategoryCard.tsx b/src/pages/category-list/components/CategoryCard.tsx index 8d713859..7b3b057e 100644 --- a/src/pages/category-list/components/CategoryCard.tsx +++ b/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 /> diff --git a/src/pages/resource-list/components/ResourceCard.tsx b/src/pages/resource-list/components/ResourceCard.tsx index 581ae1a2..f0457986 100644 --- a/src/pages/resource-list/components/ResourceCard.tsx +++ b/src/pages/resource-list/components/ResourceCard.tsx @@ -29,7 +29,7 @@ export function ResourceCard(props: ResourceCardProps) { - + {data.file && ( @@ -49,7 +49,12 @@ export function ResourceCard(props: ResourceCardProps) { )} - +