@mohamed-karawia/library 0.1.16 → 0.1.20

package/dist/stories/Reusable Components/Tabs/Tabs.js

@@ -0,0 +1,68 @@
+"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 _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["title", "tabs"];
+
+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 Tabs = function Tabs(_ref) {
+  var title = _ref.title,
+      tabs = _ref.tabs,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(props.children[0]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      child = _useState2[0],
+      setChild = _useState2[1];
+
+  var tabClicked = function tabClicked(tab) {
+    var renderedComponent = props.children.find(function (child) {
+      return child.props.id === tab.id;
+    });
+    setChild(renderedComponent);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(TabsContainer, null, /*#__PURE__*/_react.default.createElement(Menu, null, tabs.map(function (tab) {
+    return /*#__PURE__*/_react.default.createElement(Tab, {
+      onClick: function onClick() {
+        return tabClicked(tab);
+      }
+    }, tab.title);
+  })), child));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n"])));
+
+var TabsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));
+
+var Menu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    background-color: white;\n"])));
+
+var Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 5px 8px;\n    cursor: pointer;\n    background-color: white;\n    border: 1px solid gray;\n    color: #414141;\n    transition: all .3s;\n    &:hover {\n        background-color: #414141;\n        color: white;\n    }\n"])));
+
+Tabs.defaultProps = {};
+var _default = Tabs;
+exports.default = _default;

package/dist/stories/Sections/Sections.js

