@tellescope/video-chat 0.0.12 → 0.0.16

package/lib/cjs/controls.d.ts

@@ -0,0 +1,3 @@
+export declare const VideoToggle: () => JSX.Element;
+export declare const MicrophoneToggle: () => JSX.Element;
+//# sourceMappingURL=controls.d.ts.map

package/lib/cjs/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/controls.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,WAAW,mBAQvB,CAAA;AAED,eAAO,MAAM,gBAAgB,mBAQ5B,CAAA"}

package/lib/cjs/controls.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MicrophoneToggle = exports.VideoToggle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// components that work with web or native
+var react_1 = __importDefault(require("react"));
+var mui_1 = require("@tellescope/react-components/lib/esm/mui");
+var controls_1 = require("@tellescope/react-components/lib/esm/controls");
+var video_1 = require("./video");
+var VideoToggle = function () {
+    var _a = react_1.default.useContext(video_1.CurrentCallContext), toggleVideo = _a.toggleVideo, videoIsEnabled = _a.videoIsEnabled;
+    return ((0, jsx_runtime_1.jsx)(controls_1.LabeledIconButton, { Icon: videoIsEnabled ? mui_1.VideoIcon : mui_1.VideoOffIcon, onClick: toggleVideo, label: videoIsEnabled ? "Turn Camera Off" : "Turn Camera On" }, void 0));
+};
+exports.VideoToggle = VideoToggle;
+var MicrophoneToggle = function () {
+    var _a = react_1.default.useContext(video_1.CurrentCallContext), microphoneIsEnabled = _a.microphoneIsEnabled, toggleMicrophone = _a.toggleMicrophone;
+    return ((0, jsx_runtime_1.jsx)(controls_1.LabeledIconButton, { Icon: microphoneIsEnabled ? mui_1.MicrophoneIcon : mui_1.MicrophoneOffIcon, onClick: toggleMicrophone, label: microphoneIsEnabled ? "Turn Microphone Off" : "Turn Microphone On" }, void 0));
+};
+exports.MicrophoneToggle = MicrophoneToggle;
+//# sourceMappingURL=controls.js.map

package/lib/cjs/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../src/controls.tsx"],"names":[],"mappings":";;;;;;;AAAA,0CAA0C;AAC1C,gDAAyB;AAEzB,gEAKiD;AACjD,0EAAiF;AACjF,iCAEgB;AAET,IAAM,WAAW,GAAG;IACnB,IAAA,KAAkC,eAAK,CAAC,UAAU,CAAC,0BAAkB,CAAC,EAApE,WAAW,iBAAA,EAAE,cAAc,oBAAyC,CAAA;IAE5E,OAAO,CACL,uBAAC,4BAAiB,IAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAS,CAAC,CAAC,CAAC,kBAAY,EAAE,OAAO,EAAE,WAAW,EACtF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,WAC5D,CACH,CAAA;AACH,CAAC,CAAA;AARY,QAAA,WAAW,eAQvB;AAEM,IAAM,gBAAgB,GAAG;IACxB,IAAA,KAA4C,eAAK,CAAC,UAAU,CAAC,0BAAkB,CAAC,EAA9E,mBAAmB,yBAAA,EAAE,gBAAgB,sBAAyC,CAAA;IAEtF,OAAO,CACL,uBAAC,4BAAiB,IAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,oBAAc,CAAC,CAAC,CAAC,uBAAiB,EAAE,OAAO,EAAE,gBAAgB,EAC1G,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,WACzE,CACH,CAAA;AACH,CAAC,CAAA;AARY,QAAA,gBAAgB,oBAQ5B"}

package/lib/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./video";
+export * from "./controls";
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAA"}

package/lib/cjs/index.js

