Commit graph

239 commits

Author SHA1 Message Date
Gabe Kangas
71bb8a7381
Redesign the user badges (authed, mods) 2023-01-29 15:40:59 -08:00
Gabe Kangas
f318b69980
Make join msg not italic and left align it 2023-01-29 14:01:09 -08:00
Gabe Kangas
84aff441a2
Give text input more padding 2023-01-28 19:26:17 -08:00
Gabe Kangas
7b4c3f38d5
Fix message background rendering on top of message. Closes #2636 2023-01-28 18:32:57 -08:00
Gabe Kangas
bbd3041d90
Add linking to user chat messages. Closes #2635 2023-01-27 12:57:14 -08:00
Gabe Kangas
7c8030cca4
Change system message link color. Closes #2634 2023-01-27 11:50:22 -08:00
Gabe Kangas
18076355f4
Add additional bottom margin to system messages 2023-01-20 16:29:49 -08:00
Gabe Kangas
d6ec47667a
Remove border from moderator message 2023-01-20 16:17:27 -08:00
Gabe Kangas
a567f8543e
Make chat text input background the same color as chat bg 2023-01-18 20:23:50 -08:00
Gabe Kangas
7ba91404cc
Style moderation hover button 2023-01-18 20:23:12 -08:00
Gabe Kangas
a6bcabebbf
Make chat background dark 2023-01-18 19:18:32 -08:00
Gabe Kangas
a1a3272031
Hide scrollbars 2023-01-18 19:18:29 -08:00
Gabe Kangas
15c28b3d6e
Allow moderator message to fill chat width. Closes #2596 2023-01-16 17:53:59 -08:00
Gabe Kangas
49cdb1dafb
Fix chat message background color not showing. Closes #2594 2023-01-16 17:33:50 -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
bb9b8a8123
Use own scroll to bottom function instead of built-in. Closes #2500 2023-01-11 00:53:18 -08:00
Gabe Kangas
b989e9a462
Remove chat container bottom margin 2023-01-11 00:52:03 -08:00
Gabe Kangas
7ce35a8a08
Increase user message border width 2023-01-11 00:51:39 -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
cfaeda94b0
Lazy load more components. #2167 2023-01-10 00:37:12 -08:00
Gabe Kangas
bd3c81c353
Replace he html decoding lib with entities 2023-01-10 00:37:10 -08:00
Gabe Kangas
81c505d731
Hack to force scroll to very bottom at mount. For #2500 2023-01-05 02:16:37 -08:00
Jambaldorj Ochirpurev
f8a481ff70
Fix/issue#2441 (#2443)
* fix the rendering issues related to More Info

* update

