@mohamed-karawia/library 0.1.0

package/dist/stories/VideoAlbum/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/VideoAlbum/VideoPlayer/VideoPlayer.stories.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Video = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _VideoPlayer = _interopRequireDefault(require("./VideoPlayer"));
+
+var _util = require("../../helpers/util");
+
+var _music = _interopRequireDefault(require("../../assets/images/music1.jpg"));
+
+var _music2 = _interopRequireDefault(require("../../assets/images/music2.jpg"));
+
+var _music3 = _interopRequireDefault(require("../../assets/images/music3.jpg"));
+
+var _music4 = _interopRequireDefault(require("../../assets/images/music4.jpg"));
+
+var _music5 = _interopRequireDefault(require("../../assets/images/music5.jpg"));
+
+var _music6 = _interopRequireDefault(require("../../assets/images/music6.jpg"));
+
+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 _default = {
+  title: 'Video Album/Video Player',
+  component: _VideoPlayer.default
+};
+exports.default = _default;
+
+var Video = function Video(args) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentVideo = _useState2[0],
+      setCurrentVideo = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([{
+    index: 0,
+    img: _music4.default,
+    src: 'https://www.youtube.com/watch?v=hl5Kt0BxTa8',
+    title: 'Plans We Made',
+    description: 'Son Lux',
+    time: '5:20'
+  }, {
+    index: 2,
+    img: _music6.default,
+    src: 'https://www.youtube.com/watch?v=EYyarcp5LtU',
+    title: 'Still Loving You',
+    description: 'Scorpions',
+    time: '4:20'
+  }, {
+    index: 1,
+    img: _music5.default,
+    src: 'https://www.youtube.com/watch?v=vlaQu_rmIQo',
+    title: 'Night',
+    description: 'Frank Ocean',
+    time: '5:20'
+  }, {
+    index: 3,
+    img: _music.default,
+    src: 'https://www.youtube.com/watch?v=VNsd8Yo5zvc',
+    title: 'Somebody Else',
+    description: '1975',
+    time: '5:20'
+  }, {
+    index: 4,
+    img: _music3.default,
+    src: 'https://www.youtube.com/watch?v=CD-E-LDc384',
+    title: 'Enter Sandman',
+    description: 'Metallica',
+    time: '5:20'
+  }, {
+    index: 5,
+    img: _music2.default,
+    src: 'https://www.youtube.com/watch?v=8SbUC-UaAxE',
+    title: 'November Rain',
+    description: "Guns N' Roses",
+    time: '5:20'
+  }]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      album = _useState4[0],
+      setAlbum = _useState4[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'play':
+        onPlayVideo(index);
+        break;
+
+      case 'delete':
+        deleteSonngFromAlbum(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var nextVideo = function nextVideo() {
+    if (currentVideo < album.length - 1) {
+      setCurrentVideo(currentVideo + 1);
+    } else {
+      setCurrentVideo(0);
+    }
+  };
+
+  var prevVideo = function prevVideo() {
+    if (currentVideo !== 0) {
+      setCurrentVideo(currentVideo - 1);
+    }
+  };
+
+  var onPlayVideo = function onPlayVideo(index) {
+    setCurrentVideo(index);
+  };
+
+  var onAddSong = function onAddSong(song) {
+    var newSong = {
+      song: song.song.file,
+      img: song.cover.meta.previewUrl,
+      title: song.title,
+      description: song.artist,
+      time: new Date(song.song.meta.duration * 1000).toISOString().substr(14, 5)
+    };
+    setAlbum((0, _util.addObjectToArray)(album, newSong));
+  };
+
+  var deleteSonngFromAlbum = function deleteSonngFromAlbum(index) {
+    setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, Object.assign({
+    iconsColor: "white",
+    src: album[currentVideo].src,
+    nextVideo: nextVideo,
+    prevVideo: prevVideo
+  }, args));
+};
+
+exports.Video = Video;

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

@@ -0,0 +1,110 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer/VideoPlayer"));
+
+var _Comments = _interopRequireDefault(require("../Comments/Comments"));
+
+var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTextInput/RichTextInput"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+
+var VideoSpace = function VideoSpace(_ref) {
+  var title = _ref.title,
+      discription = _ref.discription,
+      date = _ref.date,
+      users = _ref.users,
+      iconsColor = _ref.iconsColor,
+      backgroundColor = _ref.backgroundColor,
+      detailsPadding = _ref.detailsPadding,
+      titleFontSize = _ref.titleFontSize,
+      titleColor = _ref.titleColor,
+      dateFontSize = _ref.dateFontSize,
+      dateColor = _ref.dateColor,
+      discFontSize = _ref.discFontSize,
+      discColor = _ref.discColor,
+      comments = _ref.comments,
+      commentBackgroundColor = _ref.commentBackgroundColor,
+      commentTitleColor = _ref.commentTitleColor,
+      commentTitleFontSize = _ref.commentTitleFontSize,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+    iconsColor: iconsColor
+  }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
+    detailsPadding: detailsPadding
+  }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {
+    titleFontSize: titleFontSize,
+    titleColor: titleColor
+  }, title), /*#__PURE__*/_react.default.createElement(Date, {
+    dateFontSize: dateFontSize,
+    dateColor: dateColor
+  }, date)), /*#__PURE__*/_react.default.createElement(Discription, {
+    discFontSize: discFontSize,
+    discColor: discColor
+  }, discription)), /*#__PURE__*/_react.default.createElement(_Comments.default, {
+    cardBackgroundColor: commentBackgroundColor,
+    comments: comments,
+    cardTitleColor: commentTitleColor,
+    cardTitleFontSize: commentTitleFontSize
+  }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    users: users
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+});
+
+var VideoDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n"])), function (_ref3) {
+  var detailsPadding = _ref3.detailsPadding;
+  return detailsPadding;
+});
+
+var Top = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n"])));
+
+var Title = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n    flex-grow: 1;\n    margin: 0;\n"])), function (_ref4) {
+  var titleFontSize = _ref4.titleFontSize;
+  return titleFontSize;
+}, function (_ref5) {
+  var titleColor = _ref5.titleColor;
+  return titleColor;
+});
+
+var Date = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n"])), function (_ref6) {
+  var dateFontSize = _ref6.dateFontSize;
+  return dateFontSize;
+}, function (_ref7) {
+  var dateColor = _ref7.dateColor;
+  return dateColor;
+});
+
+var Discription = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n"])), function (_ref8) {
+  var discFontSize = _ref8.discFontSize;
+  return discFontSize;
+}, function (_ref9) {
+  var discColor = _ref9.discColor;
+  return discColor;
+});
+
+VideoSpace.defaultProps = {};
+var _default = VideoSpace;
+exports.default = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Space = exports.default = void 0;
+
+var _VideoSpace = _interopRequireDefault(require("./VideoSpace"));
+
+var _default = {
+  title: 'Video Album/Video Space',
+  component: _VideoSpace.default
+};
+exports.default = _default;
+var comments = [{
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}];
+
+var Space = function Space(args) {
+  return /*#__PURE__*/React.createElement(_VideoSpace.default, Object.assign({
+    backgroundColor: "white",
+    title: "Video Title",
+    discription: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium placeat nostrum tempora suscipit laborum quibusdam.",
+    date: "10/11/2022",
+    comments: comments
+  }, args));
+};
+
+exports.Space = Space;