enable viewing video attachments

app/src/common/constants/fileTypes.js

@@ -35,3 +35,4 @@ export const IMAGE = 'image';
 export const JAR = 'jar';
 export const GTAR = 'gtar';
 export const KML = 'kml';
+export const MP4 = 'mp4';

app/src/controllers/log/attachments/constants.js

@@ -33,6 +33,7 @@ export const CLEAR_ATTACHMENTS_ACTION = 'clearAttachmentsAction';
 export const ATTACHMENT_HAR_FILE_MODAL_ID = 'attachmentHarFileModal';
 export const ATTACHMENT_CODE_MODAL_ID = 'attachmentCodeModal';
 export const ATTACHMENT_IMAGE_MODAL_ID = 'attachmentImageModal';
+export const ATTACHMENT_VIDEO_MODAL_ID = 'attachmentVideoModal';
 export const FETCH_FIRST_ATTACHMENTS_ACTION = 'fetchFirstAttachments';
 export const SET_ACTIVE_ATTACHMENT_ACTION = 'setActiveAttachment';
 
@@ -57,6 +58,7 @@ export const FILE_PREVIEWS_MAP = {
   [FILE_TYPES.TAZ]: archive,
   [FILE_TYPES.TAR]: archive,
   [FILE_TYPES.GZIP]: archive,
+  [FILE_TYPES.MP4]: html,
 };
 
 export const FILE_PATTERNS_MAP = {
@@ -73,6 +75,7 @@ export const FILE_MODAL_IDS_MAP = {
   [FILE_TYPES.PHP]: ATTACHMENT_CODE_MODAL_ID,
   [FILE_TYPES.HAR]: ATTACHMENT_HAR_FILE_MODAL_ID,
   [FILE_TYPES.IMAGE]: ATTACHMENT_IMAGE_MODAL_ID,
+  [FILE_TYPES.MP4]: ATTACHMENT_VIDEO_MODAL_ID,
 };
 
 export const FILE_ACTIONS_MAP = {
@@ -90,6 +93,7 @@ export const FILE_ACTIONS_MAP = {
     FILE_TYPES.CSV,
     FILE_TYPES.PDF,
     FILE_TYPES.IMAGE,
+    FILE_TYPES.MP4,
   ],
   [OPEN_ATTACHMENT_IN_MODAL_ACTION]: [
     FILE_TYPES.XML,
@@ -99,6 +103,7 @@ export const FILE_ACTIONS_MAP = {
     FILE_TYPES.PHP,
     FILE_TYPES.HAR,
     FILE_TYPES.IMAGE,
+    FILE_TYPES.MP4,
   ],
 };
 

app/src/controllers/log/attachments/index.js

@@ -29,6 +29,7 @@ export {
   ATTACHMENT_CODE_MODAL_ID,
   ATTACHMENT_HAR_FILE_MODAL_ID,
   ATTACHMENT_IMAGE_MODAL_ID,
+  ATTACHMENT_VIDEO_MODAL_ID,
   ATTACHMENTS_NAMESPACE,
   DOWNLOAD_ATTACHMENT_ACTION,
   OPEN_ATTACHMENT_IN_BROWSER_ACTION,

app/src/controllers/log/attachments/sagas.js

@@ -35,6 +35,7 @@ import {
   ATTACHMENT_CODE_MODAL_ID,
   ATTACHMENT_HAR_FILE_MODAL_ID,
   ATTACHMENT_IMAGE_MODAL_ID,
+  ATTACHMENT_VIDEO_MODAL_ID,
   FETCH_ATTACHMENTS_CONCAT_ACTION,
   ATTACHMENTS_NAMESPACE,
   DEFAULT_PAGE_SIZE,
@@ -106,6 +107,14 @@ function* openImageModalsWorker(data) {
   URL.revokeObjectURL(imageURL);
 }
 
+function* openVideoModalsWorker(data) {
+  const videoData = yield call(fetchFileData, data, { responseType: 'blob' });
+  const videoURL = URL.createObjectURL(videoData);
+  yield put(showModalAction({ id: ATTACHMENT_VIDEO_MODAL_ID, data: { video: videoURL } }));
+  yield take(HIDE_MODAL);
+  URL.revokeObjectURL(videoURL);
+}
+
 /* BINARY */
 function* openBinaryModalWorker(data) {
   const binaryData = yield call(fetchFileData, data);
@@ -123,6 +132,7 @@ function* openBinaryModalWorker(data) {
 
 const ATTACHMENT_MODAL_WORKERS = {
   [ATTACHMENT_IMAGE_MODAL_ID]: openImageModalsWorker,
+  [ATTACHMENT_VIDEO_MODAL_ID]: openVideoModalsWorker,
   [ATTACHMENT_HAR_FILE_MODAL_ID]: openHarModalWorker,
   [ATTACHMENT_CODE_MODAL_ID]: openBinaryModalWorker,
 };

app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.jsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2019 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import track from 'react-tracking';
+import { injectIntl } from 'react-intl';
+import classNames from 'classnames/bind';
+import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
+import { ModalLayout, withModal } from 'components/main/modal';
+import { ATTACHMENT_VIDEO_MODAL_ID } from 'controllers/log/attachments';
+import { LOG_PAGE_EVENTS } from 'components/main/analytics/events';
+import { messages } from './messages';
+import styles from './attachmentVideoModal.scss';
+
+const cx = classNames.bind(styles);
+
+@withModal(ATTACHMENT_VIDEO_MODAL_ID)
+@track()
+@injectIntl
+export class AttachmentVideoModal extends Component {
+  static propTypes = {
+    data: PropTypes.shape({
+      video: PropTypes.string,
+    }).isRequired,
+    intl: PropTypes.object.isRequired,
+    tracking: PropTypes.shape({
+      trackEvent: PropTypes.func,
+      getTrackingData: PropTypes.func,
+    }).isRequired,
+  };
+
+  renderCancelButton = () => ({
+    text: this.props.intl.formatMessage(COMMON_LOCALE_KEYS.CLOSE),
+    eventInfo: LOG_PAGE_EVENTS.CLOSE_BTN_ATTACHMENT_MODAL,
+    onClick: (closeModal) => closeModal(),
+  });
+
+  render() {
+    const {
+      intl: { formatMessage },
+      data: { video },
+    } = this.props;
+
+    return (
+      <ModalLayout
+        title={formatMessage(messages.title)}
+        cancelButton={this.renderCancelButton()}
+        className={cx('attachment-video-modal')}
+        closeIconEventInfo={LOG_PAGE_EVENTS.CLOSE_ICON_ATTACHMENT_MODAL}
+      >
+        <div className={cx('attachment-modal-content-wrapper')}>
+          <div className={cx('attachment-video-wrapper')}>
+            <a className={cx('attachment-video')}>
+              <video controls className={cx('video-item')}>
+                <track kind="captions" src="captions.vtt" srcLang="en" label="English" default />
+                <source src={video} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </a>
+          </div>
+        </div>
+      </ModalLayout>
+    );
+  }
+}

app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.scss

@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2019 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.attachment-video-modal {
+  max-width: 1000px;
+  width: 1000px;
+  margin-left: -500px;
+
+  @media (max-width: $SCREEN_XS_MAX) {
+    width: auto;
+    margin-left: 0;
+  }
+}
+
+.attachment-modal-content-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.attachment-video-wrapper {
+  display: table;
+  text-align: center;
+}
+
+.attachment-video {
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%;
+  height: 100%;
+}
+
+.video-item {
+  max-width: 100%;
+}

app/src/pages/inside/logsPage/modals/attachments/index.js

@@ -17,3 +17,4 @@
 export { AttachmentCodeModal } from './attachmentCodeModal';
 export { AttachmentHarFileModal } from './attachmentHarFileModal';
 export { AttachmentImageModal } from './attachmentImageModal';
+export { AttachmentVideoModal } from './attachmentVideoModal';