[{{mminutes}}:{{sseconds}}] X
Пользователь приглашает вас присоединиться к открытой игре игре с друзьями .
Ctrl предыдущая следующая Ctrl Страницы
1 2 3 4 5

Форум «Программное обеспечение» / Скрипт расширяющий возможности чата

Душа_Чата Сообщение #1 2 апреля 2023 в 23:41
Маньяк
2
Предлагаю желающим воспользоваться этим скриптом для чата, который расширяет его возможности.
Первоначальный взгляд на общий вид.
скрытый текст…


С этим скриптом вы сможете ↓

→ 1. Просматривать количество текущих пользователей в чате.

скрытый текст…



→ 2. Настраивать звуковые оповещения по иконке динамика.

скрытый текст…


Кнопка может быть в трёх состояниях.

1. Состояние, когда не происходит никаких звуковых уведомлений.
скрытый текст…


2. Состояние, когда голосом уведомляется о зашедших и вышедших пользователях в чат (из чата). Проигрывается звуковой сигнал о поступившем сообщении в чат.
скрытый текст…


3. Состояние, когда помимо уведомления голосом о захождении и выхода пользователя, также зачитывается голосом каждое поступившее в чат сообщение вместо звукового сигнала.
скрытый текст…


P.S. В настройках данной кнопки скрыта ещё одна настройка скорости и тембра озвучиваемого голоса при голосовых оповещениях и зачитывании сообщений.
Для того, чтобы настроить скорость, необходимо зажать клавиш Ctrl и нажимать ЛКМ по кнопке и тем самым будет уменьшаться скорость, нажимая ПКМ, вы будете увеличивать скорость зачитывания. Изначальная скорость выставлена в 1.5.
скрытый текст…

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


Также внутри кода имеются дополнительные тонкие настройки
скрытый текст…

1. Громкость голоса относительно выставленной громкости в настройках системы, а именно 80% от 100% системной громкости.
const voiceVolume = 0.8;


2. Громкость звукового оповещения о новом сообщении или же звук оповещения о зашедшем или вышедшем пользователе. 20% от системной 100% громкости.
const beepVolume = 0.2;


3. Продолжительность длительности звукового сигнала или связки групповых сигналов в некоторых случаях в миллисекундах.
const duration = 80;


Остальные настройки не рекомендуется менять, но если вы экспериментатор и знаток кода, то можете пощупать. На ваше усмотрение. Всё в ваших руках.

→ 3. Устанавливать рамки на оповещения о новых сообщениях.
Кнопка может быть в двух состояниях.

* (1) Состояние, когда уведомления о новых сообщениях или зачитывание происходит от всех пользователей в чате.
скрытый текст…

* (2) Состояние, когда уведомления о новых сообщениях или зачитывание, происходит от пользователей, которые к вам обратились по никнейму или же по словам, заданные в массив (внутри кода), называемые алиасами (aliases).
скрытый текст…

как слова ваших предыдущих никнеймов или других слов возможно упоминающих о вас.
скрытый текст…

Вот пример того, как в чате происходит обращение к вам.
скрытый текст…

В данном случае слово обращения (никнейм) обрамляется в зелёный прямоугольник. Также в этот же прямоугольник включаются и слова алиасы (aliases).
Это личные к вам сообщения, которые озвучиваются другим типом звукового оповещения в сравнении со звуком обычных сообщений не обращённые к вам.

→ 4. Просматривать историю пользователей, которые заходили в чат, на момент, пока вы тоже присутствовали в чате.

скрытый текст…

Также вы могли заметить, что возле данной кнопки в левом нижнем углу находится элемент с цифровым значением,
скрытый текст…

который отображает колличество сохранённых пользователей в КЭШ, которые при открытии, будут представлены в КЭШ панели.

Это достаточно обширная интеграция, которая нуждается в поэтапном описании.
Когда вы кликаете по кнопке с иконкой базы данных, то открывается так называемая КЭШ (Cache) панель, где она представлена в таком виде.
скрытый текст…

Внутри этой панели начнём разбираться по порядку. Первое на что стоит обратить внимание, так это на возможность настройки автоматического сброса КЭШ,
скрытый текст…

