I am presently trying to populate a wix repeater with a youtube playlist via api call. I intend on adding in a video player component, but presently I cannot get anything to populate into the repeater boxes or the items I have put in them so far.
This is for a standalone custom app, so most of this work is being done from the blocks editor in WIX, for a specific widget.
I have made some code already, and it does call the playlist information but there is an unknown error between the data being populated into the repeater items.
Here is the code I am presently using:
import wixData from 'wix-data';
const ITEMS_PER_PAGE = 10;
let currentPage = 1;
let isLoading = false;
const DEBUG_MODE = true; // Set to false to disable debug logs
$w.onReady(function () {
loadMoreVideos(); // Load initial set of videos
$w('#repeater1').data = [];
// Add event handler for repeater item ready
$w('#repeater1').onItemReady(repeater1_itemReady);
});
async function loadMoreVideos() {
if (!isLoading) {
if (DEBUG_MODE) console.log('Loading more videos...');
isLoading = true;
const API_key = 'YOUR_YOUTUBE_API_KEY';
const playlistId = 'YOUR_PLAYLIST_ID';
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
try {
if (DEBUG_MODE) console.log('Fetching data from YouTube API...');
const response = await fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlistId}&key=${API_key}&maxResults=${ITEMS_PER_PAGE}&startIndex=${startIndex}`);
const data = await response.json();
if (DEBUG_MODE) console.log('Data fetched successfully:', data);
if (data.items) {
const videos = data.items.map(item => ({
videoId: item.snippet.resourceId.videoId,
title: item.snippet.title,
thumbnailUrl: item.snippet.thumbnails.default.url
}));
if (DEBUG_MODE) console.log('Videos extracted from data:', videos);
const currentData = $w('#repeater1').data;
$w('#repeater1').data = currentData.concat(videos);
currentPage++;
if (DEBUG_MODE) console.log('Videos loaded successfully.');
}
} catch (error) {
console.error('Error loading videos:', error);
}
isLoading = false;
}
}
// Repeater item ready event handler
function repeater1_itemReady($item, itemData, index) {
$item('#text1').text = `https://www.youtube.com/watch?v=${itemData.videoId}`;
// Populate other elements with video information
$item('#text2').text = itemData.title;
$item('#imageX1').src = itemData.thumbnailUrl;
}