Add setting to enable widget screenshots (if widgets declare support)

Fixes the remainder of https://github.com/vector-im/riot-web/issues/6708

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/structures/UserSettings.js

@@ -80,6 +80,7 @@ const SIMPLE_SETTINGS = [
     { id: "TextualBody.disableBigEmoji" },
     { id: "VideoView.flipVideoHorizontally" },
     { id: "TagPanel.disableTagPanel" },
+    { id: "enableWidgetScreenshots" },
 ];
 
 // These settings must be defined in SettingsStore

src/components/views/elements/AppTile.js

@@ -85,7 +85,7 @@ export default class AppTile extends React.Component {
 
     /**
      * Does the widget support a given capability
-     * @param  {[type]}  capability Capability to check for
+     * @param  {string}  capability Capability to check for
      * @return {Boolean}            True if capability supported
      */
     _hasCapability(capability) {
@@ -607,7 +607,7 @@ export default class AppTile extends React.Component {
         }
 
         // Picture snapshot - only show button when apps are maximised.
-        const showPictureSnapshotButton = this._hasCapability('screenshot') && this.props.show;
+        const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
         const showPictureSnapshotIcon = 'img/camera_green.svg';
         const popoutWidgetIcon = 'img/button-new-window.svg';
         const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
@@ -711,7 +711,7 @@ AppTile.propTypes = {
     showDelete: PropTypes.bool,
     // Optionally hide the popout widget icon
     showPopout: PropTypes.bool,
-    // Widget apabilities to allow by default (without user confirmation)
+    // Widget capabilities to allow by default (without user confirmation)
     // NOTE -- Use with caution. This is intended to aid better integration / UX
     // basic widget capabilities, e.g. injecting sticker message events.
     whitelistCapabilities: PropTypes.array,

src/components/views/rooms/AppsDrawer.js

@@ -227,6 +227,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const enableScreenshots = SettingsStore.getValue("enableWidgetScreenshots", this.props.room.room_id);
+
         const apps = this.state.apps.map(
             (app, index, arr) => {
                 return (<AppTile
@@ -242,6 +244,7 @@ module.exports = React.createClass({
                     creatorUserId={app.creatorUserId}
                     widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
                     waitForIframeLoad={app.waitForIframeLoad}
+                    whitelistCapabilities={enableScreenshots ? ["m.capability.screenshot"] : []}
                 />);
             });
 

src/i18n/strings/en_EN.json

@@ -217,6 +217,7 @@
     "Enable URL previews for this room (only affects you)": "Enable URL previews for this room (only affects you)",
     "Enable URL previews by default for participants in this room": "Enable URL previews by default for participants in this room",
     "Room Colour": "Room Colour",
+    "Enable widget screenshots on supported widgets": "Enable widget screenshots on supported widgets",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading report": "Uploading report",

src/settings/Settings.js

@@ -265,4 +265,9 @@ export const SETTINGS = {
         default: true,
         controller: new AudioNotificationsEnabledController(),
     },
+    "enableWidgetScreenshots": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Enable widget screenshots on supported widgets'),
+        default: false,
+    },
 };