Skip to content

Commit

Permalink
join plugin UI rework + muted bugfix (stream-labs#4223)
Browse files Browse the repository at this point in the history 
* ui redesign

* muted save issue
  • Loading branch information
@avacreeth
avacreeth authored Jul 14, 2022
1 parent be49988 commit 6ea18f1
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 90 deletions.
193 changes: 108 additions & 85 deletions app/components-react/windows/GuestCamProperties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,91 +80,7 @@ export default function GuestCamProperties() {

return (
<ModalLayout scrollable>
<Tabs destroyInactiveTabPane={true}>
<Tabs.TabPane tab={$t('Guest Settings')} key="guest-settings">
<div
style={{
display: 'flex',
flexDirection: 'row',
height: 260,
background: 'var(--section-alt)',
borderRadius: 8,
}}
>
<div style={{ flexGrow: 1, padding: 20 }}>
<h3>{$t('Source: %{sourceName}', { sourceName: source?.name })}</h3>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
<Button
onClick={() => GuestCamService.actions.setVisibility(!visible)}
disabled={!guestInfo}
style={{ width: '45%' }}
type={!!guestInfo && !visible ? 'primary' : 'default'}
>
{!!guestInfo && visible ? $t('Hide on Stream') : $t('Show on Stream')}
</Button>
<button
className="button button--soft-warning"
style={{ width: '45%' }}
disabled={!guestInfo}
onClick={() => GuestCamService.actions.disconnectGuest()}
>
{$t('Disconnect')}
</button>
</div>
<Form layout="inline">
<SliderInput
label={$t('Volume')}
value={volume}
onChange={setDeflection}
min={0}
max={1}
debounce={500}
step={0.01}
tipFormatter={v => `${(v * 100).toFixed(0)}%`}
style={{ width: '100%', margin: '10px 0' }}
/>
<TextInput
readOnly
value={inviteUrl}
label={$t('Invite URL')}
style={{ width: '100%', margin: '10px 0 20px' }}
addonAfter={
<Tooltip title={$t('Copied!')} trigger="click">
<Button onClick={() => remote.clipboard.writeText(inviteUrl)}>
{$t('Copy')}
</Button>
</Tooltip>
}
/>
</Form>
<Button disabled={regeneratingLink} onClick={regenerateLink}>
{$t('Generate a new link')}
{regeneratingLink && (
<i className="fa fa-spinner fa-pulse" style={{ marginLeft: 8 }} />
)}
</Button>
</div>
<div style={{ width: 400, background: 'var(--section)', borderRadius: '0 8px 8px 0' }}>
{/* Weird double div is to avoid display blocking border radius */}
<div style={{ margin: '10px 0', height: 'calc(100% - 20px)' }}>
{!!guestInfo && produceOk && <Display sourceId={source?.sourceId} />}
{!guestInfo && (
<div
style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
padding: '50px 0',
}}
>
<Spinner />
<div style={{ textAlign: 'center' }}>{$t('Waiting for guest to join')}</div>
</div>
)}
</div>
</div>
</div>
</Tabs.TabPane>
<Tabs destroyInactiveTabPane={true} defaultActiveKey="guest-settings">
<Tabs.TabPane tab={$t('Global Settings')} key="global-settings">
<Form>
<h2>
Expand Down Expand Up @@ -209,6 +125,113 @@ export default function GuestCamProperties() {
/>
)}
</Tabs.TabPane>
<Tabs.TabPane tab={$t('Guest %{num} Settings', { num: 1 })} key="guest-settings">
<div
style={{
display: 'flex',
flexDirection: 'column',
background: 'var(--section-alt)',
borderRadius: 8,
}}
>
<div style={{ flexGrow: 1, padding: 20 }}>
<h3>{$t('Source: %{sourceName}', { sourceName: source?.name })}</h3>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div style={{ flexGrow: 1 }}>
<TextInput
readOnly
value={inviteUrl}
label={$t('Invite URL')}
style={{ width: '100%', margin: '10px 0 20px' }}
/>
<SliderInput
label={$t('Volume')}
value={volume}
onChange={setDeflection}
min={0}
max={1}
debounce={500}
step={0.01}
tipFormatter={v => `${(v * 100).toFixed(0)}%`}
style={{ width: '100%', margin: '10px 0' }}
/>
</div>
<div style={{ width: 350, marginLeft: 20 }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
margin: '10px 0 20px',
}}
>
<Tooltip title={$t('Copied!')} trigger="click">
<Button
onClick={() => remote.clipboard.writeText(inviteUrl)}
style={{ width: 160 }}
>
{$t('Copy Link')}
</Button>
</Tooltip>
<Button
disabled={regeneratingLink}
onClick={regenerateLink}
style={{ width: 160 }}
>
{$t('Generate a new link')}
{regeneratingLink && (
<i className="fa fa-spinner fa-pulse" style={{ marginLeft: 8 }} />
)}
</Button>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Button
onClick={() => GuestCamService.actions.setVisibility(!visible)}
disabled={!guestInfo}
style={{ width: 160 }}
type={!!guestInfo && !visible ? 'primary' : 'default'}
>
{!!guestInfo && visible ? $t('Hide on Stream') : $t('Show on Stream')}
</Button>
<button
className="button button--soft-warning"
style={{ width: 160 }}
disabled={!guestInfo}
onClick={() => GuestCamService.actions.disconnectGuest()}
>
{$t('Disconnect')}
</button>
</div>
</div>
</div>
</div>
<div style={{ background: 'var(--section)', borderRadius: '0 0 8px 8px', height: 280 }}>
{/* Weird double div is to avoid display blocking border radius */}
<div style={{ margin: '0 10px', width: 'calc(100% - 20px)', height: '100%' }}>
{!!guestInfo && produceOk && <Display sourceId={source?.sourceId} />}
{!guestInfo && (
<div
style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
padding: '50px 0',
}}
>
<Spinner />
<div style={{ textAlign: 'center' }}>{$t('Waiting for guest to join')}</div>
</div>
)}
</div>
</div>
</div>
</Tabs.TabPane>
</Tabs>
<Modal
visible={!produceOk}
Expand Down
5 changes: 3 additions & 2 deletions app/i18n/en-US/guest-cam.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"Copied!": "Copied!",
"Invite URL": "Invite URL",
"Disconnect": "Disconnect",
"Guest Settings": "Guest Settings",
"Guest %{num} Settings": "Guest %{num} Settings",
"Collab Cam Properties": "Collab Cam Properties",
"A guest has joined - click to show": "A guest has joined - click to show",
"Welcome to Collab Cam": "Welcome to Collab Cam",
Expand All @@ -25,5 +25,6 @@
"Enjoy your stream! Adjust their volume, create new links, and change your mic and camera from the properties window.": "Enjoy your stream! Adjust their volume, create new links, and change your mic and camera from the properties window.",
"Don't share your invite link with anyone you don't want on your stream. You can invalidate an old link by generating a new one. Do not show this window on stream.": "Don't share your invite link with anyone you don't want on your stream. You can invalidate an old link by generating a new one. Do not show this window on stream.",
"Start Collab Cam": "Start Collab Cam",
"Collab Cam is not yet sending your video and audio to guests. Start Collab Cam?": "Collab Cam is not yet sending your video and audio to guests. Start Collab Cam?"
"Collab Cam is not yet sending your video and audio to guests. Start Collab Cam?": "Collab Cam is not yet sending your video and audio to guests. Start Collab Cam?",
"Copy Link": "Copy Link"
}
2 changes: 1 addition & 1 deletion app/services/scene-collections/nodes/sources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export class SourcesNode extends Node<ISchema, {}> {
settings: obsInput.settings,
volume: obsInput.volume,
channel: source.channel,
muted: obsInput.muted,
muted: source.muted,
filters: {
items: filters,
},
Expand Down
4 changes: 2 additions & 2 deletions app/services/sources/sources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -806,8 +806,8 @@ export class SourcesService extends StatefulService<ISourcesState> {
title: $t('Collab Cam Properties', { sourceName: propertiesName }),
queryParams: { sourceId: source.sourceId },
size: {
width: 800,
height: 670,
width: 850,
height: 650,
},
});
}
Expand Down

0 comments on commit 6ea18f1

Please sign in to comment.