Commit Graph
50 Commits
Author SHA1 Message Date
a1f7f599c8 Allow emoji picker to fit smaller viewports (#4651)
* fixed 4493 issue

* Update web/components/chat/ChatTextField/ChatTextField.module.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* lint error fix

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-10 14:00:11 -08:00
CopilotGitHubgabekcopilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>Gabe Kangas
84eaa60ec9 Add static class names to UI elements for easier customization (#4421)
* Initial plan

* Add static class names to UI elements for easier customization

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Add unique DOM element IDs for easier customization targeting

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Remove duplicate class names, keep only IDs for UI element targeting

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Revert chat input field ID to original value

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Remove unnecessary nested spans and revert Button ID to original value

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Standardize ID names to follow owncast-{element-description}-{type} pattern

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2025-08-07 19:12:28 -07:00
mahmed2000andGitHub eca880ac1f Replace picmo with emoji-mart (#4001)
* Add emoji-mart deps

* Change EmojiPicker to use emoji-mart

* Change ChatTextField to work with the emoji-mart data object

* Remove picmo, commit package-lock

* Fix mutant svgs having a size of 0

* Get the custom emojis to show up earlier in the picker

* Set emoji-mart to exact semver. Later versions break custom category sorting.
2024-11-09 13:58:38 -08:00
Pratyay RoyandGitHub ff3c1a4587 fix: remove autoscroll to readwrite chat embed input field (#3582) 2024-02-18 16:39:24 -08:00
Gabe Kangas 9db8a8699a fix: a11y button lables. Closes #3418 2023-11-08 20:08:00 -08:00
John ReganandGitHub a663f8ec34 replace grapheme-splitter with graphemer (updated fork) (#3160) 2023-07-10 16:13:40 -07:00
John ReganandGitHub c132d82645 simpler chatbox (#3146) 2023-07-09 13:42:03 -07:00
46ca5223f9 Chat wire protocol (#3125)
* core: remove file extension from emoji name

* web: transform emotes to labels when sending

* chat: replace br with line break

* core: implement emoji cache

* chat: send shortcodes for custom emoji

* chat: correct esling errors

* core: move emoji injection into dedicated function

* emoji: integrate emoji into markdown renderer, fix formatting

* chat protocol: correct golangci-lint findings

* chat field: specify that the contentEditable is an HTMLElement

* admin: mention that emoji should have unique names

* Prettified Code!

* regenerate pack-lock

* chat: correct the emphasis tag, provide fallback for other elements

---------

Co-authored-by: jprjr <jprjr@users.noreply.github.com>
2023-07-05 17:25:47 -07:00
bf1ccf21d2 chat: simplify input handling (#3124)
* chat: simplify input handling

Removes the cursor save/restore functionality.

Removes most key handling.

Allows message to go over limit.

Moves the message length check into SendMessage.

Changes the chat input to change to the max style only when over the limit,
rather than at the limit. Makes it apparent that something is wrong.

Fixes #3121

* Prettified Code!

---------

Co-authored-by: jprjr <jprjr@users.noreply.github.com>
2023-06-30 12:22:01 -07:00
Gabe Kangas bcd08633b4 fix(chat): simplify emoji + char count handling. Closes #3120 2023-06-29 20:35:53 -07:00
Gabe Kangas 02811ef37e feat(chat): preload and cache the custom emoji. Closes #3117 2023-06-27 15:48:16 -07:00
Gabe Kangas a354787a9e feat(chat): support line breaks and pasted content. Closes #3108 2023-06-27 14:51:01 -07:00
Gabe Kangas d33f117a82 fix(chat): fix missing alt tags on custom emoji. Closes #3106 2023-06-26 11:38:10 -07:00
Gabe Kangas 06adee2bc2 fix(chat): restore placeholder value to what it was before 2023-06-22 09:48:26 -07:00
Gabe Kangas ad814a8802 fix(chat): refactor chat input to not use slatejs. Closes #3094 2023-06-20 17:06:24 -07:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>Gabe Kangas
a4f984e7d1 fix(deps): update dependency slate-react to v0.95.0 (#3065)
* fix(deps): update dependency slate-react to v0.95.0

* fix: slate requires prop name change

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2023-06-02 11:44:44 -07:00
Gabe KangasandGitHub 69f217f758 Refactor mobile chat into modal (#3038)
* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform
2023-05-22 18:56:44 -07:00
Gabe Kangas 1f1f48acb0 fix(chat): fix chat input placeholder positioning. Closes #2991 2023-05-18 14:07:11 -07:00
Gabe Kangas 3616717ceb fix(chat): strip p tags from outgoing chat messages to fix markdown rendering 2023-05-06 16:00:48 -07:00
Gabe Kangas 4a0476b237 Add support for disabled chat state in the chat input field. Closes #2761 2023-03-01 16:22:10 -08:00
Gabe Kangas ed2dc00345 Remove unused imports 2023-02-26 18:12:44 -08:00
5e155179ef Fixed #2734 (#2742)
* Fixed #2734

* Prettified Code!

---------

Co-authored-by: bennett1412 <bennett1412@users.noreply.github.com>
2023-02-26 18:09:24 -08:00
Gabe Kangas 6fbd6cbbcf Lazy load every instance of using ant icons. Closes #2583 2023-01-15 22:31:36 -08:00
Gabe Kangas d8a5380b7f Fix some React lifecycle and rendering errors that exist in build 2023-01-10 16:39:20 -08:00
Gabe Kangas c871251769 Tweak positioning of emoji picker popover 2022-12-24 15:08:46 -08:00
Gabe Kangas c597a0de9e Add accessibility properties to chat text input. Closes #2444 2022-12-19 21:49:11 -08:00
Gabe KangasandGitHub 352447e3d4 Web UI frontend automated browser tests (#2223)
* First pass at basic browser tests for #1926

* Run tests against dev web server not go server

* Bundle the web code into the server before running tests

* Move cypress UI tests into its own npm project + add tests

* Add additional tests + wire up with cypress dashboard

* Limit concurrency of workflow jobs

* Temporarily comment out some tests that do not pass in mobile. Will fix later.
2022-11-04 20:04:13 -07:00
Matthew HellerandGitHub 64b20cf070 Use 16px font size to prevent auto zoom on iOS Safari. Shorten the 'type here' message so it doesn't wrap to a second line when the chat pane becomes a column on the right side of larger screens. Re #2276. (#2294) 2022-11-02 12:34:57 -07:00
Matthew HellerandGitHub 6e54ec7695 Antd updates (#2194)
* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.
2022-10-10 17:11:29 -07:00
Gabe Kangas cd3722d9f1 Limit chat input to max characters. Closes #2109 2022-10-08 22:33:50 -07:00
Gabe Kangas 45c7fa4f7e Only show chat send button on mobile 2022-10-04 19:14:50 -07:00
Gabe Kangas b1484f4c9f Lazy load some components that aren't needed at load. For #2167 2022-10-03 21:06:46 -07:00
t1enne adea618a44 improved ui of chat text input 2022-10-01 10:34:59 +02:00
t1enne 44ef64b3b5 fixed chat container not showing in SB + minor changes 2022-09-30 13:17:22 +02:00
d1f3fffe2f reafctor: normalize component formatting (#2082)
* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 00:00:28 -07:00
Gabe Kangas 121c9415f1 Wire up emoji+custom emote selector to text input. Closes #1887 2022-09-06 17:52:09 -07:00
Gabe Kangas d8cf30a723 Only show send button on mobile. Make buttons inline with input field 2022-08-21 18:47:12 -07:00
t1enne efbe6907ac Reworked mobile UI for some components 2022-07-08 22:20:22 +02:00
Gabe Kangas 8ed01ed4da ../
First pass at the emoji picker
2022-05-26 18:59:16 -07:00
t1enne 6a0d0970d6 Added icons and formatted with prettier 2022-05-22 14:27:06 +02:00
t1enne bef99afa05 Few changes to Chat input 2022-05-22 08:37:23 +02:00
t1enne 1b9c04210b Fixed Slate error by providing initial value 2022-05-18 08:16:46 +02:00
Gabe Kangas 0d5d89a1c8 Fix empty state for text field 2022-05-17 17:58:51 -07:00
t1enne b6aa20b0aa worked on chat styling 2022-05-17 16:36:07 +02:00
Gabe Kangas 72c01e1b9a Fix web project build errors 2022-05-11 23:31:31 -07:00
Gabe Kangas 44173ac09d WIP emoji picker 2022-05-05 14:43:40 -07:00
Gabe Kangas 66a55401a8 Use slate.js as a rich text editor for chat messages 2022-05-05 13:52:10 -07:00
Gabe Kangas f96bde4f71 Can send a message from text input using submit button 2022-05-04 23:06:35 -07:00
Gabe Kangas c56c45d904 Use contentEditable for chat input field 2022-05-04 16:55:54 -07:00
t1enne 502cf4478a reworked slightly main layout 2022-05-03 23:55:13 +02:00