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

2023-08-10 16:54:51 -04:00
parent 17d14968fa
commit d1c176cfc8
5 changed files with 76 additions and 62 deletions
--- 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,
 };
--- 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 />
--- 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':
--- 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>
--- 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>