From 239d147d9757c62cbfb6ae7b2900b0e5ace6f71c Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 5 Jan 2016 15:49:45 -0500 Subject: Changed Audio/Video preview to just display a file info when encountering a file that cannot be played --- web/react/components/audio_video_preview.jsx | 114 +++++++++++++++++++++++++++ web/react/components/file_info_preview.jsx | 31 ++++++++ web/react/components/view_image.jsx | 104 ++++++------------------ web/react/utils/utils.jsx | 19 +++++ 4 files changed, 190 insertions(+), 78 deletions(-) create mode 100644 web/react/components/audio_video_preview.jsx create mode 100644 web/react/components/file_info_preview.jsx (limited to 'web') diff --git a/web/react/components/audio_video_preview.jsx b/web/react/components/audio_video_preview.jsx new file mode 100644 index 000000000..7d00fbdaa --- /dev/null +++ b/web/react/components/audio_video_preview.jsx @@ -0,0 +1,114 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from '../utils/constants.jsx'; +import FileInfoPreview from './file_info_preview.jsx'; +import * as Utils from '../utils/utils.jsx'; + +export default class AudioVideoPreview extends React.Component { + constructor(props) { + super(props); + + this.handleFileInfoChanged = this.handleFileInfoChanged.bind(this); + this.handleLoadError = this.handleLoadError.bind(this); + + this.stop = this.stop.bind(this); + + this.state = { + canPlay: true + }; + } + + componentWillMount() { + this.handleFileInfoChanged(this.props.fileInfo); + } + + componentDidMount() { + if (this.refs.source) { + $(ReactDOM.findDOMNode(this.refs.source)).one('error', this.handleLoadError); + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.fileUrl !== nextProps.fileUrl) { + this.handleFileInfoChanged(nextProps.fileInfo); + } + } + + handleFileInfoChanged(fileInfo) { + let video = ReactDOM.findDOMNode(this.refs.video); + if (!video) { + video = document.createElement('video'); + } + + const canPlayType = video.canPlayType(fileInfo.mime_type); + + this.setState({ + canPlay: canPlayType === 'probably' || canPlayType === 'maybe' + }); + } + + componentDidUpdate() { + if (this.refs.source) { + $(ReactDOM.findDOMNode(this.refs.source)).one('error', this.handleLoadError); + } + } + + handleLoadError() { + this.setState({ + canPlay: false + }); + } + + stop() { + if (this.refs.video) { + const video = ReactDOM.findDOMNode(this.refs.video); + video.pause(); + video.currentTime = 0; + } + } + + render() { + if (!this.state.canPlay) { + return ( + + ); + } + + let width = Constants.WEB_VIDEO_WIDTH; + let height = Constants.WEB_VIDEO_HEIGHT; + if (Utils.isMobile()) { + width = Constants.MOBILE_VIDEO_WIDTH; + height = Constants.MOBILE_VIDEO_HEIGHT; + } + + // add a key to the video to prevent React from using an old video source while a new one is loading + return ( + + ); + } +} + +AudioVideoPreview.propTypes = { + filename: React.PropTypes.string.isRequired, + fileUrl: React.PropTypes.string.isRequired, + fileInfo: React.PropTypes.object.isRequired, + maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired +}; diff --git a/web/react/components/file_info_preview.jsx b/web/react/components/file_info_preview.jsx new file mode 100644 index 000000000..4b76cd162 --- /dev/null +++ b/web/react/components/file_info_preview.jsx @@ -0,0 +1,31 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from '../utils/utils.jsx'; + +export default function FileInfoPreview({filename, fileUrl, fileInfo}) { + // non-image files include a section providing details about the file + let infoString = 'File type ' + fileInfo.extension.toUpperCase(); + if (fileInfo.size > 0) { + infoString += ', Size ' + Utils.fileSizeToString(fileInfo.size); + } + + const name = decodeURIComponent(Utils.getFileName(filename)); + + return ( +
+ + + + +
+
{name}
+
{infoString}
+
+
+ ); +} diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 196a44bd0..31ec91248 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -4,7 +4,9 @@ import * as AsyncClient from '../utils/async_client.jsx'; import * as Client from '../utils/client.jsx'; import * as Utils from '../utils/utils.jsx'; +import AudioVideoPreview from './audio_video_preview.jsx'; import Constants from '../utils/constants.jsx'; +import FileInfoPreview from './file_info_preview.jsx'; import FileStore from '../stores/file_store.jsx'; import ViewImagePopoverBar from './view_image_popover_bar.jsx'; const Modal = ReactBootstrap.Modal; @@ -27,7 +29,6 @@ export default class ViewImageModal extends React.Component { this.onFileStoreChange = this.onFileStoreChange.bind(this); this.getPublicLink = this.getPublicLink.bind(this); - this.getPreviewImagePath = this.getPreviewImagePath.bind(this); this.onMouseEnterImage = this.onMouseEnterImage.bind(this); this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this); @@ -83,9 +84,7 @@ export default class ViewImageModal extends React.Component { $(window).off('keyup', this.handleKeyPress); if (this.refs.video) { - var video = ReactDOM.findDOMNode(this.refs.video); - video.pause(); - video.currentTime = 0; + this.refs.video.stop(); } FileStore.removeChangeListener(this.onFileStoreChange); @@ -152,7 +151,7 @@ export default class ViewImageModal extends React.Component { if (fileType === 'image') { let previewUrl; if (fileInfo.has_image_preview) { - previewUrl = fileInfo.getPreviewImagePath(filename); + previewUrl = Utils.getPreviewImagePath(filename); } else { // some images (eg animated gifs) just show the file itself and not a preview previewUrl = Utils.getFileUrl(filename); @@ -198,25 +197,6 @@ export default class ViewImageModal extends React.Component { ); } - getPreviewImagePath(filename) { - // Returns the path to a preview image that can be used to represent a file. - var fileInfo = Utils.splitFileLocation(filename); - var fileType = Utils.getFileType(fileInfo.ext); - - if (fileType === 'image') { - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) { - fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1]; - } - fileInfo.path = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path; - - return fileInfo.path + '_preview.jpg?' + Utils.getSessionIndex(); - } - - // only images have proper previews, so just use a placeholder icon for non-images - return Utils.getPreviewImagePathForFileType(fileType); - } - onMouseEnterImage() { this.setState({showFooter: true}); } @@ -237,72 +217,33 @@ export default class ViewImageModal extends React.Component { if (this.state.loaded[this.state.imgId]) { // this.state.fileInfo is for the current image and we shoudl have it before we load the image const fileInfo = this.state.fileInfo; - - const extension = Utils.splitFileLocation(filename).ext; - const fileType = Utils.getFileType(extension); + const fileType = Utils.getFileType(fileInfo.extension); if (fileType === 'image') { - let previewUrl; - if (fileInfo.has_preview_image) { - previewUrl = this.getPreviewImagePath(filename); - } else { - previewUrl = fileUrl; - } - content = ( ); } else if (fileType === 'video' || fileType === 'audio') { - let width = Constants.WEB_VIDEO_WIDTH; - let height = Constants.WEB_VIDEO_HEIGHT; - if (Utils.isMobile()) { - width = Constants.MOBILE_VIDEO_WIDTH; - height = Constants.MOBILE_VIDEO_HEIGHT; - } - content = ( - + ); } else { - // non-image files include a section providing details about the file - let infoString = 'File type ' + fileInfo.extension.toUpperCase(); - if (fileInfo.size > 0) { - infoString += ', Size ' + Utils.fileSizeToString(fileInfo.size); - } - - const name = decodeURIComponent(Utils.getFileName(filename)); - content = ( -
- - - - -
-
{name}
-
{infoString}
-
-
+ ); } } else { @@ -424,7 +365,14 @@ function LoadingImagePreview({progress}) { ); } -function ImagePreview({maxHeight, fileUrl, previewUrl}) { +function ImagePreview({filename, fileUrl, fileInfo, maxHeight}) { + let previewUrl; + if (fileInfo.has_preview_image) { + previewUrl = Utils.getPreviewImagePath(filename); + } else { + previewUrl = fileUrl; + } + return ( Date: Wed, 6 Jan 2016 09:54:05 -0500 Subject: Removed temporary fix for old filenames that used absolute urls pointing to the get file api --- web/react/components/file_attachment.jsx | 4 ---- web/react/components/file_preview.jsx | 7 +------ web/react/utils/utils.jsx | 18 ++---------------- 3 files changed, 3 insertions(+), 26 deletions(-) (limited to 'web') diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 2474b3d8a..c10269680 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -125,10 +125,6 @@ export default class FileAttachment extends React.Component { getFileInfoFromName(name) { var fileInfo = utils.splitFileLocation(name); - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) { - fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1]; - } fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path; return fileInfo; diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index d625a811e..265d3f367 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -35,12 +35,7 @@ export default class FilePreview extends React.Component { var ext = filenameSplit[filenameSplit.length - 1]; var type = Utils.getFileType(ext); - // This is a temporary patch to fix issue with old files using absolute paths - - if (filename.indexOf('/api/v1/files/get') !== -1) { - filename = filename.split('/api/v1/files/get')[1]; - } - filename = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename + '?' + Utils.getSessionIndex(); + filename = Utils.getFileUrl(filename); if (type === 'image') { previews.push( diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 41ede7712..e84fdf671 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -533,13 +533,7 @@ export function getPreviewImagePath(filename) { const fileType = getFileType(fileInfo.ext); if (fileType === 'image') { - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) { - fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1]; - } - fileInfo.path = getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path; - - return fileInfo.path + '_preview.jpg?' + getSessionIndex(); + return getFileUrl(fileInfo.path + '_preview.jpg'); } // only images have proper previews, so just use a placeholder icon for non-images @@ -1069,15 +1063,7 @@ export function fileSizeToString(bytes) { // Converts a filename (like those attached to Post objects) to a url that can be used to retrieve attachments from the server. export function getFileUrl(filename) { - var url = filename; - - // This is a temporary patch to fix issue with old files using absolute paths - if (url.indexOf('/api/v1/files/get') !== -1) { - url = filename.split('/api/v1/files/get')[1]; - } - url = getWindowLocationOrigin() + '/api/v1/files/get' + url + '?' + getSessionIndex(); - - return url; + return getWindowLocationOrigin() + '/api/v1/files/get' + filename + '?' + getSessionIndex(); } // Gets the name of a file (including extension) from a given url or file path. -- cgit v1.2.3-1-g7c22