который используется функционалом скрипта и необходим для корректной работы кастомного списка пользователей в чате.
скрытый текст…

Для настройки необходимо кликнуть на время оранжевого цвета указанного стрелкой, напротив которого описание Threshold и в появившемся всплывающем окне,
указать время в формате (HH, HH:mm, или HH:mm:ss), что означает [Только часы, Часы + минуты, Часы + минуты + секунды].
скрытый текст…

Рядом с кликабельным значением времени также присутствует ещё элемент Countdown, где в реальном времени отображается счётчик, показывающий сколько осталось времении, до автоматического сброса КЭШ.
скрытый текст…

В самом верхнем правом углу находятся две кнопки.
скрытый текст…

Первая кнопка с корзинкой необходима для удаления КЭШ вручную, если в этом будет необходимость, чтобы актуализировать КЭШ пользователей.
Вторая кнопка с крестиком закрывает КЭШ панель.

P.S. КЭШ панель, это графическое представление сохранённых всех пользователей со всеми необходимыми данными, такими как:
1. Ссылка на самую актуальную пользовательскую аватарку
скрытый текст…

2. Никнейм пользователя
скрытый текст…

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

скрытый текст…

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

4. Ниже дата регистрации пользователя, а при наведении курсором мыши на время регистрации, происходит конвертация во время нахождения пользователем на сайте в целом, в общем.
скрытый текст…

5. Ещё ниже полоска данных о лучшем рекорде (иконка ракеты), рейтинговом уровне (иконка звезды), колличестве машинок в гараже (иконка машины), колличестве друзей (иконка рукопожатия).
скрытый текст…

Все эти элементы кликабельны и ведут на соответствующий раздел связанный с конкретным выбранным пользователем с которым ведётся манипуляция.
Опять же, повторюсь, что все эти данные в основном используются для корректной работы кастомного списка пользователей чата, но графическое представление также считается уместным для понимания о том, какие всё-таки пользователи могли сегодня побывать в чате и получить быструю информацию по каждому из них.
Весь этот список пользователей хранится в вашем браузере в localStorage https://developer.mozilla.org/en-US/docs/We...ow/localStorage, после первой успешной подгрузки этих данных с API сайта. Необходимо это для того, чтобы не запрашивать каждый раз всю эту информацию с сайта, как только вы заходите на страницу с чатом. Делается это для того, чтобы в последующие сессии, список пользователей в чате прогружался молниеносно и не создавать излишнюю нагрузку на сайт частыми запросами.
По мере того, как вы находитесь в чате, в него будут поступать всё новые и новые посетители, которые с первичной загрузкой не были подгружены в localStorage (КЭШ) и будут подгружены единожды туда же и сохранённые данные аналогично будут использованы в последующие загрузки и перезагрузки страницы с чатом.


→ 5. Просматривать на лету колличество введённых символов в поле для ввода чата.

скрытый текст…

С каждым напечатанным символом, увеличивается числовое значение. Также меняется цветовое оформление по мере увеличения колличества символов.
Изначальное сероватое состояние со значения 0, от 90 до 100 плавно окрашивается в жёлтую гамму, со 190 до 200 в оранжевую, с 250 окончательно уходит в красную.
скрытый текст…

Альтернативный метод отслеживания колличества введённых символов также происходит в самом чате. Он оформлен в подвижном состоянии и двигается всегда за последним введённым символом.
скрытый текст…

Данный бегунок длинны сообщения также эффектно появляется и скрывается с определённой анимацией.
По мере ввода символов отображается цифровое значение со стрелкой вперёд. По мере удаления цифровое значение со стрелкой назад.
Цветовое оформление аналогично первому решению в самой панели кнопок.

→ 6. Пользоваться обновлённым списком чата с куда более современным подходом оформления.

скрытый текст…


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

скрытый текст…

2. Сортировка пользователей происходит по рангам с цветовым обозначением и их группированием в неразграничённые группы.
Возрастание ранга начинается снизу вверх, то-есть самый низший ранг будет в самом низу, а самый наивысший ранг в самом верху.

