GrinchPlayer - новый плеер для технопранков

[Nik.]

Предыстория:
- сам я не пранкую, но давно смотрю одного из технопранкеров на YouTube (не называю явно, чтоб не сочли за рекламу)
- плеер от Pyro неплох, не смотря на то, что был сделан 6+ лет назад
- я связался с автором и узнал, что он делает новую версию, которая работает в браузере
- думал помочь ему, но нет опыта с React, учить лень, да и не очень нравится подход полностью нового плеера (нет совместимости с предыдущим)
- есть пример веб-плеера от PranksWood, но у него ряд проблем: все звуки хранятся на сервере, нельзя просто так добавить свои (надо просить автора)
- в общем, решил делать свой плеер, объединяющий все лучшее из текущих, ну и конечно с новыми фишками

Работа была начата 21 июня 2019 года.
Пишите свои предложения и пожелания, но для начала ознакомьтесь с ToDo-списком внизу (многое уже планируется).
Сразу оговорюсь, что брендинг (логотип и ссылки на YouTube и Discord) убирать не планирую, т.к. без технопранкера не было бы и плеера. Делаю на энтузиазме, денег никаких за это не получаю.

vBulletin [media]

———————————————————————————————————
Скачать актуальную версию: GrinchPlayer v1.6.1
- Windows (x64)
- Linux (AppImage)
- MacOS (1.6.0, ZIP)
———————————————————————————————————

Исходники: https://github.com/n3tman/GrinchPlayer

Возможности плеера (зеленым - уже сделано):

ToDo №1, базовые вещи

  Показать 

• выбрать платформу, основные библиотеки -- Electron, jQuery + UI, Bulma
• добавить звук - добавляет один блок в окно, текст как название файла
• проигрывание звука левой кнопкой
• пауза+продолжение проигрывания правой кнопкой
• войти в режим редактирования (пробел)
• возможность перемещать блоки и менять их размер
• возможность открывать несколько окон с программой + настройки сохраняются в папке
• добавить папку - добавляет все звуки из папки
• функционал колоды (список, из которого можно перетаскивать блоки)
• сортировка и фильтрация в колоде (в том числе по длине)
• добавление перетаскиванием файлов/папок из проводника (drag'n'drop)
• сохранить страницу - сохраняет расположение блоков в файл (.json)
• загрузить страницу - загружает расположение блоков из файла
• возможность поменять текст в блоке
• удалить один блок обратно в колоду
• импортировать PPv2 - импортирует .txt файл с расположением блоков из Prank Player v2
• навигатор страниц с фильтрацией - типа того, что сейчас на табе в PP, но отдельной колонкой
• добавление/удаление табов (с отдельными страницами), чтоб можно было переместить из навигатора в окно и создался таб
• спрашивать подтверждение перед массовыми удалениями
• импортировать несколько PPv2 - чтобы выбрать папку "mp3" и автоматически конвертировались/вставились все вложенные
• выбор аудио-устройства для вывода звука
• автоподстройка размера шрифта под ширину/высоту блока
• возможность выделить и переместить/удалить сразу несколько блоков (multi dragging)

ToDo №2, новые фишки

  Показать 

• разрешить больше форматов аудио (все, что поддерживаются)
• настройка зума страниц (ctrl+колесо и чтоб запоминалось)
• функционал проектов (наборов страниц), нажал на проект - открылось сразу несколько табов со страницами
• удаление звука из колоды (из базы или самого файла)
• перенос звуков из одной колоды в другую
• копирование/вырезание блоков из одной страницы в другую
• оптимизация открытия/закрытия страниц и проектов
• сохранение статистики по недавно добавленным / проигранным / частоте проигрывания звуков, открытых страниц
• возможность менять громкость (глобально)
• подсвечивать вкладки 11-20 другим цветом
• покраска блоков в разные цвета (заготовить комбинации фон-текст)
• сделать все пути платформо-независимыми (linux, mac)
• если при импорте файл лежит рядом с папками, не спрашивать папку
• мульти-импорт json-страниц
• массовый экспорт всех страниц в json
• поведение при удалении/переименовании файлов (подсвечивать блок)
• обновить справку, добавить инфу про github
• туториал по функционалу программы при первом запуске (guided tour)
• скомпилировать под Linux
• фильтр блоков по тексту
• открыть расположение файла по клику на звуке
• изменение размера шрифта в блоке
• изменение начертания шрифта (Arial, Verdana и т.п.)
• подсветка недавно добавленных звуков, недавно/часто использованных
• подсветка часто используемых страниц
• открыть звук в редакторе + возможность выбрать редактор по умолчанию
• глобальный поиск по всем страницам и звукам
• "быстрый набор" вкладок (добавляет в текущую или временно открывает) и звуков (начинает проигрывать)
• предпрослушивание страницы (кнопка случайного звука в навигаторе)
• история действий - возможность отменить/повторить последние операции (хотя бы 10 штук)
• счетчики всего и вся: страниц, проектов, блоков на странице и т.п.

