Merge pull request #1661 from matrix-org/rxl881/titleBar

Set widget title

src/ScalarAuthClient.js

@@ -76,6 +76,35 @@ class ScalarAuthClient {
         return defer.promise;
     }
 
+    getScalarPageTitle(url) {
+        const defer = Promise.defer();
+
+        let scalarPageLookupUrl = SdkConfig.get().integrations_rest_url + '/widgets/title_lookup';
+        scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
+        scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
+        request({
+            method: 'GET',
+            uri: scalarPageLookupUrl,
+            json: true,
+        }, (err, response, body) => {
+            if (err) {
+                defer.reject(err);
+            } else if (response.statusCode / 100 !== 2) {
+                defer.reject({statusCode: response.statusCode});
+            } else if (!body) {
+                defer.reject(new Error("Missing page title in response"));
+            } else {
+                let title = "";
+                if (body.page_title_cache_item && body.page_title_cache_item.cached_title) {
+                    title = body.page_title_cache_item.cached_title;
+                }
+                defer.resolve(title);
+            }
+        });
+
+        return defer.promise;
+    }
+
     getScalarInterfaceUrlForRoom(roomId, screen, id) {
         let url = SdkConfig.get().integrations_ui_url;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);

src/components/views/elements/AppTile.js

@@ -81,7 +81,7 @@ export default React.createClass({
             hasPermissionToLoad: hasPermissionToLoad === 'true' || newProps.userId === newProps.creatorUserId,
             error: null,
             deleting: false,
-            widgetPageTitle: null,
+            widgetPageTitle: newProps.widgetPageTitle,
         };
     },
 
@@ -198,6 +198,11 @@ export default React.createClass({
                 widgetUrl: u.format(),
                 initialising: false,
             });
+
+            // Fetch page title from remote content if not already set
+            if (!this.state.widgetPageTitle && params.url) {
+                this._fetchWidgetTitle(params.url);
+            }
         }, (err) => {
             console.error("Failed to get scalar_token", err);
             this.setState({
@@ -301,12 +306,16 @@ export default React.createClass({
 
     /**
      * Set remote content title on AppTile
-     * @param {string} title Title string to set on the AppTile
+     * @param {string} url Url to check for title
      */
-    _updateWidgetTitle(title) {
-        if (title) {
-            this.setState({widgetPageTitle: null});
+    _fetchWidgetTitle(url) {
+        this._scalarClient.getScalarPageTitle(url).then((widgetPageTitle) => {
+            if (widgetPageTitle) {
+                this.setState({widgetPageTitle: widgetPageTitle});
             }
+        }, (err) =>{
+            console.error("Failed to get page title", err);
+        });
     },
 
     // Widget labels to render, depending upon user permissions
@@ -446,7 +455,7 @@ export default React.createClass({
                             height="10"
                         />
                         <b>{ this.formatAppTileName() }</b>
-                        { this.state.widgetPageTitle && (
+                        { this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName() && (
                             <span>&nbsp;-&nbsp;{ this.state.widgetPageTitle }</span>
                         ) }
                     </span>

src/components/views/rooms/AppsDrawer.js

@@ -227,6 +227,7 @@ module.exports = React.createClass({
                     userId={this.props.userId}
                     show={this.props.showApps}
                     creatorUserId={app.creatorUserId}
+                    widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
                     waitForIframeLoad={app.waitForIframeLoad}
                 />);
             });