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') 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 0f4a8a64877dfd2953e515043cefa87c1f031d14 Mon Sep 17 00:00:00 2001 From: Irie Aoi Date: Thu, 23 Apr 2020 22:49:33 +0900 Subject: [Glitch] Set max-width and max-height to gif video Port c5c8f680317a182c4794505007ef227a4294a18e to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/media.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 3cb076191..dbf0c908d 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -691,3 +691,10 @@ } } } + +.gifv { + video { + max-width: 100vw; + max-height: 80vh; + } +} -- 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') 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 9d41a410a38549f9d07e550b8cda7460b423cb6b Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 25 Apr 2020 12:27:29 +0200 Subject: [Glitch] Fix uninformative error message when uploading unsupported image files Port be637146f310d7ec3a49d01e850959514e9e4964 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/util/resize_image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/util/resize_image.js b/app/javascript/flavours/glitch/util/resize_image.js index 61f924f70..8c89b2841 100644 --- a/app/javascript/flavours/glitch/util/resize_image.js +++ b/app/javascript/flavours/glitch/util/resize_image.js @@ -138,7 +138,7 @@ const resizeImage = (img, type = 'image/png') => new Promise((resolve, reject) = .catch(reject); }); -export default inputFile => new Promise((resolve, reject) => { +export default inputFile => new Promise((resolve) => { if (!inputFile.type.match(/image.*/) || inputFile.type === 'image/gif') { resolve(inputFile); return; @@ -153,5 +153,5 @@ export default inputFile => new Promise((resolve, reject) => { resizeImage(img, inputFile.type) .then(resolve) .catch(() => resolve(inputFile)); - }).catch(reject); + }).catch(() => resolve(inputFile)); }); -- cgit