@azure/communication-react 1.5.1-alpha-202303050016 → 1.5.1-alpha-202303080017

package/dist/dist-cjs/communication-react/index.js

@@ -6,6 +6,7 @@ var communicationCommon = require('@azure/communication-common');
 var reselect = require('reselect');
 var communicationCalling = require('@azure/communication-calling');
 var memoizeOne = require('memoize-one');
+var communicationCallingEffects = require('@azure/communication-calling-effects');
 var logger = require('@azure/logger');
 var EventEmitter = require('events');
 var produce = require('immer');
@@ -161,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303050016';
+var telemetryVersion = '1.5.1-alpha-202303080017';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -784,6 +785,30 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
     });
+    /* @conditional-compile-remove(video-background-effects) */
+    const onRemoveVideoBackgroundEffects = () => __awaiter$D(void 0, void 0, void 0, function* () {
+        const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
+            (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
+        if (stream) {
+            return stream.feature(communicationCalling.Features.VideoEffects).stopEffects();
+        }
+    });
+    /* @conditional-compile-remove(video-background-effects) */
+    const onBlurVideoBackground = (bgBlurConfig) => __awaiter$D(void 0, void 0, void 0, function* () {
+        const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
+            (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
+        if (stream) {
+            return stream.feature(communicationCalling.Features.VideoEffects).startEffects(new communicationCallingEffects.BackgroundBlurEffect(bgBlurConfig));
+        }
+    });
+    /* @conditional-compile-remove(video-background-effects) */
+    const onReplaceVideoBackground = (bgReplacementConfig) => __awaiter$D(void 0, void 0, void 0, function* () {
+        const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
+            (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
+        if (stream) {
+            return stream.feature(communicationCalling.Features.VideoEffects).startEffects(new communicationCallingEffects.BackgroundReplacementEffect(bgReplacementConfig));
+        }
+    });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -807,7 +832,13 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         onStartCall: notImplemented,
         /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */ onSendDtmfTone,
         /* @conditional-compile-remove(call-readiness) */
-        askDevicePermission
+        askDevicePermission,
+        /* @conditional-compile-remove(video-background-effects) */
+        onRemoveVideoBackgroundEffects,
+        /* @conditional-compile-remove(video-background-effects) */
+        onBlurVideoBackground,
+        /* @conditional-compile-remove(video-background-effects) */
+        onReplaceVideoBackground
     };
 });
 
@@ -1073,7 +1104,7 @@ const deviceManagerDeclaratify = (deviceManager, context, internalContext) => {
         value: (videoDeviceInfo) => proxyDeviceManager.selectCamera(videoDeviceInfo)
     });
     /* @conditional-compile-remove(video-background-effects) */