@@ -31,13 +31,19 @@ var Sections = function Sections(_ref) {
   var sections = _ref.sections,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(sections[0].data[0].component),
+  var _useState = (0, _react.useState)(props.children[0] || props.children),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       center = _useState2[0],
       setCenter = _useState2[1];
 
+  console.log('renders');
+
   var cardClicked = function cardClicked(index, cardProps) {
-    setCenter(cardProps.component);
+    var child = props.children.find(function (child) {
+      return child.props.id === cardProps.id;
+    });
+    setCenter(child);
+    console.log(child);
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Left, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({

package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js

@@ -23,8 +23,18 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _CreateVideoAlbum = _interopRequireDefault(require("../../Forms/CreateVideoAlbum/CreateVideoAlbum"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _VideoAlbumsPreview = _interopRequireDefault(require("../../PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _templateObject;
 
 var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize"];
@@ -42,6 +52,10 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 
 var AlbumsGallery = function AlbumsGallery(_ref) {
@@ -58,6 +72,31 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(AlbumsGallery, {
+    videoAlbums: videoAlbums
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(AlbumsGallery, Object.assign({
+      videoAlbums: videoAlbums
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
   var cardStyles = {
     cardBackgroundColor: cardBackgroundColor,
     cardTitleColor: cardTitleColor,
@@ -83,13 +122,19 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
   };
 
   var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -106,20 +151,12 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
     galleryTitle: "Video Albums",
     data: videoAlbums,
     type: "flat",
     cardStyle: "card-style-6",
     columnsNumber: 3,
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     iconClicked: onIconClicked,
     galleryColumnGap: 10,
     galleryRowGap: 20,
@@ -130,7 +167,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);
@@ -141,7 +178,29 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateVideoAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Video Gallery Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_VideoAlbumsPreview.default, {
+    componentProps: {
+      videoAlbums: videoAlbums,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));

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

@@ -9,22 +9,46 @@ 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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
 var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer/VideoPlayer"));
 
 var _Comments = _interopRequireDefault(require("../Comments/Comments"));
 
 var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTextInput/RichTextInput"));
 
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _bs = require("react-icons/bs");
+
+var _VideoPreview = _interopRequireDefault(require("../../PreviewComponents/VideoPreview/VideoPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
+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"];
 
+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 controls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+
 var VideoSpace = function VideoSpace(_ref) {
   var videoSrc = _ref.videoSrc,
       title = _ref.title,
@@ -45,9 +69,53 @@ var VideoSpace = function VideoSpace(_ref) {
       commentTitleColor = _ref.commentTitleColor,
       commentTitleFontSize = _ref.commentTitleFontSize,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showConfigModal = _useState2[0],
+      setShowConfigModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(VideoSpace, {
+    videoSrc: videoSrc
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      centerContext = _useState4[0],
+      setCenterContext = _useState4[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(VideoSpace, Object.assign({
+      videoSrc: videoSrc
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+
+  var iconClicked = function iconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title || 'Video Space',
+    controls: controls,
+    iconClicked: iconClicked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
     iconsColor: iconsColor,
     src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
@@ -68,7 +136,32 @@ var VideoSpace = function VideoSpace(_ref) {
     cardTitleFontSize: commentTitleFontSize
   }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
     users: users
-  }));
+  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Video Space Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_VideoPreview.default, {
+    componentProps: {
+      title: title,
+      discription: discription,
+      comments: comments,
+      date: date,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {

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

@@ -23,8 +23,18 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _AddVideo = _interopRequireDefault(require("../../Forms/AddVideo/AddVideo"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _VideoAlbumPreview = _interopRequireDefault(require("../../PreviewComponents/VideoAlbumPreview/VideoAlbumPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _templateObject;
 
 var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor"];
@@ -46,6 +56,10 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 
 var ViewAlbum = function ViewAlbum(_ref) {
@@ -61,6 +75,42 @@ var ViewAlbum = function ViewAlbum(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    album: album
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    console.log('context changed');
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      album: album
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    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,
@@ -87,6 +137,10 @@ var ViewAlbum = function ViewAlbum(_ref) {
         setShowModal(true);
         break;
 
+      case 'config':
+        setShowConfigModal(true);
+        break;
+
       default:
         break;
     }
@@ -106,13 +160,10 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Video Album",
+    galleryTitle: props.title || "Video Album",
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
@@ -129,7 +180,29 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddVideo.default, {
     saveHandler: onAddVideo,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Video Album Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_VideoAlbumPreview.default, {
+    componentProps: {
+      album: album,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));

package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js

@@ -19,7 +19,9 @@ var _reactH5AudioPlayer = _interopRequireDefault(require("react-h5-audio-player"
 
 require("react-h5-audio-player/lib/styles.css");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var _excluded = ["currentSong"];
 
@@ -37,7 +39,9 @@ var MusicPlayerWidget = function MusicPlayerWidget(_ref) {
     borderRadius: props.borderRadius
   })), /*#__PURE__*/_react.default.createElement(MusicName, props, props.playlist[currentSong].title), /*#__PURE__*/_react.default.createElement(ArtistName, null, props.playlist[currentSong].description));
 
-  return /*#__PURE__*/_react.default.createElement(MusicPlayer, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: props.title || 'Music Player'
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(MusicPlayer, Object.assign({
     autoPlay: "none",
     src: props.playlist[currentSong].musicSrc,
     onPlay: function onPlay(e) {
@@ -52,13 +56,15 @@ var MusicPlayerWidget = function MusicPlayerWidget(_ref) {
     onClickNext: function onClickNext() {
       return props.nextSong();
     }
-  }, props));
+  }, props)));
 };
 
-var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    font-family: ", ";\n    background-color:  ", ";\n    border-radius: ", ";\n    padding: ", "px;\n    width: ", "px;\n    box-shadow: ", ";\n\n    .rhap_progress-filled,\n    .rhap_progress-indicator {\n        background-color: ", ";\n    }\n    \n    .rhap_repeat-button,\n    .rhap_main-controls-button,\n    .rhap_volume-button,\n    .rhap_time {\n        color: ", ";\n    }\n    \n    .rhap_download-progress,\n    .rhap_volume-bar {\n        background-color: gray ;\n    }\n    \n\n    .rhap_volume-indicator {\n        background: ", ";\n    }\n\n"])), function (props) {
-  return props.fontFamily || 'inherit';
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n    font-family: ", ";\n    background-color:  ", ";\n    border-radius: ", ";\n    padding: ", "px;\n    width: ", "px;\n    box-shadow: ", ";\n\n    .rhap_progress-filled,\n    .rhap_progress-indicator {\n        background-color: ", ";\n    }\n    \n    .rhap_repeat-button,\n    .rhap_main-controls-button,\n    .rhap_volume-button,\n    .rhap_time {\n        color: ", ";\n    }\n    \n    .rhap_download-progress,\n    .rhap_volume-bar {\n        background-color: gray ;\n    }\n    \n\n    .rhap_volume-indicator {\n        background: ", ";\n    }\n\n"])), function (props) {
+  return props.fontFamily || 'sans-serif';
 }, function (props) {
-  return props.backgroundColor || 'inherit';
+  return props.backgroundColor || 'transparent';
 }, function (props) {
   return props.borderRadius ? props.borderRadius + 'px' : 'inherit';
 }, function (props) {
@@ -75,19 +81,19 @@ var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_t
   return props.primaryColor;
 });
 
-var Header = _styledComponents.default.header(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n"])));
+var Header = _styledComponents.default.header(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n"])));
 
-var CoverWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+var CoverWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-var Img = _styledComponents.default.img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    height: inherit;\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n"])));
+var Img = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    height: inherit;\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n"])));
 
-var MusicName = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+var MusicName = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n    font-weight: 300;\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
   return props.fontSize;
 });
 
-var ArtistName = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    color: #7a7a7a;\n    text-transform: capitalize;\n"])));
+var ArtistName = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    color: #7a7a7a;\n    text-transform: capitalize;\n"])));
 
 var _default = MusicPlayerWidget;
 exports.default = _default;