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

[cupoma58]

Привет.
Это - плеер.
Небольшая проблема - в прогресс-блоке. Прогрессы, у меня - вертикальные.
Индикатор прогресса (верхний):

<span class="progres-bar"><span class="progres"></span></span>

.progres-bar {
    position: relative;
    width: 100%;
    height: 68%;
    margin-top: 3px;
    display: flex;
    align-items: flex-start;
    background: #696969;
    cursor: pointer;
}
.progres {
    -webkit-transition: height 0.6s ease;
    height: 0;
    width: 100%;
    background: #cc7600;
}

// инициация прогресса:
video.addEventListener('timeupdate', () => {
    var size = (video.currentTime * 100) / video.duration;
    progres.style.height = size + '%';    
    elapsed.innerHTML = setTime(video.currentTime);
});
 
// выбор эпизода:
pb.addEventListener('click', (e) => {
    var mouseY = e.offsetY;
    progres.style.height = (mouseY * 100) / progres-bar.offsetHeight  + '%';    
    video.currentTime = (video.duration * mouseY) / progres-bar.offsetHeight;  
});

Индикатор звука (нижний):

<span class="saund-bar"><span class="saund"></span></span>

.saund-bar {
    position: relative;
    width: 100%;
    height: 27%;
    margin-top: 3px;
    display: flex;
    align-items: flex-start;    
    background: #696969;
    cursor: pointer;
}
.saund {
    -webkit-transition: height 0.6s ease;
    height: 10%;
    width: 100%;
    background: #cc7600;
}

// выбор уровня громкости:
sb.addEventListener('mousedown', (e) => {
    var mouseY = e.offsetY,
        value = (mouseY * 100) / saund-bar.offsetHeight;
    saund.style.height = value + '%';
    video.volume = value / 100;  
});

Оба прогресса, адекватно, работают т о л ь к о сверху-вниз (Х-вправо, Y-вниз).
Если поменять flex-start на flex-end, т.е. - снизу-вверх, значения, при выборе,
меняются - само-произвольно.
Что посоветуете?

Прикреплённый файлweb.png (153,32 Кбайт, скачиваний: 3)

[macomics]

Сделать два span. Первый для не занатой области, а второй для прогресса

[cupoma58]

Цитата macomics @ 12.11.24, 07:47

Сделать два span

Да, хоть - три. Для JS, рост прогресса/времени - идёт сверху-вниз (mouseY). Выбирая более поздний эпизод - наталкиваешься на уменьшение времени,с начала воспроизведения.

[macomics]

Цитата cupoma58 @ 24.11.24, 07:26

Да, хоть - три. Для JS, рост прогресса/времени - идёт сверху-вниз (mouseY). Выбирая более поздний эпизод - наталкиваешься на уменьшение времени,с начала воспроизведения.

Ничего не понял, но очень интересно.

Так считать не пробовали?

// выбор уровня громкости:
sb.addEventListener('mousedown', (e) => {
    const value = e.offsetY / saund-bar.offsetHeight;
    const percent1 = 100 * value;
    const percent2 = 100 - percent1;
    // отступ
    saund2.style.height = `{percent2}%`;
    // прогресс
    sound.style.height = `{percent1}%`;
    video.volume = value;  
});

Сообщение отредактировано: macomics - 24.11.24, 10:28

[cupoma58]

Решение найдено - тема закрыта.