@@ -11,4 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./video"), exports);
+__exportStar(require("./controls"), exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAwB;AACxB,6CAA0B"}

package/lib/cjs/index.native.d.ts

@@ -1,2 +1,3 @@
 export * from "./video";
+export * from "./controls";
 //# sourceMappingURL=index.native.d.ts.map

package/lib/cjs/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/index.native.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/index.native.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA"}

package/lib/cjs/index.native.js

@@ -11,4 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./video"), exports);
+__exportStar(require("./controls"), exports);
 //# sourceMappingURL=index.native.js.map

package/lib/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","sourceRoot":"","sources":["../../src/index.native.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAuB"}
+{"version":3,"file":"index.native.js","sourceRoot":"","sources":["../../src/index.native.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAuB;AACvB,6CAA0B"}

package/lib/cjs/native/RNVideoRenderView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export declare class RNVideoView extends React.Component<{
+    tileId: number;
+    style?: ViewStyle;
+}> {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=RNVideoRenderView.d.ts.map

package/lib/cjs/native/RNVideoRenderView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RNVideoRenderView.d.ts","sourceRoot":"","sources":["../../../src/native/RNVideoRenderView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0C,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjF,qBAAa,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;IACrF,iBAAiB;IAUjB,oBAAoB;IAIpB,MAAM;CAGP"}

package/lib/cjs/native/RNVideoRenderView.js

@@ -0,0 +1,62 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RNVideoView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var bridge_1 = require("./bridge");
+var RNVideoView = /** @class */ (function (_super) {
+    __extends(RNVideoView, _super);
+    function RNVideoView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RNVideoView.prototype.componentDidMount = function () {
+        var _this = this;
+        // we need to delay the bind video 
+        // Because "componentDidMount" will be called "immediately after the initial rendering occurs"
+        // This is *before* RCTUIManager add this view to register (so that viewForReactTag() can return a view)
+        // So we need to dispatch bindVideoView after this function complete
+        setTimeout(function () {
+            bridge_1.NativeFunction.bindVideoView((0, react_native_1.findNodeHandle)(_this), _this.props.tileId);
+        });
+    };
+    RNVideoView.prototype.componentWillUnmount = function () {
+        bridge_1.NativeFunction.unbindVideoView(this.props.tileId);
+    };
+    RNVideoView.prototype.render = function () {
+        return (0, jsx_runtime_1.jsx)(RNVideoRenderViewNative, __assign({}, this.props), void 0);
+    };
+    return RNVideoView;
+}(react_1.default.Component));
+exports.RNVideoView = RNVideoView;
+var RNVideoRenderViewNative = (0, react_native_1.requireNativeComponent)('RNVideoView');
+//# sourceMappingURL=RNVideoRenderView.js.map

package/lib/cjs/native/RNVideoRenderView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RNVideoRenderView.js","sourceRoot":"","sources":["../../../src/native/RNVideoRenderView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,gDAA0B;AAC1B,6CAAiF;AACjF,mCAA0C;AAE1C;IAAiC,+BAAsD;IAAvF;;IAkBA,CAAC;IAjBC,uCAAiB,GAAjB;QAAA,iBAQC;QAPC,mCAAmC;QACnC,8FAA8F;QAC9F,wGAAwG;QACxG,oEAAoE;QACpE,UAAU,CAAC;YACT,uBAAc,CAAC,aAAa,CAAC,IAAA,6BAAc,EAAC,KAAI,CAAC,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,0CAAoB,GAApB;QACE,uBAAc,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;IAED,4BAAM,GAAN;QACE,OAAO,uBAAC,uBAAuB,eAAK,IAAI,CAAC,KAAK,UAAI,CAAC;IACrD,CAAC;IACH,kBAAC;AAAD,CAAC,AAlBD,CAAiC,eAAK,CAAC,SAAS,GAkB/C;AAlBY,kCAAW;AAoBxB,IAAM,uBAAuB,GAAG,IAAA,qCAAsB,EAAC,aAAa,CAAC,CAAC"}

package/lib/cjs/native/bridge.d.ts

@@ -0,0 +1,36 @@
+import { NativeEventEmitter } from 'react-native';
+export declare const MobileSDKEvent: {
+    OnMeetingStart: string;
+    OnMeetingEnd: string;
+    OnAttendeesJoin: string;
+    OnAttendeesLeave: string;
+    OnAttendeesMute: string;
+    OnAttendeesUnmute: string;
+    OnAddVideoTile: string;
+    OnRemoveVideoTile: string;
+    OnError: string;
+};
+export declare const MeetingError: {
+    OnMaximumConcurrentVideoReached: string;
+};
+export declare function getSDKEventEmitter(): NativeEventEmitter;
+/**
+ * These are functions available for React native to call on native
+ * i.e. React Native -> Native
+ *
+ * NativeModules.NativeMobileSDKBridge.startMeeting(meetingId, userName)
+ * NativeModules.NativeMobileSDKBridge.stopMeeting()
+ * NativeModules.NativeMobileSDKBridge.setMute(isMute) -> boolean
+ * NativeModules.NativeMobileSDKBridge.setCameraOn(isOn) -> boolean
+ * NativeModules.NativeMobileSDKBridge.bindVideoView(reactTagId, tileId)
+ * NativeModules.NativeMobileSDKBridge.unbindVideoView(reactTagId, tileId)
+ */
+export declare const NativeFunction: {
+    startMeeting: any;
+    stopMeeting: any;
+    setMute: any;
+    setCameraOn: any;
+    bindVideoView: any;
+    unbindVideoView: any;
+};
+//# sourceMappingURL=bridge.d.ts.map

package/lib/cjs/native/bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge.d.ts","sourceRoot":"","sources":["../../../src/native/bridge.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAgBjE,eAAO,MAAM,cAAc;;;;;;;;;;CAU1B,CAAA;AAED,eAAO,MAAM,YAAY;;CAExB,CAAA;AAED,wBAAgB,kBAAkB,uBAEjC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAA"}

package/lib/cjs/native/bridge.js

@@ -0,0 +1,59 @@
+"use strict";
+/*
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: MIT-0
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeFunction = exports.getSDKEventEmitter = exports.MeetingError = exports.MobileSDKEvent = void 0;
+var react_native_1 = require("react-native");
+/**
+ * These are the function that will be called from native side
+ * i.e. Native -> React Native
+ *
+ * NativeEventEmitter.onMeetingStart(meetingName)
+ * NativeEventEmitter.onMeetingEnd()
+ * NativeEventEmitter.onAttendeesJoin(attendeeInfo)
+ * NativeEventEmitter.onAttendeesLeave(attendeeInfo)
+ * NativeEventEmitter.onAddVideoTile(tileState)
+ * NativeEventEmitter.onRemoveVideoTile(tileState)
+ * NativeEventEmitter.onError(errorMessage)
+ */
+var _eventEmitter = new react_native_1.NativeEventEmitter(react_native_1.NativeModules.NativeMobileSDKBridge);
+exports.MobileSDKEvent = {
+    OnMeetingStart: 'OnMeetingStart',
+    OnMeetingEnd: 'OnMeetingEnd',
+    OnAttendeesJoin: 'OnAttendeesJoin',
+    OnAttendeesLeave: 'OnAttendeesLeave',
+    OnAttendeesMute: 'OnAttendeesMute',
+    OnAttendeesUnmute: 'OnAttendeesUnmute',
+    OnAddVideoTile: 'OnAddVideoTile',
+    OnRemoveVideoTile: 'OnRemoveVideoTile',
+    OnError: 'OnError',
+};
+exports.MeetingError = {
+    OnMaximumConcurrentVideoReached: "OnMaximumConcurrentVideoReached"
+};
+function getSDKEventEmitter() {
+    return _eventEmitter;
+}
+exports.getSDKEventEmitter = getSDKEventEmitter;
+/**
+ * These are functions available for React native to call on native
+ * i.e. React Native -> Native
+ *
+ * NativeModules.NativeMobileSDKBridge.startMeeting(meetingId, userName)
+ * NativeModules.NativeMobileSDKBridge.stopMeeting()
+ * NativeModules.NativeMobileSDKBridge.setMute(isMute) -> boolean
+ * NativeModules.NativeMobileSDKBridge.setCameraOn(isOn) -> boolean
+ * NativeModules.NativeMobileSDKBridge.bindVideoView(reactTagId, tileId)
+ * NativeModules.NativeMobileSDKBridge.unbindVideoView(reactTagId, tileId)
+ */
+exports.NativeFunction = {
+    startMeeting: react_native_1.NativeModules.NativeMobileSDKBridge.startMeeting,
+    stopMeeting: react_native_1.NativeModules.NativeMobileSDKBridge.stopMeeting,
+    setMute: react_native_1.NativeModules.NativeMobileSDKBridge.setMute,
+    setCameraOn: react_native_1.NativeModules.NativeMobileSDKBridge.setCameraOn,
+    bindVideoView: react_native_1.NativeModules.NativeMobileSDKBridge.bindVideoView,
+    unbindVideoView: react_native_1.NativeModules.NativeMobileSDKBridge.unbindVideoView,
+};
+//# sourceMappingURL=bridge.js.map

package/lib/cjs/native/bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge.js","sourceRoot":"","sources":["../../../src/native/bridge.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,6CAAiE;AAEjE;;;;;;;;;;;GAWG;AACH,IAAM,aAAa,GAAG,IAAI,iCAAkB,CAAC,4BAAa,CAAC,qBAAqB,CAAC,CAAC;AAErE,QAAA,cAAc,GAAG;IAC5B,cAAc,EAAE,gBAAgB;IAChC,YAAY,EAAE,cAAc;IAC5B,eAAe,EAAE,iBAAiB;IAClC,gBAAgB,EAAE,kBAAkB;IACpC,eAAe,EAAE,iBAAiB;IAClC,iBAAiB,EAAE,mBAAmB;IACtC,cAAc,EAAE,gBAAgB;IAChC,iBAAiB,EAAE,mBAAmB;IACtC,OAAO,EAAE,SAAS;CACnB,CAAA;AAEY,QAAA,YAAY,GAAG;IAC1B,+BAA+B,EAAE,iCAAiC;CACnE,CAAA;AAED,SAAgB,kBAAkB;IAChC,OAAO,aAAa,CAAC;AACvB,CAAC;AAFD,gDAEC;AAED;;;;;;;;;;GAUG;AACU,QAAA,cAAc,GAAG;IAC5B,YAAY,EAAE,4BAAa,CAAC,qBAAqB,CAAC,YAAY;IAC9D,WAAW,EAAE,4BAAa,CAAC,qBAAqB,CAAC,WAAW;IAC5D,OAAO,EAAE,4BAAa,CAAC,qBAAqB,CAAC,OAAO;IACpD,WAAW,EAAE,4BAAa,CAAC,qBAAqB,CAAC,WAAW;IAC5D,aAAa,EAAE,4BAAa,CAAC,qBAAqB,CAAC,aAAa;IAChE,eAAe,EAAE,4BAAa,CAAC,qBAAqB,CAAC,eAAe;CACrE,CAAA"}

package/lib/cjs/video.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { UserIdentity } from "@tellescope/types-utilities";
 import { AttendeeInfo, MeetingInfo } from '@tellescope/types-models';
 import { darkTheme, VideoTileGrid } from 'amazon-chime-sdk-component-library-react';
@@ -11,9 +11,12 @@ export declare const CurrentCallContext: React.Context<{
     setMeeting: (m: MeetingInfo | undefined) => void;
     videoIsEnabled: boolean;
     toggleVideo: () => Promise<void>;
+    microphoneIsEnabled: boolean;
+    toggleMicrophone: () => Promise<void>;
     attendees: AttendeeDisplayInfo[];
-    shareScreenId: string;
-    videoTiles: (number | string)[];
+    shareScreenId: number | null;
+    localTileId: number | null;
+    videoTiles: (number)[];
 }>;
 export interface VideoProps {
     children?: React.ReactNode;
@@ -42,5 +45,10 @@ export declare const useJoinVideoCall: () => {
     }) => Promise<void>;
 };
 export declare type JoinVideoCallReturnType = ReturnType<typeof useJoinVideoCall>;
+export interface VideoViewProps {
+    style?: CSSProperties;
+}
+export declare const SelfView: ({ style }: VideoViewProps) => JSX.Element;
+export declare const useRemoteViews: ({ style }: VideoViewProps) => JSX.Element[];
 export { VideoTileGrid };
 //# sourceMappingURL=video.d.ts.map

package/lib/cjs/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAM7E,OAAO,EACL,YAAY,EACb,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,YAAY,EACZ,WAAW,EACZ,MAAM,0BAA0B,CAAA;AAYjC,OAAO,EAEL,SAAS,EAGT,aAAa,EAWd,MAAM,0CAA0C,CAAC;AAGlD,oBAAY,mBAAmB,GAAI;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF,eAAO,MAAM,kBAAkB;aACpB,WAAW,GAAG,SAAS;oBAAkB,WAAW,GAAG,SAAS,KAAK,IAAI;oBAClE,OAAO;iBAAe,MAAM,QAAQ,IAAI,CAAC;eAC9C,mBAAmB,EAAE;mBAAiB,MAAM;gBAC3C,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE;EAC/B,CAAA;AACF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;CAC1B;AAoBD,eAAO,MAAM,SAAS,wBAAmC,UAAU,gBAQlE,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;uBArCgB,QAAQ,IAAI,CAAC;;8BAmEN,YAAY,EAAE;;CAkBlE,CAAA;AACD,oBAAY,wBAAwB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE3E,eAAO,MAAM,gBAAgB;;;uBAxFiB,QAAQ,IAAI,CAAC;+BA4FjB;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,gBAAgB;QAAE,QAAQ,EAAE,YAAY,CAAA;KAAE;CAO3G,CAAA;AACD,oBAAY,uBAAuB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEzE,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,aAAa,EAAY,MAAM,OAAO,CAAA;AAM7E,OAAO,EACL,YAAY,EACb,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,YAAY,EACZ,WAAW,EACZ,MAAM,0BAA0B,CAAA;AAIjC,OAAO,EAEL,SAAS,EAGT,aAAa,EAed,MAAM,0CAA0C,CAAC;AAGlD,oBAAY,mBAAmB,GAAI;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF,eAAO,MAAM,kBAAkB;aACpB,WAAW,GAAG,SAAS;oBAAkB,WAAW,GAAG,SAAS,KAAK,IAAI;oBAClE,OAAO;iBAAe,MAAM,QAAQ,IAAI,CAAC;yBACpC,OAAO;sBAAoB,MAAM,QAAQ,IAAI,CAAC;eACxD,mBAAmB,EAAE;mBAAiB,MAAM,GAAG,IAAI;iBACjD,MAAM,GAAG,IAAI;gBACd,CAAC,MAAM,CAAC,EAAE;EACtB,CAAA;AACF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;CAC1B;AAgCD,eAAO,MAAM,SAAS,wBAAmC,UAAU,gBAQlE,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;uBAnDgB,QAAQ,IAAI,CAAC;;8BAiFN,YAAY,EAAE;;CAkBlE,CAAA;AACD,oBAAY,wBAAwB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE3E,eAAO,MAAM,gBAAgB;;;uBAtGiB,QAAQ,IAAI,CAAC;+BA0GjB;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,gBAAgB;QAAE,QAAQ,EAAE,YAAY,CAAA;KAAE;CAO3G,CAAA;AACD,oBAAY,uBAAuB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEzE,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AACD,eAAO,MAAM,QAAQ,cAAe,cAAc,gBAA2C,CAAA;AAE7F,eAAO,MAAM,cAAc,cAAgB,cAAc,kBAOxD,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/lib/cjs/video.js

@@ -66,7 +66,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoTileGrid = exports.useJoinVideoCall = exports.useStartVideoCall = exports.WithVideo = exports.CurrentCallContext = void 0;
+exports.VideoTileGrid = exports.useRemoteViews = exports.SelfView = exports.useJoinVideoCall = exports.useStartVideoCall = exports.WithVideo = exports.CurrentCallContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importStar(require("react"));
 var authentication_1 = require("@tellescope/react-components/lib/esm/authentication");
@@ -77,19 +77,32 @@ Object.defineProperty(exports, "VideoTileGrid", { enumerable: true, get: functio
     amazon_chime_sdk_component_library_react_1.VideoTileGrid; } });
 exports.CurrentCallContext = react_1.default.createContext({});
 var WithContext = function (_a) {
-    var _b;
     var children = _a.children;
-    var _c = (0, react_1.useState)(undefined), meeting = _c[0], setMeeting = _c[1];
-    var _d = (0, amazon_chime_sdk_component_library_react_1.useLocalVideo)(), toggleVideo = _d.toggleVideo, videoIsEnabled = _d.isVideoEnabled;
+    var _b = (0, react_1.useState)(undefined), meeting = _b[0], setMeeting = _b[1];
+    var _c = (0, amazon_chime_sdk_component_library_react_1.useLocalVideo)(), toggleVideo = _c.toggleVideo, videoIsEnabled = _c.isVideoEnabled, localTileId = _c.tileId;
     var roster = (0, amazon_chime_sdk_component_library_react_1.useRosterState)().roster;
     var tileId = (0, amazon_chime_sdk_component_library_react_1.useContentShareState)().tileId;
     var tiles = (0, amazon_chime_sdk_component_library_react_1.useRemoteVideoTileState)().tiles;
+    var _d = (0, amazon_chime_sdk_component_library_react_1.useToggleLocalMute)(), muted = _d.muted, toggleMute = _d.toggleMute;
     var attendees = [];
     for (var attendeeId in roster) {
         var externalUserId = roster[attendeeId].externalUserId;
         attendees.push({ attendeeId: attendeeId, externalUserId: externalUserId });
     }
-    return ((0, jsx_runtime_1.jsx)(exports.CurrentCallContext.Provider, __assign({ value: { attendees: attendees, videoTiles: tiles, shareScreenId: (_b = tileId === null || tileId === void 0 ? void 0 : tileId.toString()) !== null && _b !== void 0 ? _b : '', meeting: meeting, setMeeting: setMeeting, videoIsEnabled: videoIsEnabled, toggleVideo: toggleVideo } }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.CurrentCallContext.Provider, __assign({ value: {
+            attendees: attendees,
+            localTileId: localTileId,
+            videoTiles: tiles,
+            shareScreenId: tileId,
+            meeting: meeting,
+            setMeeting: setMeeting,
+            videoIsEnabled: videoIsEnabled,
+            toggleVideo: toggleVideo,
+            microphoneIsEnabled: !muted,
+            toggleMicrophone: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/, toggleMute()];
+            }); }); },
+        } }, { children: children }), void 0));
 };
 var WithVideo = function (_a) {
     var children = _a.children, _b = _a.theme, theme = _b === void 0 ? amazon_chime_sdk_component_library_react_1.darkTheme : _b;
@@ -198,4 +211,18 @@ var useJoinVideoCall = function () {
     return { meeting: meeting, videoIsEnabled: videoIsEnabled, toggleVideo: toggleVideo, joinMeeting: joinMeeting };
 };
 exports.useJoinVideoCall = useJoinVideoCall;
+var SelfView = function (_a) {
+    var style = _a.style;
+    return (0, jsx_runtime_1.jsx)("div", __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(amazon_chime_sdk_component_library_react_1.LocalVideo, {}, void 0) }), void 0);
+};
+exports.SelfView = SelfView;
+var useRemoteViews = function (_a) {
+    var style = _a.style;
+    var _b = react_1.default.useContext(exports.CurrentCallContext), localTileId = _b.localTileId, videoTiles = _b.videoTiles;
+    var nonLocal = videoTiles.filter(function (v) { return v !== localTileId; });
+    return nonLocal.map(function (tileId) {
+        return (0, jsx_runtime_1.jsx)(amazon_chime_sdk_component_library_react_1.RemoteVideo, { style: style, tileId: tileId }, void 0);
+    });
+};
+exports.useRemoteViews = useRemoteViews;
 //# sourceMappingURL=video.js.map