* update Chat Moderation Details component
2022-12-27 11:57:44 -08:00
Gabe Kangas
fb1aca165f
Give the chat text input surrounding a background color 2022-12-24 15:32:15 -08:00
Gabe Kangas
c871251769
Tweak positioning of emoji picker popover 2022-12-24 15:08:46 -08:00
Gabe Kangas
31f77cf1f0
Tweaks to chat bottom handling for #2342 2022-12-20 00:37:22 -08:00
Gabe Kangas
c597a0de9e
Add accessibility properties to chat text input. Closes #2444 2022-12-19 21:49:11 -08:00
Gabe Kangas
fb7cff54d0
Tweak badge styles 2022-12-15 19:40:26 -08:00
Gabe Kangas
890ebdfff6
Tweak style of scroll to bottom button 2022-12-14 12:54:31 -08:00
Gabe Kangas
e64da8003c
More component selectors for CSS overrides for #2193 2022-12-12 22:54:52 -08:00
Gabe Kangas
8a14173066
Increase the bottom threshold for chat container. Closes #2342 2022-12-01 19:26:16 -08:00
Gabe Kangas
ce1c564797
Add margin under bottom chat message 2022-11-19 12:56:38 -08:00
Gabe Kangas
a75c838ef3
Populate user message tooltip. Closes #2343 2022-11-18 17:08:46 -08:00
Gabe Kangas
d2f65380a1
Fix issue when trying to collapse non-user message 2022-11-13 14:49:49 -08:00
Gabe Kangas
447779b439
Reduce textfield padding 2022-11-13 13:18:17 -08:00
Gabe Kangas
bc6af8251e
Add padding to chat messages 2022-11-13 12:43:15 -08:00
Gabe Kangas
769f05db2c
Allow for custom scrollbar styling 2022-11-13 12:37:31 -08:00
Gabe Kangas
813f8692f0
Support color customization from the admin (#2338)
* Add user-customizable theming. Closes #1915

* Prettified Code!

* Add user-customizable theming. Closes #1915

* Add explicit color for page content background

* Prettified Code!

Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-11-12 20:26:55 -08:00
Gabe Kangas
4cdbcc642d
Tweak Chromatic diffThreshold to reduce false negative tests 2022-11-05 17:27:44 -07:00
Gabe Kangas
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 Heller
3021dd7795
Always show the 'send chat message' button. Re #2293. (#2298) 2022-11-03 10:36:03 -07:00
Matthew Heller
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
Gabe Kangas
2e7787f70b
Force the bundler to build the player as its own file 2022-10-28 12:19:39 -07:00
t1enne
917248fc5b moved footer to layout. changed some css 2022-10-22 10:46:17 +02:00
t1enne
f6e158ab88 reduced font weight of message text 2022-10-22 10:46:17 +02:00
Gabe Kangas
91c7bed0e8
Add action message type to chat. Closes #2226 2022-10-18 19:47:38 -07:00
Matthew Heller
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
juliana-mol
9f2aa66527
chat story controls (#2181)
* chat story controls

* Prettified Code!

Co-authored-by: juliana-mol <juliana-mol@users.noreply.github.com>
2022-10-09 11:25:48 -07:00
Gabe Kangas
cd3722d9f1
Limit chat input to max characters. Closes #2109 2022-10-08 22:33:50 -07:00
Gabe Kangas
19e4e99127
First pass at the social/federated chat component. Closes #2172 2022-10-05 22:43:24 -07:00
Gabe Kangas
45c7fa4f7e
Only show chat send button on mobile 2022-10-04 19:14:50 -07:00
Gabe Kangas
6c9f9f6507
Add additional example chat items to story 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
b87076759c styled chat join messages 2022-10-03 10:15:41 +02:00
t1enne
91bc45dbef moved borders to the right for own msgs. Closes #2074 2022-10-03 09:51:28 +02:00
Gabe Kangas
a931fe0ddf
Update the chat moderation modal with slightly better layout. Closes #2073 2022-10-02 11:02:33 -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
t1enne
892532dfa2 moved scroll to bottom btn to own comp 2022-09-30 13:16:35 +02:00
t1enne
f90295269e Updated styles to match design for chat msgs 2022-09-30 09:57:12 +02:00
t1enne
0b35919357 Fixed messages not wrapping + changed some styles to accomodate scrollbar better 2022-09-13 08:43:59 +02:00
James Young
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
c61bea29ee
Add read-only chat embed page. Closes #1905 2022-09-04 21:53:04 -07:00
Gabe Kangas
b8a108ba03
Fix chat message story 2022-09-04 18:09:30 -07:00
Gabe Kangas
ac7e095fdf
Handle hide/show chat messages via moderation. Closes #1986 2022-09-04 17:58:06 -07:00
James Young
5ebbbb8bf2
refactor(stories): co-locate stories with components (#2078)
* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file
2022-09-03 11:38:52 -07:00
Gabe Kangas
46166a78d9
Set message content as renderable html 2022-09-01 22:00:16 -07:00
Gabe Kangas
6d7f0302bf
Replace the auth chat message badge with an icon 2022-09-01 22:00:15 -07:00
Gabe Kangas
aa0b43074f
Fix chat user color variable 2022-09-01 19:37:21 -07:00
gingervitis
d5fa81f76e
Draft: rough-ish draft of proposed color theme changes (#2067)
* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-08-29 23:17:12 -07:00
Gabe Kangas
c2bd9436ba
Show moderation menu for moderators. Closes #1864 2022-08-22 19:25:16 -07:00
Gabe Kangas
1a9b9f53fc
Add remote fediverse follow modal. Closes #1862 2022-08-22 18:27:47 -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
Gabe Kangas
cd81aa56ed
Tighten up collapsed message spacing 2022-08-21 17:22:27 -07:00
Gabe Kangas
9e18cf2f0c
Fix incorrect font variable being used 2022-08-21 16:01:41 -07:00
Gabe Kangas
6cc184ea6f
Add standalone join message with user badge 2022-08-21 15:50:27 -07:00
Gabe Kangas
3cfcad7a93
Add user chat message badges. Closes #1988 2022-08-21 14:04:16 -07:00
Gabe Kangas
7dc2a1a4bc
Limit message collapsing to 2 minutes between messages 2022-08-15 19:44:29 -07:00
Gabe Kangas
b632699c87
Fix chat error with only a single message 2022-08-15 16:35:54 -07:00
Gabe Kangas
4da64a6b35
Use actual moderation menu and remove the placeholder 2022-08-10 22:17:08 -07:00
Gabe Kangas
a7bbb06ea5
Fix mod menu showing. Closes #1990 2022-08-10 21:41:56 -07:00
Gabe Kangas
f8429beef4
Add+style system style chat message. Closes #1998 2022-08-10 20:22:00 -07:00
Gabe Kangas
2c1624127a
Fix message collapsing incorrectly. Closes #2001 2022-08-09 20:58:10 -07:00
Gabe Kangas
0574725be8
Use vh instead of % to fix storybook rendering of chat container. 2022-07-21 12:15:03 -07:00
Gabe Kangas
f3a16be0dd
Add user detail API + modal. Closes #2002 2022-07-20 22:36:20 -07:00
Gabe Kangas
00f8fea929
WIP of chat moderation menu, actions and modal 2022-07-16 17:34:19 -07:00
Gabe Kangas
f4fb7a1d41
Add chat system message component. For #1998 2022-07-15 13:15:20 -07:00
Gabe Kangas
2c8621c873
Add chat join messages 2022-07-14 21:05:34 -07:00
Gabe Kangas
9a2a43d916
Add moderator status chat message. Closes #1999 2022-07-14 20:36:47 -07:00
Gabe Kangas
756ab368c1
Action message component 2022-07-14 20:12:42 -07:00
Gabe Kangas
b490903a35
Add style and story for generic chat action message 2022-07-14 20:09:40 -07:00
Gabe Kangas
255585cd9f
Update components to use the new style/color names 2022-07-10 16:45:19 -07:00
t1enne
f130abb8f9 Minor styling changes 2022-07-10 09:00:29 +02:00
t1enne
efbe6907ac Reworked mobile UI for some components 2022-07-08 22:20:22 +02:00
t1enne
ffc73f2760 Added chat tab on mobile layouts and other changes to mobile UI 2022-07-08 09:10:18 +02:00
t1enne
d12712a107 Changed chat behaviour
added recoil value isMobile to determine which chat to display and
style. #1978

changed the player to actually span across the viewport without the
black borders around it.
2022-07-03 12:36:30 +02:00
t1enne
b279f8f707 small fixes on chat behaviour 2022-07-02 09:56:03 +02:00
t1enne
1bbca87afb Prettified Code! 2022-07-02 07:13:50 +00:00
t1enne
26f9a41508 Few changes to chat
Added moderator icon

changed styling for a name change message

Now usernames collapse as long as the user is the same

Imported two weights of Poppins and the OpenSans variable instead of def
400

This is some progress on #1859 and #1625
2022-07-02 09:08:36 +02:00
t1enne
e6cc3a39d1 Added moderator menu to messages and some other styling.
created new ant overrides file.

Ignore the static directory
2022-07-01 22:53:56 +02:00
t1enne
455d8f8169 Few changes to chat.
Changed the way the background is set on self sent messages and some
styling.

Fixed chat container not scrolling. Added 'go to bottom' button.
2022-07-01 19:35:14 +02:00
Gabe Kangas
ccb97197c5
Fix chat array not being properly appended to 2022-06-29 11:50:56 -07:00
t1enne
d93922f1d0 Added background to own messages in chat and the rounded border.
Closes #1985
2022-06-29 08:22:22 +02:00
Gabe Kangas
5e4334ac01
Use user color for name change messages 2022-06-28 20:40:18 -07:00
Gabe Kangas
aec65af87d
Use a numbered pre-named set of user colors instead of random. Closes #1974 2022-06-28 19:01:47 -07:00
t1enne
c9938cf414 Added alternative styling for own messages in chat
Added alternative styling for messages sent by self in chat

Prettiered the file
2022-06-28 09:12:22 +02:00
Gabe Kangas
e08037b64a
Wire up chat message props. Add username highlighting. Closes #1921 2022-06-24 21:30:54 -07:00
Gabe Kangas
b7df2949e4
Remove interfont and use Open Sans + Poppins fonts instead. #1625 2022-06-24 16:27:45 -07:00
Gabe Kangas
8ed01ed4da
../
First pass at the emoji picker
2022-05-26 18:59:16 -07:00
Gabe Kangas
1d213b71d4
Support changing your own name and handling name change events 2022-05-26 13:52:04 -07:00
Gabe Kangas
09ea1951be
Fix lint warning 2022-05-25 21:49:30 -07:00
Gabe Kangas
7b1667bf6a
Refactor app state to be a state machine with access selectors 2022-05-25 21:47:09 -07:00
t1enne
a947e67968 ported some formatting logic from webroot 2022-05-24 08:47:22 +02:00
t1enne
d692a2bb5c Styled chat messages 2022-05-22 16:10:34 +02:00
t1enne
b6dd441107 Fixed import and lint-errors 2022-05-22 15:05:40 +02:00
t1enne
018ee135b2 Moved chat header into ChatContainer and created component folder 2022-05-22 14:55:52 +02:00
t1enne
3a785c2a48 Lowered font-size in chat input 2022-05-22 14:28:51 +02: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
Gabe Kangas
99f40e28cb
Add placeholders for moderation actions 2022-05-20 13:23:46 -07: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
8c7c11cb72
Continue to troubleshoot the emoji picker 2022-05-09 13:44:11 -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
Gabe Kangas
008f607cf7
Fill out the follower component 2022-05-04 08:56:47 -07:00
t1enne
2cfb336411 Added mobile chat and some responsiveness
weird 0 popping out when toggling chat. wasn't able to find which
component is responsible. Used bare mininum scss. May refactor in the
future.
2022-05-04 09:55:44 +02:00
t1enne
502cf4478a reworked slightly main layout 2022-05-03 23:55:13 +02:00
Gabe Kangas
a0354d6d49
Handle centralized app state and registration + chat history 2022-05-02 17:45:22 -07:00
Gabe Kangas
b590e4f765
Add button to test chat msgs being added 2022-05-01 22:51:57 -07:00
Gabe Kangas
6314ed8667
Add performant list componant for rendering chat messages 2022-05-01 20:56:11 -07:00
Gabe Kangas
4997c7c5ac
Fill out some more components + add application state enums 2022-04-29 15:10:13 -07:00
Gabe Kangas
e5d3b0e4ee
More blank components and stories to be filled in 2022-04-28 14:36:05 -07:00
Gabe Kangas
91b0db9c2e
Add placeholder components to be worked on 2022-04-27 23:19:45 -07:00