diff options
4 files changed, 97 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 30592707c..d8e8791a7 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -139,6 +139,9 @@ export default class Video extends React.PureComponent { setVideoRef = c => { this.video = c; + if (this.video) { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } } setSeekRef = c => { @@ -319,6 +322,10 @@ export default class Video extends React.PureComponent { } } + handleVolumeChange = () => { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } + handleOpenVideo = () => { const { src, preview, width, height, alt } = this.props; const media = fromJS({ @@ -407,6 +414,7 @@ export default class Video extends React.PureComponent { onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} onProgress={this.handleProgress} + onVolumeChange={this.handleVolumeChange} /> <button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> @@ -429,7 +437,7 @@ export default class Video extends React.PureComponent { <div className='video-player__buttons-bar'> <div className='video-player__buttons left'> <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> - <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onMouseEnter={this.volumeSlider} onMouseLeave={this.volumeSlider} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> + <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> <span diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js index 44da423ad..97efff69c 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.js +++ b/app/javascript/mastodon/features/notifications/components/notification.js @@ -29,6 +29,10 @@ class Notification extends ImmutablePureComponent { onMoveUp: PropTypes.func.isRequired, onMoveDown: PropTypes.func.isRequired, onMention: PropTypes.func.isRequired, + onFavourite: PropTypes.func.isRequired, + onReblog: PropTypes.func.isRequired, + onToggleHidden: PropTypes.func.isRequired, + status: PropTypes.option, intl: PropTypes.object.isRequired, }; @@ -64,14 +68,32 @@ class Notification extends ImmutablePureComponent { onMention(notification.get('account'), this.context.router.history); } + handleHotkeyFavourite = () => { + const { status } = this.props; + if (status) this.props.onFavourite(status); + } + + handleHotkeyBoost = e => { + const { status } = this.props; + if (status) this.props.onReblog(status, e); + } + + handleHotkeyToggleHidden = () => { + const { status } = this.props; + if (status) this.props.onToggleHidden(status); + } + getHandlers () { return { - moveUp: this.handleMoveUp, - moveDown: this.handleMoveDown, + reply: this.handleMention, + favourite: this.handleHotkeyFavourite, + boost: this.handleHotkeyBoost, + mention: this.handleMention, open: this.handleOpen, openProfile: this.handleOpenProfile, - mention: this.handleMention, - reply: this.handleMention, + moveUp: this.handleMoveUp, + moveDown: this.handleMoveDown, + toggleHidden: this.handleHotkeyToggleHidden, }; } diff --git a/app/javascript/mastodon/features/notifications/containers/notification_container.js b/app/javascript/mastodon/features/notifications/containers/notification_container.js index 921aa460f..78576c760 100644 --- a/app/javascript/mastodon/features/notifications/containers/notification_container.js +++ b/app/javascript/mastodon/features/notifications/containers/notification_container.js @@ -1,14 +1,31 @@ import { connect } from 'react-redux'; -import { makeGetNotification } from '../../../selectors'; +import { makeGetNotification, makeGetStatus } from '../../../selectors'; import Notification from '../components/notification'; +import { openModal } from '../../../actions/modal'; import { mentionCompose } from '../../../actions/compose'; +import { + reblog, + favourite, + unreblog, + unfavourite, +} from '../../../actions/interactions'; +import { + hideStatus, + revealStatus, +} from '../../../actions/statuses'; +import { boostModal } from '../../../initial_state'; const makeMapStateToProps = () => { const getNotification = makeGetNotification(); + const getStatus = makeGetStatus(); - const mapStateToProps = (state, props) => ({ - notification: getNotification(state, props.notification, props.accountId), - }); + const mapStateToProps = (state, props) => { + const notification = getNotification(state, props.notification, props.accountId); + return { + notification: notification, + status: notification.get('status') ? getStatus(state, { id: notification.get('status') }) : null, + }; + }; return mapStateToProps; }; @@ -17,6 +34,38 @@ const mapDispatchToProps = dispatch => ({ onMention: (account, router) => { dispatch(mentionCompose(account, router)); }, + + onModalReblog (status) { + dispatch(reblog(status)); + }, + + onReblog (status, e) { + if (status.get('reblogged')) { + dispatch(unreblog(status)); + } else { + if (e.shiftKey || !boostModal) { + this.onModalReblog(status); + } else { + dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog })); + } + } + }, + + onFavourite (status) { + if (status.get('favourited')) { + dispatch(unfavourite(status)); + } else { + dispatch(favourite(status)); + } + }, + + onToggleHidden (status) { + if (status.get('hidden')) { + dispatch(revealStatus(status.get('id'))); + } else { + dispatch(hideStatus(status.get('id'))); + } + }, }); export default connect(makeMapStateToProps, mapDispatchToProps)(Notification); diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 3650fddb6..0d0c24d71 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -136,6 +136,9 @@ class Video extends React.PureComponent { setVideoRef = c => { this.video = c; + if (this.video) { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } } setSeekRef = c => { @@ -302,6 +305,10 @@ class Video extends React.PureComponent { } } + handleVolumeChange = () => { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } + handleOpenVideo = () => { const { src, preview, width, height, alt } = this.props; const media = fromJS({ @@ -387,6 +394,7 @@ class Video extends React.PureComponent { onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} onProgress={this.handleProgress} + onVolumeChange={this.handleVolumeChange} /> <button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> @@ -409,7 +417,7 @@ class Video extends React.PureComponent { <div className='video-player__buttons-bar'> <div className='video-player__buttons left'> <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> - <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onMouseEnter={this.volumeSlider} onMouseLeave={this.volumeSlider} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> + <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> <span |