скрытый текст…

3. С правой стороны от ника имеются отображения ГОЛУБОЙ звезды для отслеживаемых пользователей.
скрытый текст…

Отслеживаемые пользователи добавляются внутри кода.
скрытый текст…

Добавлять их нужно одной целой корректно оформлённой строкой с запятой в конце.
скрытый текст…

В запятой нет необходимости, если это последняя строка.
скрытый текст…

Пример строки кода:
{ name: 'Даниэль', gender: 'male', pronunciation: 'Даниэль' }, // ------------ 01

name, это свойство где указывается никнейм пользователя, в gender указывается пол пользователя, а в pronunciation это то, как именно будет произнесён голосом зашедший или вышедший из чата пользователь чата.
Вы можете скопировать весь этот блок кода и корректировать под себя, в зависимости от того, каких пользователей вы хотели бы отслеживать. Быть в курсе о их присутствии и отсутствии в чате.
4. Отображение пользователя незабаненным и в бане графически оформлено иным образом. Иконка для перехода в профиль окрашивается в зелёный цвет для тех кто не в бане, а красным для тех кто в бане. На gif скриншоте правда можно увидеть только зелёные иконки незабаненных пользователей, так как именно в этот момент забаненных не оказалось.
скрытый текст…

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

→ 7. Отправлять в чат ютуб ссылки с последующей конвертацией в проигрыватель.

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


→ 8. Отправлять в чат ссылки на картинки с последующей конвертацией в превью.

скрытый текст…

Кликнув на превью можно открыть картинку на весь экран.
скрытый текст…

Картинку можно масштабировать прокручивая колесо мыши.
Картинку можно трансформировать (перемещать) по экрану зажав среднюю кноку мыши и двигать курсор мыши по экрану. Куда курсор, туда и картинка.
Если в текущем списке сообщений чата больше одной картинки, то открыв одну из картинок, вы можете стрелками влево и вправо переключаться между ними.
Чтобы закрыть открытую картинку, вы можете кликнуть по самой картинке, за её пределами или же нажать клавишу ESC.
P.S. Важно подметить, что конвертируются не все картинки, а только картинки с доверенным доменом. Этот список также можно редактировать, если вам не хватает того, что включено в список.
скрытый текст…


→ 9. Просматривать абсолютно всех зашедших и вышедших пользователей во всплывающих плашках, которые появляются слева от чата из-за пределов вьюпорта.

скрытый текст…

Пользователи, которые зашли, отображены в зелёной гамме, которые вышли в красной.

→ 10. Просматривать историю зашедших и вышедших (отслеживаемых) пользователей чата прямо в списке сообщений.

Сделано это таким образом, чтобы как-то разграничить визуальные уведомления от простых и отслеживаемых пользователей.
Так как отслеживаемые в приоритете, следы их присутствия сохраняются и список сообщений чат стал отличным для этого местом (убежищем).
скрытый текст…

Всё аналогично как и с неотслеживаемыми пользователями.
Внутри элемента фиксируется никнейм, иконка о конкретном событии (зашёл или вышел), время когда произошло событие.
скрытый текст…


→ 11. Забавная плюшка. Можно удалять элементы формирующие историю событий о заходе и выходе из чата отслеживаемых пользователей в списке сообщений чата.

Для этого необоходимо кликнуть быстро два раза левой кнопкой мыши по одному из элементов и элементы начнут удаляться с самого низа до самого верха, при этом чат по мере их удаления будет прокручиваться вверх и как только все элементы будут удалены, чат снова прокрутится к последним (актуальным) сообщениям.
P.S. Конечная прокрутка вниз бывает не всегда срабатывает, так что это скорее фича, а не баг. Алгоритм с вами играет, забавляет вас.
скрытый текст…


→ 12. Список сообщений чата группируется в блоки сообщений.

Сообщение или блок сообщений конкретного пользователя разграничивается отступами сверху и снизу, чтобы повысить читабельность и не сваливать всё в одну кучу (сплошную кашу).
скрытый текст…



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

Способы удаления сообщений:

