Вертикальный прогресс-бар, смена направления прогрсса

[cupoma58]

Есть рабочий плеер, для сайта, с вертикальным прогрессом воспроизведения и звука.
HTML:

<span class="progres-bar" title="прогресс"><span class="progres"></span></span>

CSS:

.progres-bar {
    position: absolute;
    width: 30px;
    height: 68%;
    top: 0;
    right: 0; 
    display: flex;
    align-items: flex-start;               /* сверху-вниз, по оси Y */
    background: #696969;
    cursor: pointer; 
}
.progres {
    -webkit-transition: height 0.6s ease;   
    height: 0;
    width: 100%;
    background: #cc7600; 
}

JS:

    var size = (video.currentTime * 100) / video.duration; 
    progres.style.height = size + '%'; 
    .....
    var mouseY = e.offsetY;
    progres.style.height = (mouseY * 100) / pb.offsetHeight  + '%';
    .....
    var value = (mouseY * 100) / sb.offsetHeight;
    saund.style.height = value + '%'; 
    video.volume = value / 100;

Прогресс растёт сверху-вниз (по Y) и с выбором эпизода/громкости - всё нормально.
При запуске прогресса снизу-вверх (flex:end), выбор более позднего эпизода - сталкивается с фактическим уменьшение времени воспроизведения.
Что посоветуете?

[Aetae]

а) Пересчитывать математику, а не только менять css.
б) Не трогать flex, а просто использовать transform: rotate(180deg).