const content = [{start: 0, end: 50, id: 'C1'},{start: 50, end: 100, id: 'C2'}]; const ad = [{start:10, end: 20, id: 'A1' },{start:30, end: 60, id: 'A2' },{start:80, end: 140, id: 'A3' }]; const cPoints = content.flatMap(e => [e.start, e.end]); // [0, 50, 50, 100] const aPoints = ad.flatMap(e => [e.start, e.end]); // [10, 20, 30, 60, 80, 140] const rangeMin = Math.min(...cPoints); // 0 const rangeMax = Math.max(...cPoints); // 100 const rangePoints = [...new Set([...aPoints, ...cPoints])] // [10, 20, 30, 60, 80, 140, 0, 50, 100] .filter(point => (point >= rangeMin) && (point <= rangeMax)) // [10, 20, 30, 60, 80, 0, 50, 100] .sort((a, b) => a - b); // [0, 10, 20, 30, 50, 60, 80, 100] const getObjByPoint = (point, arr) => arr.find((e) => (e.start <= point) && (point <= e.end)); const getFirstId = (point) => (getObjByPoint(point, ad) || getObjByPoint(point, content)).id; const result = rangePoints.reduce((acc, end, index, arr) => { if (index === 0) return acc; let start = arr[index - 1]; const middle = (start + end) / 2; const id = getFirstId(middle); if (acc.at(-1)?.id === id) { start = acc.pop().start; } acc.push({ start, end, id }); return acc; }, []); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

 // manipulate timeline to find "gaps" and place "ads" // recursive method controlled by "idx" const splitTimeline = (arr, advArr, idx) => { const res = [...arr]; // shallow-copy intermediate result array const ad = advArr[idx]; // direct access to current iteration of "ad" arr.forEach( ({ start, end, id }, rIdx) => { // de-structure and res-array-index if ( // place "ad" in existing "gap" start < ad.start && end >= ad.end && id === 'gap' ) { res.splice(rIdx, 1, { start, end: ad.start, id: 'gap'}); res.splice(rIdx + 1, 0, { start: ad.start, end: Math.min(end, ad.end), id: ad.id }); if (end > ad.end) res.splice(rIdx + 2, 0, { start: ad.end, end, id: 'gap' }); } else if ( // handle edge-case (last "ad" exceeds timeline idx === advArr.length - 1 && id === 'gap' && ad.start > start && ad.start < end ) { res.splice(rIdx, 1, { start: ad.start, end: end, id: ad.id }); res.splice(rIdx, 0, { start: start, end: ad.start, id: 'gap' }); } } ); // recurse if all "ads" not yet processed if (idx < advArr.length - 1) return splitTimeline(res, advArr, idx + 1); else return res; }; // method to fill "gaps" with "content" (c-array - content-array) const addContent = (tl, carr) => ( // "tl" is current timeline tl.map(({ start, end, id }) => { // iterate over "tl" // if "ad", simply return it as-is if (id !== 'gap') return {start, end, id}; // otherwise, find a matching "content" id for existing "gap" return {start, end, id: carr.find( ob => start >= ob.start && end <= ob.end )?.id ?? "no content"} // optional chain "id" or return "no content" }) ); // simple method to construct, update a timeline // and place contents and ads within the timeline const placeAds = (cn, ad) => { const cBgn = Math.min(...cn.map(({ start }) => start)); const cEnd = Math.max(...cn.map(({ end }) => end)); const initialTimeline = [{ start: cBgn, end: cEnd, id: 'gap' }]; return ( addContent( // method to add "content" splitTimeline( // method to split timelines and place "ads" and "gaps" initialTimeline, ad, // the ad array 0 // initial ad array index set to 0 (for recursion) ), cn // the content array ) ); }; const content = [ {start: 0, end: 50, id: 'C1'}, {start: 50, end: 100, id: 'C2'}, ]; const ad = [ {start:10, end: 20, id: 'A1' }, {start:30, end: 60, id: 'A2' }, {start:80, end: 140, id: 'A3' }, ]; console.log(placeAds(content, ad));

 .as-console-wrapper { max-height: 100% !important; top: 0; }