1. Единичное удаление сообщения. Для этого необходимо навести курсор мыши на сообщение и правой кнопкой мыши вызвать кнопку удаления (Delete).
Нажать на кнопку и сообщение будет удалено, а точнее скрыто. Фактически оно не удаляется из вёрстки, чтобы его можно было вновь показать при необходимости.

2. Удаление сообщений целое группой. Для этого необходимо с зажатой правой кнопкой мыши создать целое выделение. Выдаление создаётся красным фоновым цветом. Отжимая правую кнопку мыши, вновь появляется кнопка (Delete), по которой нажимая удаляются все выделенные сообщения.
3. Удаление сообщений единичной выборкой. Для этого необходимо за короткий промежуток времени успеть правой кнопкой выделить все неугодные сообщения и удалить их аналогично.
А наглядно происходит это именно так.
скрытый текст…


Чтобы вновь показать удалённые сообщения, необходимо кликнуть по появившейся кнопке Скрытые (Hidden).
Сообщения отобразятся и кнопка поменяет окрас и свою надпись на Скрыть (Hide).
После скрытия сообщений кнопка окрасится в иной тон и поменяет надпись на Показать (Show).
скрытый текст…


Чтобы восстановить удалённые сообщения, необходимо зажать клавишу Ctrl и навести на кнопку, которая окрасится в белобрысый тон и поменяет надпись на Восстановить (Restore).
Нажав на неё с ударженной клавишей Ctrl сообщения восстановятся.
скрытый текст…


→ 14. Система автоматического удаления часто отправляемых сообщений в чат.

Как только пользователь начинает отправлять в чат сообщений с интервалом меньше 400 миллисекунд, все его сообщения из чата пропадают.
Настроить эту чувствительность можно внутри кода.
const timeDifferenceThreshold = 400;

Также пользователь может попасть в окончательный бан и его сообщения перестанут отображаться, если он превысит этот лимит больше 10 раз.
Это тоже можно настроить.
const thresholdMaxTries = 10;

P.S. Имеется ещё один алгоритм удаления похожих сообщений, но он временно отключён и нуждается в доработке, так как он зачастую удаляет абсолютно не похожие сообщения.

→ 15. Скрывать чат по сочетанию горячих клавиш Ctrl + Space.

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

P.S. Хочу подметить тот факт, что фокус в строку ввода восстанавливается автоматически после раскрытия чата или же обновления страницы, переключении между вкладками комнаты с игровой страницы.

→ 16. Продолжать читать сообщения чата даже после его скрытия сочетанием клавиш Ctrl + Space.

Каждое сообщение отображатеся снизу вверх в виде всплывающих элементов.
скрытый текст…

Отображение максимального колличества сообщений можно настроить внутри кода.
const maxPopupMessagesCount = 10;

Сообщения появляются и исчезают с приятной анимацией.
Пользователь чата изначально получает свою одну цветовую гамму для каждого сообщения и использует её в текущей сессии до перезагрузки страницы с чатом.
Каждый пользователь со своей уникальной сгенерированной цветовой гаммой для улучшенного визуального разграничения сообщений.

→ 17. Активация строки ввода в чате после получения бана.

Если вас забанили в чате, то поле для ввода становится не активным и текст вы больше вводить не можете. Здесь же поле вновь становится доступным для ввода текста, но отправлять сообщения вы можете только в шепталку. Кнопка отправки сообщения окрашивается в другой цвет и меняется иконка охарактеризовывает тем самым, что общий чат не доступен.
скрытый текст…


→ 18. Отправлять в чате более длинные сообщения.

Чат в штатном состоянии позволяет отправлять не больше 300 символов.
Здесь же алгоритм вам позволяет отправлять длинные сообщения до 1000 символов.
Как только ваше сообщений станет длиннее 300 символов, оно разобьётся на части и с рандомным интервалом между 500 - 1000 миллисекунд отправится в чате в порядке очереди, причём каждая отправляемая часть сообщения не превысит допустимые 300 символов.
P.S. Не злоупотребляйте данным функционалом с целью навредить проекту. Предпочтительно печатать сообщения собственноручно, если вдруг вы сегодня оказались многословным и 300 символов в одно сообщение для вас оказалось не достаточным.

