Merge pull request #73 from XIMDEX/develop

Develop
XIMDEX · Jan 8, 2025 · 0ec1671 · 0ec1671
2 parents 215d0ba + 0c564c7
commit 0ec1671
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/src/features/Resources/Modals/PreviewResource.tsx b/src/features/Resources/Modals/PreviewResource.tsx
@@ -61,8 +61,7 @@ export default function PreviewResource( { resData, cdn } ) {
     const setImgPreview = () => {
         let previewUrl = resourceData?.previews?.[0]?.dam_url || resourceData?.previews?.[0] || resourceData?.files?.[0]?.dam_url || 'noimg.png';
         if(!previewUrl.includes('@@@dam:@image')) previewUrl = 'noimg.png'
-        const previewSize = previewUrl === 'noimg.png' ? '' : '/medium';
-        setPreview(MainService().render(previewUrl + previewSize));
+        setPreview(MainService().render(previewUrl));
         if (previewUrl === 'noimg.png') {
           setPreview(window.location.protocol + "//" + window.location.host+"/noimg.png");
         }

diff --git a/src/features/Resources/Modals/ViewResource.tsx b/src/features/Resources/Modals/ViewResource.tsx
@@ -19,15 +19,18 @@ import { selectWorkspacesData } from '../../../appSlice';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     imgView: {
-      height: '400px',
-      display: 'block',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'top',
-      backgroundSize: 'cover',
-      border: '1px solid #e1e1e1',
-      borderRadius: 5,
-      marginBottom: 15
-    },
+        height: '400px',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 'contain',
+        border: '1px solid #e1e1e1',
+        borderRadius: 5,
+        marginBottom: 15,
+      },
     mediaPlayer: {
         width: '100%'
     },
@@ -75,8 +78,8 @@ export default function ViewResource( { resData } ) {
 
 
 
-    let preview = render(resData, 'medium')
-
+    let preview = render(resData, '')
+    let previewVideo = render(resData,"")
     const closeModal = () => {
       let element: HTMLElement = document.getElementsByClassName('MuiBackdrop-root')[0] as HTMLElement;
       element.click();
@@ -164,7 +167,12 @@ export default function ViewResource( { resData } ) {
         <Grid item sm={12}>
           {resourceData !== null && (
             <>
-              <div style={{backgroundImage: 'url('+preview+')'}} className={classes.imgView}/>
+              {resourceData.type === 'image' && (
+                <div style={{backgroundImage: 'url('+preview+')'}} className={classes.imgView}/>
+              )}
+              {resourceData.type === 'video' && (
+                <video controls className={classes.mediaPlayer}> <source src={previewVideo} /></video>
+              )}
               <Grid container spacing={3}>
                 <Grid item sm={5} hidden={resourceData.files?.length < 1}>
                   <div>{resourceData.files?.length > 0 ? <RelatedFiles resData={resourceData} files={resourceData.files} withPlayer={true} /> : <Label>No files attached</Label>}</div>

diff --git a/src/features/Resources/Resource.tsx b/src/features/Resources/Resource.tsx
@@ -48,7 +48,7 @@ export function Resource( { data, listMode, resourceType } ) {
     const [blured, setBlur] = useState(false)
     const [focusedDom, setFocusedDom] = useState(null)
 
-    const preview = render(data)
+    const preview = render(data,"thumbnail")
 
     function truncate(string, length = 150)
     {
@@ -160,11 +160,17 @@ export function Resource( { data, listMode, resourceType } ) {
                 <div className="dam-type">{resourceType === MULTIMEDIA ? 'multimedia' : resourceType}</div>
                 <div className="dam-preview">
                     <div className="dam-preview-img">
-                        <LazyImage
-                            src={preview}
-                            alt='lazy_img'
-                            grid
-                        />
+                        {
+                            data?.data?.img ?
+                                <img src={`${data.data.img}`} alt="img" />
+                            :
+                                <LazyImage
+                                    src={preview}
+                                    alt='lazy_img'
+                                    grid
+                                />
+                        }
+
                     </div>
                     <div className="dam-preview-title" title={data.name || data.data.description.course_title}>
                         <strong>{data.name || data.data.description.course_title || 'no name set'} </strong>