-    Object.defineProperty(deviceManager, 'getUnparentedViews', {
+    Object.defineProperty(deviceManager, 'getUnparentedVideoStreams', {
         configurable: false,
         value: () => internalContext.getUnparentedRenderInfos()
     });
@@ -1110,38 +1141,25 @@ const callingStatefulLogger = logger.createClientLogger('communication-react:cal
 var EventNames;
 (function (EventNames) {
     // Info
-    EventNames["LOCAL_VIEW_RENDER_SUCCEED"] = "LOCAL_VIEW_RENDER_SUCCEED";
-    EventNames["START_DISPOSE_LOCAL_STREAM"] = "START_DISPOSE_LOCAL_STREAM";
-    EventNames["START_DISPOSE_REMOTE_STREAM"] = "START_DISPOSE_REMOTE_STREAM";
-    EventNames["START_LOCAL_STREAM_RENDERING"] = "START_LOCAL_STREAM_RENDERING";
-    EventNames["DISPOSING_LOCAL_RENDERER"] = "DISPOSING_LOCAL_RENDERER";
-    EventNames["DISPOSING_REMOTE_RENDERER"] = "DISPOSING_REMOTE_RENDERER";
-    EventNames["CREATING_REMOTE_VIEW"] = "CREATING_REMOTE_VIEW";
-    EventNames["REMOTE_VIEW_RENDER_SUCCEED"] = "REMOTE_VIEW_RENDER_SUCCEED";
+    EventNames["VIEW_RENDER_SUCCEED"] = "VIEW_RENDER_SUCCEED";
+    EventNames["START_DISPOSE_STREAM"] = "START_DISPOSE_STREAM";
+    EventNames["START_STREAM_RENDERING"] = "START_STREAM_RENDERING";
+    EventNames["DISPOSING_RENDERER"] = "DISPOSING_RENDERER";
+    EventNames["CREATING_VIEW"] = "CREATING_VIEW";
     // Warning
     EventNames["CREATE_STREAM_INVALID_PARAMS"] = "CREATE_STREAM_INVALID_PARAMS";
-    EventNames["DISPOSE_STREAM_INVALID_PARAMS"] = "DISPOSE_LOCAL_STREAM_INVALID_PARAMS";
-    EventNames["LOCAL_STREAM_ALREADY_RENDERED"] = "LOCAL_STREAM_ALREADY_RENDERED";
-    EventNames["LOCAL_STREAM_ALREADY_DISPOSED"] = "LOCAL_STREAM_ALREADY_DISPOSED";
-    EventNames["LOCAL_STREAM_STOPPING"] = "LOCAL_STREAM_STOPPING";
-    EventNames["LOCAL_CREATED_STREAM_STOPPING"] = "LOCAL_CREATED_STREAM_STOPPING";
-    EventNames["LOCAL_STREAM_RENDERING"] = "LOCAL_STREAM_RENDERING";
-    EventNames["REMOTE_STREAM_ALREADY_RENDERED"] = "REMOTE_STREAM_ALREADY_RENDERED";
-    EventNames["REMOTE_STREAM_RENDERING"] = "REMOTE_STREAM_RENDERING";
-    EventNames["REMOTE_STREAM_ALREADY_DISPOSED"] = "REMOTE_STREAM_ALREADY_DISPOSED";
-    EventNames["REMOTE_STREAM_STOPPING"] = "REMOTE_STREAM_STOPPING";
-    EventNames["REMOTE_CREATED_STREAM_STOPPING"] = "REMOTE_CREATED_STREAM_STOPPING";
+    EventNames["DISPOSE_STREAM_INVALID_PARAMS"] = "DISPOSE_STREAM_INVALID_PARAMS";
+    EventNames["STREAM_ALREADY_RENDERED"] = "STREAM_ALREADY_RENDERED";
+    EventNames["STREAM_ALREADY_DISPOSED"] = "STREAM_ALREADY_DISPOSED";
+    EventNames["STREAM_STOPPING"] = "STREAM_STOPPING";
+    EventNames["CREATED_STREAM_STOPPING"] = "CREATED_STREAM_STOPPING";
+    EventNames["STREAM_RENDERING"] = "STREAM_RENDERING";
     // Error
-    EventNames["LOCAL_STREAM_NOT_FOUND"] = "LOCAL_STREAM_NOT_FOUND";
-    EventNames["LOCAL_RENDER_INFO_NOT_FOUND"] = "LOCAL_RENDER_INFO_NOT_FOUND";
-    EventNames["REMOTE_STREAM_NOT_FOUND"] = "REMOTE_STREAM_NOT_FOUND";
-    EventNames["LOCAL_DISPOSE_INFO_NOT_FOUND"] = "LOCAL_DISPOSE_INFO_NOT_FOUND";
-    EventNames["REMOTE_DISPOSE_INFO_NOT_FOUND"] = "REMOTE_DISPOSE_INFO_NOT_FOUND";
-    EventNames["REMOTE_RENDER_INFO_NOT_FOUND"] = "REMOTE_RENDER_INFO_NOT_FOUND";
-    EventNames["LOCAL_RENDERER_NOT_FOUND"] = "LOCAL_RENDERER_NOT_FOUND";
-    EventNames["REMOTE_RENDERER_NOT_FOUND"] = "REMOTE_RENDERER_NOT_FOUND";
-    EventNames["CREATE_REMOTE_STREAM_FAIL"] = "CREATE_REMOTE_STREAM_FAIL";
-    EventNames["CREATE_LOCAL_STREAM_FAIL"] = "CREATE_LOCAL_STREAM_FAIL";
+    EventNames["STREAM_NOT_FOUND"] = "STREAM_NOT_FOUND";
+    EventNames["RENDER_INFO_NOT_FOUND"] = "RENDER_INFO_NOT_FOUND";
+    EventNames["DISPOSE_INFO_NOT_FOUND"] = "DISPOSE_INFO_NOT_FOUND";
+    EventNames["RENDERER_NOT_FOUND"] = "RENDERER_NOT_FOUND";
+    EventNames["CREATE_STREAM_FAIL"] = "CREATE_STREAM_FAIL";
 })(EventNames || (EventNames = {}));
 
 // Copyright (c) Microsoft Corporation.
@@ -2099,258 +2117,327 @@ class RemoteVideoStreamSubscriber {
 }
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$y(this, void 0, void 0, function* () {
-        // Render RemoteVideoStream that is part of a Call
-        const streamId = stream.id;
-        const streamType = stream.mediaStreamType;
-        let participantKey;
-        if (typeof participantId === 'string') {
-            participantKey = participantId;
-        }
-        else {
-            participantKey = toFlatCommunicationIdentifier(participantId);
-        }
-        const streamLogInfo = { callId, participantKey, streamId, streamType };
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.CREATING_REMOTE_VIEW,
-            level: 'info',
-            message: 'Start creating view for remote video.',
-            data: streamLogInfo
-        });
-        const renderInfo = internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId);
-        if (!renderInfo) {
+/**
+ * helper function to manage logging for stream disposals
+ *
+ * @param eventName Name of event that occured when managing streams
+ * @param streamLogInfo Data about the stream in the event
+ * @returns
+ */
+function _logDisposeStreamEvent(eventName, streamLogInfo) {
+    switch (eventName) {
+        case EventNames.DISPOSE_STREAM_INVALID_PARAMS:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.DISPOSE_STREAM_INVALID_PARAMS,
+                level: 'warning',
+                message: 'Dispose View invalid combination of parameters.',
+                data: { streamType: streamLogInfo.streamType }
+            });
+            return;
+        case EventNames.START_DISPOSE_STREAM:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_STREAM_NOT_FOUND,
+                name: EventNames.START_DISPOSE_STREAM,
+                level: 'info',
+                message: 'Start disposing stream.',
+                data: streamLogInfo
+            });
+            return;
+        case EventNames.DISPOSE_INFO_NOT_FOUND:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.DISPOSE_INFO_NOT_FOUND,
                 level: 'error',
-                message: 'RemoteVideoStream not found in state.',
+                message: 'Cannot find render info when disposing stream.',
                 data: streamLogInfo
             });
-            console.warn('RemoteVideoStream not found in state');
             return;
-        }
-        if (renderInfo.status === 'Rendered') {
+        case EventNames.STREAM_STOPPING:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.STREAM_STOPPING,
+                level: 'info',
+                message: 'Stream is currently marked as stopping, will continue if is local preview',
+                data: streamLogInfo
+            });
+            return;
+        case EventNames.DISPOSING_RENDERER:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.DISPOSING_RENDERER,
+                level: 'info',
+                message: 'Disposing view renderer.',
+                data: streamLogInfo
+            });
+            return;
+        case EventNames.RENDERER_NOT_FOUND:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.RENDERER_NOT_FOUND,
+                level: 'error',
+                message: 'Cannot find renderer when disposing stream.',
+                data: streamLogInfo
+            });
+            return;
+        case EventNames.STREAM_ALREADY_DISPOSED:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.STREAM_ALREADY_DISPOSED,
+                level: 'info',
+                message: 'Stream is already disposed.',
+                data: streamLogInfo
+            });
+            return;
+        default:
+            return;
+    }
+}
+/**
+ * helper function to manage logging for local stream creations
+ *
+ * @param eventName Name of the event to occured when creating a local stream
+ * @param streamLogInfo Data about the stream in the event
+ * @param error that is thrown by caller
+ * @returns
+ */
+function _logCreateStreamEvent(eventName, streamLogInfo, error) {
+    switch (eventName) {
+        case EventNames.CREATE_STREAM_INVALID_PARAMS:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.CREATE_STREAM_INVALID_PARAMS,
+                level: 'warning',
+                message: 'Create View invalid combination of parameters.',
+                data: { streamType: streamLogInfo.streamType }
+            });
+            return;
+        case EventNames.START_STREAM_RENDERING:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_STREAM_ALREADY_RENDERED,
+                name: EventNames.START_STREAM_RENDERING,
+                level: 'info',
+                message: 'Start creating view for local video.',
+                data: streamLogInfo
+            });
+            return;
+        case EventNames.STREAM_NOT_FOUND:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.STREAM_NOT_FOUND,
+                level: 'error',
+                message: 'Stream not found in state.',
+                data: { callId: streamLogInfo.callId }
+            });
+            return;
+        case EventNames.STREAM_ALREADY_RENDERED:
+            _logEvent(callingStatefulLogger, {
+                name: EventNames.STREAM_ALREADY_RENDERED,
                 level: 'warning',
-                message: 'RemoteVideoStream is already rendered.',
+                message: 'Stream is already rendered.',
                 data: streamLogInfo
             });
-            console.warn('RemoteVideoStream is already rendered');
             return;
-        }
-        if (renderInfo.status === 'Rendering') {
-            // Do not log to console here as this is a very common situation due to UI rerenders while
-            // the video rendering is in progress.
+        case EventNames.STREAM_RENDERING:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_STREAM_RENDERING,
+                name: EventNames.STREAM_RENDERING,
                 level: 'warning',
-                message: 'RemoteVideoStream is rendering.',
+                message: 'Stream is rendering.',
                 data: streamLogInfo
             });
             return;
-        }
-        // "Stopping" only happens if the stream was in "rendering" but `disposeView` was called.
-        // Now that `createView` has been re-called, we can flip the state back to "rendering".
-        if (renderInfo.status === 'Stopping') {
+        case EventNames.STREAM_STOPPING:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_STREAM_STOPPING,
+                name: EventNames.STREAM_STOPPING,
                 level: 'warning',
-                message: 'RemoteVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".',
+                message: 'Stream was marked as stopping by dispose view. Resetting state to "Rendering".',
                 data: streamLogInfo
             });