package/lib/cjs/video.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.js","sourceRoot":"","sources":["../../src/video.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../../src/video.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/video.native.d.ts

@@ -1,5 +1,10 @@
-import { JoinVideoCallReturnType, StartVideoCallReturnType, VideoProps } from "./video.js";
+import React from "react";
+import { JoinVideoCallReturnType, StartVideoCallReturnType, VideoProps, VideoViewProps } from "./video.js";
 export declare const WithVideo: ({ children }: VideoProps) => JSX.Element;
+export declare const useRemoteViews: ({ style }: {
+    style: React.CSSProperties;
+}) => JSX.Element[];
+export declare const SelfView: ({ style }: VideoViewProps) => JSX.Element | null;
 export declare const useStartVideoCall: () => StartVideoCallReturnType;
 export declare const useJoinVideoCall: () => JoinVideoCallReturnType;
 export declare const VideoTileGrid: () => JSX.Element;

package/lib/cjs/video.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.native.d.ts","sourceRoot":"","sources":["../../src/video.native.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEL,uBAAuB,EACvB,wBAAwB,EACxB,UAAU,EAEX,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,iBAAmB,UAAU,gBAoFlD,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAO,wBA4CpC,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAQnC,CAAA;AAED,eAAO,MAAM,aAAa,mBA8CzB,CAAA"}
+{"version":3,"file":"video.native.d.ts","sourceRoot":"","sources":["../../src/video.native.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAsB3E,OAAO,EAEL,uBAAuB,EACvB,wBAAwB,EACxB,UAAU,EAEV,cAAc,EACf,MAAM,YAAY,CAAA;AAenB,eAAO,MAAM,SAAS,iBAAmB,UAAU,gBA6GlD,CAAA;AAGD,eAAO,MAAM,cAAc;WAAyB,MAAM,aAAa;mBAOtE,CAAA;AAED,eAAO,MAAM,QAAQ,cAAgB,cAAc,uBAOlD,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAO,wBAqDpC,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAQnC,CAAA;AACD,eAAO,MAAM,aAAa,mBAgDzB,CAAA"}

package/lib/cjs/video.native.js

@@ -75,7 +75,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoTileGrid = exports.useJoinVideoCall = exports.useStartVideoCall = exports.WithVideo = void 0;
+exports.VideoTileGrid = exports.useJoinVideoCall = exports.useStartVideoCall = exports.SelfView = exports.useRemoteViews = exports.WithVideo = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 // logic pulled + refactored from 
 // https://github.com/aws-samples/amazon-chime-react-native-demo/blob/master/src/containers/Meeting.js
@@ -87,7 +87,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var authentication_1 = require("@tellescope/react-components/lib/esm/authentication");
-var mui_1 = require("@tellescope/react-components/lib/esm/mui");
+var layout_1 = require("@tellescope/react-components/lib/esm/layout");
+var mui_native_1 = require("@tellescope/react-components/lib/esm/mui.native");
 var video_js_1 = require("./video.js");
 var bridge_1 = require("./native/bridge");
 var RNVideoRenderView_1 = require("./native/RNVideoRenderView");
@@ -96,28 +97,44 @@ var WithVideo = function (_a) {
     var _b = (0, react_1.useState)(undefined), meeting = _b[0], setMeeting = _b[1];
     var _c = (0, react_1.useState)(false), inMeeting = _c[0], setInMeeting = _c[1];
     var _d = (0, react_1.useState)(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = (0, react_1.useState)(false), videoIsEnabled = _e[0], setVideoIsEnabled = _e[1];
-    var _f = (0, react_1.useState)([]), videoTiles = _f[0], setVideoTiles = _f[1];
-    var _g = (0, react_1.useState)(''), screenShareTile = _g[0], setScreenShareTile = _g[1];
-    var _h = (0, react_1.useState)([]), attendees = _h[0], setAttendees = _h[1];
-    var toggleVideo = function () { return bridge_1.NativeFunction.setCameraOn(!videoIsEnabled); };
+    var _e = (0, react_1.useState)(false), muted = _e[0], setMuted = _e[1];
+    var _f = (0, react_1.useState)(false), videoIsEnabled = _f[0], setVideoIsEnabled = _f[1];
+    var _g = (0, react_1.useState)([]), videoTiles = _g[0], setVideoTiles = _g[1];
+    var _h = (0, react_1.useState)(null), localTileId = _h[0], setLocalTileId = _h[1];
+    var _j = (0, react_1.useState)(null), screenShareTile = _j[0], setScreenShareTile = _j[1];
+    var _k = (0, react_1.useState)([]), attendees = _k[0], setAttendees = _k[1];
+    var toggleVideo = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            bridge_1.NativeFunction.setCameraOn(!videoIsEnabled);
+            setVideoIsEnabled(function (v) { return !v; });
+            return [2 /*return*/];
+        });
+    }); };
+    var toggleMic = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            bridge_1.NativeFunction.setMute(!muted);
+            setMuted(function (m) { return !m; });
+            return [2 /*return*/];
+        });
+    }); };
     var emitter = (0, bridge_1.getSDKEventEmitter)();
     (0, react_1.useEffect)(function () {
         var startSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnMeetingStart, function () {
             setInMeeting(true);
             setIsLoading(false);
         });
-        var endSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnMeetingEnd, function () {
-            setInMeeting(true);
+        // called when user clicks Leave Meeting or meeting is ended by host
+        var endSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnMeetingEnd, function (a) {
+            setInMeeting(false);
             setIsLoading(false);
         });
-        var joinSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnAttendeesJoin, function (_a) {
-            var attendeeId = _a.attendeeId, externalUserId = _a.externalUserId;
+        var joinSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnAttendeesJoin, function (added) {
+            var attendeeId = added.attendeeId, externalUserId = added.externalUserId;
             setAttendees(function (as) { return !as.find(function (a) { return a.attendeeId === attendeeId; })
                 ? __spreadArray([{ attendeeId: attendeeId, externalUserId: externalUserId, muted: false }], as, true) : as; });
         });
-        var leaveSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnAttendeesLeave, function (_a) {
-            var attendeeId = _a.attendeeId;
+        var leaveSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnAttendeesLeave, function (leaving) {
+            var attendeeId = leaving.attendeeId;
             setAttendees(function (as) { return as.filter(function (a) { return a.attendeeId !== attendeeId; }); });
         });
         var errorSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnError, function (message) {
@@ -134,12 +151,15 @@ var WithVideo = function (_a) {
                 setScreenShareTile(tileState.tileId);
                 return;
             }
-            setVideoTiles(function (v) { return __spreadArray(__spreadArray([], v, true), [tileState.titleId], false); });
+            if (tileState.isLocal) {
+                setLocalTileId(tileState.tileId);
+            }
+            setVideoTiles(function (v) { return __spreadArray(__spreadArray([], v, true), [tileState.tileId], false); });
             setVideoIsEnabled(function (v) { return tileState.isLocal ? true : v; });
         });
         var removeVideoSubscription = emitter.addListener(bridge_1.MobileSDKEvent.OnRemoveVideoTile, function (tileState) {
             if (tileState.isScreenShare) {
-                setScreenShareTile('');
+                setScreenShareTile(null);
                 return;
             }
             setVideoTiles(function (vs) { return vs.filter(function (v) { return v !== tileState.tileId; }); });
@@ -157,9 +177,36 @@ var WithVideo = function (_a) {
             removeVideoSubscription.remove();
         };
     }, [emitter]);
