Squashed commit of the following:

commit 9a43eec Author: DanielHabenicht <[email protected]> Date: Mon May 2 10:41:09 2022 +0000 fix translation implementation commit 33bf1b8 Author: DanielHabenicht <[email protected]> Date: Mon May 2 10:09:06 2022 +0000 fix linting error commit e3a887d Merge: a42388f 3f7eef5 Author: DanielHabenicht <[email protected]> Date: Mon May 2 09:49:22 2022 +0000 Merge branch 'master' into feat/generic-iframe-reimpl commit a42388f Author: DanielHabenicht <[email protected]> Date: Mon May 2 09:41:18 2022 +0000 fix undefined error if not configured the new addition would have thrown an error commit f753b5a Merge: e2af9de 46dd88c Author: DanielHabenicht <[email protected]> Date: Tue Apr 19 12:28:54 2022 +0000 Merge branch 'master' into feat/generic-iframe-reimpl commit e2af9de Author: DanielHabenicht <[email protected]> Date: Mon Apr 11 08:46:30 2022 +0000 fix last iframe visible for newly joined participants although the sharing was already ended commit 785cb16 Author: DanielHabenicht <[email protected]> Date: Tue Apr 5 16:18:36 2022 +0000 order main.json commit 5fb3f94 Author: DanielHabenicht <[email protected]> Date: Tue Apr 5 15:45:19 2022 +0000 fix multi iframe sharing * on beginning of conference all activated iframes are shown * if newly joined no iframe will be focused commit 95d3c57 Author: DanielHabenicht <[email protected]> Date: Tue Apr 5 11:46:19 2022 +0000 fix fake user applications not pinnable commit 0d41f01 Author: DanielHabenicht <[email protected]> Date: Tue Apr 5 10:41:47 2022 +0000 added option to add multiple shared IFrames commit 804c68e Merge: a6d320e dc8925c Author: DanielHabenicht <[email protected]> Date: Wed Mar 30 15:56:42 2022 +0000 Merge branch 'master' into feat/generic-iframe-reimpl commit a6d320e Author: DanielHabenicht <[email protected]> Date: Tue Mar 29 08:13:52 2022 +0000 fix IFrameManager for now commit a11b3b3 Author: DanielHabenicht <[email protected]> Date: Tue Mar 29 08:13:19 2022 +0000 fix lint errors commit 46c78fc Author: DanielHabenicht <[email protected]> Date: Mon Mar 28 14:35:25 2022 +0000 fix minor style and format issues from comments commit 5f1b0b7 Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 16:46:16 2022 +0000 fix lint issues commit 505d03c Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 11:29:30 2022 +0000 add greyed out button explanation commit 6f12d1d Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 11:00:44 2022 +0000 fix mixup of template url and final url * fixed this because it lead to the share button not greyed out * refactored code to delete muted, volume, time attributes not needed commit 59d0fdd Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 09:53:52 2022 +0000 fix sharedIFrame Participant not working commit e8535c7 Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 07:56:52 2022 +0000 sorting and standardizing main.json commit 829740d Author: DanielHabenicht <[email protected]> Date: Thu Mar 24 07:50:49 2022 +0000 remove errornous overwrite commit 465af3a Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 12:23:31 2022 +0000 remove default url commit 5f13da7 Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 12:21:49 2022 +0000 remove TODOs that do not need to be implemented commit 04f708d Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 12:20:40 2022 +0000 remove unneeded import commit ecb4cb3 Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 12:09:07 2022 +0000 add missing line ending commit b4815b9 Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 12:05:50 2022 +0000 update sharediframe icon commit 12ca372 Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 11:36:29 2022 +0000 refactor sharediframe api commit 7089c1f Merge: 36071be 9a78011 Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 11:17:45 2022 +0000 Merge branch 'master' into feat/generic-iframe-reimpl commit 36071be Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 11:04:19 2022 +0000 add avatar to sharedIFrame commit 620a44c Author: DanielHabenicht <[email protected]> Date: Wed Mar 23 11:03:22 2022 +0000 rename genericIFrameTemplateUrl to sharedIFrameTemplateUrl commit fb7d607 Author: DanielHabenicht <[email protected]> Date: Fri Mar 4 23:57:05 2022 +0000 add custom participant name commit 433c439 Author: DanielHabenicht <[email protected]> Date: Fri Mar 4 23:24:25 2022 +0000 fix interoperability with watermark and etherpad commit ad69885 Author: DanielHabenicht <[email protected]> Date: Fri Mar 4 22:13:38 2022 +0000 fix: null reference error if no avatar is shown (e.g. because iframe or video player are used) this would produce a null reference error, so we check it before commit a54702f Author: DanielHabenicht <[email protected]> Date: Fri Mar 4 21:47:36 2022 +0000 fix IFrame Application loosing connection commit 3482bcc Author: DanielHabenicht <[email protected]> Date: Tue Mar 1 12:28:17 2022 +0000 feat: add generic iframe fix jitsi#5295
DanielHabenicht · Jul 8, 2022 · 50c0451 · 50c0451
1 parent 0d50f18
commit 50c0451
Show file tree

