-
-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fit text #1217
Conversation
WalkthroughThe changes introduce a new Changes
Possibly related issues
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
apps/client/src/common/components/fit-text/fitText.utils.ts (1)
1-5
: Clarify function documentation for better understandingThe documentation comments for the
bsearch
function could be clearer. Specifically, the description of thelow
parameter might confuse readers. Consider rephrasing to explicitly state that the predicate must returntrue
for thelow
value.Apply the following changes to improve the comments:
/** - * @param low inclusive, must be true on predicate function + * @param low Inclusive lower bound of the search range. The predicate must return `true` for this value. - * @param high exclusive, + * @param high Exclusive upper bound of the search range. - * @param predicate predicate function + * @param predicate A function that takes a number and returns a boolean. Determines the condition for the search. */
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- apps/client/src/common/components/fit-text/FitText.tsx (1 hunks)
- apps/client/src/common/components/fit-text/fitText.utils.ts (1 hunks)
- apps/client/src/common/hooks/useFitText.ts (0 hunks)
- apps/client/src/features/viewers/studio/StudioClock.scss (1 hunks)
- apps/client/src/features/viewers/studio/StudioClock.tsx (3 hunks)
- apps/client/src/features/viewers/timer/Timer.scss (1 hunks)
- apps/client/src/features/viewers/timer/Timer.tsx (2 hunks)
- apps/client/src/theme/_viewerDefs.scss (0 hunks)
Files not reviewed due to no reviewable changes (2)
- apps/client/src/common/hooks/useFitText.ts
- apps/client/src/theme/_viewerDefs.scss
Additional comments not posted (9)
apps/client/src/common/components/fit-text/fitText.utils.ts (1)
6-18
: Binary search implementation is correct and efficientThe
bsearch
function correctly implements a binary search algorithm to find the boundary where the predicate condition changes. The use ofMath.floor
and the check formid === low
effectively prevent infinite loops for adjacent values.apps/client/src/common/components/fit-text/FitText.tsx (1)
16-63
:FitText
component effectively adjusts text to fit containerThe
FitText
component correctly utilizes a binary search to adjust the font size of its children to fit within the container without overflow. The implementation usinguseCallback
,useEffect
, andResizeObserver
ensures responsiveness to size changes.apps/client/src/features/viewers/studio/StudioClock.tsx (2)
35-45
: Preventing FOUC by deferring rendering until stylesheets loadIntroducing the
shouldRender
check effectively prevents the component from rendering before the necessary stylesheets are loaded, mitigating the Flash of Unstyled Content (FOUC) issue and improving user experience.
82-82
: Simplified title rendering withFitText
componentReplacing the previous title rendering logic with the
FitText
component simplifies the code and ensures the next event title dynamically resizes to fit the available space, enhancing readability.apps/client/src/features/viewers/timer/Timer.scss (2)
174-178
: Adjusted.message-overlay
styles for proper layering and responsivenessUpdating the
.message-overlay
class by removing fixed width and height, adjustingpadding
, setting the background using a CSS variable, and increasingz-index
to2
ensures the overlay covers the full viewport and appears above other elements. The simplifiedtransition
onopacity
enhances performance.
186-191
: Centered message content using CSS Grid for better alignmentChanging the
.message
class to usedisplay: grid
andplace-content: center
efficiently centers the message content both vertically and horizontally. Settingheight
andwidth
to100%
ensures the grid occupies the full overlay area.apps/client/src/features/viewers/studio/StudioClock.scss (1)
123-125
: Defined dimensions for.next-title
to improve layout consistencyAdding explicit
height: 12.5vh
andwidth: 70%
to the.next-title
class provides better control over the element's size, ensuring consistent presentation across different screen sizes and preventing layout shifts.apps/client/src/features/viewers/timer/Timer.tsx (2)
16-16
: ImportedFitText
component for dynamic text fittingImporting the
FitText
component allows for dynamic resizing of text elements, improving the adaptability of the timer's message overlay.
167-169
: Enhanced message overlay with dynamic text sizingWrapping the message text within the
FitText
component ensures that the text automatically adjusts its font size to fit within the overlay, enhancing readability across different screen sizes and preventing text overflow.
This PR resolves the issue with fullscreen messages going off-screen as described in #1067 .
The proposed library seemed abandoned and targetting react 16.5, so I have decided to copy the code into our code base and simplify it
It also changes the code in the studio-clock to use the same process