-    return ((0, jsx_runtime_1.jsx)(video_js_1.CurrentCallContext.Provider, __assign({ value: { attendees: attendees, videoTiles: videoTiles, meeting: meeting, shareScreenId: screenShareTile, setMeeting: setMeeting, videoIsEnabled: videoIsEnabled, toggleVideo: toggleVideo } }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(video_js_1.CurrentCallContext.Provider, __assign({ value: {
+            attendees: attendees,
+            localTileId: localTileId,
+            videoTiles: videoTiles,
+            meeting: meeting,
+            shareScreenId: screenShareTile,
+            setMeeting: setMeeting,
+            videoIsEnabled: videoIsEnabled,
+            toggleVideo: toggleVideo,
+            microphoneIsEnabled: !muted,
+            toggleMicrophone: toggleMic,
+        } }, { children: children }), void 0));
 };
 exports.WithVideo = WithVideo;
+var useRemoteViews = function (_a) {
+    var style = _a.style;
+    var _b = react_1.default.useContext(video_js_1.CurrentCallContext), localTileId = _b.localTileId, videoTiles = _b.videoTiles;
+    var nonLocal = videoTiles.filter(function (v) { return v !== localTileId; });
+    return nonLocal.map(function (tileId) { var _a; return (0, jsx_runtime_1.jsx)(RNVideoRenderView_1.RNVideoView, { style: (_a = (0, mui_native_1.convert_CSS_to_RNStyles)(style)) !== null && _a !== void 0 ? _a : styles.video, tileId: tileId }, void 0); });
+};
+exports.useRemoteViews = useRemoteViews;
+var SelfView = function (_a) {
+    var _b;
+    var style = _a.style;
+    var localTileId = react_1.default.useContext(video_js_1.CurrentCallContext).localTileId;
+    if (!localTileId)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(RNVideoRenderView_1.RNVideoView, { style: (_b = (0, mui_native_1.convert_CSS_to_RNStyles)(style)) !== null && _b !== void 0 ? _b : styles.video, tileId: localTileId }, void 0));
+};
+exports.SelfView = SelfView;
 var useStartVideoCall = function () {
     var session = (0, authentication_1.useSession)();
     var _a = react_1.default.useContext(video_js_1.CurrentCallContext), meeting = _a.meeting, setMeeting = _a.setMeeting, videoIsEnabled = _a.videoIsEnabled, toggleVideo = _a.toggleVideo;
@@ -228,7 +275,16 @@ var useStartVideoCall = function () {
             }
         });
     }); };
