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>) => {
|
const loadAndSeek = async (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
e.persist();
|
e.persist();
|
||||||
await player.toggleTimetravel();
|
const result = await player.toggleTimetravel();
|
||||||
|
if (result) {
|
||||||
setTimeout(() => {
|
|
||||||
seekProgress(e);
|
seekProgress(e);
|
||||||
});
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const jumpToTime = (e: React.MouseEvent<HTMLDivElement>) => {
|
const jumpToTime = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { toast } from 'react-toastify';
|
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 styles from './sharePopup.module.css';
|
||||||
import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
|
import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
|
||||||
import SessionCopyLink from './SessionCopyLink';
|
import SessionCopyLink from './SessionCopyLink';
|
||||||
|
|
@ -29,12 +29,14 @@ export default class SharePopup extends React.PureComponent {
|
||||||
loadingTeams: false,
|
loadingTeams: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidUpdate() {
|
||||||
if (this.props.channels.size === 0) {
|
if (this.state.isOpen) {
|
||||||
this.props.fetchSlack();
|
if (this.props.channels.size === 0) {
|
||||||
}
|
this.props.fetchSlack();
|
||||||
if (this.props.msTeamsChannels.size === 0) {
|
}
|
||||||
this.props.fetchTeams();
|
if (this.props.msTeamsChannels.size === 0) {
|
||||||
|
this.props.fetchTeams();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -76,7 +78,10 @@ export default class SharePopup extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSuccess = (endpoint) => {
|
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);
|
this.setState(obj);
|
||||||
toast.success(`Sent to ${endpoint}.`);
|
toast.success(`Sent to ${endpoint}.`);
|
||||||
};
|
};
|
||||||
|
|
@ -103,91 +108,104 @@ export default class SharePopup extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
|
onOpen={() => this.setState({ isOpen: true })}
|
||||||
|
onClose={() => this.setState({ isOpen: false })}
|
||||||
render={() => (
|
render={() => (
|
||||||
<div className={styles.wrapper}>
|
<div className={styles.wrapper}>
|
||||||
<div className={styles.header}>
|
{this.state.loadingTeams || this.state.loadingSlack ? (
|
||||||
<div className={cn(styles.title, 'text-lg')}>
|
<Loader loading />
|
||||||
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}>
|
<div className={styles.header}>
|
||||||
<IntegrateSlackButton />
|
<div className={cn(styles.title, 'text-lg')}>
|
||||||
</div>
|
Share this session link to Slack/MS Teams
|
||||||
{showCopyLink && (
|
|
||||||
<>
|
|
||||||
<div className="border-t -mx-2" />
|
|
||||||
<div>
|
|
||||||
<SessionCopyLink />
|
|
||||||
</div>
|
</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;
|
placement?: Placement;
|
||||||
children: JSX.Element;
|
children: JSX.Element;
|
||||||
onOpen?: () => void;
|
onOpen?: () => void;
|
||||||
|
onClose?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Popover = ({ children, render, placement, onOpen = () => {} }: Props) => {
|
const Popover = ({ children, render, placement, onOpen, onClose }: Props) => {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open) {
|
if (open) {
|
||||||
onOpen();
|
onOpen?.();
|
||||||
|
} else {
|
||||||
|
onClose?.();
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,7 @@ export default class WebLivePlayer extends WebPlayer {
|
||||||
if (this.wpState.get().liveTimeTravel) {
|
if (this.wpState.get().liveTimeTravel) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
let result = false;
|
||||||
this.historyFileIsLoading = true
|
this.historyFileIsLoading = true
|
||||||
this.messageManager.setMessagesLoading(true) // do it in one place. update unique loading states each time instead
|
this.messageManager.setMessagesLoading(true) // do it in one place. update unique loading states each time instead
|
||||||
this.messageManager.resetMessageManagers()
|
this.messageManager.resetMessageManagers()
|
||||||
|
|
@ -60,6 +61,7 @@ export default class WebLivePlayer extends WebPlayer {
|
||||||
this.wpState.update({
|
this.wpState.update({
|
||||||
liveTimeTravel: true,
|
liveTimeTravel: true,
|
||||||
})
|
})
|
||||||
|
result = true
|
||||||
// here we need to update also lists state, if we gonna use them this.messageManager.onFileReadSuccess
|
// here we need to update also lists state, if we gonna use them this.messageManager.onFileReadSuccess
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
toast.error('Error requesting a session file')
|
toast.error('Error requesting a session file')
|
||||||
|
|
@ -74,6 +76,7 @@ export default class WebLivePlayer extends WebPlayer {
|
||||||
|
|
||||||
this.historyFileIsLoading = false
|
this.historyFileIsLoading = false
|
||||||
this.messageManager.setMessagesLoading(false)
|
this.messageManager.setMessagesLoading(false)
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
jumpToLive = () => {
|
jumpToLive = () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue