saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-22 16:51:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix for switching videos, also style fix

Browse Source
This commit is contained in:
austinkelsay 2024-11-10 16:15:04 -06:00
parent 152721a5d5
commit d750872ba5
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/content/carousels/InteractivePromotionalCarousel.js
View File

@ -72,7 +72,23 @@ const InteractivePromotionalCarousel = () => {
useEffect(() => {
if (videoRef.current && selectedPromotion.video) {
videoRef.current.play();
const playVideo = async () => {
try {
videoRef.current.load();
await videoRef.current.play();
} catch (error) {
console.warn('Video playback failed:', error);
setTimeout(async () => {
try {
await videoRef.current?.play();
} catch (retryError) {
console.warn('Video retry failed:', retryError);
}
}, 100);
}
};
playVideo();
}
}, [selectedPromotion]);
@ -87,6 +103,7 @@ const InteractivePromotionalCarousel = () => {
loop
muted
playsInline
onError={(e) => console.warn('Video error:', e)}
/>
) : (
<Image
@ -141,7 +158,7 @@ const InteractivePromotionalCarousel = () => {
) : (
<>
<div className="absolute inset-0 from-black via-black/70 to-transparent rounded-lg" />
<div className={`bg-gray-800/90 rounded-tr-lg absolute bottom-0 left-0 p-4 space-y-2 ${isTabView ? 'pb-16' : 'max-w-[80%]'}`}>
<div className={`bg-gray-800/90 rounded-tr-lg absolute bottom-0 left-0 p-4 space-y-2 rounded-bl-lg ${isTabView ? 'pb-16' : 'max-w-[80%]'}`}>
<div className="uppercase text-sm font-bold text-[#f8f8ff]">{selectedPromotion.category}</div>
<h2 className="font-bold leading-tight text-white drop-shadow-lg">
{selectedPromotion.title}