fix: width and height of asset preview (#558)

raccoongang · Aug 10, 2023 · d1c176c · d1c176c
1 parent 17d1496
commit d1c176c
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 62 deletions.
diff --git a/src/files-and-uploads/FileThumbnail.jsx b/src/files-and-uploads/FileThumbnail.jsx
@@ -4,33 +4,32 @@ import {
   Icon,
   Image,
 } from '@edx/paragon';
-import {
-  AudioFile,
-  Terminal,
-  // FolderZip,
-  InsertDriveFile,
-} from '@edx/paragon/icons';
+import { getSrc } from './data/utils';
 
 const AssetThumbnail = ({
   thumbnail,
   wrapperType,
   externalUrl,
   displayName,
-}) => (
-  <div className="row justify-content-center">
-    {thumbnail ? (
-      <Image fluid thumbnail src={externalUrl} alt={`Thumbnail of ${displayName}`} />
-    ) : (
-      <div className="border rounded p-1">
-        {wrapperType === 'documents' && <Icon src={InsertDriveFile} style={{ height: '48px', width: '48px' }} />}
-        {wrapperType === 'code' && <Icon src={Terminal} style={{ height: '48px', width: '48px' }} />}
-        {wrapperType === 'audio' && <Icon src={AudioFile} style={{ height: '48px', width: '48px' }} />}
-        {wrapperType === 'other' && <Icon src={InsertDriveFile} style={{ height: '48px', width: '48px' }} />}
-      </div>
-    )}
-  </div>
-);
+}) => {
+  const src = getSrc({
+    thumbnail,
+    externalUrl,
+    wrapperType,
+  });
 
+  return (
+    <div className="row justify-content-center">
+      {thumbnail ? (
+        <Image fluid thumbnail src={src} alt={`Thumbnail of ${displayName}`} />
+      ) : (
+        <div className="border rounded p-1">
+          <Icon src={src} style={{ height: '48px', width: '48px' }} />
+        </div>
+      )}
+    </div>
+  );
+};
 AssetThumbnail.defaultProps = {
   thumbnail: null,
 };

diff --git a/src/files-and-uploads/FilesAndUploads.jsx b/src/files-and-uploads/FilesAndUploads.jsx
@@ -39,7 +39,12 @@ const FilesAndUploads = ({
 }) => {
   const dispatch = useDispatch();
   const defaultVal = 'card';
-  const columnSizes = { xs: 12, sm: 6, lg: 3 };
+  const columnSizes = {
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 2,
+  };
   const [currentView, setCurrentView] = useState(defaultVal);
   const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false);
   const [isAddOpen, setAddOpen, setAddClose] = useToggle(false);
@@ -144,30 +149,29 @@ const FilesAndUploads = ({
 
   return (
     <FilesAndUploadsProvider courseId={courseId}>
-      <main className="container p-4 pt-5">
-        <ErrorAlert
-          hideHeading={false}
-          isError={addAssetStatus === RequestStatus.FAILED}
-        >
-          {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.upload })}
-        </ErrorAlert>
-        <ErrorAlert
-          hideHeading={false}
-          isError={deleteAssetStatus === RequestStatus.FAILED}
-        >
-          {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.delete })}
-        </ErrorAlert>
-        <ErrorAlert
-          hideHeading={false}
-          isError={saveAssetStatus === RequestStatus.FAILED}
-        >
-          {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.lock })}
-        </ErrorAlert>
-        <div className="small gray-700">
-          {intl.formatMessage(messages.subheading)}
-        </div>
-        <div className="h2">
-          <FormattedMessage {...messages.heading} />
+      <main className="containerpt-5">
+        <div className="p-4">
+          <ErrorAlert
+            hideHeading={false}
+            isError={addAssetStatus === RequestStatus.FAILED}
+          >
+            {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.upload })}
+          </ErrorAlert>
+          <ErrorAlert
+            hideHeading={false}
+            isError={deleteAssetStatus === RequestStatus.FAILED}
+          >
+            {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.delete })}
+          </ErrorAlert>
+          <ErrorAlert
+            hideHeading={false}
+            isError={saveAssetStatus === RequestStatus.FAILED}
+          >
+            {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.lock })}
+          </ErrorAlert>
+          <div className="h2">
+            <FormattedMessage {...messages.heading} />
+          </div>
         </div>
         <DataTable
           isFilterable
