From d9043b4a66b8075c9deab817119e45f2a6aa9b09 Mon Sep 17 00:00:00 2001
From: Dennis Padiernos <depadiernos@gmail.com>
Date: Wed, 13 Feb 2019 08:27:32 -0600
Subject: [PATCH] enhancement(media library): add visual placeholder for
 non-image files (#2089)

---
 .../MediaLibrary/MediaLibraryCard.js          | 23 ++++++++++++++++---
 .../MediaLibrary/MediaLibraryCardGrid.js      |  1 +
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
index c2164450..a444ae30 100644
--- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
+++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
@@ -26,7 +26,14 @@ const CardImage = styled.img`
   border-radius: 2px 2px 0 0;
 `;
 
-const CardImagePlaceholder = CardImage.withComponent(`div`);
+const CardFileIcon = styled.div`
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 2px 2px 0 0;
+  padding: 1em;
+  font-size: 3em;
+`;
 
 const CardText = styled.p`
   color: ${colors.text};
@@ -36,7 +43,16 @@ const CardText = styled.p`
   line-height: 1.3 !important;
 `;
 
-const MediaLibraryCard = ({ isSelected, displayURL, text, onClick, width, margin, isPrivate }) => (
+const MediaLibraryCard = ({
+  isSelected,
+  displayURL,
+  text,
+  onClick,
+  width,
+  margin,
+  isPrivate,
+  type,
+}) => (
   <Card
     isSelected={isSelected}
     onClick={onClick}
@@ -45,7 +61,7 @@ const MediaLibraryCard = ({ isSelected, displayURL, text, onClick, width, margin
     tabIndex="-1"
     isPrivate={isPrivate}
   >
-    <div>{displayURL ? <CardImage src={displayURL} /> : <CardImagePlaceholder />}</div>
+    <div>{displayURL ? <CardImage src={displayURL} /> : <CardFileIcon>{type}</CardFileIcon>}</div>
     <CardText>{text}</CardText>
   </Card>
 );
@@ -58,6 +74,7 @@ MediaLibraryCard.propTypes = {
   width: PropTypes.string.isRequired,
   margin: PropTypes.string.isRequired,
   isPrivate: PropTypes.bool,
+  type: PropTypes.string,
 };
 
 export default MediaLibraryCard;
diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
index b39bda17..b3d2e045 100644
--- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
+++ b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -47,6 +47,7 @@ const MediaLibraryCardGrid = ({
           margin={cardMargin}
           isPrivate={isPrivate}
           displayURL={file.isViewableImage && getDisplayURL(file)}
+          type={file.type}
         />
       ))}
       {!canLoadMore ? null : <Waypoint onEnter={onLoadMore} />}