ToDo №3, идеи

  Показать 

• горячие клавиши навигации по табам (как в браузере)
• изменение фона страниц (отдельно для каждой и глобально)
• для проектов: возможность задать иконку и изображение
• режим обучения - проигрывает случайный звук, надо найти и нажать + секундомер
• расширенная статистика по страницам и проектам за промежуток времени
• возможность менять высоту звука/скорость воспроизведения (если получится)
• задержка перед проигрыванием звука (для переключения окон)
• несколько звуков на один блок, выбирается случайным образом
• возможность выделить и объединить несколько блоков в один
• поставить трек на фон (напр. помехи на линии, звуки улицы или свой собственный)
• проигрывать звук с определенного места (рисовать волну с возможностью перемотки)
• анализ аудио, показывать предупреждения если слишком тихий или тишина в начале
• автоответчик: распознавать текст, выбирать фразу
• флекс блоков под музыку
• сортировать колоду по длине звука, а не названию

Если у вас есть желание пообщаться в режиме чата, в подписи есть ссылка на Discord, канал - #grinch-player.

[Spector]

Старый плеер был очень удобный, однако при записи пранков, от него был жуткий фон на конечной записи, по этой причине не пользовался.

[Nik.]

Spector

Странно, обычно ведь канал перенаправляют в устройство записи и все норм.
В этом плеере, кстати, будет возможность выбрать устройство вывода.

Кому интересна тема, предлагайте идеи сейчас, потому что потом будет сложнее что-то менять) В Дискорде показываю прогресс с гифками, и там же обсуждаем, что и как лучше сделать.

[Nik.]

Демо функционала колоды + экспорт/импорт страницы (видео без звука):

vBulletin [media]

Кто желает потестировать текущую версию (0.6.0), ссылка: https://yadi.sk/d/apaWox1RJxY7Pw
Установки не требует, просто распаковать в любую папку и запустить.

Что сделано: смотрите в первом сообщении темы (отмечено зеленым).

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

В самой программе сохранение данных о звуках и их расположении происходит автоматически (при выходе).
Также можно сохранить базу вручную: отдельной кнопкой или сочетанием Ctrl+S.

[Nik.]

Добавлено:
- возможность поменять текст в блоке
- возможность удалить один блок обратно в колоду
- полупрозрачная рамка вокруг блоков, чтоб лучше выделялись

Версия 0.7.0: https://yadi.sk/d/ApcqMuiXIwgJlg

vBulletin [media]

---

Также напишу про текущее управление (почти все взято из Prank Player v2).

  Управление 

Глобальные сочетания:

• Пробел - войти в режим редактирования / закрыть колоду
• Ctrl+Пробел - открыть колоду + войти в режим редактирования
• Ctrl+S - сохранить базу

В режиме редактирования:

• левая кнопка на блоке (зажать и двигать) - переместить
• правая кнопка на блоке (зажать и двигать) - изменить размер
• колесо на блоке - проиграть звук
• правая кнопка (нажать) - пауза или продолжение воспроизведения звука (если звук играет)

В режиме проигрывания:

• левая кнопка на блоке - проиграть звук
• правая кнопка (нажать) - пауза или продолжение воспроизведения звука (если звук играет)

Также можно добавлять файлы/папки перетаскиванием из проводника (drag'n'drop):

• перейти в режим редактирования или открыть колоду
• выделить файлы/папки в проводнике
• перенести их в окно GrinchPlayer в область колоды или нижней панели (не на сетку, иначе не добавятся)

[Nik.]

