diff --git a/app/src/common/constants/fileTypes.js b/app/src/common/constants/fileTypes.js index 9d49b08305..bc51ccb794 100644 --- a/app/src/common/constants/fileTypes.js +++ b/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'; diff --git a/app/src/controllers/log/attachments/constants.js b/app/src/controllers/log/attachments/constants.js index 0bd06bfe33..abe3f2ef74 100644 --- a/app/src/controllers/log/attachments/constants.js +++ b/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, ], }; diff --git a/app/src/controllers/log/attachments/index.js b/app/src/controllers/log/attachments/index.js index 72cf302f41..1daaf99a3a 100644 --- a/app/src/controllers/log/attachments/index.js +++ b/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, diff --git a/app/src/controllers/log/attachments/sagas.js b/app/src/controllers/log/attachments/sagas.js index 4d567cd880..693ad96c38 100644 --- a/app/src/controllers/log/attachments/sagas.js +++ b/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, }; diff --git a/app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.jsx b/app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.jsx new file mode 100644 index 0000000000..0cdf6b98c0 --- /dev/null +++ b/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 ( + +
+
+ + + +
+
+
+ ); + } +} diff --git a/app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.scss b/app/src/pages/inside/logsPage/modals/attachments/attachmentVideoModal.scss new file mode 100644 index 0000000000..e2555b8a57 --- /dev/null +++ b/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%; +} diff --git a/app/src/pages/inside/logsPage/modals/attachments/index.js b/app/src/pages/inside/logsPage/modals/attachments/index.js index b428ecc780..a8c3963544 100644 --- a/app/src/pages/inside/logsPage/modals/attachments/index.js +++ b/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';