3494 media field revamp

app/react/App/scss/modules/_attachments-modal.scss

@@ -60,6 +60,7 @@
 
   &__content {
     flex: 1;
+    overflow: hidden;
 
     > div {
       display: flex;
@@ -90,9 +91,11 @@
 
   &__tabs-content {
     flex: 1;
+    overflow: auto;
+    overflow-x: hidden;
 
     .tab-content {
-      padding: 24px 0;
+      padding: 24px 0 0 0;
       height: 100%;
 
       &.centered {
@@ -124,6 +127,104 @@
           color: $c-primary;
         }
       }
+
+      .media-grid {
+        width: calc(100% + 20px);
+        max-width: calc(100% + 20px);
+        margin-left: -10px;
+
+        .row {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        &-item {
+          width: 100%;
+          flex-basis: 100%;
+          margin-bottom: 15px;
+          padding-left: 10px;
+          padding-right: 10px;
+          cursor: pointer;
+
+          @media (min-width: 768px) {
+            width: 33.3333%;
+            flex-basis: 33.3333%;
+          }
+
+          @media (min-width: 1024px) {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-card {
+          background: #ffffff;
+          border: 1px solid #dddddd;
+          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+          padding: 6px;
+
+          &.active {
+            border-color: $c-type-9;
+            border-width: 2px;
+          }
+
+          &-header {
+            h5 {
+              margin: 0;
+              font-weight: 500;
+              font-size: 12px;
+              line-height: 14px;
+            }
+
+            span {
+              font-weight: 500;
+              font-size: 10px;
+              line-height: 12px;
+              color: #888888;
+            }
+          }
+
+          &-content {
+            padding-top: 85%;
+            position: relative;
+            overflow: hidden;
+
+            .media {
+              position: absolute;
+              top: 0;
+              left: 0;
+              bottom: 0;
+              right: 0;
+              overflow: hidden;
+
+              img {
+                object-fit: contain;
+                object-position: center;
+                width: 100%;
+                height: 100%;
+                background-color: #fafafa;
+              }
+
+              .video-container {
+                height: 100%;
+
+                > div:first-child {
+                  padding-bottom: initial;
+                  overflow: initial;
+                  height: 100%;
+                  display: flex;
+                  margin-top: 0 !important;
+                  margin-bottom: 0 !important;
+
+                  .react-player {
+                    height: auto !important;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 

app/react/App/scss/modules/_search.scss

@@ -13,7 +13,7 @@
   position: relative;
   display: block;
   max-width: 100%;
-  
+
   @media (min-width: 768px) {
     max-width: calc(100% - 550px);
     width: 632px;
@@ -234,12 +234,13 @@
 }
 
 .admin-filter {
-  span, label {
-    color: #2B56C1;
+  span,
+  label {
+    color: #2b56c1;
   }
 
   input {
-    border: #2B56C1;
+    border: #2b56c1;
   }
 }
 
@@ -363,6 +364,42 @@
   }
 }
 
+.search__filter--selected__media {
+  margin-top: 8px;
+
+  img {
+    object-fit: contain;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+    background-color: #fafafa;
+  }
+
+  .video-container {
+    height: 100%;
+
+    > div:first-child {
+      padding-bottom: initial;
+      overflow: initial;
+      height: 100%;
+      display: flex;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+
+      .react-player {
+        height: auto !important;
+      }
+    }
+  }
+}
+
+.search__filter--selected__media-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
 .switcher-wrapper {
   float: right;
   span {

app/react/Attachments/components/RenderAttachment.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AttachmentSchema } from 'shared/types/commonTypes';
+import MarkdownMedia from 'app/Markdown/components/MarkdownMedia';
+import ReactPlayer from 'react-player';
+
+export const RenderAttachment = ({ attachment }: { attachment: AttachmentSchema }) => {
+  const { mimetype = '' } = attachment;
+
+  if (mimetype.includes('image')) {
+    return attachment.url ? (
+      <img src={attachment.url} alt={attachment.originalname} />
+    ) : (
+      <img src={`/api/files/${attachment.filename}`} alt={attachment.originalname} />
+    );
+  }
+
+  const isVideoAudio = mimetype.includes('video') || mimetype.includes('audio');
+
+  const isFromSupportedSite = attachment.url && ReactPlayer.canPlay(attachment.url);
+
+  if (isVideoAudio || isFromSupportedSite) {
+    return attachment.url ? (
+      <MarkdownMedia config={`(${attachment.url})`} />
+    ) : (
+      <MarkdownMedia config={`(/api/files/${attachment.filename})`} />
+    );
+  }
+
+  return null;
+};

app/react/Attachments/components/specs/RenderAttachment.spec.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { AttachmentSchema } from 'shared/types/commonTypes';
+import MarkdownMedia from 'app/Markdown/components/MarkdownMedia';
+import ReactPlayer from 'react-player';
+import { RenderAttachment } from '../RenderAttachment';
+
+describe('RenderAttachment', () => {
+  let component: ShallowWrapper<typeof RenderAttachment>;
+  let attachment: AttachmentSchema;
+
+  describe('unsuported scenarios', () => {
+    describe('no mimetype', () => {
+      beforeEach(() => {
+        attachment = {
+          url: 'http://somewhere.org',
+          originalname: 'A Sad Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should return null', () => {
+        expect(component.type()).toEqual(null);
+      });
+    });
+
+    describe('unsuported mimetype', () => {
+      beforeEach(() => {
+        attachment = {
+          filename: 'c4ts.pdf',
+          mimetype: 'application/pdf',
+          originalname: 'A Sad Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should return null', () => {
+        expect(component.type()).toEqual(null);
+      });
+    });
+  });
+
+  describe('image', () => {
+    describe('from url', () => {
+      beforeEach(() => {
+        attachment = {
+          url: 'http://awesomecats.org/ahappycat',
+          mimetype: 'image/png',
+          originalname: 'A Happy Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should render a tag image with the url of the image', () => {
+        const img = component.find('img');
+        expect(img.props().src).toBe(attachment.url);
+        expect(img.props().alt).toBe(attachment.originalname);
+      });
+    });
+
+    describe('from file', () => {
+      beforeEach(() => {
+        attachment = {
+          filename: '4h4ppyc47.png',
+          mimetype: 'image/png',
+          originalname: 'A Happy Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should render a tag image with the url of the image', () => {
+        const img = component.find('img');
+        expect(img.props().src).toBe('/api/files/4h4ppyc47.png');
+        expect(img.props().alt).toBe(attachment.originalname);
+      });
+    });
+  });
+
+  describe('video / audio', () => {
+    describe('from url', () => {
+      beforeEach(() => {
+        attachment = {
+          url: 'http://awesomecats.org/ahappycat.mp4',
+          mimetype: 'video/mp4',
+          originalname: 'A Happy Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should render a MarkdownMedia component', () => {
+        const video: ShallowWrapper<typeof MarkdownMedia> = component.find(MarkdownMedia);
+        expect(video.props()).toEqual({
+          config: '(http://awesomecats.org/ahappycat.mp4)',
+          compact: false,
+        });
+      });
+    });
+
+    describe('from file', () => {
+      beforeEach(() => {
+        attachment = {
+          filename: '4h4ppyc47.mp4',
+          mimetype: 'audio/mp4',
+          originalname: 'A Happy Cat',
+        };
+
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should render a tag image with the url of the image', () => {
+        const video: ShallowWrapper<typeof MarkdownMedia> = component.find(MarkdownMedia);
+        expect(video.props()).toEqual({ config: '(/api/files/4h4ppyc47.mp4)', compact: false });
+      });
+    });
+
+    describe('from known media sites', () => {
+      beforeEach(() => {
+        attachment = {
+          url: 'http://reacplayer.valid.url?w=happycat',
+          mimetype: 'application/html',
+          originalname: 'A Happy Cat',
+        };
+
+        jest.spyOn(ReactPlayer, 'canPlay').mockReturnValue(true);
+        component = shallow(<RenderAttachment attachment={attachment} />);
+      });
+
+      it('should render a tag image with the url of the image', () => {
+        const video: ShallowWrapper<typeof MarkdownMedia> = component.find(MarkdownMedia);
+        expect(video.props()).toEqual({
+          config: '(http://reacplayer.valid.url?w=happycat)',
+          compact: false,
+        });
+      });
+    });
+  });
+});