Добавлено:
- возможность импортировать prank.txt файл с расположением блоков из Prankplayer v2 (от Pyro)
- немного обновлен дизайн: верхние ссылки перемещены вниз в панель, кнопки в режиме редактирования объединены в группы.

  Дизайн (гифка) 

Версия 0.7.2: https://yadi.sk/d/2KovJi4D0eEGUA

---

Ради интереса сравнил дизайн старого плеера с текущей версией нового.
Что стало понятно: возможно, стоит убирать сетку в режиме воспроизведения и делать границы блоков более прозрачными (чтобы не так рябило).
Настройка размера/начертания шрифта будет добавлена позже (включая авторазмер).

  Сравнение (картинки) 

PPv2, режим воспроизведения:



PPv2, режим редактирования:



GrinchPlayer, режим воспроизведения:

[контрабас]

Голова!

[Nik.]

Наконец добил один из скучных, но необходимых функционалов:
- навигатор страниц с фильтрацией - типа того, что сейчас на табе в PP, но отдельной колонкой
- добавление/удаление табов (с отдельными страницами), чтоб можно было переместить из навигатора в окно и создался таб

vBulletin [media]

А если более подробно:
- независимые табы, которые можно добавлять, перемещать, переименовывать, удалять
- названия табов/страниц должны быть уникальные. выводятся ошибки, если такое имя уже есть в базе
- навигатор всех добавленных страниц слева. можно удалять ненужные, сортировать, фильтровать, перемещать на табы
- при экспорте страницы название берется из названия таба (транслитом)
- при импорте сохраненных страниц создается новый таб (с проверкой на уникальность названия)
- при импорте PPv2 тоже создается новый таб. название таба = название папки со звуками

Попутно исправлено много багов, но наверное еще остались. Кто заметит, отписывайтесь.

Версия 0.8.0: https://yadi.sk/d/zL4quJ07x780Pw

Также добавил новые задачи:
- для основы: спрашивать подтверждение перед массовыми удалениями
- для новых фич: предпрослушивание страницы (кнопка случайного звука в навигаторе - подсмотрено у PranksWood)

[Петр Порошенко]

Доброго времени.
Есть нобходимость отображения длины трека, не обязательно конкретной, 10+,20+,30+... (хотя бы опционально).
Если убрать сетку, то при большом количестве аудиофайлов возрастает риск нажать не на тот.
Ещё хотелось бы иметь возможность группового изменения размеров блоков, группового перемещения.
+форматов побольше (аас, m4a), т.к. не все редакторы дают бесплатно сохранять в mp3.
И возможность записи из разных источников в разные файлы, если такое возможно.
А так же отдельно играющий трек, для фона.
Дякую!

[Nik.]

Петр Порошенко, приветствую!

Есть нобходимость отображения длины трека, не обязательно конкретной, 10+,20+,30+... (хотя бы опционально).

Подумаю над этим, но вообще суть пранкплеера ведь в коротких фразах, так что особого смысла в этой информации не вижу) Подозреваю, что у вас планируется нестандартное использование для длинных файлов?

Если убрать сетку, то при большом количестве аудиофайлов возрастает риск нажать не на тот.

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

Ещё хотелось бы иметь возможность группового изменения размеров блоков, группового перемещения.

Да, это все планируется. Для начала сделаю групповое перемещение и удаление, потом попробую добавить и изменение размера, цвета и т.п.

+форматов побольше (аас, m4a), т.к. не все редакторы дают бесплатно сохранять в mp3.

Без проблем, в принципе библиотека поддерживает почти все форматы. Уберу текущие ограничения 👌

И возможность записи из разных источников в разные файлы, если такое возможно.

А это лучше все же делать сторонними средствами, например через Voicemeeter.

А так же отдельно играющий трек, для фона.

Неплохая идея, добавлю в список №3. Спасибо!

[Rozencreizer]

>>Подумаю над этим, но вообще суть пранкплеера ведь в коротких фразах, так что особого смысла в этой информации не вижу) Подозреваю, что у вас планируется нестандартное использование для длинных файлов?

Бывают моменты когда надо. Еще в некоторых вырезках бывает чужой голос.

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

[hefawe_maillist]

Пахнет электроном. Ты эту плеер на жыес нахлабучил шоли?

[Nik.]

hefawe_maillist, так точно)

Мне так проще, интереснее, да и хоть какая-то польза на будущее (сам фронтендер).
До этого с электроном не работал, это будет первый проект.

