imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move upload verification logic to RoomView.

Browse source 
Improve upload dialog ux
This commit is contained in:
Will Hunt 2018-06-23 14:28:20 +01:00
parent 736b76bbb0
commit 541f1d71fb
2 changed files with 47 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/structures/RoomView.js
View file

@ -26,6 +26,7 @@ const React = require("react");
const ReactDOM = require("react-dom");
import PropTypes from 'prop-types';
import Promise from 'bluebird';
import filesize from 'filesize';
const classNames = require("classnames");
import { _t } from '../../languageHandler';
@ -49,8 +50,6 @@ import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
const DEBUG = false;
let debuglog = function() {};
let mediaLimitCache = null;
const BROWSER_SUPPORTS_SANDBOX = 'sandbox' in document.createElement('iframe');
if (DEBUG) {
@ -96,9 +95,9 @@ module.exports = React.createClass({
roomLoading: true,
peekLoading: false,
shouldPeek: true,
// Media limits for uploading, this may change.
mediaLimits: {},
// Media limits for uploading.
mediaConfig: undefined,
// The event to be scrolled to initially
initialEventId: null,
@ -152,24 +151,31 @@ module.exports = React.createClass({
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
MatrixClientPeg.get().on("RoomMember.membership", this.onRoomMemberMembership);
MatrixClientPeg.get().on("accountData", this.onAccountData);
this._fetchMediaLimits();
this._fetchMediaConfig();
// Start listening for RoomViewStore updates
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
this._onRoomViewStoreUpdate(true);
},
_fetchMediaLimits: function(invalidateCache: boolean = false) {
let limits;
if(invalidateCache || mediaLimitCache == null) {
MatrixClientPeg.get().getMediaLimits().then((_limits) => {
limits = _limits;
}).catch(() => {
// Media repo can't or won't report limits, so provide an empty object (no limits).
limits = {};
});
mediaLimitCache = limits;
_fetchMediaConfig: function(invalidateCache: boolean = false) {
/// NOTE: Using global here so we don't make repeated requests for the
/// config every time we swap room.
if(global.mediaConfig !== undefined && !invalidateCache) {
this.setState({mediaConfig: global.mediaConfig});
return;
}
this.state.mediaLimits = limits;
console.log("[Media Config] Fetching");
MatrixClientPeg.get().getMediaConfig().then((config) => {
console.log("[Media Config] Fetched config:", config);
return config;
}).catch(() => {
// Media repo can't or won't report limits, so provide an empty object (no limits).
console.log("[Media Config] Could not fetch config, so not limiting uploads.");
return {};
}).then((config) => {
global.mediaConfig = config;
this.setState({mediaConfig: config});
});
},
_onRoomViewStoreUpdate: function(initial) {
@ -501,8 +507,8 @@ module.exports = React.createClass({
case 'notifier_enabled':
case 'upload_failed':
// 413: File was too big or upset the server in some way.
if(payload.data.error.http_status === 413) {
this._fetchMediaLimits(true);
if(payload.error.http_status === 413) {
this._fetchMediaConfig(true);
}
case 'upload_started':
case 'upload_finished':
@ -935,6 +941,15 @@ module.exports = React.createClass({
this.setState({ draggingFile: false });
},
isFileUploadAllowed(file) {
if (this.state.mediaConfig !== undefined &&
this.state.mediaConfig["m.upload.size"] !== undefined &&
file.size > this.state.mediaConfig["m.upload.size"]) {
return _t("File is too big. Maximum file size is %(fileSize)s", {fileSize: filesize(this.state.mediaConfig["m.upload.size"])});
}
return true;
},
uploadFile: async function(file) {
dis.dispatch({action: 'focus_composer'});
@ -1677,7 +1692,7 @@ module.exports = React.createClass({
callState={this.state.callState}
disabled={this.props.disabled}
showApps={this.state.showApps}
mediaLimits={this.state.mediaLimits}
uploadAllowed={this.isFileUploadAllowed}
/>;
}