-            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             return;
-        }
-        const renderer = new communicationCalling.VideoStreamRenderer(renderInfo.stream);
-        internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', undefined);
-        let view;
-        try {
-            view = yield renderer.createView(options);
-        }
-        catch (e) {
+        case EventNames.CREATE_STREAM_FAIL:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.CREATE_REMOTE_STREAM_FAIL,
+                name: EventNames.CREATE_STREAM_FAIL,
                 level: 'error',
-                message: 'Failed to create remote view',
-                data: streamLogInfo
+                message: 'Failed to create view.',
+                data: {
+                    error: error,
+                    streamType: streamLogInfo.streamType,
+                    callId: streamLogInfo.callId
+                }
             });
-            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
-            throw e;
-        }
-        // Since render could take some time, we need to check if the stream is still valid and if we received a signal to
-        // stop rendering.
-        const refreshedRenderInfo = internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId);
-        if (!refreshedRenderInfo) {
-            // RenderInfo was removed. This should not happen unless stream was removed from the call so dispose the renderer
-            // and clean up state.
+            return;
+        case EventNames.RENDER_INFO_NOT_FOUND:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_RENDER_INFO_NOT_FOUND,
+                name: EventNames.RENDER_INFO_NOT_FOUND,
                 level: 'error',
-                message: 'Cannot find remote render info after create the view.',
+                message: 'Cannot find render info after create the view. ',
                 data: streamLogInfo
             });
-            renderer.dispose();
-            context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
             return;
-        }
-        if (refreshedRenderInfo.status === 'Stopping') {
-            // Stop render was called on this stream after we had started rendering. We will dispose this view and do not
-            // put the view into the state.
+        case EventNames.CREATED_STREAM_STOPPING:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.REMOTE_CREATED_STREAM_STOPPING,
+                name: EventNames.CREATED_STREAM_STOPPING,
                 level: 'warning',
                 message: 'Render info status is stopping, dispose renderer.',
                 data: streamLogInfo
             });
-            renderer.dispose();
-            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'NotRendered', undefined);
-            context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
             return;
-        }
-        // Else the stream still exists and status is not telling us to stop rendering. Complete the render process by
-        // updating the state.
-        internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'Rendered', renderer);
-        context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_VIEW_RENDER_SUCCEED,
-            level: 'info',
-            message: `Successfully render the remote view.`,
-            data: {
-                streamLogInfo
-            }
-        });
-        return {
-            renderer,
-            view
-        };
-    });
-}
-function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$y(this, void 0, void 0, function* () {
-        // Render LocalVideoStream that is part of a Call
-        const renderInfo = internalContext.getLocalRenderInfo(callId);
-        const streamType = renderInfo === null || renderInfo === void 0 ? void 0 : renderInfo.stream.mediaStreamType;
-        const streamLogInfo = { callId, streamType };
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.START_LOCAL_STREAM_RENDERING,
-            level: 'info',
-            message: 'Start creating view for local video.',
-            data: streamLogInfo
-        });
-        if (!renderInfo) {
+        case EventNames.VIEW_RENDER_SUCCEED:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_STREAM_NOT_FOUND,
-                level: 'error',
-                message: 'LocalVideoStream not found in state.',
-                data: { callId }
+                name: EventNames.VIEW_RENDER_SUCCEED,
+                level: 'info',
+                message: `Successfully render the view.`,
+                data: streamLogInfo
             });
-            console.warn('LocalVideoStream not found in state');
             return;
-        }
-        if (renderInfo.status === 'Rendered') {
+        case EventNames.CREATING_VIEW:
             _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_STREAM_ALREADY_RENDERED,
-                level: 'warning',
-                message: 'LocalVideoStream is already rendered.',
+                name: EventNames.CREATING_VIEW,
+                level: 'info',
+                message: 'Start creating view for remote video.',
                 data: streamLogInfo
             });