Знаю, что большинство кулцхакеров на него плюется, но для меня главное - результат и количество фич. Да, местами платформа подтормаживает (возможно, из-за некоторых моих решений тоже), но зато я смогу скомпилировать все под Linux и MacOS помимо винды, чтобы больше людей делало технопранки. И когда основные фичи будут сделаны, займусь оптимизацией (пока не вижу в этом смысла).

Сообщение от Rozencreizer

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

Интересно, но нужно лучше понять, когда такой функционал может применяться.

---

Закрыл еще пару фич (добавление/закрытие табов, предупреждения и массовый импорт PPv2):

vBulletin [media]

[Rozencreizer]

Я когда кошмарю конференции разные в телеге. Нужно успевать нажимать диктофон для записи.
Да, это не для технопранка в обычном смысле. Но зайдя в конференцию от имени анусовой и покошмарить их ее голосом. Устраивать диалоги внутри. К примеру, я угарал, когда записывал как гоген соблазняет спидовую(еще по сливам).

[Nik.]

А, понятно. Но мне кажется, тут можно просто окна расположить справа и слева, нажать на запись в телеге, переместить мышку на плеер и нажать на звук. Может даже в ТГ есть горячая клавиша для записи звука, тогда еще проще)

UPD: а не, пока нет горячих, в разработке еще https://github.com/telegramdesktop/tdesktop/issues/1060

[Nik.]

Добавлено:
- автоподстройка размера шрифта под ширину/высоту блока
- выбор аудио-устройства для вывода звука
- закрыть текущий таб можно через Ctrl+W
- кнопки цифр 1-9 переключают табы (на Numpad в том числе)

Версия 0.9.0: https://yadi.sk/d/1VjuqfVp7abt9A

vBulletin [media]

[Nik.]

Закончил весь базовый функционал:
- возможность выделить и переместить/удалить сразу несколько блоков (multi dragging)
- справка по работе с программой (кнопка "Помощь")

  Гифка 

Версия 1.0.0 (релиз!): https://yadi.sk/d/Zam3vXV9eitZPg

Просьба модераторам: переименуйте тему в GrinchPlayer - новый плеер для технопранков, пожалуйста.

[Nik.]

Плеер был проверен на стриме и немного оптимизирован.

Версия 1.1.0: https://github.com/n3tman/GrinchPlay...ayer.1.1.0.exe

1. изменен интерфейс, нижняя панель убрана вправо
2. сайдбары теперь всегда открыты
3. убраны тултипы в режиме редактирования
- чтобы переименовать таб: правая кнопка на нем
- чтобы переименовать блок: Ctrl+правая кнопка
- удаление блоков: выделить область (чтоб блок стал зеленым) и нажать Delete
4. оптимизирована массовая загрузка PPv2
- теперь новые вкладки не создаются (только добавляется элемент в список)
должно стать чуть быстрее, пока на этом оптимизация закончена

  Гифка 

[Nik.]

Добавлено:
- разрешить больше форматов аудио (все, что поддерживаются)
- настройка зума страниц (ctrl+колесо и чтоб запоминалось)

Поддежка форматов: MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC

Зум с шагом в 1%, чтоб точнее подобрать.

И еще сделано:
- подсветка крестиков в навигаторе
- сбрасывать выделение при переключении табов и выходе из режима редактирования
- продублировать зум на +/−
- улучшенные уведомления при массовом добавлении страниц (упорядочил с 1 страницей)
- двойной клик по страницам и звукам в колоде (для добавления)
- фикс: крестик помощи, который налазит на табы
- нажать = зажать, обновлена справка
- переделать названия вкладок нижнего ряда (подписываются буквы)
- при импорте: сверху написано к какому jsonу выбирается папка со звуками
- фикс: бесконечная загрузка при выборе папки на Nx PPv2

Версия 1.1.3: https://github.com/n3tman/GrinchPlay...ayer.1.1.3.exe

vBulletin [media]

[Nik.]

Добавлено:
- проекты (наборы страниц), нажал на проект - открылось сразу несколько табов со страницами
- можно выделять блоки из любого места через Shift+Левая кнопка (зажать и двигать)
- панель информации теперь справа

Версия 1.2.0: https://github.com/n3tman/GrinchPlay...ayer.1.2.0.exe

vBulletin [media]