→ 19. На странице игры вы можете переключаться между общей и игровой комнатой чата по клавише Tab.

Важно подметить. Что алгоритм запоминает последнее переключение вкладки чата и с последующими играми вы останетесь в той комнате, в которую переключились в последний раз. Так что если вы предпочитаете сидеть всегда в общем чате, то вас автоматически переключит в общий чат. Так это работает. Запоминание последней настройки.
скрытый текст…


→ 20. Автоматическое восстановление связи с чатом.

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


СКАЧАТЬ ИМЕННО ТУТ
Скрипт для чата

Для улучшенного экспириенса, установите тёмную тему.
Тёмная тема

Дополнительные примечания.

Для работы звуковых оповещений, необходимо разрешить звуки (AudioContext API).
Для этого, у кого браузер firefox, необходимо произвести подобные настройки.
Ввести в браузерной строке about:config -> Enter и найти соответствующий ключ как на скрине и выставить ему значение 1
скрытый текст…


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

Для работы голосового движка, вам необходимо как минимум быть на windows машине.
Так-же должен быть установлен русский языковой пакет.
После установки языкового пакета, вам возможно будет необходимо так-же задать разрешение воспроизводить голоса в браузере.
Если у вас опять же браузер firefox, то похожим методом как с (AudioContext API).
скрытый текст…
Последний раз отредактировано 7 октября 2024 в 01:17 пользователем Душа_Чата
Душа_Чата Сообщение #2 3 апреля 2023 в 15:06
Маньяк
2
Добавлена возможность отключать звук зачитывания сообщения переключив тем самым на звуковой сигнал и наоборот. Кнопка ведёт себя как переключатель между режимами оповещения о новых последних сообщениях. А главное, что кнопка запоминает данную последнюю настройку пользователем, так как информация о состоянии кнопки сохраняется в браузерном localStorage как newMessageIsMuted (false или true).

скрытый текст…


Обновлённый код

скрытый текст…
Душа_Чата Сообщение #3 3 апреля 2023 в 16:39
Маньяк
2
Сделан небольшой фикс скрипта. Когда кнопка находится в состоянии мута с простым звуковым оповещением, теперь не будет сигналить после каждое перезагрузки страницы лишь в том случае, если в чате последнее сообщение осталось всё тоже неизменное после множества других перезагрузок страницы. Будет сигналить, если последнее сообщение отличительное с последнего посещения страницы с чатом. Так вы будете знать о том, что новые сообщения в чате появились.

скрытый текст…
Душа_Чата Сообщение #4 3 апреля 2023 в 20:28
Маньяк
2
Добавляю версию скрипта, где кнопка динамика для переключения режимов зачитывания последнего сообщения и оповещения звуковым сопровождением оформлены в соответствии с другими кнопками чата как реализовано в тёмной теме для расширения stylus. Иконки стали линейными и обладают разными цветами. Зелёный и красный.

скрытый текст…


Код

скрытый текст…
Вова_10 Сообщение #5 3 апреля 2023 в 20:39
Супермен
37
Ссылку на скрипт дайте, пожалуйста, чтобы его установить
Душа_Чата Сообщение #6 3 апреля 2023 в 21:29
Маньяк
2
Правки правки правки и ещё раз правки. Нет предела совершенству.
Правки больше касаемо оптимизации и справления некоторых ошибок.
А исправлено вот что:

1. После каждой перезагрузки страницы один раз мелькает дефолтный женской голос, так как объявляется voice API не совсем корректно и не очень хорошо с точки зрения оптимизированного кода. Так-же в прошлых версиях было объявлено два разных голосовых процессора, когда сейчас объединилось в одну функцию и объявление всех голосовых настроен назначаются единожды после загрузки страницы, нежели как раньше по замечанию изменений в DOM дереве, каждый раз голосовой движок создавался с нуля, что сказывается на производительность. А вот и сама функция и вынесенные глобально объявления голосового процессора.

скрытый текст…


