Minimize livestream window

In-app minimization

With only two simple steps, you can achieve the effect of minimizing the livestream window within the application.

Ideally, the final effect will look like this:

Normal livestream scene	PK battle scene

Integrate in-app minimization

Support minimize

There are two ways to minimize the live streaming window.

One way is to use the encapsulated ZegoMenuBarButtonName.minimizingButton.

Another way is to customize a button, and when the button is clicked, invoke ZegoUIKitPrebuiltLiveStreamingController's minimize.toMinimize() method.

Display the minimize button

Use ZegoUIKitPrebuiltLiveStreamingController's minimize.toMinimize()

Configure the Overlay

To achieve the effect of minimizing the window, you need to use the ZegoUIKitPrebuiltLiveStreamingMiniOverlayPage component and insert it into the Overlay of the app.

Sample code

Prevent building multiple ZegoUIKitPrebuiltLiveStreaming

When you minimize the livestream interface, clicking the enter button again will lead to re-entering the livestream room if the button is not restricted. To avoid this situation, it is necessary to restrict the button.

Therefore, in the click event of the button, if it is currently in a minimized state, the page jump operation should not be carried out.

Untitled

ElevatedButton(
    onPressed: () {
      if (ZegoUIKitPrebuiltLiveStreamingController().minimize.isMinimizing) {
          /// when the application is minimized (in a minimized state),
          /// disable button clicks to prevent multiple PrebuiltLiveStreaming components from being created.
          return;
      }

      /// The code you used to initialize or navigate ZegoUIKitPrebuiltLiveStreaming previously
      Navigator.pushNamed(
        context,
        ZegoUIKitPrebuiltLiveStreaming(...),
      );
    },
    child: const Text('join'),
  );

Copied!

After completing the above two steps, you can now minimize the livestream window within the application.

How to correctly nest widgets within the livestream window

If you need to nest some widgets in ZegoUIKitPrebuiltLiveStreaming, please use ZegoUIKitPrebuiltLiveStreamingConfig.foreground nesting, otherwise these widgets will be lost when you minimize and restore the ZegoUIKitPrebuiltLiveStreaming.

Here is an example code:

Untitled


class LivePage extends StatefulWidget {
  final String liveID;
  final bool isHost;

  const LivePage({
    Key? key,
    required this.liveID,
    this.isHost = false,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => LivePageState();
}

class LivePageState extends State<LivePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveStreaming(
        appID: yourAppID /*input your AppID*/,
        appSign: yourAppSign /*input your AppSign*/,
        userID: 'userID',
        userName: 'userName',
        liveID: widget.liveID,
        config: (widget.isHost
            ? ZegoUIKitPrebuiltLiveStreamingConfig.host(
                plugins: [ZegoUIKitSignalingPlugin()],
              )
            : ZegoUIKitPrebuiltLiveStreamingConfig.audience(
                plugins: [ZegoUIKitSignalingPlugin()],
              ))
          ..foreground = Stack(
            children: [
              Positioned(child: Text('your custom widgets')),
            ],
          )
          ..topMenuBar.buttons = [ZegoMenuBarButtonName.minimizingButton],
      ),
    );
  }
}

Copied!

Out-of-app minimization

PIP, also known as Picture In Picture(PIP), is a window displayed when the application is in background.

In addition, interactive operations are not allowed at this time, so it is only in viewing mode.

The default value of ZegoLiveStreamingPIPConfig.enableWhenBackground is true, which means the PIP feature is enabled by default. If you don't want to enable it, you can set it to false.

If you want to display the PIP window by clicking a button, you can achieve this by adding ZegoCallMenuBarButtonName.pipButton to topMenuBar.buttons.

The final effect will look like this:

Integrate with button

Untitled

ZegoUIKitPrebuiltLiveStreaming(
  appID: YourAppID,
  appSign: YourAppSign,
  userID: userID,
  userName: userName,
  roomID: roomID,
  config: isHost
      ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
      : ZegoUIKitPrebuiltLiveStreamingConfig.audience()
    ..pip.enableWhenBackground = true,
    ..topMenuBar.buttons = [
      ZegoLiveStreamingMenuBarButtonName.pipButton
    ],
),

Copied!

Config

ZegoLiveStreamingPIPConfig

Attribute	Description	Type
aspectWidth	aspect width	int
aspectHeight	aspect height	int
enableWhenBackground	android: only available on SDK higher than 31(>=31)	bool
android	android config	ZegoLiveStreamingPIPAndroidConfig

ZegoLiveStreamingPIPAndroidConfig

Attribute	Description	Type
background	background widget, default is a black widget	Widget?