-            console.warn('LocalVideoStream is already rendered');
+            return;
+        default:
+            return;
+    }
+}
+/**
+ * helper function to fire streamUtils logging events
+ *
+ * @param eventName Name of event from streamUtils
+ * @param streamLogInfo informaiton about the event and who called it
+ * @param error if any errors present will be added to message in logging
+ */
+function _logStreamEvent(eventName, streamLogInfo, error) {
+    if (streamLogInfo.streamEventType === 'disposeViewLocal' ||
+        streamLogInfo.streamEventType === 'disposeViewRemote' ||
+        streamLogInfo.streamEventType === 'disposeViewUnparented') {
+        _logDisposeStreamEvent(eventName, streamLogInfo);
+    }
+    else if (streamLogInfo.streamEventType === 'createViewLocal' ||
+        streamLogInfo.streamEventType === 'createViewRemote') {
+        _logCreateStreamEvent(eventName, streamLogInfo, error);
+    }
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+function createViewVideo(context, internalContext, callId, stream, participantId, options) {
+    return __awaiter$y(this, void 0, void 0, function* () {
+        // we can only have 3 types of createView
+        let streamEventType;
+        // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
+        if (participantId) {
+            streamEventType = 'createViewRemote';
+        }
+        else if (callId) {
+            streamEventType = 'createViewLocal';
+        }
+        else {
+            // TODO update for when unparented view.
+            throw new Error('unparented createView not implemented yet here');
+        }
+        const streamType = stream === null || stream === void 0 ? void 0 : stream.mediaStreamType;
+        const streamId = stream.id;
+        // we want to check to see if there is a participantId this will tell us whether its a local stream or a remote one.
+        const participantKey = streamEventType === 'createViewRemote' && participantId
+            ? typeof participantId === 'string'
+                ? participantId
+                : toFlatCommunicationIdentifier(participantId)
+            : undefined;
+        const streamLogInfo = { callId, participantKey, streamId, streamType, streamEventType };
+        // make different logging announcement based on whether or not we are starting a local or remote
+        _logStreamEvent(EventNames.CREATING_VIEW, streamLogInfo);
+        // if we have a participant Id and a stream get the remote info, else get the local render info from state.
+        const renderInfo = streamEventType === 'createViewRemote' && participantKey
+            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
+            : internalContext.getLocalRenderInfo(callId);
+        if (!renderInfo) {
+            _logStreamEvent(EventNames.STREAM_NOT_FOUND, streamLogInfo);
+            return;
+        }
+        if (renderInfo.status === 'Rendered') {
+            _logStreamEvent(EventNames.STREAM_ALREADY_RENDERED, streamLogInfo);
             return;
         }
         if (renderInfo.status === 'Rendering') {
             // Do not log to console here as this is a very common situation due to UI rerenders while
             // the video rendering is in progress.
-            _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_STREAM_RENDERING,
-                level: 'warning',
-                message: 'LocalVideoStream is rendering.',
-                data: streamLogInfo
-            });
+            _logStreamEvent(EventNames.STREAM_RENDERING, streamLogInfo);
             return;
         }
         // "Stopping" only happens if the stream was in "rendering" but `disposeView` was called.
         // Now that `createView` has been re-called, we can flip the state back to "rendering".
         if (renderInfo.status === 'Stopping') {
-            _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_STREAM_STOPPING,
-                level: 'warning',
-                message: 'LocalVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".',
-                data: streamLogInfo
-            });
-            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
+            if (streamEventType === 'createViewRemote' && participantKey) {
+                _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
+                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', renderInfo.renderer);
+            }
+            else if (streamEventType === 'createViewLocal') {
+                _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
+                internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
+            }
             return;
         }
         const renderer = new communicationCalling.VideoStreamRenderer(renderInfo.stream);
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderer);
+        streamEventType === 'createViewRemote' && participantKey
+            ? internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', undefined)
+            : internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderer);
         let view;
         try {
             view = yield renderer.createView(options);
         }
         catch (e) {
-            _logEvent(callingStatefulLogger, {
-                name: EventNames.CREATE_LOCAL_STREAM_FAIL,
-                level: 'error',
-                message: 'Failed to create view.',
-                data: {
-                    error: e,
-                    streamType,
-                    callId
-                }
-            });
-            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+            if (streamEventType === 'createViewRemote' && participantKey) {
+                _logStreamEvent(EventNames.CREATE_STREAM_FAIL, streamLogInfo);
+                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
+            }
+            else if (streamEventType === 'createViewLocal') {
+                _logStreamEvent(EventNames.CREATE_STREAM_FAIL, streamLogInfo, e);
+                internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+            }
             throw e;
         }
         // Since render could take some time, we need to check if the stream is still valid and if we received a signal to
         // stop rendering.
-        const refreshedRenderInfo = internalContext.getLocalRenderInfo(callId);
+        const refreshedRenderInfo = streamEventType === 'createViewRemote' && participantKey
+            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
+            : internalContext.getLocalRenderInfo(callId);
         if (!refreshedRenderInfo) {
             // RenderInfo was removed. This should not happen unless stream was removed from the call so dispose the renderer
             // and clean up the state.
-            _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_RENDER_INFO_NOT_FOUND,
-                level: 'error',
-                message: 'Cannot find local render info after create the view. ',
-                data: streamLogInfo
-            });
+            _logStreamEvent(EventNames.RENDER_INFO_NOT_FOUND, streamLogInfo);
             renderer.dispose();
-            context.setLocalVideoStreamRendererView(callId, undefined);
+            streamEventType === 'createViewRemote' && participantKey
+                ? context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined)
+                : context.setLocalVideoStreamRendererView(callId, undefined);
             return;
         }
         if (refreshedRenderInfo.status === 'Stopping') {
-            // Stop render was called on this stream after we had started rendering. We will dispose this view and do not
-            // put the view into the state.
-            _logEvent(callingStatefulLogger, {
-                name: EventNames.LOCAL_CREATED_STREAM_STOPPING,
-                level: 'warning',
-                message: 'Render info status is stopping, dispose renderer.',
-                data: streamLogInfo
-            });
+            _logStreamEvent(EventNames.CREATED_STREAM_STOPPING, streamLogInfo);
             renderer.dispose();
-            internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'NotRendered', undefined);
-            context.setLocalVideoStreamRendererView(callId, undefined);
+            if (streamEventType === 'createViewRemote' && participantKey) {
+                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'NotRendered', undefined);
+                context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
+            }
+            else if (streamEventType === 'createViewLocal') {
+                internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'NotRendered', undefined);
+                context.setLocalVideoStreamRendererView(callId, undefined);
+            }
             return;
         }