@@ -234,7 +238,7 @@ const FilesAndUploads = ({
           ) : (
             <div data-testid="files-data-table">
               <DataTable.TableControlBar />
-              { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={4} /> }
+              { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
               { currentView === 'list' && <CardView CardComponent={fileCard} columnSizes={{ xs: 12 }} selectionPlacement="left" skeletonCardCount={4} /> }
               <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
               <DataTable.TableFooter />

diff --git a/src/files-and-uploads/data/utils.js b/src/files-and-uploads/data/utils.js
@@ -1,6 +1,11 @@
 import { InsertDriveFile, Terminal, AudioFile } from '@edx/paragon/icons';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import FILES_AND_UPLOAD_TYPE_FILTERS from './constant';
 
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
 export const getWrapperType = (assets) => {
   const assetsWithWraperType = [];
   assets.forEach(asset => {
@@ -19,9 +24,9 @@ export const getWrapperType = (assets) => {
   return assetsWithWraperType;
 };
 
-export const getIcon = ({ thumbnail, wrapperType, externalUrl }) => {
+export const getSrc = ({ thumbnail, wrapperType, externalUrl }) => {
   if (thumbnail) {
-    return externalUrl;
+    return externalUrl || `${getConfig().STUDIO_BASE_URL}${thumbnail}`;
   }
   switch (wrapperType) {
   case 'document':

diff --git a/src/files-and-uploads/table-components/GalleryCard.jsx b/src/files-and-uploads/table-components/GalleryCard.jsx
@@ -7,13 +7,14 @@ import {
   useToggle,
   Chip,
   Truncate,
+  Image,
 } from '@edx/paragon';
 import {
   MoreVert,
 } from '@edx/paragon/icons';
 import FileMenu from '../FileMenu';
 import FileInfo from '../FileInfo';
-import { getIcon } from '../data/utils';
+import { getSrc } from '../data/utils';
 
 const GalleryCard = ({
   className,
@@ -29,9 +30,8 @@ const GalleryCard = ({
     const { locked } = original;
     handleLockedAsset(original.id, !locked);
   };
-  const icon = getIcon({
+  const src = getSrc({
     thumbnail: original.thumbnail,
-    externalUrl: original.externalUrl,
     wrapperType: original.wrapperType,
   });
 
@@ -55,11 +55,15 @@ const GalleryCard = ({
           )}
         />
         <Card.Section>
-          {original.thumbnail ? (
-            <Card.ImageCap src={original.externalUrl} />
-          ) : (
-            <Icon src={icon} style={{ height: '48px', width: '48px' }} />
-          )}
+          <div className="row align-items-center justify-content-center m-0">
+            {original.thumbnail ? (
+              <Image src={src} style={{ height: '76px', width: '135.71px' }} className="border rounded p-1" />
+            ) : (
+              <div className="row border justify-content-center align-items-center rounded m-0" style={{ height: '76px', width: '135.71px' }}>
+                <Icon src={src} style={{ height: '48px', width: '48px' }} />
+              </div>
+            )}
+          </div>
           <Truncate lines={1} className="font-weight-bold small mt-3">
             {original.displayName}
           </Truncate>

diff --git a/src/files-and-uploads/table-components/ListCard.jsx b/src/files-and-uploads/table-components/ListCard.jsx
@@ -7,13 +7,14 @@ import {
   useToggle,
   Chip,
   Truncate,
+  Image,
 } from '@edx/paragon';
 import {
   MoreVert,
 } from '@edx/paragon/icons';
 import FileMenu from '../FileMenu';
 import FileInfo from '../FileInfo';
-import { getIcon } from '../data/utils';
+import { getSrc } from '../data/utils';
 
 const ListCard = ({
   className,
@@ -29,9 +30,8 @@ const ListCard = ({
     const { locked } = original;
     handleLockedAsset(original.id, !locked);
   };
-  const icon = getIcon({
+  const src = getSrc({
     thumbnail: original.thumbnail,
-    externalUrl: original.externalUrl,
     wrapperType: original.wrapperType,
   });
 
@@ -42,11 +42,13 @@ const ListCard = ({
         orientation="horizontal"
         data-testid={`list-card-${original.id}`}
       >
-        <div className="p-3">
+        <div className="row align-items-center justify-content-center m-0 p-3">
           {original.thumbnail ? (
-            <Card.ImageCap src={original.externalUrl} />
+            <Image src={src} style={{ height: '76px', width: '135.71px' }} className="border rounded p-1" />
           ) : (
-            <Icon src={icon} style={{ height: '48px', width: '48px' }} />
+            <div className="row border justify-content-center align-items-center rounded m-0" style={{ height: '76px', width: '135.71px' }}>
+              <Icon src={src} style={{ height: '48px', width: '48px' }} />
+            </div>
           )}
         </div>
         <Card.Body>