feat(documentPiP): auto open on tab switch and trigger button#17450
feat(documentPiP): auto open on tab switch and trigger button#17450bandhan-majumder wants to merge 1 commit into
Conversation
| pip?: { | ||
| disabled?: boolean; | ||
| showOnPrejoin?: boolean; | ||
| documentPiP: { |
There was a problem hiding this comment.
so common properties like disabled or should we show on prejoin or not, is kept as it is. added documentPiP for properties related to that.
There was a problem hiding this comment.
Sounds good to me in general
| * | ||
| * @returns {React.ReactElement} | ||
| */ | ||
| function DocumentPiPContent() { |
There was a problem hiding this comment.
this can be more polished I think
|
Hi, thanks for your contribution! |
| }; | ||
| } | ||
|
|
||
| export function enterPiP() { |
There was a problem hiding this comment.
I wanted to reuse existing showPiP function only. But the guard shouldShowPiP() is preventing for tab switch cases as we want to always open it. This can be merged together I think
| } | ||
|
|
||
| try { | ||
| const pipWindow = await (window as any).documentPictureInPicture.requestWindow({ |
There was a problem hiding this comment.
this "any" types are intentional as it's showing type error other wise. Should I just use ts ignore ? or keep it as any?
| * Document Picture-in-Picture utility functions. | ||
| */ | ||
|
|
||
| declare global { |
There was a problem hiding this comment.
this global is not required too. Can be removed in the enhancements as well : )
There was a problem hiding this comment.
maybe I should rename it to PiPActionButton ?
There was a problem hiding this comment.
I don't have preference. both sounds OK to me.
| override _handleClick() { | ||
| const { dispatch } = this.props; | ||
| sendAnalytics(createToolbarEvent('picture-in-picture')); | ||
| dispatch(enterPiP()); |
There was a problem hiding this comment.
Does this handle only the enterPip use case. I see you've added some strings for close but is this implemented?
There was a problem hiding this comment.
yeah I have added that too
|
|
||
| try { | ||
| // @ts-ignore - enterpictureinpicture is a newer MediaSession action. | ||
| navigator.mediaSession.setActionHandler('enterpictureinpicture', async (details: any) => { |
There was a problem hiding this comment.
media session
3 participants
description
This PR contains the opening and closing of the window through the button and the media session api (tab switch). This introduces some changes and refactor to the existing functions as well. Contents are not yet.
video demo:
Screencast.From.2026-06-02.02-05-58.mp4
video shows this:
prejoin auto tab switch triggers document pip
button successfully opens and changes label based on the active/inactive state
auto opens on tab switch duing meeting and closes when tab comes in focus