Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emit event after capability re/negotiation #48

Merged
merged 2 commits into from
Oct 28, 2021

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. 😄

src/interfaces/Capabilities.ts Outdated Show resolved Hide resolved
src/ClientWidgetApi.ts Outdated Show resolved Hide resolved
src/ClientWidgetApi.ts Outdated Show resolved Hide resolved
@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