@mohamed-karawia/library 0.1.0

package/dist/index.js

@@ -0,0 +1,311 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Chat", {
+  enumerable: true,
+  get: function get() {
+    return _Chat.default;
+  }
+});
+Object.defineProperty(exports, "CreateEnrollmentForm", {
+  enumerable: true,
+  get: function get() {
+    return _CreateForm.default;
+  }
+});
+Object.defineProperty(exports, "DetailedEnrollmentForm", {
+  enumerable: true,
+  get: function get() {
+    return _DetailedForm.default;
+  }
+});
+Object.defineProperty(exports, "ViewEnrollmentForms", {
+  enumerable: true,
+  get: function get() {
+    return _ViewForms.default;
+  }
+});
+Object.defineProperty(exports, "FillEnrollmentForm", {
+  enumerable: true,
+  get: function get() {
+    return _FillForm.default;
+  }
+});
+Object.defineProperty(exports, "CreateEvent", {
+  enumerable: true,
+  get: function get() {
+    return _CreateEvent.default;
+  }
+});
+Object.defineProperty(exports, "Event", {
+  enumerable: true,
+  get: function get() {
+    return _Event.default;
+  }
+});
+Object.defineProperty(exports, "EventsList", {
+  enumerable: true,
+  get: function get() {
+    return _EventsList.default;
+  }
+});
+Object.defineProperty(exports, "CreateLibraryFolder", {
+  enumerable: true,
+  get: function get() {
+    return _CreateFolder.default;
+  }
+});
+Object.defineProperty(exports, "LibraryFolders", {
+  enumerable: true,
+  get: function get() {
+    return _Folders.default;
+  }
+});
+Object.defineProperty(exports, "LibraryNotes", {
+  enumerable: true,
+  get: function get() {
+    return _Notes.default;
+  }
+});
+Object.defineProperty(exports, "ViewLibraryNote", {
+  enumerable: true,
+  get: function get() {
+    return _ViewNote.default;
+  }
+});
+Object.defineProperty(exports, "CreateMusic", {
+  enumerable: true,
+  get: function get() {
+    return _AddSong.default;
+  }
+});
+Object.defineProperty(exports, "CreateMusicAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _CreateMusicAlbum.default;
+  }
+});
+Object.defineProperty(exports, "MusicAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _ViewAlbum.default;
+  }
+});
+Object.defineProperty(exports, "MusicAlbums", {
+  enumerable: true,
+  get: function get() {
+    return _ViewAlbums.default;
+  }
+});
+Object.defineProperty(exports, "CreatePhotoAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _CreateAlbum.default;
+  }
+});
+Object.defineProperty(exports, "CreatePhoto", {
+  enumerable: true,
+  get: function get() {
+    return _AddPhoto.default;
+  }
+});
+Object.defineProperty(exports, "PhotoAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _ViewAlbum2.default;
+  }
+});
+Object.defineProperty(exports, "PhoroAlbums", {
+  enumerable: true,
+  get: function get() {
+    return _ViewAlbums2.default;
+  }
+});
+Object.defineProperty(exports, "BaseMaterial", {
+  enumerable: true,
+  get: function get() {
+    return _BaseMaterial.default;
+  }
+});
+Object.defineProperty(exports, "Body", {
+  enumerable: true,
+  get: function get() {
+    return _Body.default;
+  }
+});
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function get() {
+    return _Center.default;
+  }
+});
+Object.defineProperty(exports, "Head", {
+  enumerable: true,
+  get: function get() {
+    return _Head.default;
+  }
+});
+Object.defineProperty(exports, "Left", {
+  enumerable: true,
+  get: function get() {
+    return _Left.default;
+  }
+});
+Object.defineProperty(exports, "Right", {
+  enumerable: true,
+  get: function get() {
+    return _Right.default;
+  }
+});
+Object.defineProperty(exports, "Navbar", {
+  enumerable: true,
+  get: function get() {
+    return _Navbar.default;
+  }
+});
+Object.defineProperty(exports, "Gallery", {
+  enumerable: true,
+  get: function get() {
+    return _Gallery.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _ReusableList.default;
+  }
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _ReusableHeader.default;
+  }
+});
+Object.defineProperty(exports, "SpaceContainer", {
+  enumerable: true,
+  get: function get() {
+    return _SpaceContainer.default;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner.default;
+  }
+});
+Object.defineProperty(exports, "WidgetContainer", {
+  enumerable: true,
+  get: function get() {
+    return _WidgetContainer.default;
+  }
+});
+Object.defineProperty(exports, "CreateVideoAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _CreateVideoAlbum.default;
+  }
+});
+Object.defineProperty(exports, "CreateVideo", {
+  enumerable: true,
+  get: function get() {
+    return _AddVideo.default;
+  }
+});
+Object.defineProperty(exports, "VideoAlbums", {
+  enumerable: true,
+  get: function get() {
+    return _AlbumsGallery.default;
+  }
+});
+Object.defineProperty(exports, "VidepSpace", {
+  enumerable: true,
+  get: function get() {
+    return _VideoSpace.default;
+  }
+});
+Object.defineProperty(exports, "VideoAlbum", {
+  enumerable: true,
+  get: function get() {
+    return _ViewAlbum3.default;
+  }
+});
+
+var _Chat = _interopRequireDefault(require("./stories/Chat/Chat"));
+
+var _CreateForm = _interopRequireDefault(require("./stories/Enrollment/Admin/CreateForm/CreateForm"));
+
+var _DetailedForm = _interopRequireDefault(require("./stories/Enrollment/Admin/DetailedForm/DetailedForm"));
+
+var _ViewForms = _interopRequireDefault(require("./stories/Enrollment/Admin/ViewForms/ViewForms"));
+
+var _FillForm = _interopRequireDefault(require("./stories/Enrollment/Guest/FillForm/FillForm"));
+
+var _CreateEvent = _interopRequireDefault(require("./stories/Events/CreateEvent/CreateEvent"));
+
+var _Event = _interopRequireDefault(require("./stories/Events/Event/Event"));
+
+var _EventsList = _interopRequireDefault(require("./stories/Events/EventsList/EventsList"));
+
+var _CreateFolder = _interopRequireDefault(require("./stories/Library/CreateFolder/CreateFolder"));
+
+var _Folders = _interopRequireDefault(require("./stories/Library/Folders/Folders"));
+
+var _Notes = _interopRequireDefault(require("./stories/Library/Notes/Notes"));
+
+var _ViewNote = _interopRequireDefault(require("./stories/Library/ViewNote/ViewNote"));
+
+var _AddSong = _interopRequireDefault(require("./stories/Forms/AddSong/AddSong"));
+
+var _CreateMusicAlbum = _interopRequireDefault(require("./stories/Forms/CreateMusicAlbum/CreateMusicAlbum"));
+
+var _ViewAlbum = _interopRequireDefault(require("./stories/Music Album/ViewAlbum/ViewAlbum"));
+
+var _ViewAlbums = _interopRequireDefault(require("./stories/Music Album/ViewAlbums/ViewAlbums"));
+
+var _CreateAlbum = _interopRequireDefault(require("./stories/Forms/CreateAlbum/CreateAlbum"));
+
+var _AddPhoto = _interopRequireDefault(require("./stories/Forms/AddPhoto/AddPhoto"));
+
+var _ViewAlbum2 = _interopRequireDefault(require("./stories/Photo Album/ViewAlbum/ViewAlbum"));
+
+var _ViewAlbums2 = _interopRequireDefault(require("./stories/Photo Album/ViewAlbums/ViewAlbums"));
+
+var _BaseMaterial = _interopRequireDefault(require("./stories/Containers/BaseMaterial"));
+
+var _Body = _interopRequireDefault(require("./stories/Layout/Body/Body"));
+
+var _Center = _interopRequireDefault(require("./stories/Layout/Center/Center"));
+
+var _Head = _interopRequireDefault(require("./stories/Layout/Head/Head"));
+
+var _Left = _interopRequireDefault(require("./stories/Layout/Left/Left"));
+
+var _Right = _interopRequireDefault(require("./stories/Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("./stories/Navbar/Navbar"));
+
+var _Gallery = _interopRequireDefault(require("./stories/Reusable Components/Gallery/Gallery"));
+
+var _ReusableList = _interopRequireDefault(require("./stories/Reusable Components/ReusableList/ReusableList"));
+
+var _ReusableHeader = _interopRequireDefault(require("./stories/Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _SpaceContainer = _interopRequireDefault(require("./stories/Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _Spinner = _interopRequireDefault(require("./stories/Reusable Components/Spinner/Spinner"));
+
+var _WidgetContainer = _interopRequireDefault(require("./stories/Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _CreateVideoAlbum = _interopRequireDefault(require("./stories/Forms/CreateVideoAlbum/CreateVideoAlbum"));
+
+var _AddVideo = _interopRequireDefault(require("./stories/Forms/AddVideo/AddVideo"));
+
+var _AlbumsGallery = _interopRequireDefault(require("./stories/VideoAlbum/AlbumsGallery/AlbumsGallery"));
+
+var _VideoSpace = _interopRequireDefault(require("./stories/VideoAlbum/VideoSpace/VideoSpace"));
+
+var _ViewAlbum3 = _interopRequireDefault(require("./stories/VideoAlbum/ViewAlbum/ViewAlbum"));

package/dist/stories/API/API.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
+
+var _templateObject;
+
+var API = function API(props) {
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(Image, {
+    src: props.image_src,
+    alt: props.image_alt
+  }), /*#__PURE__*/_react.default.createElement(Text, null, props.text));
+};
+
+var Container = (0, _styledComponents.default)(_BaseMaterial.default)({
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  "align-items": "center",
+  "flex-direction": "column",
+  "justify-content": "center"
+});
+
+var Text = _styledComponents.default.p(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n"])));
+
+var Image = (0, _styledComponents.default)("img")({
+  width: "100%",
+  "object-fit": "cover"
+});
+API.defaultProps = {
+  image_src: "https://play.teleporthq.io/static/svg/default-img.svg",
+  image_alt: "image",
+  text: "Text"
+};
+var _default = API;
+exports.default = _default;

package/dist/stories/API/API.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _API = _interopRequireDefault(require("./API"));
+
+var _default = {
+  title: 'API Statuses/API',
+  component: _API.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_API.default, args);
+};
+
+exports.Default = Default;

package/dist/stories/Agora/Call/Call.js

@@ -0,0 +1,316 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _agoraRtcReact = require("agora-rtc-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Controls = _interopRequireDefault(require("../Controls/Controls"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var rtc = {
+  localAudioTrack: null,
+  localVideoTrack: null,
+  localAudioReady: null,
+  localVideoReady: null
+};
+var config = {
+  mode: 'rtc',
+  codec: 'vp8'
+};
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  token: '0063f54ddbde65d4f0ab9a9f5a46baa4310IAALsgGjVTL2Av/GANIuUU61cNObFj9T7krqkn2UG1uXeHlbHbAAAAAAEAAw9+/yVoJUYQEAAQBWglRh'
+};
+
+var createCameraTrack = function createCameraTrack(videoDeviceId) {
+  return (0, _agoraRtcReact.createCameraVideoTrack)({
+    encoderConfig: '90p_1',
+    deviceId: videoDeviceId
+  });
+};
+
+var createMicrophoneTrack = function createMicrophoneTrack(audioDeviceId) {
+  return (0, _agoraRtcReact.createMicrophoneAudioTrack)({
+    deviceId: audioDeviceId
+  });
+};
+
+var useClient = (0, _agoraRtcReact.createClient)(config);
+
+var Call = function Call(_ref) {
+  var videoDeviceId = _ref.videoDeviceId,
+      audioDeviceId = _ref.audioDeviceId,
+      token = _ref.token,
+      uid = _ref.uid;
+  var client = useClient();
+  var localAudio = createMicrophoneTrack(audioDeviceId)();
+  rtc.localAudioReady = localAudio.ready;
+  rtc.localAudioTrack = localAudio.track;
+  var localVideo = createCameraTrack(videoDeviceId)();
+  rtc.localVideoTrack = localVideo.track;
+  rtc.localVideoReady = localVideo.ready;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      allCalls = _useState2[0],
+      setAllCalls = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      stageUserId = _useState4[0],
+      setStageUserId = _useState4[1];
+
+  var leaveChannel = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return client.leave();
+
+            case 2:
+              client.removeAllListeners();
+              rtc.localAudioTrack.close();
+              rtc.localVideoTrack.close();
+              client.remoteUsers.forEach(function (user) {
+                user.videoTrack.close();
+                user.audioTrack.close();
+              });
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function leaveChannel() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var init = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var localUser;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                client.on('user-published', /*#__PURE__*/function () {
+                  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(user, mediaType) {
+                    var remoteUser;
+                    return _regenerator.default.wrap(function _callee2$(_context2) {
+                      while (1) {
+                        switch (_context2.prev = _context2.next) {
+                          case 0:
+                            _context2.next = 2;
+                            return client.subscribe(user, mediaType);
+
+                          case 2:
+                            if (mediaType === 'video') {
+                              remoteUser = {
+                                uid: user.uid,
+                                videoTrack: user.videoTrack,
+                                audioTrack: user.audioTrack
+                              };
+                              setAllCalls(function (allCalls) {
+                                return [].concat((0, _toConsumableArray2.default)(allCalls), [remoteUser]);
+                              });
+                            }
+
+                            if (mediaType === 'audio') {
+                              user.audioTrack.play();
+                            }
+
+                          case 4:
+                          case "end":
+                            return _context2.stop();
+                        }
+                      }
+                    }, _callee2);
+                  }));
+
+                  return function (_x, _x2) {
+                    return _ref4.apply(this, arguments);
+                  };
+                }());
+                client.on('user-unpublished', function (user, type) {
+                  if (type === 'audio') {
+                    var _user$audioTrack;
+
+                    (_user$audioTrack = user.audioTrack) === null || _user$audioTrack === void 0 ? void 0 : _user$audioTrack.stop();
+                  }
+
+                  if (type === 'video') {
+                    setAllCalls(function (users) {
+                      return users.filter(function (u) {
+                        return u.uid !== user.uid;
+                      });
+                    });
+                  }
+                });
+                _context3.next = 4;
+                return client.join(options.appid, options.channel, token || null, uid);
+
+              case 4:
+                localUser = {
+                  uid: client.uid,
+                  videoTrack: rtc.localVideoTrack,
+                  audioTrack: rtc.localAudioTrack
+                };
+                _context3.next = 7;
+                return client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
+
+              case 7:
+                setStageUserId(localUser.uid);
+                setAllCalls(function (allCalls) {
+                  return [].concat((0, _toConsumableArray2.default)(allCalls), [localUser]);
+                });
+
+              case 9:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      return function init() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    if (rtc.localVideoReady && rtc.localAudioReady && rtc.localVideoTrack && rtc.localAudioTrack) {
+      init();
+    }
+  }, [client, rtc.localAudioTrack, rtc.localVideoTrack, rtc.localAudioReady, rtc.localVideoReady]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      rtc.localAudioTrack.close();
+      rtc.localVideoTrack.close();
+      rtc.localAudioReady = undefined;
+      rtc.localVideoReady = undefined;
+      rtc.localVideoTrack = undefined;
+      rtc.localAudioTrack = undefined; // setUsers([]);
+
+      setAllCalls([]);
+      client.leave();
+      client.removeAllListeners();
+    };
+  }, []);
+
+  var getStageUsers = function getStageUsers() {
+    var stage = allCalls.find(function (c) {
+      return c.uid === stageUserId;
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, stage && /*#__PURE__*/_react.default.createElement(_agoraRtcReact.AgoraVideoPlayer, {
+      className: "vid",
+      videoTrack: stage === null || stage === void 0 ? void 0 : stage.videoTrack,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }));
+  };
+
+  var getNonStageUsers = function getNonStageUsers() {
+    var nonStage = allCalls.filter(function (c) {
+      return c.uid !== stageUserId;
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, nonStage.length > 0 && nonStage.map(function (user) {
+      return /*#__PURE__*/_react.default.createElement(_agoraRtcReact.AgoraVideoPlayer, {
+        key: user === null || user === void 0 ? void 0 : user.uid,
+        videoTrack: user === null || user === void 0 ? void 0 : user.videoTrack,
+        style: {
+          height: '100%',
+          width: '30%'
+        },
+        onClick: function onClick(e) {
+          setStageUserId(user.uid);
+        }
+      });
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Cleaner Video Call"), /*#__PURE__*/_react.default.createElement(_Controls.default, {
+    token: token,
+    muteVideo: function muteVideo(mute) {
+      if (mute) {
+        rtc.localAudioTrack.setVolume(0);
+      } else {
+        rtc.localAudioTrack.setVolume(100);
+      }
+    },
+    pauseVideo: /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(pauseVideo) {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                if (!pauseVideo) {
+                  _context4.next = 5;
+                  break;
+                }
+
+                _context4.next = 3;
+                return rtc.localVideoTrack.setEnabled(false);
+
+              case 3:
+                _context4.next = 7;
+                break;
+
+              case 5:
+                _context4.next = 7;
+                return rtc.localVideoTrack.setEnabled(true);
+
+              case 7:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x3) {
+        return _ref5.apply(this, arguments);
+      };
+    }()
+  }), /*#__PURE__*/_react.default.createElement(Videos, null, getStageUsers()), /*#__PURE__*/_react.default.createElement(RemoteVideos, null, getNonStageUsers()));
+};
+
+var Videos = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  height: 44vh;\n  width: 40vw;\n  margin: auto;\n  align-self: flex-start;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(440px, ifr));\n  justify-items: center;\n  align-items: center;\n"])));
+
+var RemoteVideos = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 22vh;\n  width: 40vw;\n  display: flex;\n  margin-top: 5px;\n  flex-wrap: wrap;\n  gap: 3%;\n"])));
+
+var Video = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 30%;\n  height: 100%;\n  background-color: blue;\n"])));
+
+var _default = Call;
+exports.default = _default;