Update (2019/05/28): Here is @Diogee from last week’s Monthly Developer Update to talk more about the updates.
Following a recent RFC, there are significant changes coming to the way streamers and viewers install, find, and interact with component Extensions. In short, we are standardizing where component Extensions live on the channel and how viewers will interact with them.
Starting on July 15, 2019 in late July, components will live inside of an Extensions Sidebar on the channel page. For more details about these changes and why they are being implemented, please see our RFC linked above. For more details as to what actions Extensions developers should take to update their existing component Extensions, please read the rest of this post, which acts as a guide to explain how to test and design for the upcoming new component Extension user experience.
1. Developer Rig
The Twitch Developer Rig will be the first place that you are able to test your Extension with a demo version of the new component Extension UI. To get started, download and install the native Developer Rig from the Twitch Developers website. If you haven’t already, create a new project for your Extension by following these directions.
If your Extension supports the component anchor, there will be a new type of view that you can create titled “Component (New Design).” This view will continue to load the HTML file specified as the “Video - Component Viewer Path” in your Extension manifest.
When creating the view, you will have the option to define the size of your component in the view. These size fields will later be added to the extension manifest, but we present them here for you for ease of testing.
If these fields are left blank, the rig will compute a size for your component that most closely resembles the current size you have specified in your extension manifest, but applying our new constraints to component size (component Extensions can now consume > 50% of the player width when open, but can no longer occupy the space behind the player control overlays at the top and bottom of the player frame).
You will be able to click your extension’s icon in the new dock as well as the “X” button in the Extension top nav in order to toggle the visibility of your Extension and trigger any onVisibilityChanged
callback you may have registered in the Extension helper.
If you create a view using the old component type, your Extension will now be passed a url query parameter legacyComponentDesign=true
. If your component needs to render a different appearance when presented in the new design, it is expected that you render that appearance when this query parameter is absent, and render your current design when it is present.
2. Twitch Beta Client + Manifest Updates
On June 14, 2019 June 19, 2019, we will launch an update to the Twitch web client that will enable the new component Extension design by creating the flag “useNewComponentDesign”“useNewExtensionComponentDesign” in your browser’s local storage for twitch.tv
and setting it to true
. After enabling this flag, you will see all component Extensions on the site render with the new “Sidebar” design.
At the same time, we will launch an update to the Twitch Developers site that will allow you to specify your new sizing properties “Target Height” and “Aspect Ratio” (alongside the old ones). These properties will be automatically populated with values that are calculated based on your Extension’s current sizing properties, but you may wish to change them to fit better in the new framework.
You will be able to submit a new version of your Extension that supports the new “Sidebar” design at any point between June 14 June 19 and the consumer rollout of the update in mid-July. More details about this phase of the rollout will be communicated as we get closer to the June 14 June 19 date.
3. Updating the design of your component Extension
There are several changes in the new component Extension user experience that will impact how you design your new component. This design guide highlights those key changes and provides guidance on how to update your component Extension in order to work well with the new designs.
3.1 Close button
Your Extension no longer needs a close or minimize button as this behavior is now handled by the parent frame around the component.
3.2 Minimize and Maximized states
Your Extension will no longer need to support a minimized state. Users will maximize and minimize your component Extension by clicking on your Extension icon in the sidebar.
3.3 Component sizing, space utilization, and opaque background
Due to the elimination of a need for minimized states within component Extensions, component content is now required to fill the entire size of the request iframe. Components will no longer have a transparent background – a default opaque background will be applied to any unused or unstyled area of your component. Your component experience must fill the full space generated by your sizing parameters.
Recommended:
Avoid:
3.4 Extension icon
The new Extension sidebar has increased prominence and visibility to all viewers, making the design of your Extension icon of increased importance. We recommend your Extension icon to be fully distinguishable at a 30x30 px on a solid color background in order to provide maximum visibility.
Recommended:
Avoid:
4. Updating the design of your overlay Extension (if applicable)
With the creation of the Extensions sidebar and updates to component user experience, some overlay Extension may also require minor updates.
4.1 Video player safe zones
The video Extension navigation bar is now placed on the right side of the screen. In order to avoid overlap with your overlay thumbnail, it is recommended to align any thumbnails or buttons on the left side of the screen or allow a 75px padding on the right side of the screen.
Recommended:
Avoid: