Skip to content

Emit event after capability re/negotiation#48

Merged
jryans merged 2 commits intomatrix-org:masterfrom
toger5:no_popout_capability_15744
Oct 28, 2021
Merged

Emit event after capability re/negotiation#48
jryans merged 2 commits intomatrix-org:masterfrom
toger5:no_popout_capability_15744

Conversation

@toger5
Copy link
Contributor

@toger5 toger5 commented Oct 26, 2021

This is required for: matrix-org/matrix-react-sdk#7005 (to update the popout button when the permission is added after the initial setup already is done)
The WidgetClientApi emits an event capabilities_renegotiated when new capabilities were added to the the allowed array.
A listener to this event is also the preferred place to handle any reaction a client could have for a widget capability change (like displaying the permissions the widget has).

@toger5
Copy link
Contributor Author

toger5 commented Oct 26, 2021

this example was used for testing:

<!--
 Copyright 2020 The Matrix.org Foundation C.I.C.

 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.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Widget</title>

    <!--
        TESTING IN ELEMENT WEB
        ----------------------

        To test this widget in Element Web, set up the widget library so it
        can be resolved properly, then serve this directory off a web server.
        An easy web server can be made with the http-server NPM package.

        Once served, use the following command to add the widget to a room:
            /addwidget http://localhost:8080/#/?widgetId=$matrix_widget_id&userId=$matrix_user_id

        The widget should then load and present an interface for sticking the
        widget to the screen (if approved for the capability). It is recommended
        to have the JS console open to watch for errors and to see how the widget
        works.

        Note: this uses the fragment to pass parameters to avoid leaking widget
        information to the web server. It is recommended to take a similar approach
        with your own widgets.
    -->

    <!-- CSS is just for aesthetics and not important to the example -->
    <link href="index.css" rel="stylesheet" />
</head>
<body>
    <!-- The widget will be loaded into this container -->
    <div id="container">Loading...</div>

    <!-- Include the widget library -->
    <script src="api.js"></script>

    <!-- Bring in some utilities that aren't critical to the example -->
    <script src="utils.js"></script>

    <!-- The actual widget functionality -->
    <script type="text/javascript">
    try {
        const qs = parseFragment();
        const widgetId = assertParam(qs, 'widgetId');
        const userId = assertParam(qs, 'userId');
        let isSticky = false;

        // Set up the widget API as soon as possible to avoid problems with the client
        const widgetApi = new mxwidgets.WidgetApi(widgetId);
        //uncomment to request on startup
        //widgetApi.requestCapability(mxwidgets.MatrixCapabilities.RequiresClient);

        widgetApi.on("ready", function() {
            // Fill in the basic widget details now that we're allowed to operate.
            document.getElementById("container").innerHTML = "Hello <span id='userId'></span>!<br /><br />"
                + "Currently stuck on screen: <span id='stickyState'></span><br /><br />"
                + "<button onclick='requestCaps()'>Toggle sticky state</button>";

            // Fill in the user ID using innerText to avoid XSS
            document.getElementById("userId").innerText = userId;

            // Update the UI and ensure that we end up not sticky to start
            // sendStickyState();
        });

        // Start the widget as soon as possible too, otherwise the client might time us out.
        widgetApi.start();

        function requestCaps() {
            //request on button pressed
            console.log("halle2")
            widgetApi.requestCapability(mxwidgets.MatrixCapabilities.RequiresClient);
            widgetApi.requestCapability(mxwidgets.MatrixCapabilities.AlwaysOnScreen);
            widgetApi.updateRequestedCapabilities();
        }
    </script>
</body>
</html>

Copy link
Contributor

@jryans jryans left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems sensible overall, just a few tweaks. 😄

@toger5 toger5 force-pushed the no_popout_capability_15744 branch from 786bd68 to bb5d78c Compare October 27, 2021 13:24
@toger5 toger5 requested a review from jryans October 28, 2021 09:31
Copy link
Contributor

@jryans jryans left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this side looks good to me! 😄

@jryans jryans merged commit cf125de into matrix-org:master Oct 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants