@mohamed-karawia/library 0.1.20 → 0.1.23

package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js

@@ -37,7 +37,7 @@ var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize", "community"];
 
 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); }
 
@@ -68,6 +68,7 @@ var VideoSpace = function VideoSpace(_ref) {
       commentBackgroundColor = _ref.commentBackgroundColor,
       commentTitleColor = _ref.commentTitleColor,
       commentTitleFontSize = _ref.commentTitleFontSize,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -76,7 +77,10 @@ var VideoSpace = function VideoSpace(_ref) {
       setShowConfigModal = _useState2[1];
 
   var _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(VideoSpace, {
-    videoSrc: videoSrc
+    users: users,
+    preview: true,
+    videoSrc: videoSrc,
+    comments: comments
   })),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       centerContext = _useState4[0],
@@ -84,7 +88,10 @@ var VideoSpace = function VideoSpace(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(VideoSpace, Object.assign({
-      videoSrc: videoSrc
+      users: users,
+      preview: true,
+      videoSrc: videoSrc,
+      comments: comments
     }, values)));
   };
 
@@ -109,6 +116,11 @@ var VideoSpace = function VideoSpace(_ref) {
     }
   };
 
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
@@ -138,9 +150,7 @@ var VideoSpace = function VideoSpace(_ref) {
     users: users
   }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -160,6 +170,7 @@ var VideoSpace = function VideoSpace(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js

@@ -37,7 +37,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor", "community"];
 
 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); }
 
@@ -68,6 +68,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       cardTitleColor = _ref.cardTitleColor,
       cardTitleFontSize = _ref.cardTitleFontSize,
       descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -81,6 +82,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       setShowConfigModal = _useState4[1];
 
   var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    preview: true,
     album: album
   })),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -90,6 +92,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   var formChanged = function formChanged(values) {
     console.log('context changed');
     setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      preview: true,
       album: album
     }, values)));
   };
@@ -101,16 +104,6 @@ var ViewAlbum = function ViewAlbum(_ref) {
     title: 'Context',
     id: 'community'
   }];
