RFC 0008 - Pop Out Support for Extensions

RFCs
1

Pop Out Support for Extensions

Summary

The current set of Extension anchor points have enabled some great tools for our broadcasters, but the current form factor of existing Extensions anchor points are a limiting characteristic for developers who would like to build deep, rich, interactive applications on Twitch.

Our proposal is to enable Extensions to be undocked from the channel page completely similarly to how chat pop out works today. This change puts the user experience in the viewers’ hands and provides Extension developers with the dedicated real estate necessary to realize their vision for these compelling experiences.

Motivation

We want to enable developers to build rich and engaging experiences that can be shared with the entire Twitch community.

Today, the existing set of available Extensions anchor points asks developers to choose between visibility and complete control over available real estate. In panels, developers have a limited region in which to deliver their experience, and viewers have to disengage with the broadcaster’s content in order to scroll down to the panels area. In video overlays and components, developers are encouraged to provide value while not distracting from the content being presented underneath in the video player.

We believe that by adding the ability for viewers to pop out Extensions will make way for new lean-in experiences, particularly for highly interactive and engaging games and applications.

Detailed Design

Similarly to the panel anchor, Extensions that are popped out of the channel page will be in complete control of the developer. The window containing the Extension will contain a small amount of Twitch-controlled chrome with information about the Extension, a link to the Extension’s details page, UI for reporting issues, etc. Hosted inside this UI is the iframe containing the developer-controlled user interface representing the Extension experience.

rfc0008_screen1

The Extension iframe will resize to take up the full size of the new window, minus the minimal Twitch-controlled UI wrapping the Extension. Extension developers should rely on responsive styling best practices to provide an interface that reacts appropriately to window resizing.

To determine whether the Extension is currently popped out or not, developers can inspect the query string of their iframe for the popout parameter. While popped out from the channel page, Extension URLs will contain a set of query parameters like this:

?popout&anchor=panel&language=en&mode=viewer&state=released&platform=web

On the channel page, viewers will be presented with the option to pop out an Extension in the Twitch UI around the iframe.

rfc0008_screen2

Once the Extension is popped out of the channel page, a placeholder will remain on the channel page where the Extension had been previously. The placeholder contains a button to return the Extension to its original position on the channel page.

rfc0008_screen3

Rollout Considerations

What about video overlays and components?

Initially, we will roll out pop out support for panel Extensions as well as live configuration views, as their user interfaces most naturally fit the pop out model. We are considering a couple options for enabling pop out support for video overlays and component extensions as a future update:

  • Require developers to handle the pop out state provided by query parameter, customizing the user interface for an experience undocked from the channel page.
  • Allow developers to specify another view entry point for popped out Extensions, similar to how mobile views work today.
1 Like
2

Will there be an option to disable pop out (hopefully with it disabled by default on pre-existing extensions to prevent breaking changes), or will we have no choice but spend development time on pop-out even if it will be detrimental to the functionality of the extension?

3

@Dist Initially, we planned to roll this out for panels and live config by default as it should be a more natural fit for the UI presented in those two views specifically. No additional work is required to build for pop out, but you can opt-in for experiences that want to take advantage of the extra space.

If there are particular use cases you’re concerned about, I’d love to hear about them!

4

I completely agree that panel and live config views will be the most natural fit for a pop-out, my main concern though is going from a set dimension iframe to an iframe that has a variable size and pre-existing extensions may not be designed for that, and could lead to display bugs. So extensions that currently look polished from a user experience point of view, they could now look awful and poorly designed if the pop-out was stretched/shrunk to different dimensions, potentially even having fixed positioned elements now overlapping and blocking functionality.

At the very least I would hope that when an extension is popped out, that the new window starts off at the same dimensions as the extension view it came from.

Another example of an issue I can see happening is like my silly clicker game I threw together as a video overlay for the Extension Jam. It spawns emotes to be clicked within the iframe, if a user was to pop that out, shrink it to the size that there’s only a single space for emotes they could just spam click on the same spot, so I wouldn’t want my extension popped out at all. Technically this could be done even when not popped out, but I’ve yet to see anyone want to make their video player that small for it to be an issue. My extension also has some safeguards to prevent this a little too, but there are other extensions which would face similar issues.

