Commit graph

65 commits

Author SHA1 Message Date
kame
4f078e1ee4
Migrated Storybook notation from CSF2 to CSF3 (#3412)
* Migrate web action-buttons directory to CSF3 notation

* Migrate web chat directory to CSF3 notation

* Migrate web common directory to CSF3 notation

* Migrate web layout directory to CSF3 notation

* Migrate web modals directory to CSF3 notation

* Migrate web ui directory to CSF3 notation

* Migrate web video directory to CSF3 notation

* Migrate web stories directory to CSF3 notation
2023-11-06 19:35:05 -08:00
janWilejan
e15e2dc47c
Fix deprecated antd dropdown warnings (#3171)
* Fix deprecated antd dropdown warnings
2023-07-13 20:28:12 +00:00
janWilejan
c563742856
Chat popup (#3098)
* add pop out chat button

* add button to close chat popup

* chat is hidden on main interface when a popup chat is open

* NameChangeEvent renames clients with the given id

if you have two or more owncast windows (or pop-out chats) open, changing your
name in 1 client is reflected in all clients.

* replace isChatVisible booleans with chatState enum

* update stories to use ChatState

* fix build tests

---------

Co-authored-by: janWilejan <>
2023-06-26 09:00:27 -07:00
Gabe Kangas
ccb9b5d075
chore: run stylelint on our css files 2023-06-20 20:58:00 -07:00
Mohib Khan
6fa576a04a
feat: close modal after name change (#3084)
* feat: close modal after name change

* refactor: shortened modal name

* fix: added a no-op for NameChangeModal storybook
2023-06-12 22:54:12 -07:00
Gabe Kangas
432a348deb
fix(ui): move id to menu button instead of wrapper div 2023-05-23 16:51:48 -07:00
gingervitis
29041e6d76
Address chat modal button issues (#3042)
* don't display chat button or modal if isModal is true. dont display the show/hide chat option in the userdropedown for tablet sizes either. tweak chat button styles and make chat button bg the same as the chat component bg color.

* only show chat button if online

* fix(chat): chat should be available through 5min buffer period. Fixes #3044

* fix(test): update mobile test

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2023-05-23 16:32:35 -07:00
Gabe Kangas
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
14d95a69f3
fix(ui): do not use hard-coded colors for text 2023-05-05 12:20:50 -07:00
Gabe Kangas
ea902520ff
fix(ui): reduce empty vertical space between action buttons and content header 2023-04-30 13:34:37 -07:00
Gabe Kangas
97fb5a80d0
fix(ui): restore page margin and background color. Closes #2959 2023-04-26 21:27:35 -07:00
Gabe Kangas
5279eefb8e
fix(ui): increase left/right content header padding 2023-04-25 21:48:34 -07:00
gingervitis
44483a45d3
some webv2 UI polish (#2940)
* style tweaks for Action Button, UserMenu, Modal

* a bunch of misc polish; some around chat

* Prettified Code!

* cleanup

* fix formatting

* Reduce content padding a bit

* some stylesheet cleanup

* fix action button sizing

* Remove action button height completely

---------

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2023-04-24 10:58:57 -07:00
Gabe Kangas
00ea1cae5b
Use correct color in content header description. Closes #2889 2023-03-31 22:02:28 -07:00
Gabe Kangas
02ca54d810
Add error boundary to UserDropdown. For #2811 2023-03-12 23:11:18 -07:00
Gabe Kangas
8b8f221eb4
Show streamTitle in header if set. Closes #2720 2023-02-22 18:52:25 -08:00
Gabe Kangas
60f5b41a3d
Fix the incorrect header spacing across all text 2023-02-13 22:00:53 -08:00
Gabe Kangas
903cc41d58
Remove htmlcomment as it gets stripped in build time 2023-02-10 17:52:28 -08:00
Michael David Kuckuk
c6136fc35c
Add noscript for browsers without JS (#2592)
* Make OwncastLogo more versatile

* Add noscript tag

* Commit updated API documentation

* Show all content on vertical overflow

---------

Co-authored-by: Owncast <owncast@owncast.online>
2023-02-01 11:04:24 -08:00
Gabe Kangas
c6eecada6b
Add h2 and h3 tags for page structure. Closes #2623 2023-01-24 14:28:15 -08:00
Gabe Kangas
308aea9f59
Add aria-expanded to toggle chat option. For #1826 2023-01-23 19:16:52 -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
aadf721808
Move the contributor comment to end of source 2023-01-11 23:50:26 -08:00
Gabe Kangas
9cc7b1cf2d
Add a little comment for those viewing HTML source that we could use contributors 2023-01-11 18:26:54 -08:00
Gabe Kangas
8b36194471
Fix another rendering error 2023-01-10 16:51:15 -08:00
Gabe Kangas
d8a5380b7f
Fix some React lifecycle and rendering errors that exist in build 2023-01-10 16:39:20 -08:00
André Rusakow
53d3a67533
hide user name in user dropdown on mobile (#2512)
* hide user name in user dropdown on mobile

* truncate title in header

* prettify code

* Add line height to prevent cutting of lower length letters
2022-12-26 14:09:52 -08:00
Gabe Kangas
01082c5e0b
Reduce top padding in content header 2022-12-24 14:59:03 -08:00
Gabe Kangas
a2445e1fcf
Show hide/show chat instead of toggle in user menu. Closes #2454 2022-12-15 19:23:43 -08:00
Gabe Kangas
1d245dbbc1
Fix user settings dropdown story not rendering. Closes #2350 2022-12-05 23:13:55 -08:00
Gabe Kangas
20e9d030ed
Fix logo alignment for mobile. Closes #2263 2022-11-06 16:09:05 -08: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
t1enne
b7795f275c corrected media query 2022-10-22 22:36:48 +02:00
t1enne
917248fc5b moved footer to layout. changed some css 2022-10-22 10:46:17 +02: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
Gabe Kangas
aa1b4819bb
Fix hook count error 2022-10-10 16:57:11 -07:00
Gabe Kangas
80a012a3c7
Add current user object that holds user session values instead of standalone getters. Closes #2050 2022-10-10 16:40:13 -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
683399c340 Removed fixed *px sizes in favor or *rem 2022-09-19 22:04:58 +02:00
Gabe Kangas
0430adc502
Add mobile-specific tabs+content 2022-09-10 12:08:28 -07:00
Gabe Kangas
20ea5d051f
Clean up some styles and fix mobile rendering 2022-09-09 23:23:24 -07:00
Gabe Kangas
02de9cf6df
Support clickable links in description 2022-09-09 23:03:49 -07:00
Gabe Kangas
0def4fe66a
Increase change threshold for Chromatic UI tests 2022-09-08 13:09:11 -07: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
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
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
f3d611e762
Fix content header not rendering properly on mobile 2022-08-22 21:50:17 -07:00
Gabe Kangas
c4479a0ffc
Add first pass at IndieAuth modal. For #1863 2022-08-20 16:16:24 -07:00
Gabe Kangas
6ffe720d90
Update to the page content header 2022-08-16 17:55:12 -07:00
Gabe Kangas
cf03a37aed
Remove category icon component 2022-08-10 20:32:16 -07:00