feat: Exposes a method for checking is remote track received and played/testing. (#8186)

* feat: Exposes a method for checking is remote track received and played.

Used for some tests in torture.

* squash: Drop not matching string.

Duplicate translation key with not matching content.

* squash: Moves torture specific functions to features/base/testing.

Listens for media events from the video tag of the large video and stores them in redux.

* squash: Fix comments.

* feat: Listens for media events from the video tag of the remote videos and stores them in redux.

* squash: Fix undefined videoTrack if between switches.

lang/main.json

         "toggleFilmstrip": "Show or hide video thumbnails",
         "toggleScreensharing": "Switch between camera and screen sharing",
         "toggleShortcuts": "Show or hide keyboard shortcuts",
-        "videoMute": "Start or stop your camera",
-        "videoQuality": "Manage call quality"
+        "videoMute": "Start or stop your camera"
     },
     "liveStreaming": {
         "limitNotificationDescriptionWeb": "Due to high demand your streaming will be limited to {{limit}} min. For unlimited streaming try <a href={{url}} rel='noopener noreferrer' target='_blank'>{{app}}</a>.",

modules/UI/UI.js

  */
 UI.getRemoteVideosCount = () => VideoLayout.getRemoteVideosCount();
 
-/**
- * Returns the video type of the remote participant's video.
- * This is needed for the torture clients to determine the video type of the
- * remote participants.
- *
- * @param {string} participantID - The id of the remote participant.
- * @returns {string} The video type "camera" or "desktop".
- */
-UI.getRemoteVideoType = participantID => VideoLayout.getRemoteVideoType(participantID);
-
 /**
  * Sets the remote control active status for a remote participant.
  *

modules/UI/videolayout/RemoteVideo.js

 import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
-import { MEDIA_TYPE } from '../../../react/features/base/media';
 import {
     getParticipantById,
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
-import { isRemoteTrackMuted } from '../../../react/features/base/tracks';
+import { isTestModeEnabled } from '../../../react/features/base/testing';
+import { updateLastTrackVideoMediaEvent } from '../../../react/features/base/tracks';
 import { PresenceLabel } from '../../../react/features/presence-status';
 import {
     REMOTE_CONTROL_MENU_STATES,
 
 const logger = Logger.getLogger(__filename);
 
+/**
+ * List of container events that we are going to process, will be added as listener to the
+ * container for every event in the list. The latest event will be stored in redux.
+ */
+const containerEvents = [
+    'abort', 'canplay', 'canplaythrough', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart',
+    'pause', 'play', 'playing', 'ratechange', 'stalled', 'suspend', 'waiting'
+];
+
 /**
  *
  * @param {*} spanId
             // attached we need to update the menu in order to show the volume
             // slider.
             this.updateRemoteVideoMenu();
+        } else if (isTestModeEnabled(APP.store.getState())) {
+
+            const cb = name => APP.store.dispatch(updateLastTrackVideoMediaEvent(stream, name));
+
+            containerEvents.forEach(event => {
+                streamElement.addEventListener(event, cb.bind(this, event));
+            });
         }
     }
 

modules/UI/videolayout/VideoContainer.js

 import ReactDOM from 'react-dom';
 
 import { browser } from '../../../react/features/base/lib-jitsi-meet';
-import { ORIENTATION, LargeVideoBackground } from '../../../react/features/large-video';
+import { isTestModeEnabled } from '../../../react/features/base/testing';
+import { ORIENTATION, LargeVideoBackground, updateLastLargeVideoMediaEvent } from '../../../react/features/large-video';
 import { LAYOUTS, getCurrentLayout } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 import UIEvents from '../../../service/UI/UIEvents';
 
 const FADE_DURATION_MS = 300;
 
+/**
+ * List of container events that we are going to process, will be added as listener to the
+ * container for every event in the list. The latest event will be stored in redux.
+ */
+const containerEvents = [
+    'abort', 'canplay', 'canplaythrough', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart',
+    'pause', 'play', 'playing', 'ratechange', 'stalled', 'suspend', 'waiting'
+];
+
 /**
  * Returns an array of the video dimensions, so that it keeps it's aspect
  * ratio and fits available area with it's larger dimension. This method
         this._resizeListeners = new Set();
 
         this.$video[0].onresize = this._onResize.bind(this);
+
+        if (isTestModeEnabled(APP.store.getState())) {
+            const cb = name => APP.store.dispatch(updateLastLargeVideoMediaEvent(name));
+
+            containerEvents.forEach(event => {
+                this.$video[0].addEventListener(event, cb.bind(this, event));
+            });
+        }
     }
 
     /**

react/features/base/testing/functions.js

 // @flow
 
+import { MEDIA_TYPE } from '../media';
+import { getTrackByMediaTypeAndParticipant } from '../tracks';
+
 /**
  * Indicates whether the test mode is enabled. When it's enabled
  * {@link TestHint} and other components from the testing package will be
 
     return Boolean(testingConfig && testingConfig.testMode);
 }
+
+/**
+ * Returns the video type of the remote participant's video.
+ *
+ * @param {Store} store - The redux store.
+ * @param {string} id - The participant ID for the remote video.
+ * @returns {MEDIA_TYPE}
+ */
+export function getRemoteVideoType({ getState }: Object, id: String): boolean {
+    return getTrackByMediaTypeAndParticipant(getState()['features/base/tracks'], MEDIA_TYPE.VIDEO, id)?.videoType;
+}
+
+/**
+ * Returns whether the last media event received for large video indicates that the video is playing, if not muted.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {boolean}
+ */
+export function isLargeVideoReceived({ getState }: Object): boolean {
+    const largeVideoParticipantId = getState()['features/large-video'].participantId;
+    const videoTrack = getTrackByMediaTypeAndParticipant(
+        getState()['features/base/tracks'], MEDIA_TYPE.VIDEO, largeVideoParticipantId);
+    const lastMediaEvent = getState()['features/large-video'].lastMediaEvent;
+
+    return videoTrack && !videoTrack.muted && (lastMediaEvent === 'playing' || lastMediaEvent === 'canplaythrough');
+}
+
+/**
+ * Returns whether the last media event received for a remote video indicates that the video is playing, if not muted.
+ *
+ * @param {Store} store - The redux store.
+ * @param {string} id - The participant ID for the remote video.
+ * @returns {boolean}
+ */
+export function isRemoteVideoReceived({ getState }: Object, id: String): boolean {
+    const videoTrack = getTrackByMediaTypeAndParticipant(getState()['features/base/tracks'], MEDIA_TYPE.VIDEO, id);
+    const lastMediaEvent = videoTrack.lastMediaEvent;
+
+    return !videoTrack.muted && (lastMediaEvent === 'playing' || lastMediaEvent === 'canplaythrough');
+}

react/features/base/testing/middleware.js

 // @flow
 
 import { CONFERENCE_WILL_JOIN } from '../conference';
+import { SET_CONFIG } from '../config';
 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import { MiddlewareRegistry } from '../redux';
+import { getJitsiMeetGlobalNS } from '../util';
 
 import { setConnectionState } from './actions';
+import {
+    getRemoteVideoType,
+    isLargeVideoReceived,
+    isRemoteVideoReceived,
+    isTestModeEnabled
+} from './functions';
 import logger from './logger';
 
 /**
     case CONFERENCE_WILL_JOIN:
         _bindConferenceConnectionListener(action.conference, store);
         break;
+    case SET_CONFIG: {
+        const result = next(action);
+
+        _bindTortureHelpers(store);
+
+        return result;
+    }
     }
 
     return next(action);
             null, JitsiConferenceEvents.CONNECTION_INTERRUPTED, dispatch));
 }
 
+/**
+ * Binds all the helper functions needed by torture.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {void}
+ */
+function _bindTortureHelpers(store) {
+    const { getState } = store;
+
+    // We bind helpers only if testing mode is enabled
+    if (!isTestModeEnabled(getState())) {
+        return;
+    }
+
+    // All torture helper methods go in here
+    getJitsiMeetGlobalNS().testing = {
+        getRemoteVideoType: getRemoteVideoType.bind(null, store),
+        isLargeVideoReceived: isLargeVideoReceived.bind(null, store),
+        isRemoteVideoReceived: isRemoteVideoReceived.bind(null, store)
+    };
+}
+
 /**
  * The handler function for conference connection events which wil store the
  * latest even name in the Redux store of feature testing.

react/features/base/tracks/actionTypes.js

  * }
  */
 export const TRACK_WILL_CREATE = 'TRACK_WILL_CREATE';
+
+/**
+ * Action to update the redux store with the current media event name of the video track.
+ *
+ * @returns {{
+ *     type: TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT,
+ *     track: Track,
+ *     name: string
+ * }}
+ */
+export const TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT = 'TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT';

react/features/base/tracks/actions.js

     TRACK_NO_DATA_FROM_SOURCE,
     TRACK_REMOVED,
     TRACK_UPDATED,
-    TRACK_WILL_CREATE
+    TRACK_WILL_CREATE,
+    TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT
 } from './actionTypes';
 import {
     createLocalTracksF,
         uid
     };
 }