Теперь одна функция работает как с оповещениями о зашедших и вышедших пользователях, так и читает последние сообщения в чате всегда одним мужским голосом (Microsoft Pavel).
Было бы очень здорово, чтобы голос читался голосовым процессором по типу нейронки, но там всё такое платное. Может быть кто подскажет, как быть в данной ситуации, чтобы улучить качество голоса. Может быть кто знает что-нибудь бесплатное и качественней для зачитывания текста?

Код

скрытый текст…
Душа_Чата Сообщение #7 3 апреля 2023 в 21:35
Маньяк
2
Вова_10
Вова_10 писал(а):
Ссылку на скрипт дайте, пожалуйста, чтобы его установить


Это очень просто. Необходимо для начала скачать расширение для браузера tampermonkey
А далее в настройках расширения на странице клавогонок создать новый скрипт нажав на эту кнопку
скрытый текст…

Далее откроется окно с полем куда нужно с заменой всего что там увидишь самой последней версией кода из хайда
скрытый текст…

И сохраняешь Ctrl + S
Душа_Чата Сообщение #8 4 апреля 2023 в 01:14
Маньяк
2
Добавлена функция подсветки ников в списке чата для незабаненных и забаненных пользователей.
Незабаненные светятся зелёным, а забаненные красным. Всё оптимально смотрится на тёмном фоне.
Для тех кто сидит с дефолтной светлой темы, то придётся ковырнуть для этого цвета и сделать их темнее.

Ковырять придётся эту функцию
Менять нужно эти строки
          anchor.style.setProperty('color', '#83cf40', 'important');
          anchor.style.setProperty('text-shadow', '0 0 1px #83cf40', 'important');

          anchor.style.setProperty('color', '#ff8080', 'important');
          anchor.style.setProperty('text-shadow', '0 0 1px #ff8080', 'important');


скрытый текст…


скрытый текст…
Душа_Чата Сообщение #9 4 апреля 2023 в 01:21
Маньяк
2
Только что заметил, что в хайде помещается не весь код стоило мне его раскрыть.
Поэтому придётся мне сохранять код на сторонних сервисах, только однажды может так случиться,
что код через какое-то время испарится. Через какое время точно не известно. Всё зависит от сервиса.

codepaste.xyz
Душа_Чата Сообщение #10 4 апреля 2023 в 06:02
Маньяк
2
Ну чтож. Рад представить вам очередную классную возможность видеть в чате ссылки изображений не только как текстовые ссылки по которым необходимо кликать и переходить в другую вкладку, но и видеть миниатюры, причём легко настраиваемые по изначальной величине, а так-же они кросплатформенные, зависимые от ширины вьюпорта. По клику миниатюры показывается крупное изображение и по клику на само крупное изображение или куда-то за пределы, то крупная картинка скрывается восвояси. Конвертация ссылки в картинку происходит только на тот момент, когда скрипт замечает в сообщении хоть одну ссылку с расширением картинки, а не проверят каждое сообщение, если там нет самой ссылки на картинку.

Как это работает, можно посмотреть по ссылке: видео демонстрация

Код

codepaste.xyz
Пьяный_Качок Сообщение #11 4 апреля 2023 в 08:40
Супермен
21
Демонстрации нужно в первом посте выкладывать))) а не кучу кода непонятную для 99% здешних хомячков))
Душа_Чата Сообщение #12 4 апреля 2023 в 16:14
Маньяк
2
певец, тот кто ищет, тот всегда найдёт.
Душа_Чата Сообщение #13 4 апреля 2023 в 17:48
Маньяк
2
Пофиксил фриз в чате из-за функции подсветки пользователей. Убрал логику сортировки. Чересчур нагружает. Оставил лишь подсветку.
Так-же помимо правки фриза добавлена ещё одна фича.
Длинные ссылки, порою громадные соразмерно пятиэтажного дома на весь чат, занимают большое полезное пространство, да и очень бросается в глаза.
Поэтому, принято решение сократить их простого английского слова image с соответствующим расширением изображения на конце (jpg, jpeg, png или gif).
Сама длинная ссылка сохранется в title ссылки. Увидеть её вы сможете при наведении курсором на ссылку. Это для тех, кто хочет быть уверенным, что ссылка не вредоносная,
хотя в браузерах уже включена такая возможность отображения подписей к ссылкам где-то в низу окна браузера.
Миниатюрам добавлены внутренние и внешние отступы, чтобы было немного воздуха вокруг элементов.

