Responsive Desktop Recording Client

Over the past few weeks, we've worked together with our new colleague Alexandru on two related front-end tasks:

1. The ability to specify the CSS length unit for width in the 2.0 embed code
2. Support for absolute and relative units for width in the desktop recorder delivered by the 2.0 embed code

Having completed both tasks, the width of the desktop recording client is now fully responsive.

The 2.0 embed code, when configured with a relative CSS unit for width, will deliver to desktop browsers and inline on mobile browsers a recording client that will respect the relative unit specified and resize itself to the available space,  including when switching the device between landscape and portrait.

This is immediately visible on our website homepage, where the desktop recorder demo will resize itself horizontally.

Previously, the 2.0 embed code and  recording client only supported integer values for width and treated those as px. Here's how the default 2.0 embed code looked for a long time:

<piperecorder pipe-width="640" ...

But now, you can specify the CSS unit, AND it correctly supports all units:

<piperecorder pipe-width="640px"
<piperecorder pipe-width="100%" ...
<piperecorder pipe-width="50vm" ...

Apart from accepting only integers and treating those as px, there was a special case for the % unit, which signaled to the underlying pipe.js code to set the width to 100% of the parent element - regardless of the actual percentage value specified. Furthermore, in this case, after initialization, the width of the recording client would immediately be converted to px. This essentially locked the width of the recorder and eliminated any suspected responsiveness. This effect was most visible on mobile devices where if the width was set to 100% - or any other percentage value - after initialization when rotating the device, the recorder would not resize to the new width of the screen. This has all been fixed now.

There were no changes to the mobile native mobile recording client. It's container width continues to be 100% as described in the documentation.

The updated pipe.js has been released and you should be able to take advantage of the ability to specify the width unit and the significantly improved desktop recording client responsiveness. The docs and the /embed page have also been updated to reflect the new capabilities.