Hide file tree

Showing 40 changed files with 1,310 additions and 17 deletions.
diff --git a/config.js b/config.js
@@ -686,6 +686,7 @@ var config = {
     //    'settings',
     //    'shareaudio',
     //    'sharedvideo',
+    //    'sharediframe',
     //    'shortcuts',
     //    'stats',
     //    'tileview',
@@ -754,6 +755,7 @@ var config = {
     //     'settings',
     //     'shareaudio',
     //     'sharedvideo',
+    //     'sharediframe',
     //     'shortcuts',
     //     'stats',
     //     'tileview',
@@ -1253,6 +1255,23 @@ var config = {
     // dialInConfCodeUrl: 'https://conference-mapper.jitsi.net/v1/access',
     //
 
+    // Generic IFrame to be used for any application you like. You can name the menu entries in "/lang/main.json"
+    // The link supports template strings for:
+    //  - {room} - The room id
+    //  - {lang} - The ISO Language tag
+    //
+    // sharedIFrameConfig: {
+    //     whiteboard: { // The Id and displayed name of the sharedIframe
+    //         templateUrl: 'https://example.com/link/to/your/iframe/app/{room}?lang={lang}',
+    //         // Optional:
+    //         avatarUrl: 'images/sharedIFrameAvatar.svg',
+    //     },
+    //     etherpad: {
+    //         templateUrl: 'https://example.com/link/to/your/iframe/app/{room}?lang={lang}',
+    //         avatarUrl: 'images/sharedIFrameAvatarEtherpad.svg',
+    //     }
+    // },
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
@@ -101,6 +101,7 @@
 }
 
 #sharedVideo,
+#sharedIFrame,
 #etherpad,
 #localVideoWrapper video,
 #localVideoWrapper object,

diff --git a/css/filmstrip/_tile_view_overrides.scss b/css/filmstrip/_tile_view_overrides.scss
@@ -17,6 +17,7 @@
      */
     #dominantSpeaker,
     #largeVideoElementsContainer,
+    #sharedIFrame,
     #sharedVideo,
     .stage-participant-label {
         display: none;

diff --git a/lang/main.json b/lang/main.json
@@ -1090,6 +1090,7 @@
             "shareRoom": "Invite someone",
             "shareYourScreen": "Start / Stop sharing your screen",
             "shareaudio": "Share audio",
+            "sharediframe": "Toggle {{iframename}} sharing",
             "sharedvideo": "Toggle video sharing",
             "shortcuts": "Toggle shortcuts",
             "show": "Show on stage",
@@ -1117,6 +1118,7 @@
         "closeReactionsMenu": "Close reactions menu",
         "disableReactionSounds": "You can disable reaction sounds for this meeting",
         "dock": "Dock in main window",
+        "disabledSharedIFrame": "Someone else is already sharing {{iframename}}.",
         "documentClose": "Close shared document",
         "documentOpen": "Open shared document",
         "download": "Download our apps",
@@ -1171,6 +1173,7 @@
         "selectBackground": "Select background",
         "shareRoom": "Invite someone",
         "shareaudio": "Share audio",
+        "sharediframe": "Share {{iframename}}",
         "sharedvideo": "Share video",
         "shortcuts": "View shortcuts",
         "silence": "Silence",
@@ -1179,6 +1182,7 @@
         "startSubtitles": "Start subtitles",
         "stopAudioSharing": "Stop audio sharing",
         "stopScreenSharing": "Stop screen sharing",
+        "stopSharedIFrame": "Stop {{iframename}}",
         "stopSharedVideo": "Stop video",
         "stopSubtitles": "Stop subtitles",
         "surprised": "Surprised",

diff --git a/modules/API/API.js b/modules/API/API.js
@@ -86,6 +86,7 @@ import { isScreenAudioSupported } from '../../react/features/screen-share';
 import { startScreenShareFlow, startAudioScreenShareFlow } from '../../react/features/screen-share/actions';
 import { toggleScreenshotCaptureSummary } from '../../react/features/screenshot-capture';
 import { isScreenshotCaptureEnabled } from '../../react/features/screenshot-capture/functions';
+import { toggleSharedIFrame, stopSharedIFrame } from '../../react/features/shared-iframe/actions.any';
 import { playSharedVideo, stopSharedVideo } from '../../react/features/shared-video/actions.any';
 import { extractYoutubeIdOrURL } from '../../react/features/shared-video/functions';
 import { toggleRequestingSubtitles, setRequestingSubtitles } from '../../react/features/subtitles/actions';
@@ -463,6 +464,18 @@ function initCommands() {
             APP.store.dispatch(stopSharedVideo());
         },
 
+        'toggle-share-iframe': () => {
+            logger.debug('Share iframe command received');
+            sendAnalytics(createApiEvent('share.iframe.toggle'));
+            APP.store.dispatch(toggleSharedIFrame());
+        },
+
+        'stop-share-iframe': shareKey => {
+            logger.debug('Share iframe command received');
+            sendAnalytics(createApiEvent('share.iframe.stop'));
+            APP.store.dispatch(stopSharedIFrame(shareKey));
+        },
+
         /**
          * Starts a file recording or streaming session depending on the passed on params.
          * For RTMP streams, `rtmpStreamKey` must be passed on. `rtmpBroadcastID` is optional.

diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js
@@ -389,9 +389,11 @@ export class VideoContainer extends LargeContainer {
         if (this.avatarDisplayed) {
             const $avatarImage = $('#dominantSpeakerAvatarContainer');
 
-            $element.css(
-                'top',
-                $avatarImage.offset().top + $avatarImage.height() + 10);
+            if ($avatarImage.length > 0) {
+                $element.css(
+                    'top',
+                    $avatarImage.offset().top + $avatarImage.height() + 10);
+            }
         } else {
             const height = $element.height();
             const parentHeight = $element.parent().height();

diff --git a/react/features/analytics/AnalyticsEvents.js b/react/features/analytics/AnalyticsEvents.js
@@ -629,6 +629,22 @@ export function createSharedVideoEvent(action, attributes = {}) {
     };
 }
 
+/**
+ * Creates an event associated with the "shared iframe" feature.
+ *
+ * @param {string} action - The action that the event represents.
+ * @param {Object} attributes - Attributes to attach to the event.
+ * @returns {Object} The event in a format suitable for sending via
+ * sendAnalytics.
+ */
+export function createSharedIFrameEvent(action, attributes = {}) {
+    return {
+        action,
+        attributes,
+        actionSubject: 'shared.iframe'
+    };
+}
+
 /**
  * Creates an event associated with a shortcut being pressed, released or
  * triggered. By convention, where appropriate an attribute named 'enable'

diff --git a/react/features/app/middlewares.native.js b/react/features/app/middlewares.native.js
@@ -15,5 +15,6 @@ import '../mobile/wake-lock/middleware';
 import '../mobile/watchos/middleware';
 import '../share-room/middleware';
 import '../shared-video/middleware';
+import '../shared-iframe/middleware';
 
 import './middlewares.any';
diff --git a/react/features/app/middlewares.web.js b/react/features/app/middlewares.web.js
@@ -17,6 +17,7 @@ import '../prejoin/middleware';
 import '../remote-control/middleware';
 import '../screen-share/middleware';
 import '../shared-video/middleware';
+import '../shared-iframe/middleware';
 import '../settings/middleware';
 import '../talk-while-muted/middleware';
 import '../virtual-background/middleware';

diff --git a/react/features/app/reducers.native.js b/react/features/app/reducers.native.js
@@ -7,6 +7,7 @@ import '../mobile/external-api/reducer';
 import '../mobile/full-screen/reducer';
 import '../mobile/watchos/reducer';
 import '../shared-video/reducer';
+import '../shared-iframe/reducer';
 
 import './reducer.native';
 

diff --git a/react/features/app/reducers.web.js b/react/features/app/reducers.web.js
@@ -13,6 +13,7 @@ import '../remote-control/reducer';
 import '../screen-share/reducer';
 import '../screenshot-capture/reducer';
 import '../shared-video/reducer';
+import '../shared-iframe/reducer';
 import '../talk-while-muted/reducer';
 import '../virtual-background/reducer';
 import './reducers.any';
diff --git a/react/features/base/config/constants.js b/react/features/base/config/constants.js
@@ -42,6 +42,7 @@ export const TOOLBAR_BUTTONS = [
     'settings',
     'shareaudio',
     'sharedvideo',
+    'sharediframe',
     'shortcuts',
     'stats',
     'tileview',

diff --git a/react/features/base/flags/constants.js b/react/features/base/flags/constants.js
@@ -80,6 +80,12 @@ export const FULLSCREEN_ENABLED = 'fullscreen.enabled';
  */
 export const HELP_BUTTON_ENABLED = 'help.enabled';
 
+/**
+ * Flag indicating if the video share button should be enabled
+ * Default: enabled (true).
+ */
+export const IFRAME_SHARE_BUTTON_ENABLED = 'iframe-share.enabled';
+
 /**
  * Flag indicating if invite functionality should be enabled.
  * Default: enabled (true).

diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js
@@ -126,6 +126,7 @@ export { default as IconShareAudio } from './share-audio.svg';
 export { default as IconShareDesktop } from './share-desktop.svg';
 export { default as IconShareDoc } from './share-doc.svg';
 export { default as IconShareVideo } from './shared-video.svg';
+export { default as IconShareIFrame } from './shared-iframe.svg';
 export { default as IconSmile } from './smile.svg';
 export { default as IconStopAudioShare } from './stop-audio-share.svg';
 export { default as IconSwitchCamera } from './switch-camera.svg';

diff --git a/react/features/base/icons/svg/shared-iframe.svg b/react/features/base/icons/svg/shared-iframe.svg
diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js
@@ -3,7 +3,9 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
+import { SharedIFrame } from '../../../shared-iframe/components';
 import { SharedVideo } from '../../../shared-video/components/native';
+import { VIDEO_PLAYER_PARTICIPANT_NAME, YOUTUBE_PLAYER_PARTICIPANT_NAME } from '../../../shared-video/constants';
 import { Avatar } from '../../avatar';
 import { translate } from '../../i18n';
 import { JitsiParticipantConnectionStatus } from '../../lib-jitsi-meet';
@@ -44,6 +46,13 @@ type Props = {
      */
     _participantName: string,
 
+    /**
+     * Whether the current participant is an IFrame participant.
+     *
+     * @private
+     */
+    _isIFrameParticipant: string,
+
     /**
      * True if the video should be rendered, false otherwise.
      */
@@ -175,6 +184,8 @@ class ParticipantView extends Component<Props> {
         const {
             _connectionStatus: connectionStatus,
             _isFakeParticipant,
+            _isIFrameParticipant,
+            _participantName,
             _renderVideo: renderVideo,
             _videoTrack: videoTrack,
             disableVideo,
@@ -190,11 +201,17 @@ class ParticipantView extends Component<Props> {
                 ? this.props.testHintId
                 : `org.jitsi.meet.Participant#${this.props.participantId}`;
 
-        const renderSharedVideo = _isFakeParticipant && !disableVideo;
+        const renderSharedVideo = _isFakeParticipant
+            && (
+                _participantName === VIDEO_PLAYER_PARTICIPANT_NAME
+                || _participantName === YOUTUBE_PLAYER_PARTICIPANT_NAME)
+            && !disableVideo;
+        const renderSharedIFrame = _isFakeParticipant
+            && _isIFrameParticipant && !disableVideo;
 
         return (
             <Container
-                onClick = { renderVideo || renderSharedVideo ? undefined : onPress }
+                onClick = { renderVideo || renderSharedVideo || renderSharedIFrame ? undefined : onPress }
                 style = {{
                     ...styles.participantView,
                     ...this.props.style
@@ -207,6 +224,7 @@ class ParticipantView extends Component<Props> {
                     value = '' />
 
                 { renderSharedVideo && <SharedVideo /> }
+                { renderSharedIFrame && <SharedIFrame /> }
 
                 { !_isFakeParticipant && renderVideo
                     && <VideoTrack
@@ -216,7 +234,7 @@ class ParticipantView extends Component<Props> {
                         zOrder = { this.props.zOrder }
                         zoomEnabled = { this.props.zoomEnabled } /> }
 
-                { !renderSharedVideo && !renderVideo
+                { !renderSharedIFrame && !renderSharedVideo && !renderVideo
                     && <View style = { styles.avatarContainer }>
                         <Avatar
                             participantId = { this.props.participantId }
@@ -250,13 +268,15 @@ function _mapStateToProps(state, ownProps) {
     const participant = getParticipantById(state, participantId);
     const tracks = state['features/base/tracks'];
     const videoTrack = getVideoTrackByParticipant(tracks, participant);
+    const { sharedIFrameConfig } = state['features/base/config'];
     let connectionStatus;
     let participantName;
 
     return {
         _connectionStatus:
             connectionStatus
                 || JitsiParticipantConnectionStatus.ACTIVE,
+        _isIFrameParticipant: Object.keys(sharedIFrameConfig).includes(participant.name),
         _isFakeParticipant: participant && participant.isFakeParticipant,
         _participantName: participantName,
         _renderVideo: shouldRenderParticipantVideo(state, participantId) && !disableVideo,

diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
@@ -34,6 +34,7 @@ import { getGifDisplayMode, getGifForParticipant } from '../../../gifs/functions
 import { PresenceLabel } from '../../../presence-status';
 import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 import { togglePinStageParticipant } from '../../actions';
+import { setStageParticipants } from '../../actions.web';
 import {
     DISPLAY_MODE_TO_CLASS_NAME,
     DISPLAY_VIDEO,
@@ -718,12 +719,19 @@ class Thumbnail extends Component<Props, State> {
      */
     _onClick() {
         const { _participant, dispatch, _stageFilmstripLayout } = this.props;
-        const { id, pinned } = _participant;
+        const { id, pinned, isFakeParticipant } = _participant;
 
         if (_stageFilmstripLayout) {
-            dispatch(togglePinStageParticipant(id));
-        } else {
             dispatch(pinParticipant(pinned ? null : id));
+        } else if (isFakeParticipant) {
+            // Remove all participants from stage to see the fake participant (mostly a fullscreen application)
+            dispatch(setStageParticipants([ {
+                participantId: id,
+                pinned: true
+            } ]));
+            dispatch(pinParticipant(pinned ? null : id));
+        } else {
+            dispatch(togglePinStageParticipant(id));
         }
     }