-        // Else The stream still exists and status is not telling us to stop rendering. Complete the render process by
+        // Else the stream still exists and status is not telling us to stop rendering. Complete the render process by
         // updating the state.
-        internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'Rendered', renderer);
-        context.setLocalVideoStreamRendererView(callId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_VIEW_RENDER_SUCCEED,
-            level: 'info',
-            message: `Successfully render the local view.`,
-            data: streamLogInfo
-        });
+        if (streamEventType === 'createViewRemote' && participantKey) {
+            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'Rendered', renderer);
+            context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
+            _logStreamEvent(EventNames.VIEW_RENDER_SUCCEED, streamLogInfo);
+        }
+        else if (streamEventType === 'createViewLocal') {
+            internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'Rendered', renderer);
+            context.setLocalVideoStreamRendererView(callId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
+            _logStreamEvent(EventNames.VIEW_RENDER_SUCCEED, streamLogInfo);
+        }
         return {
             renderer,
             view
@@ -2417,213 +2504,101 @@ function createViewUnparentedVideo(context, internalContext, stream, options) {
         };
     });
 }
-function disposeViewRemoteVideo(context, internalContext, callId, participantId, stream) {
-    const streamId = stream.id;
-    const streamType = stream.mediaStreamType;
-    let participantKey;
-    if (typeof participantId === 'string') {
-        participantKey = participantId;
+function disposeViewVideo(context, internalContext, callId, stream, participantId) {
+    // we can only have 3 types of createView
+    let streamEventType;
+    // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
+    if (participantId) {
+        streamEventType = 'disposeViewRemote';
+    }
+    else if (callId) {
+        streamEventType = 'disposeViewLocal';
     }
     else {
-        participantKey = toFlatCommunicationIdentifier(participantId);
+        // TODO update for when unparented view.
+        streamEventType = 'disposeViewUnparented';
     }
+    const streamType = stream.mediaStreamType;
+    const streamId = stream.id;
+    // we want to check to see if there is a participantId this will tell us whether its a local stream or a remote one.
+    const participantKey = streamEventType === 'disposeViewRemote' && participantId
+        ? typeof participantId === 'string'
+            ? participantId
+            : toFlatCommunicationIdentifier(participantId)
+        : undefined;
     const streamLogInfo = { callId, participantKey, streamId, streamType };
-    _logEvent(callingStatefulLogger, {
-        name: EventNames.START_DISPOSE_REMOTE_STREAM,
-        level: 'info',
-        message: 'Start disposing remote stream.',
-        data: streamLogInfo
-    });
-    context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
-    const renderInfo = internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId);
-    if (!renderInfo) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_DISPOSE_INFO_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find render info when disposing remote stream.',
-            data: streamLogInfo
-        });
-        return;
-    }
-    // Nothing to dispose of or clean up -- we can safely exit early here.
-    if (renderInfo.status === 'NotRendered') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_STREAM_ALREADY_DISPOSED,
-            level: 'info',
-            message: 'RemoteVideoStream is already disposed.',
-            data: streamLogInfo
-        });
-        return;
-    }
-    // Status is already marked as "stopping" so we can exit early here. This is because stopping only occurs
-    // when the stream is being created in createView but hasn't been completed being created yet. The createView
-    // method will see the "stopping" status and perform the cleanup
-    if (renderInfo.status === 'Stopping') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_STREAM_STOPPING,
-            level: 'info',
-            message: 'Remote stream is already stopping.',
-            data: streamLogInfo
-        });
-        return;
-    }
-    // If the stream is in the middle of being rendered (i.e. has state "Rendering"), we need the status as
-    // "stopping" without performing any cleanup. This will tell the `createView` method that it should stop
-    // rendering and clean up the state once the view has finished being created.
-    if (renderInfo.status === 'Rendering') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_STREAM_STOPPING,
-            level: 'info',
-            message: 'Remote stream is still rendering. Changing status to stopping.',
-            data: streamLogInfo
-        });
-        internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Stopping', undefined);
-        return;
+    _logStreamEvent(EventNames.START_DISPOSE_STREAM, streamLogInfo);
+    if (streamEventType === 'disposeViewRemote' && participantKey) {
+        context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
     }
