mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 03:12:29 +00:00
d06b847319
Implements Picture-in-Picture functionality for the Electron wrapper to maintain video engagement when users are not actively focused on the conference window. This feature addresses the need to keep users visually connected to the conference even when multitasking. Key features: - Automatic PiP mode activation and deactivation based on user interaction - Displays large video participant's stream or renders their avatar on canvas when video unavailable - Provides audio/video mute controls via MediaSession API directly in PiP window - Adds API events (_pip-requested) for Electron wrapper integration Implementation includes new pip feature module with Redux architecture, canvas-based avatar rendering with custom backgrounds support, and integration with existing mute/unmute logic. Depends on jitsi-meet-electron-sdk#479 for proper user gesture handling in Electron.
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import GlobalStyles from '../../base/ui/components/GlobalStyles.web';
|
|
import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
|
|
import DialogContainer from '../../base/ui/components/web/DialogContainer';
|
|
import ChromeExtensionBanner from '../../chrome-extension-banner/components/ChromeExtensionBanner.web';
|
|
import OverlayContainer from '../../overlay/components/web/OverlayContainer';
|
|
import PiP from '../../pip/components/PiP';
|
|
|
|
import { AbstractApp } from './AbstractApp';
|
|
|
|
// Register middlewares and reducers.
|
|
import '../middlewares';
|
|
import '../reducers';
|
|
|
|
|
|
/**
|
|
* Root app {@code Component} on Web/React.
|
|
*
|
|
* @augments AbstractApp
|
|
*/
|
|
export class App extends AbstractApp {
|
|
|
|
/**
|
|
* Creates an extra {@link ReactElement}s to be added (unconditionally)
|
|
* alongside the main element.
|
|
*
|
|
* @abstract
|
|
* @protected
|
|
* @returns {ReactElement}
|
|
*/
|
|
override _createExtraElement() {
|
|
return (
|
|
<JitsiThemeProvider>
|
|
<OverlayContainer />
|
|
</JitsiThemeProvider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Overrides the parent method to inject {@link AtlasKitThemeProvider} as
|
|
* the top most component.
|
|
*
|
|
* @override
|
|
*/
|
|
override _createMainElement(component: React.ComponentType, props?: Object) {
|
|
return (
|
|
<JitsiThemeProvider>
|
|
<GlobalStyles />
|
|
<ChromeExtensionBanner />
|
|
<PiP />
|
|
{ super._createMainElement(component, props) }
|
|
</JitsiThemeProvider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the platform specific dialog container.
|
|
*
|
|
* @returns {React$Element}
|
|
*/
|
|
override _renderDialogContainer() {
|
|
return (
|
|
<JitsiThemeProvider>
|
|
<DialogContainer />
|
|
</JitsiThemeProvider>
|
|
);
|
|
}
|
|
}
|