fix(ui components): added resize method (#1788)

docs/packages/h5p-react.md

@@ -294,6 +294,15 @@ display somewhere.
 
 Returns true if there is copyright information to be displayed.
 
+### resize
+
+Signals the H5P content inside the component to resize itself according to the
+dimensions of the container. Can be called if you have changed the size of the
+container in an unusual fashion (e.g. by scaling it with CSS transform) and you
+need to resize the content manually. The component already automatically calls
+the resize function when its own size is changed, so this will rarely be the
+case.
+
 ### showCopyright
 
 Shows the copyright information in a window overlaying the H5P content.

docs/packages/h5p-webcomponents.md

@@ -325,6 +325,15 @@ display somewhere.
 
 Returns true if there is copyright information to be displayed.
 
+### resize
+
+Signals the H5P content inside the component to resize itself according to the
+dimensions of the container. Can be called if you have changed the size of the
+container in an unusual fashion (e.g. by scaling it with CSS transform) and you
+need to resize the content manually. The component already automatically calls
+the resize function when its own size is changed, so this will rarely be the
+case.
+
 ### showCopyright
 
 Shows the copyright information in a window overlaying the H5P content.

packages/h5p-react/src/H5PPlayerUI.tsx

@@ -121,6 +121,16 @@ export default class H5PPlayerUI extends React.Component<{
         this.h5pPlayer.current?.showCopyright();
     }
 
+    /**
+     * Asks the H5P content to resize itself inside the dimensions of the
+     * container.
+     *
+     * Has no effect until the H5P object has fully initialized.
+     */
+    public resize(): void {
+        this.h5pPlayer.current?.resize();
+    }
+
     private loadContentCallbackWrapper = (
         contentId: string
     ): Promise<IPlayerModel> => this.props.loadContentCallback(contentId);

packages/h5p-webcomponents/src/h5p-player.ts

@@ -266,6 +266,19 @@ export class H5PPlayerComponent extends HTMLElement {
         return !!this.getCopyrightHtml();
     }
 
+    /**
+     * Asks the H5P content to resize itself inside the dimensions of the
+     * container.
+     *
+     * Has no effect until the H5P object has fully initialized.
+     */
+    public resize(): void {
+        if (!this.h5pInstance || !this.h5pInstance.trigger) {
+            return;
+        }
+        this.h5pInstance.trigger('resize');
+    }
+
     /**
      * Displays the copyright notice in the regular H5P way.
      */