-    // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
-    internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
-    if (renderInfo.renderer) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.DISPOSING_REMOTE_RENDERER,
-            level: 'info',
-            message: 'Disposing remote view renderer.',
-            data: streamLogInfo
-        });
-        renderInfo.renderer.dispose();
-    }
-    else {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_RENDERER_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find remote view renderer.',
-            data: streamLogInfo
-        });
-    }
-}
-function disposeViewLocalVideo(context, internalContext, callId) {
-    const renderInfo = internalContext.getLocalRenderInfo(callId);
-    const streamType = renderInfo === null || renderInfo === void 0 ? void 0 : renderInfo.stream.mediaStreamType;
-    const streamLogInfo = { callId, streamType };
-    _logEvent(callingStatefulLogger, {
-        name: EventNames.START_DISPOSE_LOCAL_STREAM,
-        level: 'info',
-        message: 'Start disposing local stream.',
-        data: streamLogInfo
-    });
+    const renderInfo = streamEventType === 'disposeViewRemote' && participantKey
+        ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
+        : internalContext.getLocalRenderInfo(callId);
     if (!renderInfo) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_DISPOSE_INFO_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find render info when disposing local stream.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.DISPOSE_INFO_NOT_FOUND, streamLogInfo);
         return;
     }
     // Nothing to dispose of or clean up -- we can safely exit early here.
     if (renderInfo.status === 'NotRendered') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_STREAM_ALREADY_DISPOSED,
-            level: 'info',
-            message: 'LocalVideoStream is already disposed.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.STREAM_ALREADY_DISPOSED, streamLogInfo);
         return;
     }
     // Status is already marked as "stopping" so we can exit early here. This is because stopping only occurs
     // when the stream is being created in createView but hasn't been completed being created yet. The createView
     // method will see the "stopping" status and perform the cleanup
     if (renderInfo.status === 'Stopping') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_STREAM_STOPPING,
-            level: 'info',
-            message: 'Local stream is already stopping.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
         return;
     }
     // If the stream is in the middle of being rendered (i.e. has state "Rendering"), we need the status as
     // "stopping" without performing any cleanup. This will tell the `createView` method that it should stop
     // rendering and clean up the state once the view has finished being created.
     if (renderInfo.status === 'Rendering') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.REMOTE_STREAM_STOPPING,
-            level: 'info',
-            message: 'Remote stream is still rendering. Changing status to stopping.',
-            data: streamLogInfo
-        });
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
+        _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
+        streamEventType === 'disposeViewRemote' && participantKey
+            ? internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Stopping', undefined)
+            : internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
         return;
     }
     if (renderInfo.renderer) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.DISPOSING_LOCAL_RENDERER,
-            level: 'info',
-            message: 'Disposing local view renderer.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.DISPOSING_RENDERER, streamLogInfo);
         renderInfo.renderer.dispose();
