Hello Friends,
This is my first post so would love any suggestions on how to make posts here.
So I have a shopify widget which is type of clone for
Instagram stories, with videos but I noticed some issues where my videos are kind of unresponsive or just shuts down.
Below is the screen shot of the issue:
This problem I noticed on iPhone 11 Pro on clients phone, the IOS version is below 26.
Some times my iPhone 13 also faces same issue but only when battery is low and multiple heavy apps are opened.
Attached a code block also:
{validStories.map((story) => {
const videoUrl = extractVideoUrl(story.sv?.[0]?.m);
const storyThumbnail = story.tu && story.tu.length > 0 ? story.tu : null;
const videoThumbnail = story.sv?.[0]?.m?.[0]?.t && story.sv[0].m[0].t.length > 0
? story.sv[0].m[0].t
: null;
const thumbnailUrl = storyThumbnail || videoThumbnail;
const hasThumbnail = !!thumbnailUrl;
const isPlaying = playingVideoIds.has(story.i);
const shouldRenderWrapper = hasThumbnail || isPlaying;
return (
<div
key={story.i}
className="ins-story-item"
onClick={(e) => {
handleActiveStoryChange(story.i, e);
handleActiveVideoId(story.i);
}}
style={{ position: "relative", zIndex: 1 }}
>
{shouldRenderWrapper && (
<div
className="ins-story-circle-wrapper"
style={{ position: "relative", overflow: "hidden" }}
>
{hasThumbnail && !isPlaying && (
<img
src={thumbnailUrl}
alt={story.t}
className="ins-story-image"
onError={() => {
console.log(
`[Story ${story.i}] Thumbnail failed to load: ${thumbnailUrl}`
);
}}
/>
)}
<video
src={videoUrl}
className="ins-story-video"
autoPlay={true}
muted
playsInline
loop
onLoadedData={() => handleVideoPlaying(story.i)}
onPlaying={() => handleVideoPlaying(story.i)}
onError={(e) => {
console.log(`[Story ${story.i}] Video error`, e);
}}
/>
</div>
)}
{story.t !== "New Collection" && (
<span className="ins-story-title">{story.t}</span>
)}
</div>
);
})}
</div>
{activeStoryId && <StoryModal />}
</>```