feat (screen-share) Added logs and emit iframe event for video and audio sharing (#12051)

modules/API/API.js

@@ -1770,6 +1770,24 @@ class API {
         });
     }
 
+    /**
+     * Notify the external application that the audio or video is being shared by a participant.
+     *
+     * @param {string} mediaType - Whether the content which is being shared is audio or video.
+     * @param {string} value - Whether the sharing is playing, pause or stop (on audio there is only playing and stop).
+     * @param {string} participantId - Participant id of the participant which started or ended
+     *  the video or audio sharing.
+     * @returns {void}
+     */
+    notifyAudioOrVideoSharingToggled(mediaType, value, participantId) {
+        this._sendEvent({
+            name: 'audio-or-video-sharing-toggled',
+            mediaType,
+            value,
+            participantId
+        });
+    }
+
     /**
      * Disposes the allocated resources.
      *

modules/API/external/external_api.js

@@ -98,6 +98,7 @@ const events = {
     'avatar-changed': 'avatarChanged',
     'audio-availability-changed': 'audioAvailabilityChanged',
     'audio-mute-status-changed': 'audioMuteStatusChanged',
+    'audio-or-video-sharing-toggled': 'audioOrVideoSharingToggled',
     'breakout-rooms-updated': 'breakoutRoomsUpdated',
     'browser-support': 'browserSupport',
     'camera-error': 'cameraError',

react/features/screen-share/middleware.js

@@ -1,11 +1,14 @@
 // @flow
 
 import { CONFERENCE_JOINED } from '../base/conference';
+import { MEDIA_TYPE } from '../base/media';
 import { MiddlewareRegistry } from '../base/redux';
 
-import { SET_SCREENSHARE_CAPTURE_FRAME_RATE } from './actionTypes';
+import { SET_SCREENSHARE_CAPTURE_FRAME_RATE, SET_SCREEN_AUDIO_SHARE_STATE } from './actionTypes';
 import logger from './logger';
 
+declare var APP: Object;
+
 /**
  * Implements the middleware of the feature screen-share.
  *
@@ -14,6 +17,8 @@ import logger from './logger';
  */
 MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
+    const { getState } = store;
+    const state = getState();
 
     switch (action.type) {
     case CONFERENCE_JOINED: {
@@ -26,6 +31,19 @@ MiddlewareRegistry.register(store => next => action => {
         _setScreenshareCaptureFps(store, captureFrameRate);
         break;
     }
+
+    case SET_SCREEN_AUDIO_SHARE_STATE: {
+        const { isSharingAudio } = action;
+        const { participantId } = state['features/large-video'];
+
+        if (isSharingAudio) {
+            logger.debug(`User with id: ${participantId} playing audio sharing.`);
+            APP.API.notifyAudioOrVideoSharingToggled(MEDIA_TYPE.AUDIO, 'playing', participantId);
+        } else {
+            logger.debug(`User with id: ${participantId} stop audio sharing.`);
+            APP.API.notifyAudioOrVideoSharingToggled(MEDIA_TYPE.AUDIO, 'stop', participantId);
+        }
+    }
     }
 
     return result;

react/features/shared-video/middleware.any.js

@@ -1,9 +1,11 @@
 // @flow
 
+import Logger from '@jitsi/logger';
 import { batch } from 'react-redux';
 
 import { CONFERENCE_JOIN_IN_PROGRESS, CONFERENCE_LEFT } from '../base/conference/actionTypes';
 import { getCurrentConference } from '../base/conference/functions';
+import { MEDIA_TYPE } from '../base/media';
 import {
     PARTICIPANT_LEFT,
     getLocalParticipant,
@@ -18,9 +20,13 @@ import {
     resetSharedVideoStatus,
     setSharedVideoStatus
 } from './actions.any';
-import { SHARED_VIDEO, VIDEO_PLAYER_PARTICIPANT_NAME } from './constants';
+import { SHARED_VIDEO, VIDEO_PLAYER_PARTICIPANT_NAME, PLAYBACK_STATUSES } from './constants';
 import { isSharingStatus } from './functions';
 
+const logger = Logger.getLogger(__filename);
+
+declare var APP: Object;
+
 /**
  * Middleware that captures actions related to video sharing and updates
  * components not hooked into redux.
@@ -74,6 +80,10 @@ MiddlewareRegistry.register(store => next => action => {
         const conference = getCurrentConference(state);
         const localParticipantId = getLocalParticipant(state)?.id;
         const { videoUrl, status, ownerId, time, muted, volume } = action;
+        const operator = status === PLAYBACK_STATUSES.PLAYING ? 'is' : '';
+
+        logger.debug(`User with id: ${ownerId} ${operator} ${status} video sharing.`);
+        APP.API.notifyAudioOrVideoSharingToggled(MEDIA_TYPE.VIDEO, status, ownerId);
 
         if (localParticipantId === ownerId) {
             sendShareVideoCommand({
@@ -92,6 +102,8 @@ MiddlewareRegistry.register(store => next => action => {
         const localParticipantId = getLocalParticipant(state)?.id;
         const { ownerId: stateOwnerId, videoUrl: statevideoUrl } = state['features/shared-video'];
 
+        logger.debug(`User with id: ${stateOwnerId} stop video sharing.`);
+        APP.API.notifyAudioOrVideoSharingToggled(MEDIA_TYPE.VIDEO, 'stop', stateOwnerId);
         if (localParticipantId === stateOwnerId) {
             const conference = getCurrentConference(state);