Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is Paused prop not working #291

Open
mohsinghafoor opened this issue Aug 19, 2023 · 3 comments
Open

Is Paused prop not working #291

mohsinghafoor opened this issue Aug 19, 2023 · 3 comments

Comments

@mohsinghafoor
Copy link

I'm working with react-insta-stories and passing the prop of isPaused but my stories keeps playing. Here is my component
import { Box, Flex, rem } from "@mantine/core";
import { Fragment, useState } from "react";
import Head from "next/head";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import ArticleCard from "@/components/common/article/Card";
import { Story } from "@/defs/Types";
import ReactInstaStories from "react-insta-stories";
import useBreakpoints from "@/components/common/CustomHooks/useBreakPoints";
import { FaAngleLeft, FaAngleRight, } from "react-icons/fa";
import { MdPause } from "react-icons/md";
import { TiTimes } from "react-icons/ti";
import { BiPlay } from "react-icons/bi";
import styled from "@emotion/styled";
import Link from "next/link";

export default function StoryBlog({
storyData,
}: InferGetServerSidePropsType) {

const { xs } = useBreakpoints()
const [currentSlide, setCurrentSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false)

const handleNext = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % storySlides.length);
};

const handlePrevious = () => {
setCurrentSlide((prevSlide) =>
prevSlide === 0 ? storySlides.length - 1 : prevSlide - 1
);
};
const storySlides = storyData.attributes.slides.map((slide : Slides) => ({
content: () => (

<ArticleCard w={xs ? '244px' : '350px'} story={slide.text} category="TOPICNAME" image={slide.image} height={xs ? rem(380) : rem(500)} />

),
}));

return (

<Flex justify={'center'} direction={'column'} align={'center'} w={'100%'} h={'100vh'} bg={'linear-gradient(0deg, rgba(11, 34, 64, 0.81) 0%, rgba(11, 34, 64, 0.81) 100%), linear-gradient(212deg, rgba(253, 37, 178, 0.70) 0%, rgba(72, 66, 193, 0.70) 100%)'}>
{storyData.attributes.slides.length > 0 &&
<Box pos={'relative'}>
<Cross href={'/blog/stories'}>


<Box pos={'absolute'} top={'-5%'} right={'6%'} onClick={() => setIsPaused(!isPaused)}>{isPaused ? : }
<Flex w='100%' justify={'space-between'} pos={'absolute'} top={'40%'}>

<FaAngleLeft size={xs ? 14 : 22} />


<FaAngleRight size={xs ? 14 : 22} />


<ReactInstaStories
stories={storySlides}
defaultInterval={5000}
width={xs ? 350 : 500}
height={xs ? 500 : 600}
currentIndex={currentSlide}
loop
isPaused={isPaused}
storyContainerStyles={{ background: 'transparent'}}
/>
}


);
}

const Cross = styled(Link)text-decoration: none; position: absolute; right: 0; top: -5%;

const BoxCross = styled(Link)text-decoration: none; position: absolute; right: 2%; top: 2%;

const Card = styled(Flex)outline: 0; box-sizing: border-box; border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem; height: 700px; justify-content: center; align-items: center; background-size: cover; background-position: center; border-radius: 1.0625rem; cursor: pointer; width: 500px; @media (max-width: 786px) { width: 350px; height: 500px; }

const ButtonBox = styled(Flex)border-radius: 30px; border: 1.5px solid #E1E1E1; background: #FFF; box-shadow: 0px 9px 9px 3px rgba(0, 0, 0, 0.10); justify-content: center; align-items: center; height: 60px; width: 60px; cursor: pointer; z-index: 1000; @media (max-width: 600px) { height: 30px; width: 30px; }

@NagapavanTechWorm
Copy link

Hello,

I've been reviewing your code, and I noticed that you're using a ternary operator to conditionally render, but the code is incomplete, component based on the isPaused state:

{isPaused ? : }

@mohsinghafoor
Copy link
Author

@NagapavanTechWorm isPause is a local boolean state like this const [isPause,setIsPause] = useState(false)
and i have a button on button click im reversing state like this onClick={() => setIsPaused(!isPause)}
and then passing this isPause to my ReactInstaStories like this
<ReactInstaStories
stories={storySlides}
defaultInterval={5000}
width={xs ? 350 : 500}
height={xs ? 500 : 600}
currentIndex={currentSlide}
loop
isPaused={isPaused}
storyContainerStyles={{ background: 'transparent'}}
/>

@Avinash1223
Copy link

isPaused not Working


`  const [isPaused, setIsPaused] = useState(false); I have taken a usestate and added a call back function

  const handlestoryplaypause = () => {
    setIsPaused(!isPaused);
  };
  
       < Button onClick={handlestoryplaypause} >click< /Button>      
              
              
                  <Stories
                    stories={getStoriesData(story)}
                    defaultInterval={5000}
                    onAllStoriesEnd={() => handleupdatetory([story])}
                    isPaused={isPaused}
                    onStoryEnd={() => {
                      story.items.forEach((item) => {
                        const isItemRead = item.is_read === true;
                        if (!isItemRead) {
                          handlestory(story?._id, item?._id);
                        }
                      });
                    }}
                    storyContainerStyles={{
                      zIndex: "10",
                    }}
                  />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants