I have an array of files, and want to display only one based on the detected screen width. I'm having trouble trying to loop through and check against both the current item in the array and the next one.
Here are some requirements:
viewportWidth is greater than or equal to the largest video width, then choose the largest video.viewportWidth is less than or equal to the smallest video width, then choose the smallest videoviewportWidth is smaller than the current item but larger than the next one, then choose that video.Here's my current code but I can't seem to get the looping/conditions part right:
const viewportWidth = 1800;
const videos = [{
url: 'video1.mp4',
width: 1920
},
{
url: 'video2.mp4',
width: 1280
},
{
url: 'video3.mp4',
width: 720
},
{
url: 'video4.mp4',
width: 560
},
{
url: 'video5.mp4',
width: 420
},
];
function getVideoUrl(viewportWidth) {
if (viewportWidth > videos[0].width) {
return videos[0].url;
}
if (viewportWidth < videos[videos.length - 1].width) {
return videos[videos.length - 1].url;
} else {
let i = 0;
while (viewportWidth < videos[i].width && viewportWidth > videos[i + 1].width) {
i++
}
return videos[i].url;
}
}
const videoUrl = getVideoUrl(viewportWidth);
console.log(videoUrl);Based on the above:
viewWidth = 1200 // should output video2.mp4
viewWidth = 2000 // should output video1.mp4
vewWidth = 300 // should output video5.mp4
Your approach is way too complicated, IMHO :-)
Just loop through the videos in reverse order, and as soon as you find one with a width greater(-equal) than your viewport width, return that one.
If you didn't find one, then simply return the first one, after the loop.
function getVideoUrl(viewportWidth) {
for (let i = videos.length-1; i >= 0 ; --i) {
if (videos[i].width >= viewportWidth) {
return videos[i];
}
}
return videos[0];
}
The while inside the else will always be executed and always return the second video in this example.
Try to keep it stupid simple instead