Визуализация

скрытый текст…


Код

codepaste.xyz
Последний раз отредактировано 4 апреля 2023 в 17:54 пользователем elasez_uyefot_2
Душа_Чата Сообщение #14 4 апреля 2023 в 23:33
Маньяк
2
1. "Теперь можно также закрыть полноэкранный просмотр изображения в чате, нажав кнопку 'Esc'."
2. "Проблема исправлена, вызванная ложным срабатыванием, которое говорило о том, что пользователь покинул чат, когда он на самом деле просто на короткое время исчезал из списка чата на доли миллисекунд."

Код
Душа_Чата Сообщение #15 5 апреля 2023 в 03:01
Маньяк
2
1. "Теперь чат сворачивается и разворачивается по сочетанию горячих клавиш Ctrl + Space, тем самым счётчик пользователей обнуляется, когда чат свернут и восстанавливает свою работу, когда чат разворачивается. Так-же покуда чат скрыт, то никаких уведомлений о зашедших и вышедших пользователях, а так-же о новых сообщениях. Полное молчание."
2. "Добавлена поддержка конвертирования ютуб ссылок в видео фреймы. Это означает, что теперь вы можете смотреть видео прямо из чата, не переходя в другую вкладку оставаясь в фокусе с чатом."

скрытый текст…


Код
Душа_Чата Сообщение #16 5 апреля 2023 в 16:18
Маньяк
2
Пофиксил функцию конвертации ссылок ютуба. Теперь добавлена поддержка и ссылок с параметром ?v=

Код
Душа_Чата Сообщение #17 5 апреля 2023 в 21:20
Маньяк
2
1. Исправлена ошибка, когда конвертер ютубовских ссылок пытался конвертировать одну из ссылок скинутых в чат другим пользователем на некий ютуб канал. Соответственно данная ссылка не валидная ссылка на ютуб видео ряд, поэтому сужен круг поиска конкретно только на валидные полные и сокращённые ютуб видео ссылки.
2. Создание и удаление просмотра изображений из чата в полном размере теперь появляются плавно и плавно затухают вместе с затемняющей нижележащей подложкой, чтобы создавать благоприятный эффект для глаз.
3. Ранее кнопка переключения режимов включала в себе такие как: Голос и сигнал. Теперь же включён выбор полного отключения любого звука о новом сообщении. (voice, beep, silence).
4. Добавлена поддержка конвертации картинок в чате в форате webp.
5. Теперь конвертируются все ссылки содержащие изображения не только лишь в том случае, когда расширение изображения находились в конце ссылки, но и в том случае, когда расширение картинки может находиться где-то в центре самой картинки, когда после самого расширения могут быть описаны ещё какие-то дополнительные параметры генерируемые сервисом предоставляющий доступ к картинке.
6. При наведении на кнопку смены режима оповещения о новых сообщениях теперь обзавелись заголовком, коротко описывающий тип режима. Какое у него назначение.

Код (834 строк)
Последний раз отредактировано 5 апреля 2023 в 21:42 пользователем elasez_uyefot_2
Душа_Чата Сообщение #18 5 апреля 2023 в 22:47
Маньяк
2
1. Добавлена возможность приближать и отдалять полноформатное изображение прокручиванием колеса мыши, а так-же передвигать изображение зажатым колесом мыши во вьюпорте браузера.
2. Скрипт был переименован KG_Chat_Empowerment так как возможности юзер скрипта переросли обычное звание счётчика пользователей в чате.
3. Фикс. Некорректное имя сокращённого изображения в чате, в том случае, когда расширение изображения не находится в конце ссылки, а где-то в середине меж данными. Сокращение создавалось так. image.png..... и далее ещё какие-то параметры по типу высоты ширины и так далее.