-  var sections = [{
-    title: 'Styles',
-    data: [{
-      title: 'Styling',
-      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
-        title: "Video Album Config",
-        tabs: tabs
-      })
-    }]
-  }];
   var cardStyles = {
     darkOnHover: true,
     cardBackgroundColor: cardBackgroundColor,
@@ -132,17 +125,19 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   var onHeaderIconClicked = function onHeaderIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      case 'config':
-        setShowConfigModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -159,6 +154,11 @@ var ViewAlbum = function ViewAlbum(_ref) {
     setShowModal(false);
   };
 
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
     galleryTitle: props.title || "Video Album",
     data: album,
@@ -182,9 +182,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     cancelHandler: cancelHandler
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -201,6 +199,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

package/dist/stories/Widgets/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,235 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactPlayer = _interopRequireDefault(require("react-player"));
+
+var _reactTimeSeekSlider = require("react-time-seek-slider");
+
+require("react-time-seek-slider/lib/ui-time-seek-slider.css");
+
+var _rcSlider = _interopRequireDefault(require("rc-slider"));
+
+var _ai = require("react-icons/ai");
+
+var _bi = require("react-icons/bi");
+
+var _im = require("react-icons/im");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["src", "iconsColor", "onHoverIconsColor"];
+
+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 VideoPlayer = function VideoPlayer(_ref) {
+  var src = _ref.src,
+      iconsColor = _ref.iconsColor,
+      onHoverIconsColor = _ref.onHoverIconsColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var player = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      play = _useState2[0],
+      setPlay = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      duration = _useState4[0],
+      setDuration = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      progress = _useState6[0],
+      setProgress = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(1),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      volume = _useState8[0],
+      setVolume = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      muted = _useState10[0],
+      setMuted = _useState10[1];
+
+  var handleUserKeyPress = (0, _react.useCallback)(function (event) {
+    var keyCode = event.keyCode;
+
+    switch (keyCode) {
+      case 39:
+        goForward();
+        break;
+
+      case 37:
+        goBack();
+        break;
+
+      case 32:
+        setPlay(!play);
+        break;
+
+      default:
+        break;
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("keydown", handleUserKeyPress);
+  }, [handleUserKeyPress, play]);
+
+  var onProgress = function onProgress(_ref2) {
+    var playedSeconds = _ref2.playedSeconds;
+    setProgress(playedSeconds);
+  };
+
+  var onDuration = function onDuration(duration) {
+    setDuration(duration);
+  };
+
+  var changeTimeStamp = function changeTimeStamp(time) {
+    setProgress(time);
+    player.current.seekTo(time, 'seconds');
+  };
+
+  var onVideoEnd = function onVideoEnd() {
+    props.nextVideo();
+  };
+
+  var goBack = function goBack() {
+    changeTimeStamp(progress - 5);
+  };
+
+  var goForward = function goForward() {
+    changeTimeStamp(progress + 5);
+  };
+
+  var prevVideo = function prevVideo() {
+    props.prevVideo();
+  };
+
+  var nextVideo = function nextVideo() {
+    props.nextVideo();
+  };
+
+  var toggleMute = function toggleMute() {
+    setMuted(!muted);
+  };
+
+  var changeVolume = function changeVolume(value) {
+    setVolume(value / 100);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    iconsColor: iconsColor
+  }, /*#__PURE__*/_react.default.createElement(_reactPlayer.default, {
+    ref: player,
+    playing: play,
+    volume: volume,
+    muted: muted,
+    onPlay: function onPlay() {
+      return setPlay(true);
+    },
+    onPause: function onPause() {
+      return setPlay(false);
+    },
+    onEnded: onVideoEnd,
+    width: "100%",
+    onProgress: onProgress,
+    onDuration: onDuration,
+    url: src
+  }), /*#__PURE__*/_react.default.createElement(Controls, null, /*#__PURE__*/_react.default.createElement(Left, {
+    iconsColor: iconsColor,
+    onHoverIconsColor: onHoverIconsColor
+  }, /*#__PURE__*/_react.default.createElement(_bi.BiSkipPrevious, {
+    onClick: prevVideo
+  }), /*#__PURE__*/_react.default.createElement(_im.ImBackward2, {
+    onClick: function onClick() {
+      return goBack();
+    }
+  }), /*#__PURE__*/_react.default.createElement(PlayContainer, {
+    onClick: function onClick() {
+      return setPlay(!play);
+    }
+  }, play ? /*#__PURE__*/_react.default.createElement(_ai.AiFillPauseCircle, null) : /*#__PURE__*/_react.default.createElement(_ai.AiFillPlayCircle, null)), /*#__PURE__*/_react.default.createElement(_im.ImForward3, {
+    onClick: function onClick() {
+      return goForward();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_bi.BiSkipNext, {
+    onClick: nextVideo
+  })), /*#__PURE__*/_react.default.createElement(Center, null, /*#__PURE__*/_react.default.createElement(_reactTimeSeekSlider.TimeSeekSlider, {
+    max: duration,
+    currentTime: progress,
+    progress: 400,
+    onSeeking: function onSeeking(time) {
+      changeTimeStamp(time);
+    },
+    offset: 20,
+    secondsPrefix: "00:00:",
+    minutesPrefix: "00:"
+  })), /*#__PURE__*/_react.default.createElement(Right, {
+    iconsColor: iconsColor,
+    onHoverIconsColor: onHoverIconsColor
+  }, !muted ? /*#__PURE__*/_react.default.createElement(_ai.AiFillSound, {
+    onClick: toggleMute
+  }) : /*#__PURE__*/_react.default.createElement(_bi.BiVolumeMute, {
+    onClick: toggleMute
+  }), /*#__PURE__*/_react.default.createElement(_rcSlider.default, {
+    min: 0,
+    max: 100,
+    onChange: changeVolume
+  }))));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    position: relative;\n\n    .ui-time-seek-slider .track .main .connect{\n        background-color: ", ";\n    }\n\n    .ui-time-seek-slider .thumb .handler{\n        background-color: ", ";\n    }\n"])), function (_ref3) {
+  var iconsColor = _ref3.iconsColor;
+  return iconsColor;
+}, function (_ref4) {
+  var iconsColor = _ref4.iconsColor;
+  return iconsColor;
+});
+
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    box-sizing: border-box;\n    width: 100%;\n    background-color: #000000c0;\n    height: 40px;\n    position: absolute;\n    bottom: 0;\n    display: flex;\n    padding: 0 10px;\n    gap: 10px;\n"])));
+
+var Left = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    \n    svg{\n        width: 25px;\n        height: 25px;\n        fill: ", ";\n        cursor: pointer;\n        &:hover{\n            fill: ", ";\n        }\n    }\n"])), function (_ref5) {
+  var iconsColor = _ref5.iconsColor;
+  return iconsColor;
+}, function (_ref6) {
+  var onHoverIconsColor = _ref6.onHoverIconsColor;
+  return onHoverIconsColor;
+});
+
+var PlayContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n"])));
+
+var Center = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 70%;\n    align-self: center;\n"])));
+
+var Right = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex: 2;\n    \n    svg{\n        width: 25px;\n        height: 25px;\n        fill: ", ";\n        cursor: pointer;\n        &:hover{\n            fill: ", ";\n        }\n    }\n"])), function (_ref7) {
+  var iconsColor = _ref7.iconsColor;
+  return iconsColor;
+}, function (_ref8) {
+  var onHoverIconsColor = _ref8.onHoverIconsColor;
+  return onHoverIconsColor;
+});
+
+VideoPlayer.defaultProps = {
+  src: 'https://www.youtube.com/watch?v=vETUpJ88cfA'
+};
+var _default = VideoPlayer;
+exports.default = _default;

package/dist/stories/helpers/util.js

@@ -37,11 +37,11 @@ var _MusicPlayerWidget = _interopRequireDefault(require("../Widgets/MusicPlayerW
 
 var _LogoWidget = _interopRequireDefault(require("../Widgets/LogoWidget/LogoWidget"));
 
-var _VideoPlayer = _interopRequireDefault(require("../VideoAlbum/VideoPlayer/VideoPlayer"));
+var _VideoPlayer = _interopRequireDefault(require("../Widgets/VideoPlayer/VideoPlayer"));
 
-var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
+var _NotesList = _interopRequireDefault(require("../Spaces/NotesList/NotesList"));
 
-var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
+var _ViewFolders = _interopRequireDefault(require("../Spaces/ViewFolders/ViewFolders"));
 
 var _UsersWidget = _interopRequireDefault(require("../Widgets/UsersWidget/UsersWidget"));
 
@@ -49,25 +49,25 @@ var _SpacesListWidget = _interopRequireDefault(require("../Widgets/SpacesListWid
 
 var _Navbar = _interopRequireDefault(require("../Navbar/Navbar"));
 
-var _ViewAlbums = _interopRequireDefault(require("../Music Album/ViewAlbums/ViewAlbums"));
+var _ViewMusicAlbums = _interopRequireDefault(require("../Spaces/ViewMusicAlbums/ViewMusicAlbums"));
 
-var _ViewAlbum = _interopRequireDefault(require("../Music Album/ViewAlbum/ViewAlbum"));
+var _ViewMusicAlbumList = _interopRequireDefault(require("../Spaces/ViewMusicAlbumList/ViewMusicAlbumList"));
 
-var _ViewAlbums2 = _interopRequireDefault(require("../Photo Album/ViewAlbums/ViewAlbums"));
+var _ViewPhotoAlbums = _interopRequireDefault(require("../Spaces/ViewPhotoAlbums/ViewPhotoAlbums"));
 
-var _ViewAlbum2 = _interopRequireDefault(require("../Photo Album/ViewAlbum/ViewAlbum"));
+var _ViewPhotoAlbumList = _interopRequireDefault(require("../Spaces/ViewPhotoAlbumList/ViewPhotoAlbumList"));
 
-var _Chat = _interopRequireDefault(require("../Chat/Chat"));
+var _Chat = _interopRequireDefault(require("../Spaces/Chat/Chat"));
 
-var _EventsList = _interopRequireDefault(require("../Events/EventsList/EventsList"));
+var _EventsList = _interopRequireDefault(require("../Spaces/EventsList/EventsList"));
 
-var _Event = _interopRequireDefault(require("../Events/Event/Event"));
+var _Event = _interopRequireDefault(require("../Spaces/ViewEvent/Event"));
 
-var _VideoSpace = _interopRequireDefault(require("../VideoAlbum/VideoSpace/VideoSpace"));
+var _ViewVideo = _interopRequireDefault(require("../Spaces/ViewVideo/ViewVideo"));
 
-var _AlbumsGallery = _interopRequireDefault(require("../VideoAlbum/AlbumsGallery/AlbumsGallery"));
+var _ViewVideoAlbums = _interopRequireDefault(require("../Spaces/ViewVideoAlbums/ViewVideoAlbums"));
 
-var _ViewAlbum3 = _interopRequireDefault(require("../VideoAlbum/ViewAlbum/ViewAlbum"));
+var _ViewVideoAlbumList = _interopRequireDefault(require("../Spaces/ViewVideoAlbumList/ViewVideoAlbumList"));
 
 // Cards
 // Widgets
@@ -211,8 +211,8 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
     'music player': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, props),
     'logo': /*#__PURE__*/_react.default.createElement(_LogoWidget.default, props),
     'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props),
-    'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, props),
-    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props),
+    'notes': /*#__PURE__*/_react.default.createElement(_NotesList.default, props),
+    'folders': /*#__PURE__*/_react.default.createElement(_ViewFolders.default, props),
     'users': /*#__PURE__*/_react.default.createElement(_UsersWidget.default, props),
     'profile': /*#__PURE__*/_react.default.createElement(_CardStyle2.default, props),
     'spaces-list': /*#__PURE__*/_react.default.createElement(_SpacesListWidget.default, Object.assign({
@@ -229,20 +229,20 @@ exports.getWidgetType = getWidgetType;
 var getComponentType = function getComponentType(componentType, componentProps, stylingProps) {
   var componentTypes = {
     'Navbar': /*#__PURE__*/_react.default.createElement(_Navbar.default, Object.assign({}, componentProps, stylingProps)),
-    'MusicAlbums': /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, Object.assign({}, componentProps, stylingProps)),
-    'MusicAlbum': /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, Object.assign({}, componentProps, stylingProps)),
-    'PhotoAlbum': /*#__PURE__*/_react.default.createElement(_ViewAlbum2.default, Object.assign({}, componentProps, stylingProps)),
-    'PhotoAlbums': /*#__PURE__*/_react.default.createElement(_ViewAlbums2.default, Object.assign({}, componentProps, stylingProps)),
+    'MusicAlbums': /*#__PURE__*/_react.default.createElement(_ViewMusicAlbums.default, Object.assign({}, componentProps, stylingProps)),
+    'MusicAlbum': /*#__PURE__*/_react.default.createElement(_ViewMusicAlbumList.default, Object.assign({}, componentProps, stylingProps)),
+    'PhotoAlbum': /*#__PURE__*/_react.default.createElement(_ViewPhotoAlbumList.default, Object.assign({}, componentProps, stylingProps)),
+    'PhotoAlbums': /*#__PURE__*/_react.default.createElement(_ViewPhotoAlbums.default, Object.assign({}, componentProps, stylingProps)),
     'MusicPlayer': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, Object.assign({}, componentProps, stylingProps)),
-    'Folders': /*#__PURE__*/_react.default.createElement(_Folders.default, Object.assign({}, componentProps, stylingProps)),
-    'Notes': /*#__PURE__*/_react.default.createElement(_Notes.default, Object.assign({}, componentProps, stylingProps)),
+    'Folders': /*#__PURE__*/_react.default.createElement(_ViewFolders.default, Object.assign({}, componentProps, stylingProps)),
+    'Notes': /*#__PURE__*/_react.default.createElement(_NotesList.default, Object.assign({}, componentProps, stylingProps)),
     'Spaces-List': /*#__PURE__*/_react.default.createElement(_SpacesListWidget.default, Object.assign({}, componentProps, stylingProps)),
     'Chat': /*#__PURE__*/_react.default.createElement(_Chat.default, Object.assign({}, componentProps, stylingProps)),
     'Events': /*#__PURE__*/_react.default.createElement(_EventsList.default, Object.assign({}, componentProps, stylingProps)),
     'Event': /*#__PURE__*/_react.default.createElement(_Event.default, Object.assign({}, componentProps, stylingProps)),
-    'Video-Space': /*#__PURE__*/_react.default.createElement(_VideoSpace.default, Object.assign({}, componentProps, stylingProps)),
-    'Video-Albums': /*#__PURE__*/_react.default.createElement(_AlbumsGallery.default, Object.assign({}, componentProps, stylingProps)),
-    'Video-Album': /*#__PURE__*/_react.default.createElement(_ViewAlbum3.default, Object.assign({}, componentProps, stylingProps))
+    'Video-Space': /*#__PURE__*/_react.default.createElement(_ViewVideo.default, Object.assign({}, componentProps, stylingProps)),
+    'Video-Albums': /*#__PURE__*/_react.default.createElement(_ViewVideoAlbums.default, Object.assign({}, componentProps, stylingProps)),
+    'Video-Album': /*#__PURE__*/_react.default.createElement(_ViewVideoAlbumList.default, Object.assign({}, componentProps, stylingProps))
   };
   return componentTypes[componentType];
 };

package/dist/stories/store/actions/actions.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addEvent = void 0;
+
+var addEvent = function addEvent(state, action) {
+  // state.spaces[1].spaceProps.events = [...state.spaces[1].spaceProps.events, action.payload]
+  alert('testtttt'); // console.log(action)
+  // alert
+
+  console.log(action);
+};
+
+exports.addEvent = addEvent;

package/dist/stories/store/communities.js

@@ -81,35 +81,33 @@ var community = {
         }]
       }],
       styles: {
-        header: {},
-        body: {
-          sectionHeaderStyles: {
-            padding: 2,
-            headerBackground: "#00ADC4",
-            titleColor: "white"
-          },
-          customCardStyles: {
-            cardPadding: 6,
-            cardTitleFontSize: 15,
-            cardBackgroundColor: "white",
-            cardTitleColor: "#00ADC4",
-            cardBorderSize: 1,
-            cardBorderColor: "#00ADC4",
-            onHoverBackgroundColor: "#d3d3d3",
-            controlsStyles: {
-              showOnHover: true,
-              iconColor: "#00ADC4"
-            }
-          },
-          borderRadius: 10,
-          primaryColor: "#00ADC4",
-          iconsColor: "#00ADC4",
-          backgroundColor: "white",
-          discColor: "gray",
-          dateColor: "gray",
-          iconColor: "#00ADC4",
-          cardTitleFontSize: 15
-        }
+        headerStyles: {},
+        sectionHeaderStyles: {
+          padding: 2,
+          headerBackground: "#00ADC4",
+          titleColor: "white"
+        },
+        customCardStyles: {
+          cardPadding: 6,
+          cardTitleFontSize: 15,
+          cardBackgroundColor: "white",
+          cardTitleColor: "#00ADC4",
+          cardBorderSize: 1,
+          cardBorderColor: "#00ADC4",
+          onHoverBackgroundColor: "#d3d3d3",
+          controlsStyles: {
+            showOnHover: true,
+            iconColor: "#00ADC4"
+          }
+        },
+        borderRadius: 10,
+        primaryColor: "#00ADC4",
+        iconsColor: "#00ADC4",
+        backgroundColor: "white",
+        discColor: "gray",
+        dateColor: "gray",
+        iconColor: "#00ADC4",
+        cardTitleFontSize: 15
       }
     }
   },