Initial commit for support of video-type attachments

src/components/post-attachment-video.jsx

@@ -0,0 +1,74 @@
+import { PureComponent } from 'react';
+import { faFileVideo, faPlayCircle } from '@fortawesome/free-regular-svg-icons';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+import { formatFileSize } from '../utils';
+import { ButtonLink } from './button-link';
+import { Icon } from './fontawesome-icons';
+
+class VideoAttachment extends PureComponent {
+  state = {
+    isOpen: false,
+  };
+
+  handleClickOnRemoveAttachment = () => {
+    this.props.removeAttachment(this.props.id);
+  };
+
+  toggleOpen = () => {
+    this.setState({ isOpen: true });
+  };
+
+  render() {
+    const { props } = this;
+    const { isOpen } = this.state;
+    const formattedFileSize = formatFileSize(props.fileSize);
+
+    const title = `${props.fileName} (${formattedFileSize})`;
+
+    const thumbnailStyle = {
+      width: props.imageSizes.t?.w,
+      height: props.imageSizes.t?.h,
+      backgroundImage: `url(${props.imageSizes.t?.url})`,
+    };
+
+    return (
+      <div className="attachment" role="figure" aria-label={`Video attachment ${title}`}>
+        {isOpen ? (
+          <div>
+            <video title={title} autoPlay controls>
+              <source src={props.url} />
+              Your browser does not support HTML5 video tag.
+            </video>
+          </div>
+        ) : (
+          <ButtonLink
+            onClick={this.toggleOpen}
+            className="video-attachment-thumb"
+            title="Click to play video"
+            style={thumbnailStyle}
+          >
+            <Icon icon={faPlayCircle} className="video-attachment-click-to-play" />
+          </ButtonLink>
+        )}
+        <div>
+          <a href={props.url} title={title} target="_blank">
+            <Icon icon={faFileVideo} className="attachment-icon" />
+            <span>{title}</span>
+          </a>
+
+          {props.isEditing && (
+            <Icon
+              icon={faTimes}
+              className="remove-attachment"
+              title="Remove video file"
+              onClick={this.handleClickOnRemoveAttachment}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default VideoAttachment;

src/components/post-attachments.jsx

@@ -1,12 +1,29 @@
 import ImageAttachmentsContainer from './post-attachment-image-container';
 import AudioAttachment from './post-attachment-audio';
 import GeneralAttachment from './post-attachment-general';
+import VideoAttachment from './post-attachment-video';
 import ErrorBoundary from './error-boundary';
 
 export default (props) => {
   const attachments = props.attachments || [];
 
-  const imageAttachments = attachments.filter((attachment) => attachment.mediaType === 'image');
+  const imageAttachments = [];
+  const audioAttachments = [];
+  const videoAttachments = [];
+  const generalAttachments = [];
+
+  attachments.forEach((attachment) => {
+    if (attachment.mediaType === 'image') {
+      imageAttachments.push(attachment);
+    } else if (attachment.mediaType === 'audio') {
+      audioAttachments.push(attachment);
+    } else if (attachment.mediaType === 'video') {
+      videoAttachments.push(attachment);
+    } else {
+      generalAttachments.push(attachment);
+    }
+  });
+
   const imageAttachmentsContainer =
     imageAttachments.length > 0 ? (
       <ImageAttachmentsContainer
@@ -22,7 +39,6 @@ export default (props) => {
       false
     );
 
-  const audioAttachments = attachments.filter((attachment) => attachment.mediaType === 'audio');
   const audioAttachmentsNodes = audioAttachments.map((attachment) => (
     <AudioAttachment
       key={attachment.id}
@@ -38,7 +54,21 @@ export default (props) => {
       false
     );
 
-  const generalAttachments = attachments.filter((attachment) => attachment.mediaType === 'general');
+  const videoAttachmentsNodes = videoAttachments.map((attachment) => (
+    <VideoAttachment
+      key={attachment.id}
+      isEditing={props.isEditing}
+      removeAttachment={props.removeAttachment}
+      {...attachment}
+    />
+  ));
+  const videoAttachmentsContainer =
+    videoAttachments.length > 0 ? (
+      <div className="video-attachments">{videoAttachmentsNodes}</div>
+    ) : (
+      false
+    );
+
   const generalAttachmentsNodes = generalAttachments.map((attachment) => (
     <GeneralAttachment
       key={attachment.id}
@@ -59,6 +89,7 @@ export default (props) => {
       <ErrorBoundary>
         {imageAttachmentsContainer}
         {audioAttachmentsContainer}
+        {videoAttachmentsContainer}
         {generalAttachmentsContainer}
       </ErrorBoundary>
     </div>

styles/shared/attachments-edit.scss

@@ -74,6 +74,7 @@
 }
 
 .audio-attachments,
+.video-attachments,
 .general-attachments {
   .attachment:hover .remove-attachment {
     display: block;

styles/shared/attachments.scss

@@ -132,6 +132,7 @@
 }
 
 .audio-attachments,
+.video-attachments,
 .general-attachments {
   .attachment {
     position: relative;
@@ -149,3 +150,33 @@
     }
   }
 }
+
+.video-attachments {
+  .video-attachment-thumb {
+    display: flex;
+    width: 80px;
+    height: 80px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2px;
+    background-color: #000;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-size: 2em;
+
+    &:hover {
+      font-size: 2.5em;
+    }
+  }
+
+  .video-attachment-click-to-play {
+    filter: drop-shadow(0px 0px 3px #000);
+    color: #fff;
+  }
+
+  video {
+    max-width: 100%;
+    max-height: 400px;
+    background-color: #eee;
+  }
+}

styles/shared/media-viewer.scss

@@ -34,10 +34,11 @@
     width: 100%;
     height: 100%;
   }
-}
-video {
-  width: 100% !important;
-  height: auto !important;
+
+  video {
+    width: 100% !important;
+    height: auto !important;
+  }
 }
 .media-link {
   .icon-bond {

test/jest-setup.js

@@ -1 +1,6 @@
 require('../config/lib/loader-node');
+
+// https://github.com/testing-library/react-testing-library/issues/470
+Object.defineProperty(HTMLMediaElement.prototype, 'muted', {
+  set: () => {},
+});