-
Notifications
You must be signed in to change notification settings - Fork 703
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
Port Modular Layouts to React #4764
Merged
Merged
Changes from all commits
Commits
Show all changes
28 commits
Select commit
Hold shift + click to select a range
0ec6ac7
Port over previous branch
gettinToasty 651ecaf
Attach mins to Elements
gettinToasty 6618e58
Fix event typing in ResizeBar
gettinToasty b994afc
Fix compilation errors
gettinToasty 346bc70
Fix console errors
gettinToasty 39c794b
Add Classic Layout
gettinToasty 5f132ce
Fix infinite rerender
gettinToasty fa2d615
Add logs
gettinToasty 40b111d
Get resize working
gettinToasty c5c656e
Fix drag smoothness
gettinToasty 3d60273
Add FourByFour layout'
gettinToasty 251a9bd
Add Pyramid Layout
gettinToasty c3056e5
Add OnePane Layout
gettinToasty 891cb08
Refactor styleBlocking to be handled in ResizeBar
gettinToasty 1e4c65e
Add column layouts
gettinToasty 684baa7
Remove old layouts
gettinToasty 36958a4
Fix columns in OnePaneR
gettinToasty c11e86b
Fix stale issue in componentRef checks
gettinToasty aa19d0a
Add missing key
gettinToasty 07e91b7
Merge branch 'master' into sb_port_layouts_library
gettinToasty 836893c
Fix double bar layout tests
gettinToasty 25f85f7
Fix column layouts
gettinToasty 6280c4f
Fix Triplets layout
gettinToasty 9e7aad8
Fix 2nd bar popping
gettinToasty 912eb58
Add documentation and useCallback to prevent function rebuilding
gettinToasty 6830677
Fix strict null check
gettinToasty b110af0
Prevent function initialization error
gettinToasty af3b542
Unhook functions used at initialization
gettinToasty File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export { MiniFeed } from './Minifeed'; | ||
export { LegacyEvents } from './LegacyEvents'; | ||
export { SceneSelectorElement } from './SceneSelector'; | ||
export { SourceSelectorElement } from './SourceSelector'; | ||
export { Mixer } from './Mixer'; | ||
export { RecordingPreview } from './RecordingPreview'; | ||
export { StreamPreview } from './StreamPreview'; | ||
export { Browser } from './Browser'; | ||
export { Display } from './Display'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
import cx from 'classnames'; | ||
import useLayout, { LayoutProps } from './hooks'; | ||
import ResizeBar from 'components-react/root/ResizeBar'; | ||
import styles from './Layouts.m.less'; | ||
|
||
export function Classic(p: React.PropsWithChildren<LayoutProps>) { | ||
const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( | ||
[['1'], ['2', '3', '4']], | ||
false, | ||
p.childrenMins, | ||
p.onTotalWidth, | ||
); | ||
|
||
return ( | ||
<div className={styles.rows} ref={componentRef}> | ||
<div className={styles.cell} style={{ height: `${100 - resizes.bar1 * 100}%` }}> | ||
{p.children?.['1'] || <></>} | ||
</div> | ||
<ResizeBar | ||
position="top" | ||
value={bars.bar1} | ||
onInput={(value: number) => setBar('bar1', value)} | ||
max={calculateMax(mins.rest)} | ||
min={mins.bar1} | ||
> | ||
<div | ||
className={styles.segmented} | ||
style={{ height: `${resizes.bar1 * 100}%`, padding: '8px' }} | ||
> | ||
{['2', '3', '4'].map(slot => ( | ||
<div key={slot} className={cx(styles.cell, 'no-top-padding')}> | ||
{p.children?.[slot] || <></>} | ||
</div> | ||
))} | ||
</div> | ||
</ResizeBar> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import React from 'react'; | ||
import cx from 'classnames'; | ||
import useLayout, { LayoutProps } from './hooks'; | ||
import ResizeBar from 'components-react/root/ResizeBar'; | ||
import styles from './Layouts.m.less'; | ||
|
||
export function Default(p: React.PropsWithChildren<LayoutProps>) { | ||
const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( | ||
[['1'], ['2'], ['3', '4', '5']], | ||
false, | ||
p.childrenMins, | ||
p.onTotalWidth, | ||
); | ||
|
||
return ( | ||
<div className={styles.rows} ref={componentRef}> | ||
<div | ||
className={styles.cell} | ||
style={{ height: `${100 - (resizes.bar1 + resizes.bar2!) * 100}%` }} | ||
> | ||
{p.children?.['1'] || <></>} | ||
</div> | ||
<ResizeBar | ||
position="top" | ||
value={bars.bar1} | ||
onInput={(value: number) => setBar('bar1', value)} | ||
max={calculateMax(mins.rest + bars.bar2)} | ||
min={mins.bar1} | ||
> | ||
<div | ||
style={{ height: `${resizes.bar1 * 100}%` }} | ||
className={cx(styles.cell, 'no-top-padding')} | ||
> | ||
{p.children?.['2'] || <></>} | ||
</div> | ||
</ResizeBar> | ||
<ResizeBar | ||
position="top" | ||
value={bars.bar2} | ||
onInput={(value: number) => setBar('bar2', value)} | ||
max={calculateMax(mins.rest + mins.bar1)} | ||
min={mins.bar2} | ||
> | ||
<div | ||
className={styles.segmented} | ||
style={{ height: `${resizes.bar2! * 100}%`, padding: '0 8px' }} | ||
> | ||
{['3', '4', '5'].map(slot => ( | ||
<div key={slot} className={cx(styles.cell, 'no-top-padding')}> | ||
{p.children?.[slot] || <></>} | ||
</div> | ||
))} | ||
</div> | ||
</ResizeBar> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React from 'react'; | ||
import cx from 'classnames'; | ||
import useLayout, { LayoutProps } from './hooks'; | ||
import ResizeBar from 'components-react/root/ResizeBar'; | ||
import styles from './Layouts.m.less'; | ||
|
||
export function FourByFour(p: React.PropsWithChildren<LayoutProps>) { | ||
const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( | ||
[['1'], ['2', '3'], ['4', '5']], | ||
false, | ||
p.childrenMins, | ||
p.onTotalWidth, | ||
); | ||
|
||
return ( | ||
<div className={styles.rows} ref={componentRef}> | ||
<div | ||
className={styles.cell} | ||
style={{ height: `${100 - (resizes.bar1 + resizes.bar2) * 100}%` }} | ||
> | ||
{p.children?.['1'] || <></>} | ||
</div> | ||
<ResizeBar | ||
position="top" | ||
value={bars.bar1} | ||
onInput={(value: number) => setBar('bar1', value)} | ||
max={calculateMax(mins.rest + bars.bar2)} | ||
min={mins.bar1} | ||
> | ||
<div className={styles.segmented} style={{ height: `${resizes.bar1 * 100}%` }}> | ||
<div className={cx(styles.cell, 'no-top-padding')}>{p.children?.['2'] || <></>}</div> | ||
<div className={cx(styles.cell, 'no-top-padding')}>{p.children?.['3'] || <></>}</div> | ||
</div> | ||
</ResizeBar> | ||
<ResizeBar | ||
position="top" | ||
value={bars.bar2} | ||
onInput={(value: number) => setBar('bar2', value)} | ||
max={calculateMax(mins.rest + mins.bar1)} | ||
min={mins.bar2} | ||
> | ||
<div | ||
className={styles.segmented} | ||
style={{ height: `${resizes.bar2 * 100}%`, padding: '0 8px' }} | ||
> | ||
<div className={cx(styles.cell, 'no-top-padding')}>{p.children?.['4'] || <></>}</div> | ||
<div className={cx(styles.cell, 'no-top-padding')}>{p.children?.['5'] || <></>}</div> | ||
</div> | ||
</ResizeBar> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
In what instances would
resizes.bar2
be null?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.
About half of the layouts only have one resizable bar so it has to be an optional/nullable parameter, but we know which layouts in which 2 resize bars exist so we are able to safely assert them