5

Absolutely, I can see this being an issue for Extensions that rely heavily on fixed/absolute positioned elements. Long term, this will most likely be addressed by allowing you to provide a pop out specific view, like you can for mobile.

The scenario you described in video extensions is a good case for why we’ll need a solution for this before we rollout for all Extension types. Plenty of overlays, if not most, do not have interfaces that map directly to a pop out.

Yes, the new window’s initial dimensions will match the size of the Extension on the channel page.

6

This looks cool! Could it potentially lead to extension embeds off site (similar to chat embed)?

7

@xzion Embeds aren’t something we’ve considered so far, but I wouldn’t rule them out with this design. I could see very specialized scenarios where you might want to pair a specific stream with an Extension in a custom layout. Might be cool for second screen experiences tied to a game. :slight_smile:

8

cool, this really has more value for everyone, I’m going to report a UX related issue of the extensions I realized yesterday when there are at least two overlap extensions enabled on the channel, and the two use the same regions to choose from: OnMouseEnter, OnMouseOut, effects of opacity and so on, the extensions conflict and it gets very confusing to those who broadcast and to whom it watches, if possible, it may be considered to put a test for the streamer to preview before the extension that you want to install in conjunction with what it already It has

9

@AlbericoD There are some interesting usage patterns when combining video overlays with components that unfortunately we can’t address directly for a number of reasons. We’ve considered a few possibilities to make this more obvious to broadcasters as they setup their Extensions, for example, enabling live previews of Extensions in the component activation UI. Stay tuned for more updates on this!

1 Like
10

pair a specific stream with an Extension in a custom layout

Definitely something I’ve had client inquiries/request for!

Initially, we planned to roll this out for panels and live config by default…

Wow, I totally skimmed over that and hadn’t even thought of having the live config pop-out, that’s probably now the best part of this idea for me. Some of the extension I’ve built (and many that I haven’t built for this specific reason) are hindered by the fact that it’s difficult to get feedback/interaction with the streamer from extension. The live panel works but is stuck in the dashboard which isn’t usually the streamer’s primary view. But if they could pop out the live panel and position it on a monitor with chat and their other tools that would be heaps better! Could potentially even use the live config popout to provide a customised overlay source for the streamer.

2 Likes
11

I think this could also be utilised especially for “alerts” the likes of streamlabs, though that would be kind of abusing it for something it isn’t meant for.

Maybe an idea: A “Broadcaster View” that could receive messages via PubSub - that way, an extension could specifically interact with the broadcaster in a more controlled setting that is not “just” meant for “live configuration”.

12

I think that’s exactly the type of thing the live panel is meant for, it’s just not really been that usable due to the small size and one-at-a-time limit.

@MisterHex would it be possible for the live config panel popout to not have the Twitch UI wrapper?

13

@xzion Specifically for the pop out scenario, we include the Twitch UI to make it clear to the broadcaster that the window itself is managed by Twitch. That space also provides mechanisms for gaining access to extension details, reporting functionality and other Twitch-provided UI for Extensions to as necessary.

However, Extensions as a browser source in OBS is definitely a compelling use case and something we’ve thrown around internally. I imagine we might consider that as an option if we go down the path of enabling embeds for Extensions.

14

Extensions can differentiate between viewer and broadcaster based on the contents of the JWT given to the Extension during authorization. Having said that, providing a specific view for broadcasters that they can use as a browser source could be a nice middle ground between the current view types and doing full embeds for all extension anchors. I’ll share your feedback with the rest of the team. :slight_smile:

15

Hiya @MisterHex !

Curious if you have a time frame for when this will be rolling out?

Many thanks!

16

We’re currently targeting the end of August for a release date.

17

Just a heads up – this feature went live today along side chat capabilities for Extensions! :tada:
https://blog.twitch.tv/extensions-capabilities-in-twitch-chat-2ecbd53764d9

We’ll continue refining this work in the future. Thanks everyone for your input and feedback!

1 Like