From 5d2cdeb2255f49abd7756e5e6d94b16ad1f7df90 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 9 Apr 2020 16:12:28 +0200 Subject: Fix deprecated use of createBrowserHistory --- app/javascript/flavours/glitch/components/modal_root.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js index f9877d5ea..8d73a1e40 100644 --- a/app/javascript/flavours/glitch/components/modal_root.js +++ b/app/javascript/flavours/glitch/components/modal_root.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import 'wicg-inert'; -import createHistory from 'history/createBrowserHistory'; +import { createBrowserHistory } from 'history'; export default class ModalRoot extends React.PureComponent { static contextTypes = { @@ -51,7 +51,7 @@ export default class ModalRoot extends React.PureComponent { componentDidMount () { window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keydown', this.handleKeyDown, false); - this.history = this.context.router ? this.context.router.history : createHistory(); + this.history = this.context.router ? this.context.router.history : createBrowserHistory(); } componentWillReceiveProps (nextProps) { -- cgit From 4849752a9cf5d8220e5d90f5f9ce24ed37abc2ed Mon Sep 17 00:00:00 2001 From: Gurgen Hayrapetyan Date: Thu, 16 Apr 2020 22:16:20 +0400 Subject: [Glitch] Fix Poll fetchPoll action not being debounced. Port ab8d7c0680d7f75826277be4c8eea1ebd396be8a to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/components/poll.js | 5 +++-- .../flavours/glitch/containers/poll_container.js | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index 46fd1e8c0..088d93990 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { vote, fetchPoll } from 'flavours/glitch/actions/polls'; +import { vote } from 'flavours/glitch/actions/polls'; import Motion from 'flavours/glitch/util/optional_motion'; import spring from 'react-motion/lib/spring'; import escapeTextContentForBrowser from 'escape-html'; @@ -30,6 +30,7 @@ class Poll extends ImmutablePureComponent { intl: PropTypes.object.isRequired, dispatch: PropTypes.func, disabled: PropTypes.bool, + refresh: PropTypes.func, }; state = { @@ -108,7 +109,7 @@ class Poll extends ImmutablePureComponent { return; } - this.props.dispatch(fetchPoll(this.props.poll.get('id'))); + this.props.refresh(); }; renderOption (option, optionIndex, showResults) { diff --git a/app/javascript/flavours/glitch/containers/poll_container.js b/app/javascript/flavours/glitch/containers/poll_container.js index da93cc905..b90864354 100644 --- a/app/javascript/flavours/glitch/containers/poll_container.js +++ b/app/javascript/flavours/glitch/containers/poll_container.js @@ -1,8 +1,21 @@ import { connect } from 'react-redux'; +import { debounce } from 'lodash'; + import Poll from 'flavours/glitch/components/poll'; +import { fetchPoll } from 'flavours/glitch/actions/polls'; + +const mapDispatchToProps = (dispatch, { pollId }) => ({ + refresh: debounce( + () => { + dispatch(fetchPoll(pollId)); + }, + 1000, + { leading: true }, + ), +}); const mapStateToProps = (state, { pollId }) => ({ poll: state.getIn(['polls', pollId]), }); -export default connect(mapStateToProps)(Poll); +export default connect(mapStateToProps, mapDispatchToProps)(Poll); -- cgit From 81ef26b67d01aaa693edbdcf7a8f2a6cdfd56920 Mon Sep 17 00:00:00 2001 From: ThibG Date: Fri, 17 Apr 2020 21:54:25 +0200 Subject: [Glitch] Fix not being able to vote Port e12a5635da7de5a1c3b08b2ce420ee8a56ae4aff to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/components/poll.js | 5 ++--- app/javascript/flavours/glitch/containers/poll_container.js | 6 +++++- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index 088d93990..6f57c1950 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { vote } from 'flavours/glitch/actions/polls'; import Motion from 'flavours/glitch/util/optional_motion'; import spring from 'react-motion/lib/spring'; import escapeTextContentForBrowser from 'escape-html'; @@ -28,9 +27,9 @@ class Poll extends ImmutablePureComponent { static propTypes = { poll: ImmutablePropTypes.map, intl: PropTypes.object.isRequired, - dispatch: PropTypes.func, disabled: PropTypes.bool, refresh: PropTypes.func, + onVote: PropTypes.func, }; state = { @@ -101,7 +100,7 @@ class Poll extends ImmutablePureComponent { return; } - this.props.dispatch(vote(this.props.poll.get('id'), Object.keys(this.state.selected))); + this.props.onVote(Object.keys(this.state.selected)); }; handleRefresh = () => { diff --git a/app/javascript/flavours/glitch/containers/poll_container.js b/app/javascript/flavours/glitch/containers/poll_container.js index b90864354..345351cc6 100644 --- a/app/javascript/flavours/glitch/containers/poll_container.js +++ b/app/javascript/flavours/glitch/containers/poll_container.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { debounce } from 'lodash'; import Poll from 'flavours/glitch/components/poll'; -import { fetchPoll } from 'flavours/glitch/actions/polls'; +import { fetchPoll, vote } from 'flavours/glitch/actions/polls'; const mapDispatchToProps = (dispatch, { pollId }) => ({ refresh: debounce( @@ -12,6 +12,10 @@ const mapDispatchToProps = (dispatch, { pollId }) => ({ 1000, { leading: true }, ), + + onVote (choices) { + dispatch(vote(pollId, choices)); + }, }); const mapStateToProps = (state, { pollId }) => ({ -- cgit From ce33822e2c6367961945202057c7c31523ba1ab6 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 21 Apr 2020 15:13:26 +0200 Subject: [Glitch] Fix and refactor keyboard navigation in dropdown menus Port 80182eda622e1317bffb6729259b8a81d84251a2 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/components/dropdown_menu.js | 29 ++++++------------ .../features/compose/components/dropdown_menu.js | 35 +++++++--------------- 2 files changed, 19 insertions(+), 45 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js index cc4d714e8..b3da4fc2f 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/components/dropdown_menu.js @@ -68,20 +68,14 @@ class DropdownMenu extends React.PureComponent { handleKeyDown = e => { const items = Array.from(this.node.getElementsByTagName('a')); const index = items.indexOf(document.activeElement); - let element; + let element = null; switch(e.key) { case 'ArrowDown': - element = items[index+1]; - if (element) { - element.focus(); - } + element = items[index+1] || items[0]; break; case 'ArrowUp': - element = items[index-1]; - if (element) { - element.focus(); - } + element = items[index-1] || items[items.length-1]; break; case 'Tab': if (e.shiftKey) { @@ -89,28 +83,23 @@ class DropdownMenu extends React.PureComponent { } else { element = items[index+1] || items[0]; } - if (element) { - element.focus(); - e.preventDefault(); - e.stopPropagation(); - } break; case 'Home': element = items[0]; - if (element) { - element.focus(); - } break; case 'End': element = items[items.length-1]; - if (element) { - element.focus(); - } break; case 'Escape': this.props.onClose(); break; } + + if (element) { + element.focus(); + e.preventDefault(); + e.stopPropagation(); + } } handleItemKeyPress = e => { diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js index 404504e84..84c040a86 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -106,7 +106,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent const index = items.findIndex(item => { return (item.name === name); }); - let element; + let element = null; switch(e.key) { case 'Escape': @@ -117,18 +117,10 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent this.handleClick(e); break; case 'ArrowDown': - element = this.node.childNodes[index + 1]; - if (element) { - element.focus(); - this.handleChange(element.getAttribute('data-index')); - } + element = this.node.childNodes[index + 1] || this.node.firstChild; break; case 'ArrowUp': - element = this.node.childNodes[index - 1]; - if (element) { - element.focus(); - this.handleChange(element.getAttribute('data-index')); - } + element = this.node.childNodes[index - 1] || this.node.lastChild; break; case 'Tab': if (e.shiftKey) { @@ -136,28 +128,21 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent } else { element = this.node.childNodes[index + 1] || this.node.firstChild; } - if (element) { - element.focus(); - this.handleChange(element.getAttribute('data-index')); - e.preventDefault(); - e.stopPropagation(); - } break; case 'Home': element = this.node.firstChild; - if (element) { - element.focus(); - this.handleChange(element.getAttribute('data-index')); - } break; case 'End': element = this.node.lastChild; - if (element) { - element.focus(); - this.handleChange(element.getAttribute('data-index')); - } break; } + + if (element) { + element.focus(); + this.handleChange(element.getAttribute('data-index')); + e.preventDefault(); + e.stopPropagation(); + } } setFocusRef = c => { -- cgit From 572e89e56323e2f398ea5a168caf3d8b7e3e46b8 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 25 Apr 2020 12:16:05 +0200 Subject: [Glitch] Fix expanded video player issues Port c955f98d36868e85b0f1939a3a1c58c00babd4e8 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/components/status.js | 6 +++--- .../flavours/glitch/containers/status_container.js | 4 ++-- .../features/status/components/detailed_status.js | 4 ++-- .../status/containers/detailed_status_container.js | 4 ++-- app/javascript/flavours/glitch/features/status/index.js | 6 +++--- .../glitch/features/ui/components/video_modal.js | 13 ++++++++++--- app/javascript/flavours/glitch/features/video/index.js | 17 ++++++++++++++++- 7 files changed, 38 insertions(+), 16 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 23cdc0167..91bc06b3c 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -372,8 +372,8 @@ class Status extends ImmutablePureComponent { } }; - handleOpenVideo = (media, startTime) => { - this.props.onOpenVideo(media, startTime); + handleOpenVideo = (media, options) => { + this.props.onOpenVideo(media, options); } handleHotkeyOpenMedia = e => { @@ -385,7 +385,7 @@ class Status extends ImmutablePureComponent { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { // TODO: toggle play/paused? } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { - onOpenVideo(status.getIn(['media_attachments', 0]), 0); + onOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 }); } else { onOpenMedia(status.get('media_attachments'), 0); } diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index f6e92813a..2cbe3d094 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -178,8 +178,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch(openModal('MEDIA', { media, index })); }, - onOpenVideo (media, time) { - dispatch(openModal('VIDEO', { media, time })); + onOpenVideo (media, options) { + dispatch(openModal('VIDEO', { media, options })); }, onBlock (status) { diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 180b11a54..17f22a8a2 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -66,8 +66,8 @@ export default class DetailedStatus extends ImmutablePureComponent { e.stopPropagation(); } - handleOpenVideo = (media, startTime) => { - this.props.onOpenVideo(media, startTime); + handleOpenVideo = (media, options) => { + this.props.onOpenVideo(media, options); } _measureHeight (heightJustChanged) { diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js index e71803328..9d11f37e0 100644 --- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js @@ -130,8 +130,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(openModal('MEDIA', { media, index })); }, - onOpenVideo (media, time) { - dispatch(openModal('VIDEO', { media, time })); + onOpenVideo (media, options) { + dispatch(openModal('VIDEO', { media, options })); }, onBlock (status) { diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 411d2a88d..a9abc545e 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -316,8 +316,8 @@ class Status extends ImmutablePureComponent { this.props.dispatch(openModal('MEDIA', { media, index })); } - handleOpenVideo = (media, time) => { - this.props.dispatch(openModal('VIDEO', { media, time })); + handleOpenVideo = (media, options) => { + this.props.dispatch(openModal('VIDEO', { media, options })); } handleHotkeyOpenMedia = e => { @@ -329,7 +329,7 @@ class Status extends ImmutablePureComponent { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { // TODO: toggle play/paused? } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { - this.handleOpenVideo(status.getIn(['media_attachments', 0]), 0); + this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 }); } else { this.handleOpenMedia(status.get('media_attachments'), 0); } diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.js index e7309021e..afeff90a4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js @@ -16,7 +16,11 @@ export default class VideoModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map, - time: PropTypes.number, + options: PropTypes.shape({ + startTime: PropTypes.number, + autoPlay: PropTypes.bool, + defaultVolume: PropTypes.number, + }), onClose: PropTypes.func.isRequired, }; @@ -28,7 +32,8 @@ export default class VideoModal extends ImmutablePureComponent { } render () { - const { media, status, time, onClose } = this.props; + const { media, status, onClose } = this.props; + const options = this.props.options || {}; return (
@@ -37,7 +42,9 @@ export default class VideoModal extends ImmutablePureComponent { preview={media.get('preview_url')} blurhash={media.get('blurhash')} src={media.get('url')} - startTime={time} + startTime={options.startTime} + autoPlay={options.autoPlay} + defaultVolume={options.defaultVolume} onCloseVideo={onClose} detailed alt={media.get('description')} diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 6a8952c8d..a89d9c8b0 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -111,6 +111,8 @@ class Video extends React.PureComponent { preventPlayback: PropTypes.bool, blurhash: PropTypes.string, link: PropTypes.node, + autoPlay: PropTypes.bool, + defaultVolume: PropTypes.number, }; state = { @@ -360,6 +362,13 @@ class Video extends React.PureComponent { handleLoadedData = () => { if (this.props.startTime) { this.video.currentTime = this.props.startTime; + } + + if (this.props.defaultVolume !== undefined) { + this.video.volume = this.props.defaultVolume; + } + + if (this.props.autoPlay) { this.video.play(); } } @@ -386,8 +395,14 @@ class Video extends React.PureComponent { height, }); + const options = { + startTime: this.video.currentTime, + autoPlay: !this.state.paused, + defaultVolume: this.state.volume, + }; + this.video.pause(); - this.props.onOpenVideo(media, this.video.currentTime); + this.props.onOpenVideo(media, options); } handleCloseVideo = () => { -- cgit From 7ea8b07b93f7c495ff178f8befc18766499166e5 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 13:19:39 +0200 Subject: [Glitch] Fix page incorrectly scrolling when bringing up dropdown menus Port 77ec0875ea998072f4bb709bfb9b15e80669eeef to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/components/dropdown_menu.js | 2 +- .../flavours/glitch/features/compose/components/dropdown_menu.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js index b3da4fc2f..60ed859a3 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/components/dropdown_menu.js @@ -46,7 +46,7 @@ class DropdownMenu extends React.PureComponent { document.addEventListener('keydown', this.handleKeyDown, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); if (this.focusedItem && this.props.openedViaKeyboard) { - this.focusedItem.focus(); + this.focusedItem.focus({ preventScroll: true }); } this.setState({ mounted: true }); } diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js index 84c040a86..bee06e64c 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -64,9 +64,9 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, withPassive); if (this.focusedItem) { - this.focusedItem.focus(); + this.focusedItem.focus({ preventScroll: true }); } else { - this.node.firstChild.focus(); + this.node.firstChild.focus({ preventScroll: true }); } this.setState({ mounted: true }); } -- cgit