diff --git a/client/coral-embed-stream/src/actions/configure.js b/client/coral-embed-stream/src/actions/configure.js new file mode 100644 index 000000000..e69de29bb diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js index 4a48c54e5..bbdaa2f19 100644 --- a/client/coral-embed-stream/src/components/Embed.js +++ b/client/coral-embed-stream/src/components/Embed.js @@ -5,6 +5,7 @@ import Configure from '../tabs/configure/containers/Configure'; import Slot from 'coral-framework/components/Slot'; import {can} from 'coral-framework/services/perms'; import t from 'coral-framework/services/i18n'; +import AutomaticAssetClosure from '../containers/AutomaticAssetClosure'; import ExtendableTabPanel from '../containers/ExtendableTabPanel'; import {Tab, TabPane} from 'coral-ui'; @@ -56,11 +57,12 @@ export default class Embed extends React.Component { } render() { - const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props; + const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props; const hasHighlightedComment = !!commentId; return (
+ ( -
-

{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}

- {(!isClosed && closedAt) ?

{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.

: ''} -
-

- {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')} -

- -
-
-); +class AssetStatusInfo extends React.Component { + + timer = null; + + constructor(props) { + super(props); + this.setupTimer(props); + } + + componentWillReceiveProps(nextProps) { + this.setupTimer(nextProps); + } + + interval(closedAt) { + const diff = new Date(closedAt).getTime() - new Date().getTime(); + return diff > 60000 ? 60000 : 1000; + } + + setupTimer({closedAt, isClosed} = this.props) { + if (this.timer && (isClosed || !closedAt)) { + clearTimeout(this.timer); + this.timer = null; + } + if (isClosed || !closedAt) { + this.timer = null; + return; + } + if (!this.timer) { + this.timer = setTimeout(() => { + this.timer = null; + this.forceUpdate(); + this.setupTimer(); + }, this.interval(closedAt)); + } + } + + render() { + const {isClosed, closedAt, onClose, onOpen} = this.props; + return ( +
+

{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}

+ {(!isClosed && closedAt) ?

{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.

: ''} +
+

+ {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')} +

+ +
+
+ ); + } +} AssetStatusInfo.propTypes = { isClosed: PropTypes.bool.isRequired, diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js index 6844d1c4f..99df8c1c9 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js @@ -18,7 +18,6 @@ import cn from 'classnames'; import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils'; import AllCommentsPane from './AllCommentsPane'; -import AutomaticAssetClosure from '../containers/AutomaticAssetClosure'; import ExtendableTabPanel from '../../../containers/ExtendableTabPanel'; import styles from './Stream.css'; @@ -234,7 +233,6 @@ class Stream extends React.Component { return (
- {highlightedComment &&