add footer to the stories

package.json

@@ -61,5 +61,9 @@
 	},
 	"peerDependencies": {
 		"react": ">=16.8.2"
+	},
+	"dependencies": {
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"clsx": "^2.0.0"
 	}
 }

src/.eslintrc

@@ -1,4 +1,9 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "env": {
     "jest": true
   }

src/components/Footer.tsx

@@ -0,0 +1,22 @@
+import React, { CSSProperties } from 'react';
+import { FooterProps } from '../interfaces';
+import clsx from 'clsx';
+
+export function Footer ({footerElement , isOuterContainer} : FooterProps ) {
+    return (
+        <div className={clsx([styles.footer_wrapper , {position : isOuterContainer ? 'absolute' : 'static'}])} >
+            {footerElement}
+        </div>
+    );
+};
+
+
+
+const styles: Record<string, CSSProperties> = {
+    footer_wrapper: {
+        width: '100%',
+        bottom: 0,
+        left: 0,
+    },
+
+};

src/index.tsx

@@ -7,6 +7,7 @@ import { getRenderer } from './util/renderers'
 import { renderers as defaultRenderers } from './renderers/index';
 import withHeader from './renderers/wrappers/withHeader'
 import withSeeMore from './renderers/wrappers/withSeeMore'
+import {WithFooterHOC} from './renderers/wrappers/WithFooter'
 
 const ReactInstaStories = function (props: ReactInstaStoriesProps) {
     let renderers = props.renderers ? props.renderers.concat(defaultRenderers) : defaultRenderers;
@@ -49,7 +50,7 @@ const ReactInstaStories = function (props: ReactInstaStoriesProps) {
 }
 
 const generateStories = (stories: Story[], renderers: { renderer: Renderer, tester: Tester }[]) => {
-    return stories.map(s => {
+    return stories && stories.map(s => {
         let story: Story = {};
 
         if (typeof s === 'string') {
@@ -64,6 +65,7 @@ const generateStories = (stories: Story[], renderers: { renderer: Renderer, test
         story.content = renderer;
         return story
     })
+
 };
 
 ReactInstaStories.defaultProps = {
@@ -75,5 +77,6 @@ ReactInstaStories.defaultProps = {
 
 export const WithHeader = withHeader;
 export const WithSeeMore = withSeeMore;
+export const withFooterHOC = WithFooterHOC;
 
 export default ReactInstaStories

src/interfaces.tsx

@@ -82,6 +82,7 @@ export type Renderer = React.FC<{
     height?: NumberOrString;
     loader?: JSX.Element;
     header?: Function;
+    footer?:  FooterProps;
     storyStyles?: Object;
   };
   messageHandler: (type: string, data: any) => { ack: "OK" | "ERROR" };
@@ -112,7 +113,8 @@ export interface Story {
     toggleMore: (show: boolean) => void;
     action: Action;
   }>;
-  header?: Header;
+  header?: HeaderProps;
+  footer?: FooterProps;
   type?: string;
   duration?: number;
   styles?: object;
@@ -122,12 +124,6 @@ export interface Story {
   preloadResource?: boolean;
 }
 
-export interface Header {
-  heading: string;
-  subheading: string;
-  profileImage: string;
-}
-
 export interface SeeMoreProps {
   seeMoreContent: Function;
   showContent: boolean;
@@ -145,6 +141,11 @@ export interface HeaderProps {
   subheading: string;
 }
 
+export interface FooterProps {
+  footerElement?: React.ReactElement;
+  isOuterContainer?: boolean;
+}
+
 export interface ProgressProps {
   width: number;
   active: number;

src/renderers/Image.tsx

@@ -3,6 +3,7 @@ import Spinner from "../components/Spinner";
 import { Renderer, Tester } from "./../interfaces";
 import WithHeader from "./wrappers/withHeader";
 import WithSeeMore from "./wrappers/withSeeMore";
+import { WithFooterHOC } from "./wrappers/WithFooter";
 
 export const renderer: Renderer = ({ story, action, isPaused, config }) => {
   const [loaded, setLoaded] = React.useState(false);
@@ -17,32 +18,35 @@ export const renderer: Renderer = ({ story, action, isPaused, config }) => {
     action("play");
   };
   return (
-    <WithHeader {...{ story, globalHeader: config.header }}>
-      <WithSeeMore {...{ story, action }}>
-        <div>
-          <img style={computedStyles} src={story.url} onLoad={imageLoaded} />
-          {!loaded && (
-            <div
-              style={{
-                width: width,
-                height: height,
-                position: "absolute",
-                left: 0,
-                top: 0,
-                background: "rgba(0, 0, 0, 0.9)",
-                zIndex: 9,
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                color: "#ccc",
-              }}
-            >
-              {loader || <Spinner />}
-            </div>
-          )}
-        </div>
-      </WithSeeMore>
-    </WithHeader>
+    <WithFooterHOC footerElement={config?.footer?.footerElement} isOuterContainer={config?.footer?.isOuterContainer}>
+      <WithHeader {...{ story, globalHeader: config.header }}>
+        <WithSeeMore {...{ story, action }}>
+          <div>
+            <img style={computedStyles} src={story.url} onLoad={imageLoaded} />
+            {!loaded && (
+              <div
+                style={{
+                  width: width,
+                  height: height,
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  background: "rgba(0, 0, 0, 0.9)",
+                  zIndex: 9,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  color: "#ccc",
+                }}
+              >
+                {loader || <Spinner />}
+              </div>
+            )}
+          </div>
+        </WithSeeMore>
+      </WithHeader>
+    </WithFooterHOC>
+
   );
 };
 

src/renderers/Video.tsx

@@ -3,6 +3,7 @@ import Spinner from "../components/Spinner";
 import { Renderer, Tester } from "./../interfaces";
 import WithHeader from "./wrappers/withHeader";
 import WithSeeMore from "./wrappers/withSeeMore";
+import { WithFooterHOC } from "./wrappers/WithFooter";
 
 export const renderer: Renderer = ({
   story,
@@ -57,44 +58,46 @@ export const renderer: Renderer = ({
   };
 
   return (
-    <WithHeader {...{ story, globalHeader: config.header }}>
-      <WithSeeMore {...{ story, action }}>
-        <div style={styles.videoContainer}>
-          <video
-            ref={vid}
-            style={computedStyles}
-            src={story.url}
-            controls={false}
-            onLoadedData={videoLoaded}
-            playsInline
-            onWaiting={onWaiting}
-            onPlaying={onPlaying}
-            muted={muted}
-            autoPlay
-            webkit-playsinline="true"
-          />
-          {!loaded && (
-            <div
-              style={{
-                width: width,
-                height: height,
-                position: "absolute",
-                left: 0,
-                top: 0,
-                background: "rgba(0, 0, 0, 0.9)",
-                zIndex: 9,
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                color: "#ccc",
-              }}
-            >
-              {loader || <Spinner />}
-            </div>
-          )}
-        </div>
-      </WithSeeMore>
-    </WithHeader>
+    <WithFooterHOC footerElement={config?.footer?.footerElement} isOuterContainer={config?.footer?.isOuterContainer}>
+      <WithHeader {...{ story, globalHeader: config.header }}>
+        <WithSeeMore {...{ story, action }}>
+          <div style={styles.videoContainer}>
+            <video
+              ref={vid}
+              style={computedStyles}
+              src={story.url}
+              controls={false}
+              onLoadedData={videoLoaded}
+              playsInline
+              onWaiting={onWaiting}
+              onPlaying={onPlaying}
+              muted={muted}
+              autoPlay
+              webkit-playsinline="true"
+            />
+            {!loaded && (
+              <div
+                style={{
+                  width: width,
+                  height: height,
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  background: "rgba(0, 0, 0, 0.9)",
+                  zIndex: 9,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  color: "#ccc",
+                }}
+              >
+                {loader || <Spinner />}
+              </div>
+            )}
+          </div>
+        </WithSeeMore>
+      </WithHeader>
+    </WithFooterHOC>
   );
 };
 

src/renderers/wrappers/WithFooter.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Footer } from '../../components/Footer';
+import { FooterProps } from '../../interfaces';
+
+interface Props extends FooterProps {
+    children : React.ReactElement;
+
+}
+
+export function WithFooterHOC({children , footerElement , isOuterContainer} : Props){
+    return (
+        <>
+            {children}
+            {footerElement && <Footer footerElement={footerElement} isOuterContainer={isOuterContainer} />}
+        </>
+    );
+};

src/util/use-is-mounted.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from "react";
 
 function useIsMounted() {
   const isMounted = useRef(false);
-
   useEffect(() => {
     isMounted.current = true;
 

tsconfig.json

@@ -10,6 +10,11 @@
     "experimentalDecorators": true,
     "declaration": true,
     "declarationDir": "dist",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "paths" : {
+      "@/*" : [
+        "./src/components"
+      ]
+    }
   }
 }