Демонстрация

Код (920 строк)
Последний раз отредактировано 6 апреля 2023 в 03:14 пользователем elasez_uyefot_2
Душа_Чата Сообщение #19 6 апреля 2023 в 02:47
Маньяк
2
1. Добавилась возможность удалять нежелательные сообщения на время их видимости в чате, чтобы при каждой перезагрузке страницы удалённые сообщения более не подгружались, так как некоторые сообщения редко но метко могут вызывать раздражение. Учитывая, что теперь в чате имеется возможность отображать картинки и видеофреймы, то будет не лишним такая возможность удалять их из виду. Как только сообщение при последующих обновлениях страницы более не будет подгружено в чате из-за лимита чата в количестве 20 сообщений, то информация о значении удалённого сообщения будет подчищена из хранилища "localStorage", чтобы не захламлять ключ "deletedChatMessagesContent". В этом ключе будет храниться только актуальная удалённая информация и автоматически подчищаться. В конечном итоге, когда в чате более не будет подгружено ни единого удалённого сообщения после перезагрузки страницы, то и ключ будет пустым. Магия.

2. Для удаления сообщения необходимо навести на желаемое сообщение и правой кнопкой мыши вызвать соответствующую кнопку "Delete". Так-же создаётся красное выделение сообщения, чтобы визуально понимать правильное ли сообщение было выделено. Визуальный фидбэк. Если вы в течении одной секунды не нацелились на кнопку, то кнопка пропадёт вместе с выделением сообщения. Если же вы в течении секунды нацелились на кнопку, то кнопка и выделение будут сохранены до тех пор, пока вы опять не уберёте курсор с кнопи, что опять запустит цикл в ожидание одной секунды, после чего произойдёт удаление кнопки и выделения.

3. Так-же имеется кнопка просмотра истории удалённых сообщений кнопкой переключатель. Она имеет 3 значения (Hidden, Show, Hide).
Hidden отображается изначально после каждой перезагрузки страницы в том случае, если у вас имеются актуальные удалённые сообщения. Кнопка не отображается вовсе, если удалённых сообщений нет. После нажатия кнопки с подписью Hidden, она переименуется в Hide, что в свою очередь покажет скрытые сообщения. И после нажатия на кнопку с подписью Hide, предпросматриваемые удалённые сообщения снова скроются и кнопка обзаведётся подписью Show. Что означает Показать. Теперь при повторных нажатиях так и будет колебаться между Show и Hide до тех пор, пока вы снова не обновите страницу где в итоге опять будет подпись Hidden.

Демонстрация

Код (1213 строк)
Последний раз отредактировано 7 апреля 2023 в 03:46 пользователем Душа_Чата
Душа_Чата Сообщение #20 7 апреля 2023 в 23:24
Маньяк
2
1. Теперь удаление сообщений происходит намного быстрее и удобнее засчёт множественных выделений. Раньше для удаления была доступна лишь одна возможность, удалять сообщение одно за другим по одному. Это нудно и долго, и поэтому сразу же возникла мысль реализовать более удобную версию. Теперь достаточно Зажать правую кнопку мышку и провести курсором по сообщениям, которые хочется захватить для последущего удаления. Как только необходимые сообщения были выделены, успейте в течении одной секунды перевести курсор мыши на кнопку, чтобы удержать её в фокусе, так как выделение сбросится, если в течении ограниченного времени вы не успеете навести курсор. Выделенные сообщения одним движением руки теперь легко удаляются всего одним нажатием кнопки "Delete".

Демонстрация 1

Демонстрация 2

Код (1299 строк)

Версия кода устроенная на new Map() constructor

Код (1319 строк)
Последний раз отредактировано 8 апреля 2023 в 10:22 пользователем Душа_Чата

Чтобы писать в форуме, нужно зарегистрироваться.

Ctrl предыдущая следующая Ctrl Страницы
1 2 3 4 5

Связаться
Выделить
Выделите фрагменты страницы, относящиеся к вашему сообщению
Скрыть сведения
Скрыть всю личную информацию
Отмена