JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<ul></ul>
<div>Player</div>
<button>Add clip</button><br /><br /><br /><br />
<textarea></textarea>

CSS

body {
    margin: 0;
}
div {
    position: absolute;
    top: 0;
    left: 50%;
    height: 240px;
    overflow: hidden;
    line-height: 240px;
    outline: 2px solid #000;
    text-align: center;
    font-size: 30px;
    z-index: 2;
    background: rgba(200, 200, 200, 0.5);
}
ul {
    height: 150px;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    float:left;
    outline: 1px solid #F00;
    line-height: 280px;
    height: 100%;
    text-align: left;
    background: #DDF;
    position: relative;
    
}
.teaser {
    
}
.widthTeaser {
    background: #DFD;
}
span {
    display: block;
    position: absolute;
    top:-128px;
    right: 5px;
}
textarea {
    width: 100%;
    height: 200px;
}

JavaScript

var counter = 1;
var isFillerInserted = false;
var widthTeaser = 190;
var widthWindow = $(window).width();
var widthPlayer = 360;
var k = 0;

var widthLimit = (widthWindow/2) - (widthPlayer/2);
log('widthLimit: ' + widthLimit);
var i = Math.ceil(widthLimit/widthTeaser);
log('i: ' + i);
var widthFiller = (widthLimit + widthPlayer) - i*widthTeaser;
log('widthFiller: ' + widthFiller);

$('div').css({
    width: widthPlayer,
    marginLeft: -widthPlayer/2
});

$('button').click(function() {
    $('ul').append('<li class="teaser"><span>[x]</span>Teaser ' + counter + '</li>');
    $('.teaser').width(widthTeaser);
    var ulWidth = counter*widthTeaser;    
    if(ulWidth > widthLimit && !isFillerInserted) {
        $('.filler').remove();
        $teaser = $('.teaser').eq(k + i);
        console.log($teaser);
        $('<li class="filler">kk</li>').insertAfter($teaser);
        $('.filler').width(widthFiller);
        ulWidth += widthFiller;
    } else {
        $('.filler').remove();
    }
    $('ul').css('width', ulWidth);
    counter++;
        
});

function log(txt) {
     $('textarea').val($('textarea').val() + '\n' + txt);   
}