-    return { meeting: meeting, videoIsEnabled: videoIsEnabled, starting: starting, ending: ending, toggleVideo: toggleVideo, createAndStartMeeting: createAndStartMeeting, addAttendees: addAttendees, endMeeting: endMeeting };
+    return {
+        meeting: meeting,
+        videoIsEnabled: videoIsEnabled,
+        starting: starting,
+        ending: ending,
+        toggleVideo: toggleVideo,
+        createAndStartMeeting: createAndStartMeeting,
+        addAttendees: addAttendees,
+        endMeeting: endMeeting,
+    };
 };
 exports.useStartVideoCall = useStartVideoCall;
 var useJoinVideoCall = function () {
@@ -245,24 +301,13 @@ exports.useJoinVideoCall = useJoinVideoCall;
 var VideoTileGrid = function () {
     var _a = (0, react_1.useContext)(video_js_1.CurrentCallContext), 
     // attendees, 
-    videoIsEnabled = _a.videoIsEnabled, videoTiles = _a.videoTiles, shareScreenId = _a.shareScreenId;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: [styles.container, { justifyContent: 'flex-start' }] }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, __assign({ style: styles.title }, { children: "TITLE" }), void 0), (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: styles.buttonContainer }, { children: [(0, jsx_runtime_1.jsx)(mui_1.Button, __assign({ disabled: videoIsEnabled, onPress: function () { return bridge_1.NativeFunction.setCameraOn(!videoIsEnabled); } }, { children: "Toggle Video" }), void 0), (0, jsx_runtime_1.jsx)(mui_1.Button, __assign({ onPress: function () { return bridge_1.NativeFunction.stopMeeting(); } }, { children: " Leave Meeting " }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(react_native_1.Text, __assign({ style: styles.title }, { children: "Video" }), void 0), (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: styles.videoContainer }, { children: videoTiles.length > 0 ? videoTiles.map(function (tileId) {
+    videoTiles = _a.videoTiles, toggleVideo = _a.toggleVideo;
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Flex, __assign({ column: true, justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, __assign({ style: styles.videoContainer }, { children: videoTiles.length > 0 ? videoTiles.map(function (tileId) {
                     return (0, jsx_runtime_1.jsx)(RNVideoRenderView_1.RNVideoView, { style: styles.video, tileId: tileId }, tileId);
-                }) : (0, jsx_runtime_1.jsx)(react_native_1.Text, __assign({ style: styles.subtitle }, { children: "No one is sharing video at this moment" }), void 0) }), void 0), !!shareScreenId &&
-                (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, __assign({ style: styles.title }, { children: "Screen Share" }), void 0), (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: styles.videoContainer }, { children: (0, jsx_runtime_1.jsx)(RNVideoRenderView_1.RNVideoView, { style: styles.screenShare, tileId: shareScreenId }, shareScreenId) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(react_native_1.Text, __assign({ style: styles.title }, { children: "Attendee" }), void 0)] }), void 0));
+                }) : (0, jsx_runtime_1.jsx)(mui_native_1.Typography, __assign({ style: styles.subtitle }, { children: "No one is sharing video at this moment" }), void 0) }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Flex, __assign({ justifyContent: "space-between", style: { height: '5%' } }, { children: [(0, jsx_runtime_1.jsx)(mui_native_1.Button, __assign({ onPress: toggleVideo }, { children: "Toggle Video" }), void 0), (0, jsx_runtime_1.jsx)(mui_native_1.Button, __assign({ onPress: function () { return bridge_1.NativeFunction.stopMeeting(); } }, { children: " Leave Meeting " }), void 0)] }), void 0)] }), void 0));
 };
 exports.VideoTileGrid = VideoTileGrid;
 var styles = react_native_1.StyleSheet.create({
-    container: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '95%',
-        backgroundColor: 'white'
-    },
-    buttonContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-    },
     title: {
         fontSize: 30,
         fontWeight: '700'
@@ -276,6 +321,7 @@ var styles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-around',
         width: '100%',
+        height: '95%',
         // This is an existing React Native issue:
         // When you create a native android component
         // that use GLSurfaceView (We use this internally), the entire screen will
@@ -283,8 +329,7 @@ var styles = react_native_1.StyleSheet.create({
         overflow: 'hidden'
     },
     video: {
-        width: '45%',
-        margin: '1%',
+        width: '100%',
         aspectRatio: 16 / 9,
     },
     screenShare: {