+
+/**
+ * Updates the last media event received for a video track.
+ *
+ * @param {JitsiRemoteTrack} track - JitsiTrack instance.
+ * @param {string} name - The current media event name for the video.
+ * @returns {{
+ *     type: TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT,
+ *     track: Track,
+ *     name: string
+ * }}
+ */
+export function updateLastTrackVideoMediaEvent(track, name) {
+    return {
+        type: TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT,
+        track,
+        name
+    };
+}

react/features/base/tracks/reducer.js

     TRACK_CREATE_ERROR,
     TRACK_NO_DATA_FROM_SOURCE,
     TRACK_REMOVED,
+    TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT,
     TRACK_UPDATED,
     TRACK_WILL_CREATE
 } from './actionTypes';
  * @param {Track|undefined} state - Track to be modified.
  * @param {Object} action - Action object.
  * @param {string} action.type - Type of action.
+ * @param {string} action.name - Name of last media event.
  * @param {string} action.newValue - New participant ID value (in this
  * particular case).
  * @param {string} action.oldValue - Old participant ID value (in this
         }
         break;
     }
+    case TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT: {
+        const t = action.track;
+
+        if (state.jitsiTrack === t) {
+            if (state.lastMediaEvent !== action.name) {
+
+                return {
+                    ...state,
+                    lastMediaEvent: action.name
+                };
+            }
+        }
+        break;
+    }
     case TRACK_NO_DATA_FROM_SOURCE: {
         const t = action.track;
 
     switch (action.type) {
     case PARTICIPANT_ID_CHANGED:
     case TRACK_NO_DATA_FROM_SOURCE:
+    case TRACK_UPDATE_LAST_VIDEO_MEDIA_EVENT:
     case TRACK_UPDATED:
         return state.map(t => track(t, action));
 

react/features/large-video/actionTypes.js

  */
 export const UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION
     = 'UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION';
+
+/**
+ * Action to update the redux store with the current media event name of large video.
+ *
+ * @returns {{
+ *     type: UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT,
+ *     name: string
+ * }}
+ */
+export const UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT
+    = 'UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT';

react/features/large-video/actions.web.js

 import { MEDIA_TYPE } from '../base/media';
 import { getTrackByMediaTypeAndParticipant } from '../base/tracks';
 
+import { UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT } from './actionTypes';
+
 export * from './actions.any';
 
 /**
         }
     };
 }
+
+/**
+ * Updates the last media event received for the large video.
+ *
+ * @param {string} name - The current media event name for the video.
+ * @returns {{
+ *     type: UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT,
+ *     name: string
+ * }}
+ */
+export function updateLastLargeVideoMediaEvent(name: String) {
+    return {
+        type: UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT,
+        name
+    };
+}

react/features/large-video/reducer.js

 
 import {
     SELECT_LARGE_VIDEO_PARTICIPANT,
-    UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION
+    UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION, UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT
 } from './actionTypes';
 
 ReducerRegistry.register('features/large-video', (state = {}, action) => {
             ...state,
             resolution: action.resolution
         };
+
+    case UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT:
+        return {
+            ...state,
+            lastMediaEvent: action.name
+        };
+
     }
 
     return state;

react/features/toolbox/components/web/Toolbox.js

             this._shouldShowButton('videoquality') && {
                 character: 'A',
                 exec: this._onShortcutToggleVideoQuality,
-                helpDescription: 'keyboardShortcuts.videoQuality'
+                helpDescription: 'toolbar.callQuality'
             },
             this._shouldShowButton('chat') && {
                 character: 'C',