-        // We will after disposing of the renderer tell the internal context and context that the
-        // local view is gone so we need to update their states.
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
-        context.setLocalVideoStreamRendererView(callId, undefined);
+        // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
+        if (streamEventType === 'disposeViewRemote' && participantKey) {
+            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
+        }
+        else if (streamEventType === 'disposeViewLocal') {
+            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+            context.setLocalVideoStreamRendererView(callId, undefined);
+        }
     }
     else {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_RENDERER_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find renderer when disposing local stream.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.RENDERER_NOT_FOUND, streamLogInfo);
     }
 }
 function disposeViewUnparentedVideo(context, internalContext, stream) {
     const streamType = stream.mediaStreamType;
-    const streamLogInfo = { streamType };
-    _logEvent(callingStatefulLogger, {
-        name: EventNames.START_DISPOSE_LOCAL_STREAM,
-        level: 'info',
-        message: 'Start disposing unparented local stream.',
-        data: streamLogInfo
-    });
+    const streamLogInfo = { streamType, streamEventType: 'disposeViewUnparented' };
+    _logStreamEvent(EventNames.START_DISPOSE_STREAM, streamLogInfo);
     context.deleteDeviceManagerUnparentedView(stream);
     const renderInfo = internalContext.getUnparentedRenderInfo(stream);
     if (!renderInfo) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_DISPOSE_INFO_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find render info when disposing unparented local stream.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.DISPOSE_INFO_NOT_FOUND, streamLogInfo);
         return;
     }
     if (renderInfo.status === 'Rendering') {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_STREAM_STOPPING,
-            level: 'info',
-            message: 'Unparented local stream is still rendering. Changing status to stopping.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
         internalContext.setUnparentedRenderInfo(stream, renderInfo.stream, 'Stopping', undefined);
     }
     else {
         internalContext.deleteUnparentedRenderInfo(stream);
     }
     if (renderInfo.renderer) {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.DISPOSING_LOCAL_RENDERER,
-            level: 'info',
-            message: 'Disposing unparented local view renderer.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.DISPOSING_RENDERER, streamLogInfo);
         renderInfo.renderer.dispose();
     }
     else {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.LOCAL_RENDERER_NOT_FOUND,
-            level: 'error',
-            message: 'Cannot find renderer when disposing unparented local stream.',
-            data: streamLogInfo
-        });
+        _logStreamEvent(EventNames.RENDERER_NOT_FOUND, streamLogInfo);
     }
 }
 /**
@@ -2631,13 +2606,8 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
  */
 function createView(context, internalContext, callId, participantId, stream, options) {
     const streamType = stream.mediaStreamType;
-    if ('id' in stream && callId && participantId) {
-        // Render RemoteVideoStream that is part of a Call
-        return createViewRemoteVideo(context, internalContext, callId, participantId, stream, options);
-    }
-    else if (!('id' in stream) && callId) {
-        // Render LocalVideoStream that is part of a Call
-        return createViewLocalVideo(context, internalContext, callId, options);
+    if (callId) {
+        return createViewVideo(context, internalContext, callId, stream, participantId, options);
     }
     else if (!('id' in stream) && !callId) {
         // Render LocalVideoStream that is not part of a Call
@@ -2646,12 +2616,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         return context.withAsyncErrorTeedToState(() => __awaiter$y(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.CREATE_STREAM_INVALID_PARAMS,
-            level: 'warning',
-            message: 'Create View invalid combination of parameters.',
-            data: { streamType }
-        });
+        _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
         return Promise.resolve(undefined);
     }
 }
@@ -2660,13 +2625,8 @@ function createView(context, internalContext, callId, participantId, stream, opt
  */
 function disposeView(context, internalContext, callId, participantId, stream) {
     const streamType = stream.mediaStreamType;
-    if ('id' in stream && callId && participantId) {
-        // Stop rendering RemoteVideoStream that is part of a Call
-        disposeViewRemoteVideo(context, internalContext, callId, participantId, stream);
-    }
-    else if (!('id' in stream) && callId) {
-        // Stop rendering LocalVideoStream that is part of a Call
-        disposeViewLocalVideo(context, internalContext, callId);
+    if (callId) {
+        disposeViewVideo(context, internalContext, callId, stream, participantId);
     }
     else if (!('id' in stream) && !callId) {
         // Stop rendering LocalVideoStream that is not part of a Call
@@ -2675,12 +2635,7 @@ function disposeView(context, internalContext, callId, participantId, stream) {
         context.withErrorTeedToState(() => disposeViewUnparentedVideo(context, internalContext, stream), 'Call.stopVideo')();
     }
     else {
-        _logEvent(callingStatefulLogger, {
-            name: EventNames.DISPOSE_STREAM_INVALID_PARAMS,
-            level: 'warning',
-            message: 'Dispose View invalid combination of parameters.',
-            data: { streamType }
-        });
+        _logStreamEvent(EventNames.DISPOSE_STREAM_INVALID_PARAMS, { streamType });
         return;
     }
 }
@@ -4368,7 +4323,11 @@ const defaultIdentifiers = {
     videoGallery: 'video-gallery',
     videoTile: 'video-tile',
     overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',
-    overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button'
+    overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',
+    /* @conditional-compile-remove(vertical-gallery) */
+    verticalGalleryVideoTile: 'vertical-gallery-video-tile',
+    /* @conditional-compile-remove(vertical-gallery) */
+    verticalGalleryPageCounter: 'vertical-gallery-page-counter'
 };
 /**
  * @private
@@ -9632,6 +9591,8 @@ const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage } = props;
     const [page, setPage] = React.useState(1);
     const [buttonState, setButtonState] = React.useState({ previous: true, next: true });
+    /* @conditional-compile-remove(vertical-gallery) */
+    const ids = useIdentifiers();
     const numberOfChildren = React__default['default'].Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
     const paginatedChildren = React.useMemo(() => {
@@ -9675,13 +9636,14 @@ const VerticalGallery = (props) => {
     }
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         React__default['default'].createElement(react.Stack, { styles: childContainerStyle }, childrenOnCurrentPage.map((child, i) => {
-            return (React__default['default'].createElement(react.Stack.Item, { key: i, styles: childrenStyles }, child));
+            return (React__default['default'].createElement(react.Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
         })),
         showButtons && (React__default['default'].createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
 };
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
     const theme = useTheme();
+    /* @conditional-compile-remove(vertical-gallery) */
     const ids = useIdentifiers();
     /* @conditional-compile-remove(vertical-gallery) */
     const strings = useLocale$1().strings.VerticalGallery;
@@ -9703,7 +9665,9 @@ const VerticalGalleryControlBar = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
-        React__default['default'].createElement(react.Text, { className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
+        React__default['default'].createElement(react.Text
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
         React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, 
             /* @conditional-compile-remove(vertical-gallery) */
             ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
@@ -17578,6 +17542,18 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     /* @conditional-compile-remove(call-readiness) */
     askDevicePermission: (constrain) => __awaiter$b(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
+    }),
+    /* @conditional-compile-remove(video-background-effects) */
+    onRemoveVideoBackgroundEffects: () => __awaiter$b(void 0, void 0, void 0, function* () {
+        throw new Error('Not implemented');
+    }),
+    /* @conditional-compile-remove(video-background-effects) */
+    onBlurVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
+        throw new Error('Not implemented');
+    }),
+    /* @conditional-compile-remove(video-background-effects) */
+    onReplaceVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
+        throw new Error('Not implemented');
     })
 }));