fix(ui): restrict changing playtime in live without file, remove unnec /channel calls and add loader
This commit is contained in:
nick-delirium
parent
3dc5798a35
commit
add27b30f6
4 changed files with 118 additions and 95 deletions
|
|
@ -95,11 +95,10 @@ function Timeline(props: IProps) {
|
|||
|
||||
const loadAndSeek = async (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.persist();
|
||||
await player.toggleTimetravel();
|
||||
|
||||
setTimeout(() => {
|
||||
const result = await player.toggleTimetravel();
|
||||
if (result) {
|
||||
seekProgress(e);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const jumpToTime = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Icon, Button, Popover } from 'UI';
|
||||
import { Icon, Button, Popover, Loader } from 'UI';
|
||||
import styles from './sharePopup.module.css';
|
||||
import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
|
||||
import SessionCopyLink from './SessionCopyLink';
|
||||
|
|
@ -29,12 +29,14 @@ export default class SharePopup extends React.PureComponent {
|
|||
loadingTeams: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.channels.size === 0) {
|
||||
this.props.fetchSlack();
|
||||
}
|
||||
if (this.props.msTeamsChannels.size === 0) {
|
||||
this.props.fetchTeams();
|
||||
componentDidUpdate() {
|
||||
if (this.state.isOpen) {
|
||||
if (this.props.channels.size === 0) {
|
||||
this.props.fetchSlack();
|
||||
}
|
||||
if (this.props.msTeamsChannels.size === 0) {
|
||||
this.props.fetchTeams();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +78,10 @@ export default class SharePopup extends React.PureComponent {
|
|||
};
|
||||
|
||||
handleSuccess = (endpoint) => {
|
||||
const obj = endpoint === 'Slack' ? { isOpen: false, comment: '', loadingSlack: false } : { isOpen: false, comment: '', loadingTeams: false }
|
||||
const obj =
|
||||
endpoint === 'Slack'
|
||||
? { isOpen: false, comment: '', loadingSlack: false }
|
||||
: { isOpen: false, comment: '', loadingTeams: false };
|
||||
this.setState(obj);
|
||||
toast.success(`Sent to ${endpoint}.`);
|
||||
};
|
||||
|
|
@ -103,91 +108,104 @@ export default class SharePopup extends React.PureComponent {
|
|||
|
||||
return (
|
||||
<Popover
|
||||
onOpen={() => this.setState({ isOpen: true })}
|
||||
onClose={() => this.setState({ isOpen: false })}
|
||||
render={() => (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.header}>
|
||||
<div className={cn(styles.title, 'text-lg')}>
|
||||
Share this session link to Slack/MS Teams
|
||||
</div>
|
||||
</div>
|
||||
{slackOptions.length > 0 || msTeamsOptions.length > 0 ? (
|
||||
<div>
|
||||
<div className={styles.body}>
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
cols="30"
|
||||
rows="4"
|
||||
resize="none"
|
||||
onChange={this.editMessage}
|
||||
value={comment}
|
||||
placeholder="Add Message (Optional)"
|
||||
className="p-4 text-figmaColors-text-primary text-base"
|
||||
/>
|
||||
|
||||
{slackOptions.length > 0 && (
|
||||
<>
|
||||
<span>Share to slack</span>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Select
|
||||
options={slackOptions}
|
||||
defaultValue={channelId}
|
||||
onChange={this.changeSlackChannel}
|
||||
className="mr-4"
|
||||
/>
|
||||
{this.state.channelId && (
|
||||
<Button onClick={this.shareToSlack} variant="primary">
|
||||
<div className="flex items-center">
|
||||
<Icon name="integrations/slack-bw" color="white" size="18" marginRight="10" />
|
||||
{loadingSlack ? 'Sending...' : 'Send'}
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{msTeamsOptions.length > 0 && (
|
||||
<>
|
||||
<span>Share to MS Teams</span>
|
||||
<div className="flex items-center justify-between">
|
||||
<Select
|
||||
options={msTeamsOptions}
|
||||
defaultValue={teamsChannel}
|
||||
onChange={this.changeTeamsChannel}
|
||||
className="mr-4"
|
||||
/>
|
||||
{this.state.teamsChannel && (
|
||||
<Button onClick={this.shareToMSTeams} variant="primary">
|
||||
<div className="flex items-center">
|
||||
<Icon
|
||||
name="integrations/teams-white"
|
||||
color="white"
|
||||
size="18"
|
||||
marginRight="10"
|
||||
/>
|
||||
{loadingTeams ? 'Sending...' : 'Send'}
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<SessionCopyLink />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
{this.state.loadingTeams || this.state.loadingSlack ? (
|
||||
<Loader loading />
|
||||
) :(
|
||||
<>
|
||||
<div className={styles.body}>
|
||||
<IntegrateSlackButton />
|
||||
</div>
|
||||
{showCopyLink && (
|
||||
<>
|
||||
<div className="border-t -mx-2" />
|
||||
<div>
|
||||
<SessionCopyLink />
|
||||
<div className={styles.header}>
|
||||
<div className={cn(styles.title, 'text-lg')}>
|
||||
Share this session link to Slack/MS Teams
|
||||
</div>
|
||||
</div>
|
||||
{slackOptions.length > 0 || msTeamsOptions.length > 0 ? (
|
||||
<div>
|
||||
<div className={styles.body}>
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
cols="30"
|
||||
rows="4"
|
||||
resize="none"
|
||||
onChange={this.editMessage}
|
||||
value={comment}
|
||||
placeholder="Add Message (Optional)"
|
||||
className="p-4 text-figmaColors-text-primary text-base"
|
||||
/>
|
||||
|
||||
{slackOptions.length > 0 && (
|
||||
<>
|
||||
<span>Share to slack</span>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Select
|
||||
options={slackOptions}
|
||||
defaultValue={channelId}
|
||||
onChange={this.changeSlackChannel}
|
||||
className="mr-4"
|
||||
/>
|
||||
{this.state.channelId && (
|
||||
<Button onClick={this.shareToSlack} variant="primary">
|
||||
<div className="flex items-center">
|
||||
<Icon
|
||||
name="integrations/slack-bw"
|
||||
color="white"
|
||||
size="18"
|
||||
marginRight="10"
|
||||
/>
|
||||
{loadingSlack ? 'Sending...' : 'Send'}
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{msTeamsOptions.length > 0 && (
|
||||
<>
|
||||
<span>Share to MS Teams</span>
|
||||
<div className="flex items-center justify-between">
|
||||
<Select
|
||||
options={msTeamsOptions}
|
||||
defaultValue={teamsChannel}
|
||||
onChange={this.changeTeamsChannel}
|
||||
className="mr-4"
|
||||
/>
|
||||
{this.state.teamsChannel && (
|
||||
<Button onClick={this.shareToMSTeams} variant="primary">
|
||||
<div className="flex items-center">
|
||||
<Icon
|
||||
name="integrations/teams-white"
|
||||
color="white"
|
||||
size="18"
|
||||
marginRight="10"
|
||||
/>
|
||||
{loadingTeams ? 'Sending...' : 'Send'}
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<SessionCopyLink />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.body}>
|
||||
<IntegrateSlackButton />
|
||||
</div>
|
||||
{showCopyLink && (
|
||||
<>
|
||||
<div className="border-t -mx-2" />
|
||||
<div>
|
||||
<SessionCopyLink />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ interface Props {
|
|||
placement?: Placement;
|
||||
children: JSX.Element;
|
||||
onOpen?: () => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const Popover = ({ children, render, placement, onOpen = () => {} }: Props) => {
|
||||
const Popover = ({ children, render, placement, onOpen, onClose }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
onOpen();
|
||||
onOpen?.();
|
||||
} else {
|
||||
onClose?.();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export default class WebLivePlayer extends WebPlayer {
|
|||
if (this.wpState.get().liveTimeTravel) {
|
||||
return
|
||||
}
|
||||
let result = false;
|
||||
this.historyFileIsLoading = true
|
||||
this.messageManager.setMessagesLoading(true) // do it in one place. update unique loading states each time instead
|
||||
this.messageManager.resetMessageManagers()
|
||||
|
|
@ -60,6 +61,7 @@ export default class WebLivePlayer extends WebPlayer {
|
|||
this.wpState.update({
|
||||
liveTimeTravel: true,
|
||||
})
|
||||
result = true
|
||||
// here we need to update also lists state, if we gonna use them this.messageManager.onFileReadSuccess
|
||||
} catch(e) {
|
||||
toast.error('Error requesting a session file')
|
||||
|
|
@ -74,6 +76,7 @@ export default class WebLivePlayer extends WebPlayer {
|
|||
|
||||
this.historyFileIsLoading = false
|
||||
this.messageManager.setMessagesLoading(false)
|
||||
return result;
|
||||
}
|
||||
|
||||
jumpToLive = () => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue