2018-01-11 14:49:46 +03:00
/ * *
2017-06-28 14:23:33 +03:00
Copyright 2017 Vector Creations Ltd
2018-07-11 20:07:32 +03:00
Copyright 2018 New Vector Ltd
2017-05-22 14:34:27 +03:00
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 .
* /
'use strict' ;
2017-07-12 16:16:47 +03:00
import url from 'url' ;
2017-11-10 14:42:56 +03:00
import qs from 'querystring' ;
2017-06-28 17:53:18 +03:00
import React from 'react' ;
2017-12-26 04:03:18 +03:00
import PropTypes from 'prop-types' ;
2017-06-28 17:53:18 +03:00
import MatrixClientPeg from '../../../MatrixClientPeg' ;
2017-07-06 11:28:48 +03:00
import ScalarAuthClient from '../../../ScalarAuthClient' ;
2017-11-30 01:16:22 +03:00
import WidgetMessaging from '../../../WidgetMessaging' ;
2019-02-01 13:02:02 +03:00
import AccessibleButton from './AccessibleButton' ;
2017-07-14 13:17:59 +03:00
import Modal from '../../../Modal' ;
2019-02-01 13:02:02 +03:00
import { _t } from '../../../languageHandler' ;
2017-07-14 13:17:59 +03:00
import sdk from '../../../index' ;
2017-07-26 13:28:43 +03:00
import AppPermission from './AppPermission' ;
2017-08-01 19:29:29 +03:00
import AppWarning from './AppWarning' ;
2017-07-27 18:41:52 +03:00
import MessageSpinner from './MessageSpinner' ;
2018-06-26 13:59:16 +03:00
import WidgetUtils from '../../../utils/WidgetUtils' ;
2017-08-16 20:19:12 +03:00
import dis from '../../../dispatcher' ;
2018-07-11 20:07:32 +03:00
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore' ;
2019-02-01 13:02:02 +03:00
import classNames from 'classnames' ;
2017-05-22 14:34:27 +03:00
2017-07-12 16:16:47 +03:00
const ALLOWED _APP _URL _SCHEMES = [ 'https:' , 'http:' ] ;
2018-03-16 13:20:14 +03:00
const ENABLE _REACT _PERF = false ;
2017-07-06 11:28:48 +03:00
2018-01-11 14:49:46 +03:00
export default class AppTile extends React . Component {
2018-01-11 15:33:02 +03:00
constructor ( props ) {
super ( props ) ;
2018-07-11 20:07:32 +03:00
// The key used for PersistedElement
this . _persistKey = 'widget_' + this . props . id ;
2018-01-11 16:20:58 +03:00
this . state = this . _getNewState ( props ) ;
2018-01-11 15:33:02 +03:00
2018-07-11 20:07:32 +03:00
this . _onAction = this . _onAction . bind ( this ) ;
2018-01-11 15:33:02 +03:00
this . _onLoaded = this . _onLoaded . bind ( this ) ;
this . _onEditClick = this . _onEditClick . bind ( this ) ;
this . _onDeleteClick = this . _onDeleteClick . bind ( this ) ;
2019-02-01 13:02:02 +03:00
this . _onCancelClick = this . _onCancelClick . bind ( this ) ;
2018-01-11 15:33:02 +03:00
this . _onSnapshotClick = this . _onSnapshotClick . bind ( this ) ;
this . onClickMenuBar = this . onClickMenuBar . bind ( this ) ;
2018-03-08 20:20:42 +03:00
this . _onMinimiseClick = this . _onMinimiseClick . bind ( this ) ;
2018-04-05 01:45:47 +03:00
this . _grantWidgetPermission = this . _grantWidgetPermission . bind ( this ) ;
this . _revokeWidgetPermission = this . _revokeWidgetPermission . bind ( this ) ;
2018-04-25 14:49:30 +03:00
this . _onPopoutWidgetClick = this . _onPopoutWidgetClick . bind ( this ) ;
2018-05-22 21:14:54 +03:00
this . _onReloadWidgetClick = this . _onReloadWidgetClick . bind ( this ) ;
2018-01-11 15:33:02 +03:00
}
2017-10-31 19:31:46 +03:00
/ * *
2017-11-10 14:50:14 +03:00
* Set initial component state when the App wUrl ( widget URL ) is being updated .
* Component props * must * be passed ( rather than relying on this . props ) .
2017-11-08 20:44:54 +03:00
* @ param { Object } newProps The new properties of the component
2017-10-31 19:31:46 +03:00
* @ return { Object } Updated component state to be set with setState
* /
2017-11-10 13:17:55 +03:00
_getNewState ( newProps ) {
2017-11-08 20:44:54 +03:00
const widgetPermissionId = [ newProps . room . roomId , encodeURIComponent ( newProps . url ) ] . join ( '_' ) ;
2017-11-02 21:33:11 +03:00
const hasPermissionToLoad = localStorage . getItem ( widgetPermissionId ) ;
2018-07-11 20:07:32 +03:00
const PersistedElement = sdk . getComponent ( "elements.PersistedElement" ) ;
2017-11-02 21:33:11 +03:00
return {
2017-12-29 01:27:12 +03:00
initialising : true , // True while we are mangling the widget URL
2018-07-11 20:07:32 +03:00
// True while the iframe content is loading
loading : this . props . waitForIframeLoad && ! PersistedElement . isMounted ( this . _persistKey ) ,
2017-11-30 01:16:22 +03:00
widgetUrl : this . _addWurlParams ( newProps . url ) ,
2017-11-02 21:33:11 +03:00
widgetPermissionId : widgetPermissionId ,
2017-11-10 14:50:14 +03:00
// Assume that widget has permission to load if we are the user who
// added it to the room, or if explicitly granted by the user
2017-11-08 20:44:54 +03:00
hasPermissionToLoad : hasPermissionToLoad === 'true' || newProps . userId === newProps . creatorUserId ,
2017-11-02 21:33:11 +03:00
error : null ,
deleting : false ,
2017-12-08 18:12:48 +03:00
widgetPageTitle : newProps . widgetPageTitle ,
2017-11-02 21:33:11 +03:00
} ;
2018-01-11 14:49:46 +03:00
}
2017-10-27 19:49:14 +03:00
2017-12-16 12:16:24 +03:00
/ * *
* Does the widget support a given capability
2018-05-12 23:29:37 +03:00
* @ param { string } capability Capability to check for
2017-12-16 12:16:24 +03:00
* @ return { Boolean } True if capability supported
* /
_hasCapability ( capability ) {
2018-07-11 20:07:32 +03:00
return ActiveWidgetStore . widgetHasCapability ( this . props . id , capability ) ;
2018-01-11 14:49:46 +03:00
}
2017-12-16 12:16:24 +03:00
2017-11-30 01:16:22 +03:00
/ * *
* Add widget instance specific parameters to pass in wUrl
* Properties passed to widget instance :
* - widgetId
* - origin / parent URL
* @ param { string } urlString Url string to modify
* @ return { string }
* Url string with parameters appended .
* If url can not be parsed , it is returned unmodified .
* /
_addWurlParams ( urlString ) {
const u = url . parse ( urlString ) ;
if ( ! u ) {
console . error ( "_addWurlParams" , "Invalid URL" , urlString ) ;
return url ;
}
const params = qs . parse ( u . query ) ;
// Append widget ID to query parameters
params . widgetId = this . props . id ;
2018-07-23 15:50:16 +03:00
// Append current / parent URL, minus the hash because that will change when
// we view a different room (ie. may change for persistent widgets)
params . parentUrl = window . location . href . split ( '#' , 2 ) [ 0 ] ;
2017-11-30 01:16:22 +03:00
u . search = undefined ;
u . query = params ;
return u . format ( ) ;
2018-01-11 14:49:46 +03:00
}
2017-11-30 01:16:22 +03:00
2017-10-27 19:49:14 +03:00
isMixedContent ( ) {
2017-08-01 19:29:29 +03:00
const parentContentProtocol = window . location . protocol ;
const u = url . parse ( this . props . url ) ;
const childContentProtocol = u . protocol ;
2017-08-01 19:49:41 +03:00
if ( parentContentProtocol === 'https:' && childContentProtocol !== 'https:' ) {
2017-08-02 19:05:46 +03:00
console . warn ( "Refusing to load mixed-content app:" ,
parentContentProtocol , childContentProtocol , window . location , this . props . url ) ;
2017-08-01 19:29:29 +03:00
return true ;
}
return false ;
2018-01-11 14:49:46 +03:00
}
2017-08-01 19:29:29 +03:00
2017-10-27 19:49:14 +03:00
componentWillMount ( ) {
2017-10-27 15:47:51 +03:00
this . setScalarToken ( ) ;
2018-01-11 14:49:46 +03:00
}
2017-10-27 15:47:51 +03:00
2017-12-15 19:56:02 +03:00
componentDidMount ( ) {
2018-01-18 15:02:45 +03:00
// Widget action listeners
2018-07-11 20:07:32 +03:00
this . dispatcherRef = dis . register ( this . _onAction ) ;
2018-01-11 14:49:46 +03:00
}
2017-12-15 19:56:02 +03:00
2018-01-18 15:02:45 +03:00
componentWillUnmount ( ) {
// Widget action listeners
dis . unregister ( this . dispatcherRef ) ;
2018-07-11 20:07:32 +03:00
// if it's not remaining on screen, get rid of the PersistedElement container
if ( ! ActiveWidgetStore . getWidgetPersistence ( this . props . id ) ) {
2018-07-24 18:50:34 +03:00
ActiveWidgetStore . destroyPersistentWidget ( ) ;
2018-08-01 17:01:11 +03:00
const PersistedElement = sdk . getComponent ( "elements.PersistedElement" ) ;
PersistedElement . destroyElement ( this . _persistKey ) ;
2018-07-11 20:07:32 +03:00
}
2018-01-18 15:02:45 +03:00
}
2017-11-02 21:33:11 +03:00
/ * *
* Adds a scalar token to the widget URL , if required
* Component initialisation is only complete when this function has resolved
* /
2017-10-27 15:47:51 +03:00
setScalarToken ( ) {
2017-11-10 12:44:58 +03:00
this . setState ( { initialising : true } ) ;
2018-05-27 20:12:55 +03:00
if ( ! WidgetUtils . isScalarUrl ( this . props . url ) ) {
2017-11-09 17:07:29 +03:00
console . warn ( 'Non-scalar widget, not setting scalar token!' , url ) ;
2017-11-02 21:33:11 +03:00
this . setState ( {
error : null ,
2017-11-30 01:16:22 +03:00
widgetUrl : this . _addWurlParams ( this . props . url ) ,
2017-11-02 21:33:11 +03:00
initialising : false ,
} ) ;
2017-07-06 11:28:48 +03:00
return ;
}
2017-11-02 21:33:11 +03:00
// Fetch the token before loading the iframe as we need it to mangle the URL
2017-10-31 13:04:37 +03:00
if ( ! this . _scalarClient ) {
2017-10-27 15:47:51 +03:00
this . _scalarClient = new ScalarAuthClient ( ) ;
}
2017-07-06 11:28:48 +03:00
this . _scalarClient . getScalarToken ( ) . done ( ( token ) => {
2017-10-27 19:49:14 +03:00
// Append scalar_token as a query param if not already present
2017-08-01 17:53:42 +03:00
this . _scalarClient . scalarToken = token ;
2017-11-30 01:16:22 +03:00
const u = url . parse ( this . _addWurlParams ( this . props . url ) ) ;
2017-11-07 15:33:38 +03:00
const params = qs . parse ( u . query ) ;
2017-10-31 13:37:40 +03:00
if ( ! params . scalar _token ) {
params . scalar _token = encodeURIComponent ( token ) ;
2017-11-09 17:07:29 +03:00
// u.search must be set to undefined, so that u.format() uses query paramerters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
u . search = undefined ;
u . query = params ;
2017-07-06 11:28:48 +03:00
}
this . setState ( {
error : null ,
widgetUrl : u . format ( ) ,
2017-11-02 21:33:11 +03:00
initialising : false ,
2017-07-06 11:28:48 +03:00
} ) ;
2017-12-06 00:41:44 +03:00
2017-12-08 18:12:48 +03:00
// Fetch page title from remote content if not already set
2017-12-08 21:47:00 +03:00
if ( ! this . state . widgetPageTitle && params . url ) {
2017-12-08 18:12:48 +03:00
this . _fetchWidgetTitle ( params . url ) ;
}
2017-07-06 11:28:48 +03:00
} , ( err ) => {
2017-11-09 17:07:29 +03:00
console . error ( "Failed to get scalar_token" , err ) ;
2017-07-06 11:28:48 +03:00
this . setState ( {
error : err . message ,
2017-11-02 21:33:11 +03:00
initialising : false ,
2017-07-06 11:28:48 +03:00
} ) ;
} ) ;
2018-01-11 14:49:46 +03:00
}
2017-09-04 10:31:25 +03:00
2017-10-31 19:31:46 +03:00
componentWillReceiveProps ( nextProps ) {
if ( nextProps . url !== this . props . url ) {
2017-11-10 13:17:55 +03:00
this . _getNewState ( nextProps ) ;
2017-11-02 21:33:11 +03:00
this . setScalarToken ( ) ;
2017-12-07 01:54:32 +03:00
} else if ( nextProps . show && ! this . props . show && this . props . waitForIframeLoad ) {
2017-11-09 17:28:24 +03:00
this . setState ( {
loading : true ,
} ) ;
2017-12-13 13:14:26 +03:00
} else if ( nextProps . widgetPageTitle !== this . props . widgetPageTitle ) {
this . setState ( {
widgetPageTitle : nextProps . widgetPageTitle ,
} ) ;
2017-10-27 19:49:14 +03:00
}
2018-01-11 14:49:46 +03:00
}
2017-10-27 15:47:51 +03:00
2017-10-27 19:49:14 +03:00
_canUserModify ( ) {
2018-05-09 00:44:49 +03:00
// User widgets should always be modifiable by their creator
if ( this . props . userWidget && MatrixClientPeg . get ( ) . credentials . userId === this . props . creatorUserId ) {
return true ;
}
// Check if the current user can modify widgets in the current room
2017-08-01 13:39:17 +03:00
return WidgetUtils . canUserModifyWidgets ( this . props . room . roomId ) ;
2018-01-11 14:49:46 +03:00
}
2017-07-27 20:10:28 +03:00
2017-10-27 19:49:14 +03:00
_onEditClick ( e ) {
2017-07-14 13:17:59 +03:00
console . log ( "Edit widget ID " , this . props . id ) ;
2018-02-07 17:44:01 +03:00
if ( this . props . onEditClick ) {
this . props . onEditClick ( ) ;
} else {
2019-06-18 00:34:30 +03:00
// The dialog handles scalar auth for us
2018-02-07 17:44:01 +03:00
const IntegrationsManager = sdk . getComponent ( "views.settings.IntegrationsManager" ) ;
2019-06-18 00:34:30 +03:00
Modal . createTrackedDialog ( 'Integrations Manager' , '' , IntegrationsManager , {
room : this . props . room ,
screen : 'type_' + this . props . type ,
integrationId : this . props . id
} , "mx_IntegrationsManager" ) ;
2018-02-07 17:44:01 +03:00
}
2018-01-11 14:49:46 +03:00
}
2017-05-22 20:00:17 +03:00
2017-12-03 14:25:15 +03:00
_onSnapshotClick ( e ) {
2017-12-15 19:56:02 +03:00
console . warn ( "Requesting widget snapshot" ) ;
2018-07-11 20:07:32 +03:00
ActiveWidgetStore . getWidgetMessaging ( this . props . id ) . getScreenshot ( )
2018-03-28 14:22:06 +03:00
. catch ( ( err ) => {
console . error ( "Failed to get screenshot" , err ) ;
} )
. then ( ( screenshot ) => {
dis . dispatch ( {
action : 'picture_snapshot' ,
file : screenshot ,
} , true ) ;
} ) ;
2018-01-11 14:49:46 +03:00
}
2017-12-03 14:25:15 +03:00
2017-11-10 14:50:14 +03:00
/ * I f u s e r h a s p e r m i s s i o n t o m o d i f y w i d g e t s , d e l e t e t h e w i d g e t ,
* otherwise revoke access for the widget to load in the user ' s browser
2017-07-27 20:10:28 +03:00
* /
2017-10-27 19:49:14 +03:00
_onDeleteClick ( ) {
2018-02-07 17:44:01 +03:00
if ( this . props . onDeleteClick ) {
this . props . onDeleteClick ( ) ;
2019-02-01 13:02:02 +03:00
} else if ( this . _canUserModify ( ) ) {
// Show delete confirmation dialog
const QuestionDialog = sdk . getComponent ( "dialogs.QuestionDialog" ) ;
Modal . createTrackedDialog ( 'Delete Widget' , '' , QuestionDialog , {
title : _t ( "Delete Widget" ) ,
description : _t (
"Deleting a widget removes it for all users in this room." +
" Are you sure you want to delete this widget?" ) ,
button : _t ( "Delete widget" ) ,
onFinished : ( confirmed ) => {
if ( ! confirmed ) {
return ;
}
this . setState ( { deleting : true } ) ;
// HACK: This is a really dirty way to ensure that Jitsi cleans up
// its hold on the webcam. Without this, the widget holds a media
// stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
if ( this . refs . appFrame ) {
// In practice we could just do `+= ''` to trick the browser
// into thinking the URL changed, however I can foresee this
// being optimized out by a browser. Instead, we'll just point
// the iframe at a page that is reasonably safe to use in the
// event the iframe doesn't wink away.
// This is relative to where the Riot instance is located.
this . refs . appFrame . src = 'about:blank' ;
}
WidgetUtils . setRoomWidget (
this . props . room . roomId ,
this . props . id ,
) . catch ( ( e ) => {
console . error ( 'Failed to delete widget' , e ) ;
const ErrorDialog = sdk . getComponent ( "dialogs.ErrorDialog" ) ;
Modal . createTrackedDialog ( 'Failed to remove widget' , '' , ErrorDialog , {
title : _t ( 'Failed to remove widget' ) ,
description : _t ( 'An error ocurred whilst trying to remove the widget from the room' ) ,
2018-02-07 17:44:01 +03:00
} ) ;
2019-02-01 13:02:02 +03:00
} ) . finally ( ( ) => {
this . setState ( { deleting : false } ) ;
} ) ;
} ,
} ) ;
}
}
_onCancelClick ( ) {
if ( this . props . onDeleteClick ) {
this . props . onDeleteClick ( ) ;
} else {
console . log ( "Revoke widget permissions - %s" , this . props . id ) ;
this . _revokeWidgetPermission ( ) ;
2017-07-27 20:10:28 +03:00
}
2018-01-11 14:49:46 +03:00
}
2017-07-27 20:10:28 +03:00
2017-11-30 01:16:22 +03:00
/ * *
* Called when widget iframe has finished loading
* /
2017-10-27 19:49:14 +03:00
_onLoaded ( ) {
2019-03-16 07:24:27 +03:00
// Destroy the old widget messaging before starting it back up again. Some widgets
// have startup routines that run when they are loaded, so we just need to reinitialize
// the messaging for them.
2019-04-02 04:50:05 +03:00
ActiveWidgetStore . delWidgetMessaging ( this . props . id ) ;
2019-03-16 07:24:27 +03:00
this . _setupWidgetMessaging ( ) ;
2018-07-12 20:43:49 +03:00
ActiveWidgetStore . setRoomId ( this . props . id , this . props . room . roomId ) ;
2018-05-14 13:42:38 +03:00
this . setState ( { loading : false } ) ;
2018-03-28 14:22:06 +03:00
}
2018-07-11 20:07:32 +03:00
_setupWidgetMessaging ( ) {
// FIXME: There's probably no reason to do this here: it should probably be done entirely
// in ActiveWidgetStore.
2019-03-24 08:31:19 +03:00
const widgetMessaging = new WidgetMessaging (
this . props . id , this . props . url , this . props . userWidget , this . refs . appFrame . contentWindow ) ;
2018-07-11 20:07:32 +03:00
ActiveWidgetStore . setWidgetMessaging ( this . props . id , widgetMessaging ) ;
widgetMessaging . getCapabilities ( ) . then ( ( requestedCapabilities ) => {
console . log ( ` Widget ${ this . props . id } requested capabilities: ` + requestedCapabilities ) ;
2018-03-12 16:56:02 +03:00
requestedCapabilities = requestedCapabilities || [ ] ;
// Allow whitelisted capabilities
2018-03-13 14:59:15 +03:00
let requestedWhitelistCapabilies = [ ] ;
if ( this . props . whitelistCapabilities && this . props . whitelistCapabilities . length > 0 ) {
requestedWhitelistCapabilies = requestedCapabilities . filter ( function ( e ) {
2018-03-12 16:56:02 +03:00
return this . indexOf ( e ) >= 0 ;
} , this . props . whitelistCapabilities ) ;
2018-03-13 14:59:15 +03:00
if ( requestedWhitelistCapabilies . length > 0 ) {
2018-07-11 20:07:32 +03:00
console . warn ( ` Widget ${ this . props . id } allowing requested, whitelisted properties: ` +
requestedWhitelistCapabilies ,
) ;
2018-03-13 14:59:15 +03:00
}
}
2018-03-12 16:56:02 +03:00
// TODO -- Add UI to warn about and optionally allow requested capabilities
2018-07-11 20:07:32 +03:00
ActiveWidgetStore . setWidgetCapabilities ( this . props . id , requestedWhitelistCapabilies ) ;
2018-03-12 16:56:02 +03:00
if ( this . props . onCapabilityRequest ) {
this . props . onCapabilityRequest ( requestedCapabilities ) ;
}
2017-12-16 12:16:24 +03:00
} ) . catch ( ( err ) => {
2018-03-13 14:01:51 +03:00
console . log ( ` Failed to get capabilities for widget type ${ this . props . type } ` , this . props . id , err ) ;
2017-12-16 12:16:24 +03:00
} ) ;
2018-01-11 14:49:46 +03:00
}
2017-10-27 19:49:14 +03:00
2018-07-11 20:07:32 +03:00
_onAction ( payload ) {
2018-01-04 21:58:55 +03:00
if ( payload . widgetId === this . props . id ) {
switch ( payload . action ) {
2018-03-12 16:56:02 +03:00
case 'm.sticker' :
if ( this . _hasCapability ( 'm.sticker' ) ) {
2018-01-04 21:58:55 +03:00
dis . dispatch ( { action : 'post_sticker_message' , data : payload . data } ) ;
} else {
console . warn ( 'Ignoring sticker message. Invalid capability' ) ;
}
break ;
}
}
2018-01-11 14:49:46 +03:00
}
2018-01-04 21:41:47 +03:00
2017-11-30 01:16:22 +03:00
/ * *
2017-11-30 17:50:30 +03:00
* Set remote content title on AppTile
2017-12-06 00:41:44 +03:00
* @ param { string } url Url to check for title
2017-11-30 01:16:22 +03:00
* /
2017-12-08 18:12:48 +03:00
_fetchWidgetTitle ( url ) {
2017-12-06 00:41:44 +03:00
this . _scalarClient . getScalarPageTitle ( url ) . then ( ( widgetPageTitle ) => {
if ( widgetPageTitle ) {
this . setState ( { widgetPageTitle : widgetPageTitle } ) ;
}
} , ( err ) => {
console . error ( "Failed to get page title" , err ) ;
} ) ;
2018-01-11 14:49:46 +03:00
}
2017-10-27 19:49:14 +03:00
2017-07-28 20:21:23 +03:00
/* TODO -- Store permission in account data so that it is persisted across multiple devices */
2017-07-26 13:28:43 +03:00
_grantWidgetPermission ( ) {
console . warn ( 'Granting permission to load widget - ' , this . state . widgetUrl ) ;
localStorage . setItem ( this . state . widgetPermissionId , true ) ;
2017-07-27 18:41:52 +03:00
this . setState ( { hasPermissionToLoad : true } ) ;
2018-01-11 14:49:46 +03:00
}
2017-07-26 13:28:43 +03:00
2017-07-27 20:10:28 +03:00
_revokeWidgetPermission ( ) {
console . warn ( 'Revoking permission to load widget - ' , this . state . widgetUrl ) ;
localStorage . removeItem ( this . state . widgetPermissionId ) ;
this . setState ( { hasPermissionToLoad : false } ) ;
2018-07-23 19:11:53 +03:00
// Force the widget to be non-persistent
2018-07-24 18:50:34 +03:00
ActiveWidgetStore . destroyPersistentWidget ( ) ;
2018-08-17 11:42:23 +03:00
const PersistedElement = sdk . getComponent ( "elements.PersistedElement" ) ;
2018-08-01 17:01:11 +03:00
PersistedElement . destroyElement ( this . _persistKey ) ;
2018-01-11 14:49:46 +03:00
}
2017-05-22 20:00:17 +03:00
2017-10-27 19:49:14 +03:00
formatAppTileName ( ) {
2017-06-28 12:27:06 +03:00
let appTileName = "No name" ;
2017-11-16 16:19:36 +03:00
if ( this . props . name && this . props . name . trim ( ) ) {
2017-06-28 12:27:06 +03:00
appTileName = this . props . name . trim ( ) ;
}
return appTileName ;
2018-01-11 14:49:46 +03:00
}
2017-06-28 12:27:06 +03:00
2017-10-27 19:49:14 +03:00
onClickMenuBar ( ev ) {
2017-08-16 20:19:12 +03:00
ev . preventDefault ( ) ;
// Ignore clicks on menu bar children
if ( ev . target !== this . refs . menu _bar ) {
return ;
}
// Toggle the view state of the apps drawer
2019-03-24 08:50:06 +03:00
if ( this . props . userWidget ) {
this . _onMinimiseClick ( ) ;
} else {
dis . dispatch ( {
action : 'appsDrawer' ,
show : ! this . props . show ,
} ) ;
}
2018-01-11 14:49:46 +03:00
}
2017-08-16 20:19:12 +03:00
2017-11-30 01:16:22 +03:00
_getSafeUrl ( ) {
2018-03-16 13:20:14 +03:00
const parsedWidgetUrl = url . parse ( this . state . widgetUrl , true ) ;
if ( ENABLE _REACT _PERF ) {
parsedWidgetUrl . search = null ;
parsedWidgetUrl . query . react _perf = true ;
}
2017-11-30 01:16:22 +03:00
let safeWidgetUrl = '' ;
if ( ALLOWED _APP _URL _SCHEMES . indexOf ( parsedWidgetUrl . protocol ) !== - 1 ) {
safeWidgetUrl = url . format ( parsedWidgetUrl ) ;
}
return safeWidgetUrl ;
2018-01-11 14:49:46 +03:00
}
2017-11-30 01:16:22 +03:00
2018-02-07 17:44:01 +03:00
_getTileTitle ( ) {
const name = this . formatAppTileName ( ) ;
const titleSpacer = < span > & nbsp ; - & nbsp ; < / s p a n > ;
let title = '' ;
if ( this . state . widgetPageTitle && this . state . widgetPageTitle != this . formatAppTileName ( ) ) {
title = this . state . widgetPageTitle ;
}
return (
< span >
< b > { name } < / b >
< span > { title ? titleSpacer : '' } { title } < / s p a n >
< / s p a n >
) ;
}
2018-03-08 20:20:42 +03:00
_onMinimiseClick ( e ) {
if ( this . props . onMinimiseClick ) {
this . props . onMinimiseClick ( ) ;
}
}
2018-04-25 14:49:30 +03:00
_onPopoutWidgetClick ( e ) {
// Using Object.assign workaround as the following opens in a new window instead of a new tab.
2019-03-27 16:27:57 +03:00
// window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
2018-04-25 14:49:30 +03:00
Object . assign ( document . createElement ( 'a' ) ,
2019-03-27 16:27:57 +03:00
{ target : '_blank' , href : this . _getSafeUrl ( ) , rel : 'noopener' } ) . click ( ) ;
2018-04-25 14:49:30 +03:00
}
2018-05-22 21:14:54 +03:00
_onReloadWidgetClick ( e ) {
// Reload iframe in this way to avoid cross-origin restrictions
this . refs . appFrame . src = this . refs . appFrame . src ;
}
2017-10-27 19:49:14 +03:00
render ( ) {
2017-07-06 11:28:48 +03:00
let appTileBody ;
2017-07-13 02:27:03 +03:00
// Don't render widget if it is in the process of being deleted
if ( this . state . deleting ) {
return < div > < / d i v > ;
}
2017-07-26 13:28:43 +03:00
// Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
// because that would allow the iframe to prgramatically remove the sandbox attribute, but
// this would only be for content hosted on the same origin as the riot client: anything
// hosted on the same origin as the client will get the same access as if you clicked
// a link to it.
const sandboxFlags = "allow-forms allow-popups allow-popups-to-escape-sandbox " +
2017-07-28 13:14:04 +03:00
"allow-same-origin allow-scripts allow-presentation" ;
2017-07-26 13:28:43 +03:00
2018-02-22 02:10:08 +03:00
// Additional iframe feature pemissions
// (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
2018-12-14 16:26:35 +03:00
const iframeFeatures = "microphone; camera; encrypted-media; autoplay;" ;
2018-02-22 02:10:08 +03:00
2018-07-12 20:43:49 +03:00
const appTileBodyClass = 'mx_AppTileBody' + ( this . props . miniMode ? '_mini ' : ' ' ) ;
2017-08-18 20:33:56 +03:00
if ( this . props . show ) {
2017-11-08 23:38:31 +03:00
const loadingElement = (
2018-05-09 18:41:45 +03:00
< div className = "mx_AppLoading_spinner_fadeIn" >
2017-11-08 23:38:31 +03:00
< MessageSpinner msg = 'Loading...' / >
< / d i v >
) ;
2017-11-02 21:33:11 +03:00
if ( this . state . initialising ) {
2018-05-09 17:48:53 +03:00
appTileBody = (
2018-07-12 20:43:49 +03:00
< div className = { appTileBodyClass + ( this . state . loading ? 'mx_AppLoading' : '' ) } >
2018-05-09 17:48:53 +03:00
{ loadingElement }
< / d i v >
) ;
2017-08-18 20:33:56 +03:00
} else if ( this . state . hasPermissionToLoad == true ) {
if ( this . isMixedContent ( ) ) {
2017-11-08 23:38:31 +03:00
appTileBody = (
2018-07-12 20:43:49 +03:00
< div className = { appTileBodyClass } >
2017-11-08 23:38:31 +03:00
< AppWarning errorMsg = "Error - Mixed content" / >
< / d i v >
) ;
2017-08-18 20:33:56 +03:00
} else {
appTileBody = (
2018-07-12 20:43:49 +03:00
< div className = { appTileBodyClass + ( this . state . loading ? 'mx_AppLoading' : '' ) } >
2017-11-08 23:38:54 +03:00
{ this . state . loading && loadingElement }
2018-02-22 02:35:57 +03:00
{ / *
The "is" attribute in the following iframe tag is needed in order to enable rendering of the
"allow" attribute , which is unknown to react 15.
* / }
2017-08-18 20:33:56 +03:00
< iframe
2018-02-22 02:35:57 +03:00
is
2018-02-22 02:10:08 +03:00
allow = { iframeFeatures }
2017-08-18 20:33:56 +03:00
ref = "appFrame"
2017-11-30 01:16:22 +03:00
src = { this . _getSafeUrl ( ) }
2017-08-18 20:33:56 +03:00
allowFullScreen = "true"
sandbox = { sandboxFlags }
2017-10-31 13:43:17 +03:00
onLoad = { this . _onLoaded }
2017-08-18 20:33:56 +03:00
> < / i f r a m e >
< / d i v >
) ;
2018-07-11 20:07:32 +03:00
// if the widget would be allowed to remian on screen, we must put it in
// a PersistedElement from the get-go, otherwise the iframe will be
// re-mounted later when we do.
if ( this . props . whitelistCapabilities . includes ( 'm.always_on_screen' ) ) {
const PersistedElement = sdk . getComponent ( "elements.PersistedElement" ) ;
2018-07-18 13:52:57 +03:00
// Also wrap the PersistedElement in a div to fix the height, otherwise
// AppTile's border is in the wrong place
appTileBody = < div className = "mx_AppTile_persistedWrapper" >
< PersistedElement persistKey = { this . _persistKey } >
{ appTileBody }
< / P e r s i s t e d E l e m e n t >
< / d i v > ;
2018-07-11 20:07:32 +03:00
}
2017-08-18 20:33:56 +03:00
}
} else {
2017-08-21 11:30:38 +03:00
const isRoomEncrypted = MatrixClientPeg . get ( ) . isRoomEncrypted ( this . props . room . roomId ) ;
2017-08-01 19:48:02 +03:00
appTileBody = (
2018-07-12 20:43:49 +03:00
< div className = { appTileBodyClass } >
2017-08-18 20:33:56 +03:00
< AppPermission
2017-08-21 11:30:38 +03:00
isRoomEncrypted = { isRoomEncrypted }
2017-08-18 20:33:56 +03:00
url = { this . state . widgetUrl }
onPermissionGranted = { this . _grantWidgetPermission }
/ >
2017-08-01 19:48:02 +03:00
< / d i v >
) ;
2017-07-12 16:16:47 +03:00
}
2017-07-06 11:28:48 +03:00
}
2017-07-14 13:17:59 +03:00
// editing is done in scalar
2019-02-01 13:02:02 +03:00
const canUserModify = this . _canUserModify ( ) ;
const showEditButton = Boolean ( this . _scalarClient && canUserModify ) ;
2019-02-12 19:01:05 +03:00
const showDeleteButton = ( this . props . showDelete === undefined || this . props . showDelete ) && canUserModify ;
const showCancelButton = ( this . props . showCancel === undefined || this . props . showCancel ) && ! showDeleteButton ;
2017-12-19 20:16:38 +03:00
// Picture snapshot - only show button when apps are maximised.
2018-05-12 23:29:37 +03:00
const showPictureSnapshotButton = this . _hasCapability ( 'm.capability.screenshot' ) && this . props . show ;
2019-02-01 13:02:02 +03:00
const showMinimiseButton = this . props . showMinimise && this . props . show ;
const showMaximiseButton = this . props . showMinimise && ! this . props . show ;
2017-12-03 14:25:15 +03:00
2018-07-23 17:08:17 +03:00
let appTileClass ;
if ( this . props . miniMode ) {
2018-07-23 17:58:07 +03:00
appTileClass = 'mx_AppTile_mini' ;
2018-07-23 17:08:17 +03:00
} else if ( this . props . fullWidth ) {
appTileClass = 'mx_AppTileFullWidth' ;
} else {
appTileClass = 'mx_AppTile' ;
}
2019-02-01 13:02:02 +03:00
const menuBarClasses = classNames ( {
mx _AppTileMenuBar : true ,
mx _AppTileMenuBar _expanded : this . props . show ,
2019-02-02 09:46:52 +03:00
} ) ;
2019-02-01 13:02:02 +03:00
2017-05-22 14:34:27 +03:00
return (
2018-07-23 17:08:17 +03:00
< div className = { appTileClass } id = { this . props . id } >
2018-01-11 16:20:58 +03:00
{ this . props . showMenubar &&
2019-02-01 13:02:02 +03:00
< div ref = "menu_bar" className = { menuBarClasses } onClick = { this . onClickMenuBar } >
2018-03-08 20:20:42 +03:00
< span className = "mx_AppTileMenuBarTitle" style = { { pointerEvents : ( this . props . handleMinimisePointerEvents ? 'all' : false ) } } >
2019-02-01 13:02:02 +03:00
{ /* Minimise widget */ }
{ showMinimiseButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
title = { _t ( 'Minimize apps' ) }
onClick = { this . _onMinimiseClick }
/ > }
{ /* Maximise widget */ }
{ showMaximiseButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_maximise"
2019-03-24 08:50:06 +03:00
title = { _t ( 'Maximize apps' ) }
2018-03-08 20:20:42 +03:00
onClick = { this . _onMinimiseClick }
2018-02-07 17:44:01 +03:00
/ > }
2019-02-01 13:02:02 +03:00
{ /* Title */ }
2018-02-07 17:44:01 +03:00
{ this . props . showTitle && this . _getTileTitle ( ) }
2017-12-05 21:18:51 +03:00
< / s p a n >
2017-05-22 14:34:27 +03:00
< span className = "mx_AppTileMenuBarWidgets" >
2018-05-22 21:14:54 +03:00
{ /* Reload widget */ }
2019-02-01 13:02:02 +03:00
{ this . props . showReload && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_reload"
2018-05-22 21:14:54 +03:00
title = { _t ( 'Reload widget' ) }
onClick = { this . _onReloadWidgetClick }
/ > }
2018-04-25 14:49:30 +03:00
{ /* Popout widget */ }
2019-02-01 13:02:02 +03:00
{ this . props . showPopout && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
2018-04-25 14:49:30 +03:00
title = { _t ( 'Popout widget' ) }
onClick = { this . _onPopoutWidgetClick }
2018-04-25 18:28:27 +03:00
/ > }
2018-04-25 14:49:30 +03:00
{ /* Snapshot widget */ }
2019-02-01 13:02:02 +03:00
{ showPictureSnapshotButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_snapshot"
2018-04-25 14:49:30 +03:00
title = { _t ( 'Picture' ) }
onClick = { this . _onSnapshotClick }
/ > }
2017-09-28 13:21:06 +03:00
{ /* Edit widget */ }
2019-02-01 13:02:02 +03:00
{ showEditButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_edit"
2017-07-27 22:18:31 +03:00
title = { _t ( 'Edit' ) }
2017-05-22 20:00:17 +03:00
onClick = { this . _onEditClick }
2017-09-28 13:21:06 +03:00
/ > }
{ /* Delete widget */ }
2019-02-01 13:02:02 +03:00
{ showDeleteButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_delete"
title = { _t ( 'Delete widget' ) }
2017-11-15 16:24:38 +03:00
onClick = { this . _onDeleteClick }
2019-02-01 13:02:02 +03:00
/ > }
{ /* Cancel widget */ }
{ showCancelButton && < AccessibleButton
className = "mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_cancel"
title = { _t ( 'Revoke widget access' ) }
onClick = { this . _onCancelClick }
2018-03-08 20:20:42 +03:00
/ > }
2017-05-22 14:34:27 +03:00
< / s p a n >
2018-01-11 16:20:58 +03:00
< / d i v > }
2017-09-28 13:21:06 +03:00
{ appTileBody }
2017-05-22 14:34:27 +03:00
< / d i v >
) ;
2018-01-11 14:49:46 +03:00
}
}
2018-02-07 17:48:43 +03:00
AppTile . displayName = 'AppTile' ;
2018-01-11 14:49:46 +03:00
AppTile . propTypes = {
2018-02-26 01:36:59 +03:00
id : PropTypes . string . isRequired ,
url : PropTypes . string . isRequired ,
name : PropTypes . string . isRequired ,
room : PropTypes . object . isRequired ,
type : PropTypes . string . isRequired ,
2018-01-11 14:49:46 +03:00
// Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
// This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
2018-02-26 01:36:59 +03:00
fullWidth : PropTypes . bool ,
2018-07-12 20:43:49 +03:00
// Optional. If set, renders a smaller view of the widget
miniMode : PropTypes . bool ,
2018-01-11 14:49:46 +03:00
// UserId of the current user
2018-02-26 01:36:59 +03:00
userId : PropTypes . string . isRequired ,
2018-01-11 14:49:46 +03:00
// UserId of the entity that added / modified the widget
2018-02-26 01:36:59 +03:00
creatorUserId : PropTypes . string ,
waitForIframeLoad : PropTypes . bool ,
showMenubar : PropTypes . bool ,
2018-01-11 16:20:58 +03:00
// Should the AppTile render itself
2018-02-26 01:36:59 +03:00
show : PropTypes . bool ,
2018-02-07 17:44:01 +03:00
// Optional onEditClickHandler (overrides default behaviour)
2018-02-26 01:36:59 +03:00
onEditClick : PropTypes . func ,
2018-02-07 17:44:01 +03:00
// Optional onDeleteClickHandler (overrides default behaviour)
2018-02-26 01:36:59 +03:00
onDeleteClick : PropTypes . func ,
2018-03-08 20:20:42 +03:00
// Optional onMinimiseClickHandler
onMinimiseClick : PropTypes . func ,
2018-02-07 17:44:01 +03:00
// Optionally hide the tile title
2018-02-26 01:36:59 +03:00
showTitle : PropTypes . bool ,
2018-02-07 17:44:01 +03:00
// Optionally hide the tile minimise icon
2018-02-26 01:36:59 +03:00
showMinimise : PropTypes . bool ,
2018-03-08 20:20:42 +03:00
// Optionally handle minimise button pointer events (default false)
handleMinimisePointerEvents : PropTypes . bool ,
// Optionally hide the delete icon
showDelete : PropTypes . bool ,
2018-04-25 18:28:27 +03:00
// Optionally hide the popout widget icon
showPopout : PropTypes . bool ,
2018-05-22 21:14:54 +03:00
// Optionally show the reload widget icon
// This is not currently intended for use with production widgets. However
// it can be useful when developing persistent widgets in order to avoid
// having to reload all of riot to get new widget content.
showReload : PropTypes . bool ,
2018-05-12 23:29:37 +03:00
// Widget capabilities to allow by default (without user confirmation)
2018-03-12 16:56:02 +03:00
// NOTE -- Use with caution. This is intended to aid better integration / UX
// basic widget capabilities, e.g. injecting sticker message events.
whitelistCapabilities : PropTypes . array ,
// Optional function to be called on widget capability request
// Called with an array of the requested capabilities
onCapabilityRequest : PropTypes . func ,
2018-05-09 00:44:49 +03:00
// Is this an instance of a user widget
userWidget : PropTypes . bool ,
2018-01-11 14:49:46 +03:00
} ;
AppTile . defaultProps = {
url : "" ,
waitForIframeLoad : true ,
2018-01-11 16:20:58 +03:00
showMenubar : true ,
2018-02-07 17:44:01 +03:00
showTitle : true ,
showMinimise : true ,
2018-03-08 20:20:42 +03:00
showDelete : true ,
2018-04-25 18:28:27 +03:00
showPopout : true ,
2018-05-22 21:14:54 +03:00
showReload : false ,
2018-03-08 20:20:42 +03:00
handleMinimisePointerEvents : false ,
2018-03-12 16:56:02 +03:00
whitelistCapabilities : [ ] ,
2018-05-09 00:44:49 +03:00
userWidget : false ,
2018-07-12 20:43:49 +03:00
miniMode : false ,
2018-01-11 14:49:46 +03:00
} ;