-
-
-
-
- {!preventDefault &&
}
+ };
+
+ const getVideoDuration = (duration: number) => {
+ setVideoDuration(duration * 1000);
+ };
+
+ return (
+
+
+
+
+
+ {!preventDefault && (
+
+
+
+
+ mouseUp("previous")} />
+
+
+
+
+
+
+ mouseUp("next")} />
+
+
+
- )
+ )}
+
+ );
}
const styles = {
- container: {
- display: 'flex',
- flexDirection: 'column',
- background: '#111',
- position: 'relative'
- },
- overlay: {
- position: 'absolute',
- height: 'inherit',
- width: 'inherit',
- display: 'flex'
- }
-}
+ container: {
+ display: "flex",
+ flexDirection: "column",
+ background: "#111",
+ position: "relative",
+ },
+ overlay: {
+ position: "absolute",
+ height: "inherit",
+ width: "inherit",
+ display: "flex",
+ },
+ nav: {
+ width: "50%",
+ zIndex: 900,
+ display: "flex",
+ alignItems: "center",
+ padding: "0.5rem",
+ },
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8ff5799d4..b75db7a5f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,44 +1,45 @@
-import React from 'react'
-import { HeaderProps } from './../interfaces'
+import React from "react";
+import { HeaderProps } from "./../interfaces";
-const Header = ({ profileImage, heading, subheading }: HeaderProps) =>
-
- {profileImage &&

}
-
- {heading}
- {subheading}
-
-
+const Header = ({ profileImage, heading, subheading }: HeaderProps) => (
+
+ {profileImage &&

}
+
+ {heading}
+ {subheading}
+
+
+);
const styles = {
- main: {
- display: 'flex',
- alignItems: 'center'
- },
- img: {
- width: 40,
- height: 40,
- borderRadius: 40,
- marginRight: 10,
- filter: 'drop-shadow(0 0px 2px rgba(0, 0, 0, 0.5))',
- border: '2px solid rgba(255, 255, 255, 0.8)'
- },
- text: {
- display: 'flex',
- flexDirection: 'column',
- filter: 'drop-shadow(0 0px 3px rgba(0, 0, 0, 0.9))'
- },
- heading: {
- fontSize: '1rem',
- color: 'rgba(255, 255, 255, 0.9)',
- margin: 0,
- marginBottom: 2
- },
- subheading: {
- fontSize: '0.6rem',
- color: 'rgba(255, 255, 255, 0.8)',
- margin: 0
- }
-}
+ main: {
+ display: "flex",
+ alignItems: "center",
+ },
+ img: {
+ width: 40,
+ height: 40,
+ borderRadius: 40,
+ marginRight: 10,
+ filter: "drop-shadow(0 0px 2px rgba(0, 0, 0, 0.5))",
+ border: "2px solid rgba(255, 255, 255, 0.8)",
+ },
+ text: {
+ display: "flex",
+ flexDirection: "column",
+ filter: "drop-shadow(0 0px 3px rgba(0, 0, 0, 0.9))",
+ },
+ heading: {
+ fontSize: "1rem",
+ color: "rgba(255, 255, 255, 0.9)",
+ margin: 0,
+ marginBottom: 2,
+ },
+ subheading: {
+ fontSize: "0.6rem",
+ color: "rgba(255, 255, 255, 0.8)",
+ margin: 0,
+ },
+};
-export default Header
\ No newline at end of file
+export default Header;
diff --git a/src/components/Navigate.tsx b/src/components/Navigate.tsx
new file mode 100644
index 000000000..f5ebaaead
--- /dev/null
+++ b/src/components/Navigate.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import NextSVG from "../assets/next.svg";
+import PrevSVG from "../assets/prev.svg";
+
+const NavigatePrev = ({ onPrev }: { onPrev(): void }) => {
+ return
;
+};
+
+const NavigateNext = ({ onNext }: { onNext(): void }) => {
+ return
;
+};
+
+const icon = {
+ position: "absolute",
+ background: "rgb(255 255 255 / 80%)",
+ borderRadius: "50%",
+ boxShadow: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
+};
+
+export { NavigatePrev, NavigateNext };
diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx
index 2ce3fa96e..fefbb2f51 100644
--- a/src/components/ProgressArray.tsx
+++ b/src/components/ProgressArray.tsx
@@ -1,94 +1,107 @@
-import React, { useContext, useState, useEffect, useRef } from 'react'
-import Progress from './Progress'
-import { ProgressContext, GlobalCtx, StoriesContext as StoriesContextInterface } from './../interfaces'
-import ProgressCtx from './../context/Progress'
-import GlobalContext from './../context/Global'
-import StoriesContext from './../context/Stories'
+import React, { useContext, useState, useEffect, useRef } from "react";
+import Progress from "./Progress";
+import {
+ ProgressContext,
+ GlobalCtx,
+ StoriesContext as StoriesContextInterface,
+} from "./../interfaces";
+import ProgressCtx from "./../context/Progress";
+import GlobalContext from "./../context/Global";
+import StoriesContext from "./../context/Stories";
export default () => {
- const [count, setCount] = useState
(0)
- const { currentId, next, videoDuration, pause } = useContext(ProgressCtx)
- const { defaultInterval, onStoryEnd, onStoryStart, onAllStoriesEnd } = useContext(GlobalContext);
- const { stories } = useContext(StoriesContext);
+ const [count, setCount] = useState(0);
+ const { currentId, next, videoDuration, pause } = useContext(
+ ProgressCtx
+ );
+ const {
+ defaultInterval,
+ onStoryEnd,
+ onStoryStart,
+ onAllStoriesEnd,
+ } = useContext(GlobalContext);
+ const { stories } = useContext(StoriesContext);
- useEffect(() => {
- setCount(0)
- }, [currentId, stories])
+ useEffect(() => {
+ setCount(0);
+ }, [currentId, stories]);
- useEffect(() => {
- if (!pause) {
- animationFrameId.current = requestAnimationFrame(incrementCount)
- }
- return () => {
- cancelAnimationFrame(animationFrameId.current)
- }
- }, [currentId, pause])
+ useEffect(() => {
+ if (!pause) {
+ animationFrameId.current = requestAnimationFrame(incrementCount);
+ }
+ return () => {
+ cancelAnimationFrame(animationFrameId.current);
+ };
+ }, [currentId, pause]);
- let animationFrameId = useRef()
+ let animationFrameId = useRef();
- let countCopy = count;
- const incrementCount = () => {
- if (countCopy === 0) storyStartCallback()
- setCount((count: number) => {
- const interval = getCurrentInterval()
- countCopy = count + (100 / ((interval / 1000) * 60))
- return count + (100 / ((interval / 1000) * 60))
- })
- if (countCopy < 100) {
- animationFrameId.current = requestAnimationFrame(incrementCount)
- } else {
- storyEndCallback();
- if (currentId === stories.length - 1) {
- allStoriesEndCallback();
- }
- cancelAnimationFrame(animationFrameId.current);
- next();
- }
+ let countCopy = count;
+ const incrementCount = () => {
+ if (countCopy === 0) storyStartCallback();
+ setCount((count: number) => {
+ const interval = getCurrentInterval();
+ countCopy = count + 100 / ((interval / 1000) * 60);
+ return count + 100 / ((interval / 1000) * 60);
+ });
+ if (countCopy < 100) {
+ animationFrameId.current = requestAnimationFrame(incrementCount);
+ } else {
+ storyEndCallback();
+ if (currentId === stories.length - 1) {
+ allStoriesEndCallback();
+ }
+ cancelAnimationFrame(animationFrameId.current);
+ next();
}
+ };
- const storyStartCallback = () => {
- onStoryStart && onStoryStart(currentId, stories[currentId])
- }
+ const storyStartCallback = () => {
+ onStoryStart && onStoryStart(currentId, stories[currentId]);
+ };
- const storyEndCallback = () => {
- onStoryEnd && onStoryEnd(currentId, stories[currentId])
- }
+ const storyEndCallback = () => {
+ onStoryEnd && onStoryEnd(currentId, stories[currentId]);
+ };
- const allStoriesEndCallback = () => {
- onAllStoriesEnd && onAllStoriesEnd(currentId, stories)
- }
+ const allStoriesEndCallback = () => {
+ onAllStoriesEnd && onAllStoriesEnd(currentId, stories);
+ };
- const getCurrentInterval = () => {
- if (stories[currentId].type === 'video') return videoDuration
- if (typeof stories[currentId].duration === 'number') return stories[currentId].duration
- return defaultInterval
- }
+ const getCurrentInterval = () => {
+ if (stories[currentId].type === "video") return videoDuration;
+ if (typeof stories[currentId].duration === "number")
+ return stories[currentId].duration;
+ return defaultInterval;
+ };
- return (
-
- {stories.map((_, i) =>
-
)}
-
- )
-}
+ return (
+
+ {stories.map((_, i) => (
+
+ ))}
+
+ );
+};
const styles = {
- progressArr: {
- display: 'flex',
- justifyContent: 'center',
- maxWidth: '100%',
- flexWrap: 'row',
- position: 'absolute',
- width: '98%',
- padding: 5,
- paddingTop: 7,
- alignSelf: 'center',
- zIndex: 1001,
- filter: 'drop-shadow(0 1px 8px #222)'
- }
-}
+ progressArr: {
+ display: "flex",
+ justifyContent: "center",
+ maxWidth: "100%",
+ flexWrap: "row",
+ position: "absolute",
+ width: "98%",
+ padding: 5,
+ paddingTop: 7,
+ alignSelf: "center",
+ zIndex: 1001,
+ filter: "drop-shadow(0 1px 8px #222)",
+ },
+};
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 1835a6927..3df42fbe5 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import SpinnerSVG from './../assets/puff.svg';
+import React from "react";
+import SpinnerSVG from "./../assets/puff.svg";
const Spinner = () => {
- return
-}
+ return ;
+};
-export default Spinner;
\ No newline at end of file
+export default Spinner;
diff --git a/src/interfaces.tsx b/src/interfaces.tsx
index e03189555..3225d5be9 100644
--- a/src/interfaces.tsx
+++ b/src/interfaces.tsx
@@ -1,149 +1,158 @@
-import * as React from 'react';
+import * as React from "react";
export interface ReactInstaStoriesProps {
- stories: Story[];
- width?: NumberOrString;
- height?: NumberOrString;
- loader?: JSX.Element;
- header?: Function;
- storyContainerStyles?: Record;
- storyStyles?: Object;
- loop?: boolean;
- defaultInterval?: number;
- isPaused?: boolean;
- currentIndex?: number;
- renderers?: {
- renderer: Renderer;
- tester: Tester
- }[];
- onAllStoriesEnd?: Function;
- onStoryStart?: Function;
- onStoryEnd?: Function;
- keyboardNavigation?: boolean;
- preventDefault?: boolean;
+ stories: Story[];
+ width?: NumberOrString;
+ height?: NumberOrString;
+ loader?: JSX.Element;
+ header?: Function;
+ storyContainerStyles?: Record;
+ storyStyles?: Object;
+ loop?: boolean;
+ defaultInterval?: number;
+ isPaused?: boolean;
+ currentIndex?: number;
+ renderers?: {
+ renderer: Renderer;
+ tester: Tester;
+ }[];
+ onAllStoriesEnd?: Function;
+ onStoryStart?: Function;
+ onStoryEnd?: Function;
+ keyboardNavigation?: boolean;
+ preventDefault?: boolean;
}
export interface GlobalCtx {
- width?: NumberOrString;
- height?: NumberOrString;
- loader?: JSX.Element;
- header?: Function;
- storyContainerStyles?: Record;
- storyStyles?: Object;
- loop?: boolean;
- defaultInterval?: number;
- isPaused?: boolean;
- currentIndex?: number;
- renderers?: {
- renderer: Renderer;
- tester: Tester
- }[];
- onAllStoriesEnd?: Function;
- onStoryStart?: Function;
- onStoryEnd?: Function;
- keyboardNavigation?: boolean;
- preventDefault?: boolean;
+ width?: NumberOrString;
+ height?: NumberOrString;
+ loader?: JSX.Element;
+ header?: Function;
+ storyContainerStyles?: Record;
+ storyStyles?: Object;
+ loop?: boolean;
+ defaultInterval?: number;
+ isPaused?: boolean;
+ currentIndex?: number;
+ renderers?: {
+ renderer: Renderer;
+ tester: Tester;
+ }[];
+ onAllStoriesEnd?: Function;
+ onStoryStart?: Function;
+ onStoryEnd?: Function;
+ keyboardNavigation?: boolean;
+ preventDefault?: boolean;
}
type NumberOrString = number | string;
export interface StoriesContext {
- stories: Story[];
+ stories: Story[];
}
export interface ContainerState {
- currentId: number;
- pause: boolean;
- count: number;
- storiesDone: number
+ currentId: number;
+ pause: boolean;
+ count: number;
+ storiesDone: number;
}
export type Action = (action: string, bufferAction?: boolean) => void;
-export interface Renderer extends React.FC<{
+export interface Renderer
+ extends React.FC<{
action: Action;
isPaused: boolean;
story: Story;
config: {
- width?: NumberOrString;
- height?: NumberOrString;
- loader?: JSX.Element;
- header?: Function;
- storyStyles?: Object;
+ width?: NumberOrString;
+ height?: NumberOrString;
+ loader?: JSX.Element;
+ header?: Function;
+ storyStyles?: Object;
};
- messageHandler: (type: string, data: any) => ({ ack: 'OK' | 'ERROR' })
-}> { }
-
-export type Tester = (story: Story) => {
- condition: boolean;
- priority: number;
+ messageHandler: (type: string, data: any) => { ack: "OK" | "ERROR" };
+ }> {}
+
+export type Tester = (
+ story: Story
+) => {
+ condition: boolean;
+ priority: number;
};
export interface StoryProps {
- story: Story;
- action: Action;
- playState: boolean;
- getVideoDuration: Function;
- bufferAction: boolean;
+ story: Story;
+ action: Action;
+ playState: boolean;
+ getVideoDuration: Function;
+ bufferAction: boolean;
}
export interface StoryState {
- loaded: boolean;
- showMore: boolean
+ loaded: boolean;
+ showMore: boolean;
}
export interface Story {
- url?: string;
- seeMore?: Function;
- seeMoreCollapsed?: React.ComponentType<{ toggleMore: (show: boolean) => void, action: Action }>;
- header?: Header;
- type?: string;
- duration?: number;
- styles?: object;
- content?: Renderer;
- originalContent?: Renderer
+ url?: string;
+ seeMore?: Function;
+ seeMoreCollapsed?: React.ComponentType<{
+ toggleMore: (show: boolean) => void;
+ action: Action;
+ }>;
+ header?: Header;
+ type?: string;
+ duration?: number;
+ styles?: object;
+ content?: Renderer;
+ originalContent?: Renderer;
}
export interface Header {
- heading: string;
- subheading: string;
- profileImage: string
+ heading: string;
+ subheading: string;
+ profileImage: string;
+ onHeadPress?(): void;
}
export interface SeeMoreProps {
- seeMoreContent: Function;
- showContent: boolean;
- action: Action;
+ seeMoreContent: Function;
+ showContent: boolean;
+ action: Action;
+ toggleMore: (show: boolean) => void;
+ customCollapsed: React.ComponentType<{
toggleMore: (show: boolean) => void;
- customCollapsed: React.ComponentType<{ toggleMore: (show: boolean) => void, action: Action }>
+ action: Action;
+ }>;
}
export interface HeaderProps {
- profileImage: string;
- heading: string;
- subheading: string
+ profileImage: string;
+ heading: string;
+ subheading: string;
+ onHeadPress?(): void;
}
export interface ProgressProps {
- width: number;
- active: number;
- count: number
+ width: number;
+ active: number;
+ count: number;
}
export interface ProgressWrapperProps {
- children: any;
- width: number;
- pause: boolean;
- bufferAction: boolean
+ children: any;
+ width: number;
+ pause: boolean;
+ bufferAction: boolean;
}
-export interface ProgressArrayProps {
-
-}
+export interface ProgressArrayProps {}
export interface ProgressContext {
- currentId: number;
- videoDuration: number;
- bufferAction: boolean;
- pause: boolean;
- next: Function
-}
\ No newline at end of file
+ currentId: number;
+ videoDuration: number;
+ bufferAction: boolean;
+ pause: boolean;
+ next: Function;
+}
diff --git a/src/renderers/wrappers/withHeader.tsx b/src/renderers/wrappers/withHeader.tsx
index c04cfdb16..a1421e88e 100644
--- a/src/renderers/wrappers/withHeader.tsx
+++ b/src/renderers/wrappers/withHeader.tsx
@@ -1,26 +1,41 @@
-import React from 'react';
-import { Story } from '../../interfaces';
+import React from "react";
+import { Story } from "../../interfaces";
import Header from "./../../components/Header";
-const withHeader: React.FC<{ story: Story, globalHeader: Function }> = ({ story, globalHeader, children }) => {
- return <>
- {children}
- {story.header && (
-
- {typeof story === "object" ? (
- globalHeader ? (
- globalHeader(story.header)
- ) : (
-
- )
- ) : null}
-
- )}
+const withHeader: React.FC<{ story: Story; globalHeader: Function }> = ({
+ story,
+ globalHeader,
+ children,
+}) => {
+ return (
+ <>
+ {children}
+ {story.header && (
+
+ {typeof story === "object" ? (
+ globalHeader ? (
+ globalHeader(story.header)
+ ) : (
+
+ )
+ ) : null}
+
+ )}
>
-}
+ );
+};
-export default withHeader;
\ No newline at end of file
+export default withHeader;
diff --git a/src/util/renderIf.tsx b/src/util/renderIf.tsx
new file mode 100644
index 000000000..c2befe922
--- /dev/null
+++ b/src/util/renderIf.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ReactNode } from "react";
+
+interface Props {
+ condition: any;
+ children?: ReactNode;
+}
+
+export default function RenderIf({ condition, children }: Props) {
+ if (!condition) return null;
+
+ return <>{children}>;
+}