Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] Web VideoTrackRenderer prevents parent component click events #625

Open
AoEiuV020 opened this issue Nov 1, 2024 · 1 comment
Open

Comments

@AoEiuV020
Copy link
Contributor

Describe the bug
I've encountered an issue with VideoTrackRenderer on the web where it blocks click events for the parent component.
Notably, this problem only appears on the web; in my testing on Windows and Linux, it works as expected.
Additionally, other child elements within the parent component still respond correctly to parent click events based on their positions.

Here's a code snippet that demonstrates the issue:
https://github.com/AoEiuV020/livekit_meeting/blob/rendererClick/lib/widgets/participant.dart#L145

  @override
  Widget build(BuildContext ctx) => Container(
        foregroundDecoration: BoxDecoration(
          border: widget.participant.isSpeaking && !isScreenShare
              ? Border.all(
                  width: 5,
                  color: LKColors.lkBlue,
                )
              : null,
        ),
        decoration: BoxDecoration(
          color: Theme.of(ctx).cardColor,
        ),
        child: InkWell(
                onTap: () => context.showErrorDialog(
                    'clicked video: ${widget.participant.identity}'),
          child: Stack(
            children: [
              // Video
              activeVideoTrack != null && !activeVideoTrack!.muted
                  ? VideoTrackRenderer(
                      renderMode: VideoRenderMode.auto,
                      activeVideoTrack!,
                      fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
                    )
                  : const NoVideoWidget(),
              // Bottom bar
              Align(
                alignment: Alignment.bottomCenter,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ...extraWidgets(isScreenShare),
                    ParticipantInfoWidget(
                      title: widget.participant.name.isNotEmpty
                          ? '${widget.participant.name} (${widget.participant.identity})'
                          : widget.participant.identity,
                      audioAvailable: audioPublication?.muted == false &&
                          audioPublication?.subscribed == true,
                      connectionQuality: widget.participant.connectionQuality,
                      isScreenShare: isScreenShare,
                      enabledE2EE: widget.participant.isEncrypted,
                    ),
                  ],
                ),
              ),
              if (widget.showStatsLayer)
                Positioned(
                    top: 130,
                    right: 30,
                    child: ParticipantStatsWidget(
                      participant: widget.participant,
                    )),
            ],
          ),
        ),
      );

image

To Reproduce

Expected behavior

Platform information

Flutter version: 3.24.3
Plugin version: 2.2.8
Flutter target OS: Android
Flutter target OS version: 14
Flutter console log:

@AoEiuV020
Copy link
Contributor Author

I tried wrapping VideoTrackRenderer with IgnorePointer, and this approach resolves the click event issue on the web. However,
I’m unsure if there might be any side effects from this change. Should this modification be implemented in the SDK?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant