Увеличить высоту прогресс-бара

Avatar
  • обновлен

Все довольно неплохо работает, без тормозов, подвисаний и прочего но в плане удобство огорчает полоска перемотки трека, на моем экране она 2мм в ширину, у меня мышь толще на экране раза в 3 и я должен попасть кончиком мыши в эту полоску, часто я промахиваюсь и нажимаю чуть ниже, появляется новый трек лист, потом я жму обратно и мне приходится крутить колесико мыши что бы найти трек который играл, маркером же служит 3мм желтый кружок на эконке, если на эконке есть желтый цвет то ты будешь искать играющий трек еще дольше. Вот предложения, сделать полоску толще,это норм будет выглядеть, в идеале сделать управление плеером что бы я мог его перемещать по странице и регулировать его размер (жир конечно но это удобнее, так же что бы он мог следовать за мной по вкладкам как и видео в яндекс браузере, кстати я использую его только из за того что в нем без настроек мне впервые встретилась функция такая с видео). Ну и далее, при играющем треке, если я открываю плей лист из которого играет песня, что бы лист открывался том месте где расположен играющий трек, что бы не приходилось крутить колесико. Экран 21-24, мышь на скрине скорее всего не видна

A
Дубликаты
Очень легко промахнуться с прогресс бара песни и удалить песню

Прогресс бар тонкий, и когда прослушиваешь песню кусочками, чтобы понять, понравится она тебе или нет, можно легко совсем чуть чуть выйти за рамки прогресс бара. И если это сделать над кнопкой удаления песни, хоть на миллиметр, то удалишь песню, хотя точно этого не хотел.

Т.е. кноки под прогресс баром начинают быть кликабельны сразу же под ним, что с учетом толщины прогресс бара не очень удобно.

Опустите зону кликабельности кнопок под прогресс баром или расширте его, чтобы не было случайных нажатий на эти кнопки

Удобная шкала перемотки

День добрый. Очень часто сталкиваюсь с проблемой "ложных нажатий" при перемотке трека. Это получается из-за того, что полоска с этой самой перемоткой очень тонкая. Зеленым цветом я пометил места с ложными нажатиями.

Предлагаю соответственно расширить данную полосу вверх и вниз + оставить небольшие отступы. Так же не помешала бы визуализация трека в этой самой полосе. Бывает ищешь хороший трек и, вместо того чтобы слушать его целиком, бегло пробегаешь, но тыкая наугад попадаешь в моменты пауз, затуханий и т.д. Предлагаю сделать что-то типа того, что я изобразил на примере ниже.

Полосу прогресса шире

Полоса прогресса воспроизведения очень узкая. Желательно раза в 3 увеличить, или сделать возможность самостоятельно выбирать ширину. При "перемотке" трека, часто по случайности, нажимаю на элементы управления под этой полосой. А пользуюсь "промоткой" часто. Очень не удобно.

Кнопки в плеере (сердечко, плюсик, игнор) растянуты на всю высоту. Поэтому очень часто когда промахиваешься по полосе прокрутки, то можно нажать случайно одну из кнопок.

Нужно сделать так, чтобы кнопки работали только при щелчке по иконке.

Avatar
David Melikidze

даа реворк бара был бы кстати!

Avatar
Андрей Тепляков

Хотелось бы более совершенную реализацию вышеописанной идеи, а именно настраиваемый размер рабочих элементов интерфейса. Естественно на маленьком экране ноутбука и на большом 4К экране все будет выглядеть совершенно иначе. Нужно чтобы настраивался размер элементов и определялся физический размер пикселя\экрана для корректного отображения.

Avatar
Дмитрий Жирнов

Всеми руками и ногами поддерживаю увеличение высоты прогрессбара, как в веб версии так и в приложении. В веб версии конечно можно самостоятельно "колхозить" с кустарными CSS стилями - тем самым увеличивая его высоту. Но это не удобно. А в приложении совсем беда, никак не увеличишь. В идеале, наверное настраиваемые скины. Кому то и так хорошо, а кто то перестаёт пользоваться продуктом из-за неудобств.

Avatar
vt1980

Минимум в 3 раза надо шире сделать. А лучше с возможностью регулировать высоту. Во время "перемотки" трека, трудно попасть в полосу, и нажимается всё что не надо.

Avatar
Alexander Popov

Согласен. К счастью, я веб-разработчик, и сам смог без трудностей поднастроить сайт под себя.

1. Я использую расширение Stylus

2. Я написал там следующие стили:

/* это чтобы не только при наведении */
.bar__content .progress_branding .progress__bar,
.bar__content .progress_branding .progress__bg,

/* это при наведении */
.bar__content:hover .progress_branding .progress__bar,
.bar__content:hover .progress_branding .progress__bg {
    height: 16px;
    line-height: 17px; /* стоит делать на 1px больше самой высоты */
}

Надеюсь, кому-то поможет.

Также для постоянного отображения времени на прогресс-баре я дописал следующие стили:

.progress__left,
.progress__right {
    display: inline-block;
}

Ну и немного увеличил масштаб сайта, как многих других.