@mohamed-karawia/library 0.1.12 → 0.1.13

package/dist/stories/Events/Event/Event.js

@@ -27,18 +27,14 @@ var Event = function Event(_ref) {
       titleSize = _ref.titleSize,
       dateColor = _ref.dateColor,
       dateSize = _ref.dateSize,
-      headerBackground = _ref.headerBackground,
-      headerTitleColor = _ref.headerTitleColor,
       discColor = _ref.discColor,
-      discSize = _ref.discSize;
+      discSize = _ref.discSize,
+      headerStyles = _ref.headerStyles;
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
-    title: "Event",
-    padding: 10,
-    headerBackground: headerBackground,
-    titleColor: headerTitleColor
-  }), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
     src: cover
   })), /*#__PURE__*/_react.default.createElement(Details, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(Title, {
     size: titleSize,

package/dist/stories/Library/Notes/Notes.js

@@ -85,19 +85,11 @@ var Notes = function Notes(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     customCardStyles: {
       iconColor: iconColor,
       cardTitleFontSize: cardTitleFontSize,
@@ -112,7 +104,7 @@ var Notes = function Notes(_ref) {
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
     cardIconClicked: cardIconClicked
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js

@@ -79,17 +79,9 @@ var ViewAlbum = function ViewAlbum(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Album",
     data: album,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     cardStyle: "card-style-7",
     type: "flat",
     cardClicked: function cardClicked(index) {
@@ -106,7 +98,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
         iconColor: 'black'
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js

@@ -101,27 +101,16 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Music Albums",
+    galleryTitle: props.title,
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

package/dist/stories/Pages/Events/Event/Event.js

@@ -77,11 +77,17 @@ var Event = function Event(props) {
     date: "15/11/1976 : 16/11/1976",
     disc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro.",
     backgroundColor: "black",
-    headerBackground: "black",
-    headerTitleColor: "white",
     titleColor: "white",
     discColor: "white",
-    dateColor: "white"
+    dateColor: "white",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Library/Notes/Notes.js

@@ -115,7 +115,15 @@ var Notes = function Notes(props) {
   }, /*#__PURE__*/_react.default.createElement(_Notes.default, {
     onAddNote: onAddNote,
     cardIconClicked: cardIconClicked,
-    notes: notes
+    notes: notes,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Music/MusicAlbum/Music.js

@@ -183,7 +183,15 @@ var Music = function Music(props) {
     album: album,
     onAddSong: onAddSong,
     cardIconClicked: cardIconClicked,
-    cardClicked: onPlaySong
+    cardClicked: onPlaySong,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",
     controlsStyles: {

package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js

@@ -111,6 +111,10 @@ var MusicAlbums = function MusicAlbums(props) {
     setAlbums((0, _util.deleteFromArrayByIndex)(albums, index));
   };
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -145,9 +149,19 @@ var MusicAlbums = function MusicAlbums(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, {
+    title: "Music Albums",
     albums: albums,
     cardIconClicked: cardIconClicked,
-    onAddAlbum: onAddAlbum
+    onAddAlbum: onAddAlbum,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Photos/Albums/Albums.js

@@ -105,6 +105,10 @@ var Albums = function Albums(props) {
     setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
   };
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -143,7 +147,8 @@ var Albums = function Albums(props) {
     cardIconClicked: cardIconClicked,
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
-    columnsNumber: 2
+    columnsNumber: 2,
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.js

@@ -104,7 +104,8 @@ var DetailedVideo = function DetailedVideo(props) {
     date: "10/11/2022",
     comments: comments,
     discColor: "gray",
-    dateColor: "gray"
+    dateColor: "gray",
+    videoSrc: 'https://www.youtube.com/watch?v=vETUpJ88cfA'
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/VideoAlbum/Video.js

@@ -153,6 +153,10 @@ var Video = function Video(props) {
     setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
   };
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -190,7 +194,16 @@ var Video = function Video(props) {
     album: album,
     onAddVideo: onAddVideo,
     onDeleteSong: deleteVideoFromAlbum,
-    cardIconClicked: cardIconClicked
+    cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "video player",
     controlsStyles: {

package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js

@@ -122,9 +122,6 @@ var ViewAlbums = function ViewAlbums(_ref) {
     galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardControls: cardControls,
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles

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

@@ -39,8 +39,8 @@ var Gallery = function Gallery(_ref) {
     props.iconClicked(action);
   };
 
-  var clicked = function clicked(index) {
-    props.cardClicked(index);
+  var clicked = function clicked(index, cardProps) {
+    props.cardClicked(index, cardProps);
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {

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

@@ -23,10 +23,11 @@ var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTex
 
 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 _excluded = ["videoSrc", "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,
+  var videoSrc = _ref.videoSrc,
+      title = _ref.title,
       discription = _ref.discription,
       date = _ref.date,
       users = _ref.users,
@@ -47,7 +48,8 @@ var VideoSpace = function VideoSpace(_ref) {
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
-    iconsColor: iconsColor
+    iconsColor: iconsColor,
+    src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
     detailsPadding: detailsPadding
   }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {

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

@@ -110,23 +110,12 @@ var ViewAlbum = function ViewAlbum(_ref) {
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

package/dist/stories/helpers/util.js

@@ -103,7 +103,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",

package/src/stories/Events/Event/Event.jsx

@@ -14,19 +14,16 @@ const Event = ({
     titleSize,
     dateColor,
     dateSize,
-    headerBackground,
-    headerTitleColor,
     discColor,
     discSize,
+    headerStyles
 }) => {
     return (
         <Container
             backgroundColor={backgroundColor}>
             <ReusableHeader
-                title='Event'
-                padding={10}
-                headerBackground={headerBackground}
-                titleColor={headerTitleColor}
+                title={title}
+                {...headerStyles}
             />
             <CoverWrapper>
                 <Cover src={cover} />

package/src/stories/Library/Notes/Notes.jsx

@@ -60,14 +60,6 @@ const Notes = ({
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 customCardStyles={{
                     iconColor,
                     cardTitleFontSize,
@@ -82,6 +74,7 @@ const Notes = ({
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
                 cardIconClicked={cardIconClicked}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -52,14 +52,6 @@ const ViewAlbum = ({
             <List
                 listTitle="My Album"
                 data={album}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 cardStyle="card-style-7"
                 type="flat"
                 cardClicked={(index) => props.cardClicked(index)}
@@ -74,6 +66,7 @@ const ViewAlbum = ({
                         iconColor: 'black'
                     }
                 }}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx

@@ -76,25 +76,16 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Music Albums"
+                galleryTitle={props.title}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}
@@ -129,6 +120,7 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string
 };
 
 export default ViewAlbums

package/src/stories/Pages/Events/Event/Event.jsx

@@ -67,11 +67,17 @@ const Event = (props) => {
                             date="15/11/1976 : 16/11/1976"
                             disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
                             backgroundColor="black"
-                            headerBackground="black"
-                            headerTitleColor="white"
                             titleColor="white"
                             discColor="white"
                             dateColor="white"
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
                         />
 
                     </SpaceContainer>

package/src/stories/Pages/Library/Notes/Notes.jsx

@@ -93,7 +93,14 @@ const Notes = (props) => {
                         onAddNote={onAddNote}
                         cardIconClicked={cardIconClicked}
                         notes={notes}
-                             />
+                        headerStyles={{
+                            padding: 10,
+                            headerBackground: '#FE1744',
+                            titleColor: '#ffff',
+                            controlsStyles: {
+                                iconSize: 25
+                            }
+                        }}     />
 
                     </SpaceContainer>
 

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -123,7 +123,15 @@ const Music = (props) => {
               album={album}
               onAddSong={onAddSong}
               cardIconClicked={cardIconClicked}
-              cardClicked={onPlaySong} />
+              cardClicked={onPlaySong}
+              headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+                controlsStyles: {
+                    iconSize: 25
+                }
+            }} />
           </SpaceContainer>
 
         </Center>

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -56,6 +56,10 @@ const MusicAlbums = (props) => {
     const deleteFromAlbums = (index) => {
         setAlbums(deleteFromArrayByIndex(albums, index))
     }
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -100,9 +104,20 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
+                        title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
-                            onAddAlbum={onAddAlbum} />
+                            onAddAlbum={onAddAlbum}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            cardClicked={cardClicked}
+                             />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -59,6 +59,10 @@ const Albums = (props) => {
         setAlbums(addObjectToArray(albums, newAlbum))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -108,6 +112,7 @@ const Albums = (props) => {
                             onDeleteAlbum={onDeleteAlbum}
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
+                            cardClicked={cardClicked}
                         />
                     </SpaceContainer>
 

package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx

@@ -76,7 +76,8 @@ const DetailedVideo = (props) => {
                             date="10/11/2022"
                             comments={comments}
                             discColor="gray"
-                            dateColor="gray" />
+                            dateColor="gray"
+                            videoSrc={'https://www.youtube.com/watch?v=vETUpJ88cfA'} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Video/VideoAlbum/Video.jsx

@@ -84,6 +84,9 @@ const Video = (props) => {
         setAlbum(deleteFromArrayByIndex(album, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
 
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
@@ -132,7 +135,16 @@ const Video = (props) => {
                             album={album}
                             onAddVideo={onAddVideo}
                             onDeleteSong={deleteVideoFromAlbum}
-                            cardIconClicked={cardIconClicked} />
+                            cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -93,7 +93,6 @@ const ViewAlbums = ({
                 galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
-                cardClicked={() => null}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}

package/src/stories/Reusable Components/Gallery/Gallery.jsx

@@ -14,8 +14,8 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -7,6 +7,7 @@ import Comments from '../Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
 
 const VideoSpace = ({
+    videoSrc,
     title,
     discription,
     date,
@@ -29,7 +30,8 @@ const VideoSpace = ({
     return (
         <Container backgroundColor={backgroundColor}>
             <VideoPlayer
-                iconsColor={iconsColor} />
+                iconsColor={iconsColor}
+                src={videoSrc} />
             <VideoDetails detailsPadding={detailsPadding}>
                 <Top>
                     <Title titleFontSize={titleFontSize} titleColor={titleColor}>{title}</Title>

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx

@@ -79,21 +79,12 @@ const ViewAlbum = ({
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}

package/src/stories/helpers/util.js

@@ -46,7 +46,7 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 		'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
 		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(path) => clicked(path)}/>),
 		'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-8': (<CardStyle8 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),