Closed whayu901 closed 2 years ago
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I'm trying to do something like this, without Youtube API, only iframe with embed youtube videos
On renderItem i'm checking if the item type is equal to 'video' and returning an iframe with the url formatted to auto play, if it's not just returning the Item as CarouselItem.
But there's an issue about this approach, the vídeo has been rendered as the first item on carousel, and because of that, the iframe containing the video is been rendered duplicated on carousel, making the video audio to be duplicaded as well.
CarouselItem.tsx
export interface CarouselItemProps {
id: string;
foto: string;
tipo: string;
descricao: string;
}
interface Data {
data: CarouselItemProps;
}
const CarouselItem = ({ data }: Data): JSX.Element => {
const { foto, descricao } = data;
return (
<div
style={{
height: '100vh',
width: '100%',
}}
>
<img
alt={descricao}
src={foto}
style={{
width: '100%',
height: '100%',
}}
/>
</div>
);
};
export default CarouselItem;
Home.tsx
return (
<Spin spinning={loading}>
<Carousel
showStatus
showArrows
infiniteLoop
autoPlay
interval={100000}
showThumbs={false}
renderItem={(item, options) => {
const { props } = item as Item;
const { data } = props;
const { descricao, foto, tipo } = data;
if (tipo === 'video') {
const mediaUrl =
options?.isSelected === false
? foto.replace(/autoplay=1/, 'autoplay=0')
: foto.replace(/autoplay=0/, 'autoplay=1');
return (
<div
style={{
height: '100vh',
width: '100%',
}}
>
<iframe
width="100%"
height="100%"
style={{
width: '100%',
height: '100%',
margin: '0 auto',
}}
src={mediaUrl}
title={descricao}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
);
}
return item;
}}
>
{news.map((item) => (
<CarouselItem key={item.id} data={item} />
))}
</Carousel>
</Spin>
);
};
I want to add images and videos together, but I get an error like this. How can this work properly?
this my code: `
};`