From 2bbcd6d51b2d15376548543a08689c5ee81f1f37 Mon Sep 17 00:00:00 2001 From: "voraton.l" Date: Fri, 2 Dec 2022 12:04:54 +0700 Subject: [PATCH 1/8] Handling Pause Logic --- example/src/App.js | 8 +++++++- src/renderers/AutoPlayContent.tsx | 6 ++++-- src/renderers/Default.tsx | 8 +++++--- src/renderers/Image.tsx | 7 ++++++- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/example/src/App.js b/example/src/App.js index fc8ec5500..c18601f44 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,8 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import Stories, { WithSeeMore } from 'react-insta-stories' function App() { + const [pause, setPause] = useState(false) + return (
@@ -64,12 +66,16 @@ function App() { keyboardNavigation defaultInterval={8000} stories={stories2} + isPaused={pause} onStoryEnd={(s, st) => console.log('story ended', s, st)} onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)} onStoryStart={(s, st) => console.log('story started', s, st)} storyContainerStyles={{ borderRadius: 8, overflow: 'hidden' }} />
+
+ +
); } diff --git a/src/renderers/AutoPlayContent.tsx b/src/renderers/AutoPlayContent.tsx index 0bbf620d1..5140f50ac 100644 --- a/src/renderers/AutoPlayContent.tsx +++ b/src/renderers/AutoPlayContent.tsx @@ -3,8 +3,10 @@ import { Renderer, Tester } from './../interfaces'; export const renderer: Renderer = (props) => { React.useEffect(() => { - props.action('play'); - }, [props.story]) + if (!props.isPaused) { + props.action('play'); + } + }, [props.story, props.isPaused]) const Content = props.story.originalContent; return } diff --git a/src/renderers/Default.tsx b/src/renderers/Default.tsx index 260e09ebc..bdf875f93 100644 --- a/src/renderers/Default.tsx +++ b/src/renderers/Default.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { Renderer, Tester } from './../interfaces'; -export const renderer: Renderer = ({ story, action }) => { +export const renderer: Renderer = ({ story, action, isPaused }) => { React.useEffect(() => { - action('play'); - }, [story]) + if (!isPaused) { + action('play'); + } + }, [story, isPaused]) return

This story could not be loaded.

