From 2c5faa55949153ab34790af04042f0ee621ed053 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 9 Mar 2022 21:15:24 +0100 Subject: [PATCH] [Glitch] Add polls and media attachments to edit comparison modal in web UI Port 9f2791eb64d5d19418561270f79071c185876d20 to glitch-soc Signed-off-by: Claire --- .../glitch/components/media_attachments.js | 119 ++++++++++++++++++ .../report/components/status_check_box.js | 49 +------- .../ui/components/compare_history_modal.js | 20 +++ .../glitch/styles/components/modal.scss | 6 + .../glitch/styles/components/status.scss | 2 +- 5 files changed, 148 insertions(+), 48 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/media_attachments.js diff --git a/app/javascript/flavours/glitch/components/media_attachments.js b/app/javascript/flavours/glitch/components/media_attachments.js new file mode 100644 index 000000000..c8d133f09 --- /dev/null +++ b/app/javascript/flavours/glitch/components/media_attachments.js @@ -0,0 +1,119 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { MediaGallery, Video, Audio } from 'flavours/glitch/util/async-components'; +import Bundle from 'flavours/glitch/features/ui/components/bundle'; +import noop from 'lodash/noop'; + +export default class MediaAttachments extends ImmutablePureComponent { + + static propTypes = { + status: ImmutablePropTypes.map.isRequired, + height: PropTypes.number, + width: PropTypes.number, + revealed: PropTypes.bool, + }; + + static defaultProps = { + height: 110, + width: 239, + }; + + updateOnProps = [ + 'status', + ]; + + renderLoadingMediaGallery = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + renderLoadingVideoPlayer = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + renderLoadingAudioPlayer = () => { + const { height, width } = this.props; + + return ( +
+ ); + } + + render () { + const { status, width, height, revealed } = this.props; + const mediaAttachments = status.get('media_attachments'); + + if (mediaAttachments.size === 0) { + return null; + } + + if (mediaAttachments.getIn([0, 'type']) === 'audio') { + const audio = mediaAttachments.get(0); + + return ( + + {Component => ( + + )} + + ); + } else if (mediaAttachments.getIn([0, 'type']) === 'video') { + const video = mediaAttachments.get(0); + + return ( + + {Component => ( + + )} + + ); + } else { + return ( + + {Component => ( + + )} + + ); + } + } + +} diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js index adb5e77a7..76bf0eb85 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js @@ -1,14 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import noop from 'lodash/noop'; import StatusContent from 'flavours/glitch/components/status_content'; -import { MediaGallery, Video } from 'flavours/glitch/util/async-components'; -import Bundle from 'flavours/glitch/features/ui/components/bundle'; import Avatar from 'flavours/glitch/components/avatar'; import DisplayName from 'flavours/glitch/components/display_name'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import Option from './option'; +import MediaAttachments from 'flavours/glitch/components/media_attachments'; export default class StatusCheckBox extends React.PureComponent { @@ -27,53 +25,10 @@ export default class StatusCheckBox extends React.PureComponent { render () { const { status, checked } = this.props; - let media = null; - if (status.get('reblog')) { return null; } - if (status.get('media_attachments').size > 0) { - if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { - - } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { - const video = status.getIn(['media_attachments', 0]); - - media = ( - - {Component => ( - - )} - - ); - } else { - media = ( - - {Component => ( - - )} - - ); - } - } - const labelComponent = (
@@ -84,7 +39,7 @@ export default class StatusCheckBox extends React.PureComponent {
ยท
- + } />
); diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js index 198443221..8fd528da0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js @@ -9,6 +9,7 @@ import escapeTextContentForBrowser from 'escape-html'; import InlineAccount from 'flavours/glitch/components/inline_account'; import IconButton from 'flavours/glitch/components/icon_button'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; +import MediaAttachments from 'flavours/glitch/components/media_attachments'; const mapStateToProps = (state, { statusId }) => ({ versions: state.getIn(['history', statusId, 'items']), @@ -70,6 +71,25 @@ class CompareHistoryModal extends React.PureComponent { )}
+ + {!!currentVersion.get('poll') && ( +
+
    + {currentVersion.getIn(['poll', 'options']).map(option => ( +
  • + + + +
  • + ))} +
+
+ )} + +
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 4143901e3..7e6918356 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1074,6 +1074,12 @@ margin: 20px 0; } } + + .media-gallery, + .audio-player, + .video-player { + margin-top: 15px; + } } .embed-modal { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a49299af1..ad6c24ea6 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -538,7 +538,7 @@ .media-gallery, .audio-player, .video-player { - margin-top: 8px; + margin-top: 15px; max-width: 250px; }