diff --git a/src/renderers/Image.tsx b/src/renderers/Image.tsx index 170a96a02..bf967e287 100644 --- a/src/renderers/Image.tsx +++ b/src/renderers/Image.tsx @@ -14,9 +14,14 @@ export const renderer: Renderer = ({ story, action, isPaused, config }) => { const imageLoaded = () => { setLoaded(true); - action('play'); } + React.useEffect(() => { + if (loaded && !isPaused) { + action('play') + } + }, [loaded, isPaused]) + return
From 4cb8e288d3e44402671f3a8b688bad7ce9d16d97 Mon Sep 17 00:00:00 2001 From: Atipat Pankong Date: Mon, 12 Dec 2022 10:46:31 +0700 Subject: [PATCH 2/8] fix pause bug and pause at first and last story --- src/components/Container.tsx | 24 +++++++++++------------- src/components/ProgressArray.tsx | 18 ++++++++++-------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index c53a61051..4d848a9a6 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -15,13 +15,13 @@ export default function () { let mousedownId = useRef(); let isMounted = useRef(true); - const { width, height, loop, currentIndex, isPaused, keyboardNavigation, preventDefault, storyContainerStyles = {} } = useContext(GlobalContext); + const { width, height, loop, currentIndex, isPaused, keyboardNavigation, preventDefault, storyContainerStyles = {}, onAllStoriesEnd } = useContext(GlobalContext); const { stories } = useContext(StoriesContext); useEffect(() => { if (typeof currentIndex === 'number') { if (currentIndex >= 0 && currentIndex < stories.length) { - setCurrentIdWrapper(() => currentIndex) + setCurrentId(() => currentIndex) } else { console.error('Index out of bounds. Current index was set to value more than the length of stories array.', currentIndex) } @@ -65,13 +65,10 @@ export default function () { setBufferAction(!!bufferAction) } - const setCurrentIdWrapper = (callback) => { - setCurrentId(callback); - toggleState('pause', true); - } - const previous = () => { - setCurrentIdWrapper(prev => prev > 0 ? prev - 1 : prev) + if(currentId !== 0){ + setCurrentId(prev => prev - 1) + } } const next = () => { @@ -85,14 +82,15 @@ export default function () { }; const updateNextStoryIdForLoop = () => { - setCurrentIdWrapper(prev => (prev + 1) % stories.length) + setCurrentId(prev => (prev + 1) % stories.length) } const updateNextStoryId = () => { - setCurrentIdWrapper(prev => { - if (prev < stories.length - 1) return prev + 1 - return prev - }) + if(currentId < stories.length - 1){ + setCurrentId(prev => prev + 1) + } else{ + onAllStoriesEnd() + } } const debouncePause = (e: React.MouseEvent | React.TouchEvent) => { diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx index 2ce3fa96e..0ebc2c59d 100644 --- a/src/components/ProgressArray.tsx +++ b/src/components/ProgressArray.tsx @@ -6,6 +6,9 @@ import GlobalContext from './../context/Global' import StoriesContext from './../context/Stories' export default () => { + let animationFrameId = useRef() + const pauseRef = useRef(false); + const [count, setCount] = useState(0) const { currentId, next, videoDuration, pause } = useContext(ProgressCtx) const { defaultInterval, onStoryEnd, onStoryStart, onAllStoriesEnd } = useContext(GlobalContext); @@ -16,6 +19,7 @@ export default () => { }, [currentId, stories]) useEffect(() => { + pauseRef.current = pause if (!pause) { animationFrameId.current = requestAnimationFrame(incrementCount) } @@ -24,11 +28,10 @@ export default () => { } }, [currentId, pause]) - let animationFrameId = useRef() - let countCopy = count; const incrementCount = () => { if (countCopy === 0) storyStartCallback() + if (pauseRef.current) return setCount((count: number) => { const interval = getCurrentInterval() countCopy = count + (100 / ((interval / 1000) * 60)) @@ -65,13 +68,13 @@ export default () => { } return ( -
+
{stories.map((_, i) => )}
) @@ -89,6 +92,5 @@ const styles = { paddingTop: 7, alignSelf: 'center', zIndex: 1001, - filter: 'drop-shadow(0 1px 8px #222)' } } From 921e1bb5088fdf282e9efa1d2fcd323185cbedd7 Mon Sep 17 00:00:00 2001 From: Atipat Pankong Date: Mon, 12 Dec 2022 10:58:46 +0700 Subject: [PATCH 3/8] fix indent --- src/components/ProgressArray.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx index 0ebc2c59d..8e4b2a83d 100644 --- a/src/components/ProgressArray.tsx +++ b/src/components/ProgressArray.tsx @@ -71,10 +71,10 @@ export default () => {
{stories.map((_, i) => )}
) From 529ae499e4f37df8837f218d080693a5da62ad6d Mon Sep 17 00:00:00 2001 From: Atipat Pankong Date: Tue, 13 Dec 2022 11:42:32 +0700 Subject: [PATCH 4/8] fix: on touch and mouse up call --- src/components/Container.tsx | 30 ++++++++++++++++++++++++------ src/components/ProgressArray.tsx | 12 ++++++------ 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 4d848a9a6..23dc30e58 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState, useRef, useEffect } from 'react' +import React, { useContext, useState, useRef, useEffect, MouseEvent, TouchEvent } from 'react' import GlobalContext from './../context/Global' import StoriesContext from './../context/Stories' import ProgressContext from './../context/Progress' @@ -14,6 +14,7 @@ export default function () { let mousedownId = useRef(); let isMounted = useRef(true); + let pauseRef = useRef(false); const { width, height, loop, currentIndex, isPaused, keyboardNavigation, preventDefault, storyContainerStyles = {}, onAllStoriesEnd } = useContext(GlobalContext); const { stories } = useContext(StoriesContext); @@ -34,6 +35,10 @@ export default function () { } }, [isPaused]) + useEffect(() => { + pauseRef.current = pause + }, [pause]) + useEffect(() => { const isClient = (typeof window !== 'undefined' && window.document); if (isClient && (typeof keyboardNavigation === 'boolean' && keyboardNavigation)) { @@ -51,6 +56,11 @@ export default function () { } }, []); + function isTouchDevice() { + return 'ontouchstart' in window // works on most browsers + || navigator.maxTouchPoints; // works on IE10/11 and Surface + } + const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'ArrowLeft') { previous() @@ -93,17 +103,25 @@ export default function () { } } - const debouncePause = (e: React.MouseEvent | React.TouchEvent) => { + const debouncePause = (e: MouseEvent | TouchEvent) => { + if (isTouchDevice() && e.nativeEvent instanceof MouseEvent) { + return + } + e.preventDefault() mousedownId.current = setTimeout(() => { toggleState('pause') }, 200) } - const mouseUp = (type: string) => (e: React.MouseEvent | React.TouchEvent) => { + const mouseUp = (type: string) => (e: MouseEvent | TouchEvent) => { + if (isTouchDevice() && e.nativeEvent instanceof MouseEvent) { + return + } + e.preventDefault() mousedownId.current && clearTimeout(mousedownId.current) - if (pause) { + if (pauseRef.current) { toggleState('play') } else { type === 'next' ? next() : previous() @@ -120,7 +138,7 @@ export default function () { bufferAction: bufferAction, videoDuration: videoDuration, currentId, - pause, + pause: pause || isPaused, next }}> @@ -128,7 +146,7 @@ export default function () { diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx index 8e4b2a83d..b6cef5f5d 100644 --- a/src/components/ProgressArray.tsx +++ b/src/components/ProgressArray.tsx @@ -31,7 +31,7 @@ export default () => { let countCopy = count; const incrementCount = () => { if (countCopy === 0) storyStartCallback() - if (pauseRef.current) return + if (pauseRef.current) return setCount((count: number) => { const interval = getCurrentInterval() countCopy = count + (100 / ((interval / 1000) * 60)) @@ -68,13 +68,13 @@ export default () => { } return ( -
+
{stories.map((_, i) => )}
) From 13f7d65913408b245ed2f841c51115a5def2c9a6 Mon Sep 17 00:00:00 2001 From: Atipat Pankong Date: Tue, 13 Dec 2022 11:48:39 +0700 Subject: [PATCH 5/8] fix: unuse --- src/components/Container.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 23dc30e58..ad95fd083 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -14,7 +14,6 @@ export default function () { let mousedownId = useRef(); let isMounted = useRef(true); - let pauseRef = useRef(false); const { width, height, loop, currentIndex, isPaused, keyboardNavigation, preventDefault, storyContainerStyles = {}, onAllStoriesEnd } = useContext(GlobalContext); const { stories } = useContext(StoriesContext); @@ -35,10 +34,6 @@ export default function () { } }, [isPaused]) - useEffect(() => { - pauseRef.current = pause - }, [pause]) - useEffect(() => { const isClient = (typeof window !== 'undefined' && window.document); if (isClient && (typeof keyboardNavigation === 'boolean' && keyboardNavigation)) { @@ -121,7 +116,7 @@ export default function () { e.preventDefault() mousedownId.current && clearTimeout(mousedownId.current) - if (pauseRef.current) { + if (pause) { toggleState('play') } else { type === 'next' ? next() : previous() @@ -138,7 +133,7 @@ export default function () { bufferAction: bufferAction, videoDuration: videoDuration, currentId, - pause: pause || isPaused, + pause: pause, next }}> @@ -146,7 +141,7 @@ export default function () { From 6b70b3cdf3af1fd06b62e03337b34cc594a8fbcd Mon Sep 17 00:00:00 2001 From: Atipat Pankong Date: Tue, 13 Dec 2022 11:49:42 +0700 Subject: [PATCH 6/8] unuse --- src/components/Container.tsx | 2 +- src/components/ProgressArray.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index ad95fd083..eabd828b2 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -133,7 +133,7 @@ export default function () { bufferAction: bufferAction, videoDuration: videoDuration, currentId, - pause: pause, + pause, next }}> diff --git a/src/components/ProgressArray.tsx b/src/components/ProgressArray.tsx index b6cef5f5d..6634bf5e5 100644 --- a/src/components/ProgressArray.tsx +++ b/src/components/ProgressArray.tsx @@ -71,11 +71,11 @@ export default () => {
{stories.map((_, i) => )} + key={i} + count={count} + width={1 / stories.length} + active={i === currentId ? 1 : (i < currentId ? 2 : 0)} + />)}
) } From d201eed162f67f1897618984bfa731574865ebec Mon Sep 17 00:00:00 2001 From: "voraton.l" Date: Tue, 12 Dec 2023 10:47:57 +0700 Subject: [PATCH 7/8] fix package --- package.json | 114 +++++++++++++++++++++++++-------------------------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index 3751b01f0..43fc6a541 100644 --- a/package.json +++ b/package.json @@ -1,58 +1,58 @@ { - "name": "react-insta-stories", - "version": "2.4.2", - "description": "A React component for Instagram like stories", - "main": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "build": "webpack --mode production", - "build:dev": "webpack --mode development", - "prestart": "webpack --mode development", - "start": "webpack --watch --mode development", - "example": "cd example && npm start", - "test": "echo \"Error: no test specified\" && exit 1", - "predeploy": "cd example && npm install && npm run build", - "deploy": "gh-pages -d example/dist", - "buildall": "npm install && webpack --mode production && cd example && npm install && npm run build", - "postversion": "git push && git push --tags" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/mohitk05/react-insta-stories.git" - }, - "keywords": [ - "stories", - "react", - "instagram" - ], - "author": "mohitk05", - "license": "MIT", - "bugs": { - "url": "https://github.com/mohitk05/react-insta-stories/issues" - }, - "homepage": "https://github.com/mohitk05/react-insta-stories#readme", - "devDependencies": { - "@babel/core": "^7.5.5", - "@babel/preset-env": "^7.5.5", - "@babel/preset-react": "^7.0.0", - "@teamsupercell/typings-for-css-modules-loader": "^2.0.0", - "@types/react": "^16.9.2", - "@types/react-dom": "^16.8.5", - "babel-loader": "^8.0.6", - "css-loader": "^3.2.0", - "gh-pages": "^3.1.0", - "react": "^16.10.2", - "react-svg-loader": "^3.0.3", - "source-map-loader": "^0.2.4", - "style-loader": "^1.0.0", - "ts-loader": "^6.0.4", - "typescript": "^3.5.3", - "webpack": "^4.41.0", - "webpack-cli": "^3.3.9", - "webpack-dev-server": "^3.8.1" - }, - "peerDependencies": { - "react": "^16.8.2 || 17.x || 18.x" - }, - "dependencies": {} -} + "name": "@reiiyuki/react-insta-stories", + "version": "2.4.5", + "description": "A React component for Instagram like stories", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "scripts": { + "build": "webpack --mode production", + "build:dev": "webpack --mode development", + "prestart": "webpack --mode development", + "start": "webpack --watch --mode development", + "example": "cd example && npm start", + "test": "echo \"Error: no test specified\" && exit 1", + "predeploy": "cd example && npm install && npm run build", + "deploy": "gh-pages -d example/dist", + "buildall": "npm install && webpack --mode production && cd example && npm install && npm run build", + "postversion": "git push && git push --tags" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/mohitk05/react-insta-stories.git" + }, + "keywords": [ + "stories", + "react", + "instagram" + ], + "author": "mohitk05", + "license": "MIT", + "bugs": { + "url": "https://github.com/mohitk05/react-insta-stories/issues" + }, + "homepage": "https://github.com/mohitk05/react-insta-stories#readme", + "devDependencies": { + "@babel/core": "^7.5.5", + "@babel/preset-env": "^7.5.5", + "@babel/preset-react": "^7.0.0", + "@teamsupercell/typings-for-css-modules-loader": "^2.0.0", + "@types/react": "^16.9.2", + "@types/react-dom": "^16.8.5", + "babel-loader": "^8.0.6", + "css-loader": "^3.2.0", + "gh-pages": "^3.1.0", + "react": "^16.10.2", + "react-svg-loader": "^3.0.3", + "source-map-loader": "^0.2.4", + "style-loader": "^1.0.0", + "ts-loader": "^6.0.4", + "typescript": "^3.5.3", + "webpack": "^4.41.0", + "webpack-cli": "^3.3.9", + "webpack-dev-server": "^3.8.1" + }, + "peerDependencies": { + "react": "^16.8.2 || 17.x || 18.x" + }, + "dependencies": {} +} \ No newline at end of file From 795f51d8feacaa0783a13923754bc49b5fa92c88 Mon Sep 17 00:00:00 2001 From: "voraton.l" Date: Tue, 12 Dec 2023 10:48:15 +0700 Subject: [PATCH 8/8] fix format --- package.json | 112 +++++++++++++++++++++++++-------------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/package.json b/package.json index 43fc6a541..15f287873 100644 --- a/package.json +++ b/package.json @@ -1,58 +1,58 @@ { - "name": "@reiiyuki/react-insta-stories", - "version": "2.4.5", - "description": "A React component for Instagram like stories", - "main": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "build": "webpack --mode production", - "build:dev": "webpack --mode development", - "prestart": "webpack --mode development", - "start": "webpack --watch --mode development", - "example": "cd example && npm start", - "test": "echo \"Error: no test specified\" && exit 1", - "predeploy": "cd example && npm install && npm run build", - "deploy": "gh-pages -d example/dist", - "buildall": "npm install && webpack --mode production && cd example && npm install && npm run build", - "postversion": "git push && git push --tags" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/mohitk05/react-insta-stories.git" - }, - "keywords": [ - "stories", - "react", - "instagram" - ], - "author": "mohitk05", - "license": "MIT", - "bugs": { - "url": "https://github.com/mohitk05/react-insta-stories/issues" - }, - "homepage": "https://github.com/mohitk05/react-insta-stories#readme", - "devDependencies": { - "@babel/core": "^7.5.5", - "@babel/preset-env": "^7.5.5", - "@babel/preset-react": "^7.0.0", - "@teamsupercell/typings-for-css-modules-loader": "^2.0.0", - "@types/react": "^16.9.2", - "@types/react-dom": "^16.8.5", - "babel-loader": "^8.0.6", - "css-loader": "^3.2.0", - "gh-pages": "^3.1.0", - "react": "^16.10.2", - "react-svg-loader": "^3.0.3", - "source-map-loader": "^0.2.4", - "style-loader": "^1.0.0", - "ts-loader": "^6.0.4", - "typescript": "^3.5.3", - "webpack": "^4.41.0", - "webpack-cli": "^3.3.9", - "webpack-dev-server": "^3.8.1" - }, - "peerDependencies": { - "react": "^16.8.2 || 17.x || 18.x" - }, - "dependencies": {} + "name": "@reiiyuki/react-insta-stories", + "version": "2.4.5", + "description": "A React component for Instagram like stories", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "scripts": { + "build": "webpack --mode production", + "build:dev": "webpack --mode development", + "prestart": "webpack --mode development", + "start": "webpack --watch --mode development", + "example": "cd example && npm start", + "test": "echo \"Error: no test specified\" && exit 1", + "predeploy": "cd example && npm install && npm run build", + "deploy": "gh-pages -d example/dist", + "buildall": "npm install && webpack --mode production && cd example && npm install && npm run build", + "postversion": "git push && git push --tags" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/mohitk05/react-insta-stories.git" + }, + "keywords": [ + "stories", + "react", + "instagram" + ], + "author": "mohitk05", + "license": "MIT", + "bugs": { + "url": "https://github.com/mohitk05/react-insta-stories/issues" + }, + "homepage": "https://github.com/mohitk05/react-insta-stories#readme", + "devDependencies": { + "@babel/core": "^7.5.5", + "@babel/preset-env": "^7.5.5", + "@babel/preset-react": "^7.0.0", + "@teamsupercell/typings-for-css-modules-loader": "^2.0.0", + "@types/react": "^16.9.2", + "@types/react-dom": "^16.8.5", + "babel-loader": "^8.0.6", + "css-loader": "^3.2.0", + "gh-pages": "^3.1.0", + "react": "^16.10.2", + "react-svg-loader": "^3.0.3", + "source-map-loader": "^0.2.4", + "style-loader": "^1.0.0", + "ts-loader": "^6.0.4", + "typescript": "^3.5.3", + "webpack": "^4.41.0", + "webpack-cli": "^3.3.9", + "webpack-dev-server": "^3.8.1" + }, + "peerDependencies": { + "react": "^16.8.2 || 17.x || 18.x" + }, + "dependencies": {} } \ No newline at end of file