+
{title}
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index f8abf8dc..44eb0208 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -10,6 +10,7 @@ import ComposeFormContainer from '../features/compose/containers/compose_form_co
import StatusContent from './status_content'
import StatusPrepend from './status_prepend'
import StatusActionBar from './status_action_bar'
+import StatusMedia from './status_media'
import Poll from './poll'
import StatusHeader from './status_header'
import CommentList from './comment_list'
@@ -87,6 +88,7 @@ class Status extends ImmutablePureComponent {
cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number,
contextType: PropTypes.string,
+ commentsLimited: PropTypes.bool,
}
// Avoid checking props that are functions (and whose equality will always
@@ -124,7 +126,7 @@ class Status extends ImmutablePureComponent {
}
static getDerivedStateFromProps(nextProps, prevState) {
- if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.loadedComments) {
+ if (!nextProps.isHidden && (nextProps.isIntersecting || !nextProps.commentsLimited) && !prevState.loadedComments) {
return {
loadedComments: true
}
@@ -132,6 +134,7 @@ class Status extends ImmutablePureComponent {
if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
return {
+ loadedComments: false,
showMedia: defaultMediaVisibility(nextProps.status),
statusId: nextProps.status.get('id'),
}
@@ -142,6 +145,7 @@ class Status extends ImmutablePureComponent {
// Compensate height changes
componentDidUpdate(prevProps, prevState, snapshot) {
+ // timeline lazy loading comments
if (!prevState.loadedComments && this.state.loadedComments && this.props.status) {
const commentCount = this.props.status.get('replies_count')
if (commentCount > 0) {
@@ -163,7 +167,7 @@ class Status extends ImmutablePureComponent {
}
}
- handleMoveUp = id => {
+ handleMoveUp = (id) => {
const { status, ancestorsIds, descendantsIds } = this.props
if (id === status.get('id')) {
@@ -347,7 +351,7 @@ class Status extends ImmutablePureComponent {
if (!status) return null
- let media, reblogContent, rebloggedByText = null
+ let reblogContent, rebloggedByText = null
if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
rebloggedByText = intl.formatMessage(
@@ -386,62 +390,6 @@ class Status extends ImmutablePureComponent {
return null
}
- if (status.get('poll')) {
- media =
- } else if (status.get('media_attachments').size > 0) {
- if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
- const video = status.getIn(['media_attachments', 0])
-
- media = (
-
- {Component => (
-
- )}
-
- )
- } else {
- media = (
-
- {Component => (
-
- )}
-
- )
- }
- } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
- media = (
-
- )
- }
-
const containerClasses = cx({
default: 1,
pb15: isFeatured,
@@ -476,7 +424,7 @@ class Status extends ImmutablePureComponent {
data-featured={isFeatured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText)}
ref={this.handleRef}
- // onClick={this.handleClick}
+ onClick={isChild ? this.handleClick : undefined}
>
@@ -497,7 +445,17 @@ class Status extends ImmutablePureComponent {
/>
- {media}
+
{
!!status.get('quote') && !isChild &&
diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js
index 797ee090..ec4d887e 100644
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -42,7 +42,7 @@ class StatusActionBar extends ImmutablePureComponent {
updateOnProps = ['status']
handleReplyClick = () => {
- this.props.onReply(this.props.status)
+ this.props.onReply(this.props.status, null, true)
}
handleFavoriteClick = () => {
diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js
index 4aa0bdb8..03b7cc6a 100644
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -10,8 +10,8 @@ import Text from './text'
const MAX_HEIGHT = 200
const messages = defineMessages({
- showMore: { id: 'status.show_more', defaultMessage: 'Show more' },
- showLess: { id: 'status.show_less', defaultMessage: 'Show less' },
+ show: { id: 'status.show_more', defaultMessage: 'Show' },
+ hide: { id: 'status.show_less', defaultMessage: 'Hide' },
readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
})
@@ -220,7 +220,7 @@ class StatusContent extends ImmutablePureComponent {
)
}
- const toggleText = intl.formatMessage(hidden ? messages.showMore : messages.showLess)
+ const toggleText = intl.formatMessage(hidden ? messages.show : messages.hide)
const spoilerContainerClasses = cx({
default: 1,
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index 85d2d703..96a28855 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -1,4 +1,5 @@
import { Fragment } from 'react'
+import { injectIntl, defineMessages } from 'react-intl'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
@@ -14,6 +15,14 @@ import Icon from './icon'
import Button from './button'
import Avatar from './avatar'
+const messages = defineMessages({
+ public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+ public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
+ unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+ unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
+ private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for your followers only' },
+})
+
const cx = classNames.bind(_s)
const mapDispatchToProps = (dispatch) => ({
@@ -33,10 +42,12 @@ const mapDispatchToProps = (dispatch) => ({
})
export default
+@injectIntl
@connect(null, mapDispatchToProps)
class StatusHeader extends ImmutablePureComponent {
static propTypes = {
+ intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map,
onOpenStatusRevisionsPopover: PropTypes.func.isRequired,
onOpenStatusOptionsPopover: PropTypes.func.isRequired,
@@ -56,7 +67,11 @@ class StatusHeader extends ImmutablePureComponent {
}
render() {
- const { status, reduced } = this.props
+ const {
+ intl,
+ reduced,
+ status,
+ } = this.props
const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
@@ -68,7 +83,22 @@ class StatusHeader extends ImmutablePureComponent {
})
const avatarSize = reduced ? 20 : 46
- const visibilityIcon = 'globe'
+
+ const visibility = status.get('visibility')
+
+ let visibilityIcon
+ let visibilityText
+
+ if (visibility === 'private') {
+ visibilityIcon = 'lock-filled'
+ visibilityText = intl.formatMessage(messages.private_long)
+ } else if (visibility === 'unlisted') {
+ visibilityIcon = 'unlock-filled'
+ visibilityText = `${intl.formatMessage(messages.unlisted_short)} - ${intl.formatMessage(messages.unlisted_long)}`
+ } else {
+ visibilityIcon = 'globe'
+ visibilityText = `${intl.formatMessage(messages.public_short)} - ${intl.formatMessage(messages.public_long)}`
+ }
return (
@@ -126,8 +156,10 @@ class StatusHeader extends ImmutablePureComponent {
-
-
+
+
+
+
{
!!status.get('group') &&
diff --git a/app/javascript/gabsocial/components/status_media.js b/app/javascript/gabsocial/components/status_media.js
new file mode 100644
index 00000000..1ed72185
--- /dev/null
+++ b/app/javascript/gabsocial/components/status_media.js
@@ -0,0 +1,120 @@
+import { injectIntl } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import StatusCard from './status_card'
+import { MediaGallery, Video } from '../features/ui/util/async_components'
+import Poll from './poll'
+
+// We use the component (and not the container) since we do not want
+// to use the progress bar to show download progress
+import Bundle from '../features/ui/util/bundle'
+
+export default class StatusMedia extends ImmutablePureComponent {
+
+ static propTypes = {
+ status: ImmutablePropTypes.map,
+ isChild: PropTypes.bool,
+ isComment: PropTypes.bool,
+ onOpenMedia: PropTypes.func,
+ onOpenVideo: PropTypes.func,
+ width: PropTypes.number,
+ onToggleVisibility: PropTypes.func,
+ visible: PropTypes.bool,
+ defaultWidth: PropTypes.number,
+ cacheWidth: PropTypes.number,
+ }
+
+ // Avoid checking props that are functions (and whose equality will always
+ // evaluate to false. See react-immutable-pure-component for usage.
+ updateOnProps = [
+ 'status',
+ 'isChild',
+ 'isComment',
+ 'cacheWidth',
+ 'defaultWidth',
+ 'visible',
+ 'width',
+ ]
+
+ renderLoadingMedia() {
+ return
+ }
+
+ render() {
+ const {
+ status,
+ isChild,
+ isComment,
+ onOpenMedia,
+ onOpenVideo,
+ width,
+ onToggleVisibility,
+ visible,
+ defaultWidth,
+ cacheWidth,
+ } = this.props
+
+ if (!status) return null
+
+ let media = null
+
+ if (status.get('poll')) {
+ media =
+ } else if (status.get('media_attachments').size > 0) {
+ if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+ const video = status.getIn(['media_attachments', 0])
+
+ media = (
+
+ {Component => (
+
+ )}
+
+ )
+ } else {
+ media = (
+
+ {Component => (
+
+ )}
+
+ )
+ }
+ } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
+ media = (
+
+ )
+ }
+
+ return media
+ }
+
+}
diff --git a/app/javascript/gabsocial/components/zoomable_image.js b/app/javascript/gabsocial/components/zoomable_image.js
index f6fb3ac3..3ac31760 100644
--- a/app/javascript/gabsocial/components/zoomable_image.js
+++ b/app/javascript/gabsocial/components/zoomable_image.js
@@ -1,30 +1,18 @@
-const MIN_SCALE = 1;
-const MAX_SCALE = 4;
+const MIN_SCALE = 1
+const MAX_SCALE = 4
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
y: (p1.clientY + p2.clientY) / 2,
-});
+})
-const getDistance = (p1, p2) =>
- Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
+const getDistance = (p1, p2) => {
+ return Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2))
+}
-const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
-
-// .zoomable-image {
-// position: relative;
-
-// @include flex(center, center);
-// @include size(100%);
-
-// img {
-// object-fit: contain;
-
-// @include size(auto);
-// @include max-size($media-modal-media-max-width, $media-modal-media-max-height);
-// }
-// }
-// : todo :
+const clamp = (min, max, value) => {
+ return Math.min(max, Math.max(min, value))
+}
export default class ZoomableImage extends PureComponent {
@@ -40,69 +28,69 @@ export default class ZoomableImage extends PureComponent {
alt: '',
width: null,
height: null,
- };
+ }
state = {
scale: MIN_SCALE,
}
- removers = [];
- container = null;
- image = null;
- lastTouchEndTime = 0;
- lastDistance = 0;
+ removers = []
+ container = null
+ image = null
+ lastTouchEndTime = 0
+ lastDistance = 0
componentDidMount () {
- let handler = this.handleTouchStart;
- this.container.addEventListener('touchstart', handler);
- this.removers.push(() => this.container.removeEventListener('touchstart', handler));
- handler = this.handleTouchMove;
+ let handler = this.handleTouchStart
+ this.container.addEventListener('touchstart', handler)
+ this.removers.push(() => this.container.removeEventListener('touchstart', handler))
+ handler = this.handleTouchMove
// on Chrome 56+, touch event listeners will default to passive
// https://www.chromestatus.com/features/5093566007214080
- this.container.addEventListener('touchmove', handler, { passive: false });
- this.removers.push(() => this.container.removeEventListener('touchend', handler));
+ this.container.addEventListener('touchmove', handler, { passive: false })
+ this.removers.push(() => this.container.removeEventListener('touchend', handler))
}
componentWillUnmount () {
- this.removeEventListeners();
+ this.removeEventListeners()
}
removeEventListeners () {
- this.removers.forEach(listeners => listeners());
- this.removers = [];
+ this.removers.forEach(listeners => listeners())
+ this.removers = []
}
handleTouchStart = e => {
- if (e.touches.length !== 2) return;
+ if (e.touches.length !== 2) return
- this.lastDistance = getDistance(...e.touches);
+ this.lastDistance = getDistance(...e.touches)
}
handleTouchMove = e => {
- const { scrollTop, scrollHeight, clientHeight } = this.container;
+ const { scrollTop, scrollHeight, clientHeight } = this.container
if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
// prevent propagating event to MediaModal
- e.stopPropagation();
- return;
+ e.stopPropagation()
+ return
}
- if (e.touches.length !== 2) return;
+ if (e.touches.length !== 2) return
- e.preventDefault();
- e.stopPropagation();
+ e.preventDefault()
+ e.stopPropagation()
- const distance = getDistance(...e.touches);
- const midpoint = getMidpoint(...e.touches);
- const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
+ const distance = getDistance(...e.touches)
+ const midpoint = getMidpoint(...e.touches)
+ const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance)
- this.zoom(scale, midpoint);
+ this.zoom(scale, midpoint)
- this.lastMidpoint = midpoint;
- this.lastDistance = distance;
+ this.lastMidpoint = midpoint
+ this.lastDistance = distance
}
zoom(nextScale, midpoint) {
- const { scale } = this.state;
- const { scrollLeft, scrollTop } = this.container;
+ const { scale } = this.state
+ const { scrollLeft, scrollTop } = this.container
// math memo:
// x = (scrollLeft + midpoint.x) / scrollWidth
@@ -110,38 +98,44 @@ export default class ZoomableImage extends PureComponent {
// scrollWidth = clientWidth * scale
// scrollWidth' = clientWidth * nextScale
// Solve x = x' for nextScrollLeft
- const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
- const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
+ const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x
+ const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y
this.setState({ scale: nextScale }, () => {
- this.container.scrollLeft = nextScrollLeft;
- this.container.scrollTop = nextScrollTop;
- });
+ this.container.scrollLeft = nextScrollLeft
+ this.container.scrollTop = nextScrollTop
+ })
}
handleClick = e => {
// don't propagate event to MediaModal
- e.stopPropagation();
- const handler = this.props.onClick;
- if (handler) handler();
+ e.stopPropagation()
+ const handler = this.props.onClick
+ if (handler) handler()
}
setContainerRef = c => {
- this.container = c;
+ this.container = c
}
setImageRef = c => {
- this.image = c;
+ this.image = c
}
render () {
- const { alt, src } = this.props;
- const { scale } = this.state;
- const overflow = scale === 1 ? 'hidden' : 'scroll';
+ const { alt, src } = this.props
+ const { scale } = this.state
+
+ const overflow = scale === 1 ? 'hidden' : 'scroll'
return (
-
+
![{alt}]()
- );
+ )
}
}
diff --git a/app/javascript/gabsocial/containers/status_container.js b/app/javascript/gabsocial/containers/status_container.js
index 1edce1dd..71abac2c 100644
--- a/app/javascript/gabsocial/containers/status_container.js
+++ b/app/javascript/gabsocial/containers/status_container.js
@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import {
replyCompose,
@@ -34,16 +34,8 @@ import {
import { makeGetStatus } from '../selectors';
import Status from '../components/status';
-const messages = defineMessages({
- deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
- deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
- replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
- replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-});
-
const makeMapStateToProps = () => {
- const getStatus = makeGetStatus();
+ const getStatus = makeGetStatus()
const mapStateToProps = (state, props) => {
const statusId = props.id || props.params.statusId
@@ -62,9 +54,12 @@ const makeMapStateToProps = () => {
let indent = -1
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')]
-
+
+ const r = state.getIn(['contexts', 'replies', ids[0]])
+ console.log("r:", r)
+
while (ids.length > 0) {
- let id = ids.shift();
+ let id = ids.shift()
const replies = state.getIn(['contexts', 'replies', id])
if (status.get('id') !== id) {
@@ -94,22 +89,22 @@ const makeMapStateToProps = () => {
return mapStateToProps
};
-const mapDispatchToProps = (dispatch, { intl }) => ({
- onReply (status, router) {
+const mapDispatchToProps = (dispatch) => ({
+ onReply (status, router, showModal) {
if (!me) return dispatch(openModal('UNAUTHORIZED'))
dispatch((_, getState) => {
const state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', {
- message: intl.formatMessage(messages.replyMessage),
- confirm: intl.formatMessage(messages.replyConfirm),
+ message:
,
+ confirm:
,
onConfirm: () => dispatch(replyCompose(status, router)),
- }));
+ }))
} else {
- dispatch(replyCompose(status, router));
+ dispatch(replyCompose(status, router, showModal));
}
- });
+ })
},
onRepost (targetRef, status, e) {
@@ -177,8 +172,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(deleteStatus(status.get('id'), history));
} else {
dispatch(openModal('CONFIRM', {
- message: intl.formatMessage(messages.deleteMessage),
- confirm: intl.formatMessage(messages.deleteConfirm),
+ message:
,
+ confirm:
,
onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
}));
}
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index b9e0d787..e84f6300 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -24,6 +24,8 @@ import StatusContainer from '../../../containers/status_container'
import StatusVisibilityButton from './status_visibility_button'
import UploadButton from './media_upload_button'
import UploadForm from './upload_form'
+import GifForm from './gif_form'
+import Input from '../../../components/input'
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
@@ -78,6 +80,7 @@ class ComposeForm extends ImmutablePureComponent {
replyToId: PropTypes.string,
reduxReplyToId: PropTypes.string,
hasPoll: PropTypes.bool,
+ selectedGifSrc: PropTypes.string,
};
static defaultProps = {
@@ -85,7 +88,7 @@ class ComposeForm extends ImmutablePureComponent {
};
handleChange = (e, markdown) => {
- this.props.onChange(e.target.value, markdown);
+ this.props.onChange(e.target.value, markdown, this.props.replyToId)
}
handleComposeFocus = () => {
@@ -156,8 +159,8 @@ class ComposeForm extends ImmutablePureComponent {
this.props.onSuggestionSelected(tokenStart, token, value, ['spoiler_text']);
}
- handleChangeSpoilerText = (e) => {
- this.props.onChangeSpoilerText(e.target.value);
+ handleChangeSpoilerText = (value) => {
+ this.props.onChangeSpoilerText(value)
}
componentDidMount() {
@@ -169,7 +172,7 @@ class ComposeForm extends ImmutablePureComponent {
}
componentDidUpdate(prevProps) {
- if (!this.autosuggestTextarea) return;
+ if (!this.autosuggestTextarea) return
// This statement does several things:
// - If we're beginning a reply, and,
@@ -196,17 +199,13 @@ class ComposeForm extends ImmutablePureComponent {
}
setAutosuggestTextarea = (c) => {
- this.autosuggestTextarea = c;
+ this.autosuggestTextarea = c
}
setForm = (c) => {
this.form = c
}
- setSpoilerText = (c) => {
- this.spoilerText = c
- }
-
handleEmojiPick = (data) => {
const { text } = this.props
const position = this.autosuggestTextarea.textbox.selectionStart
@@ -236,12 +235,13 @@ class ComposeForm extends ImmutablePureComponent {
isMatch,
isChangingUpload,
isSubmitting,
+ selectedGifSrc,
} = this.props
const disabled = isSubmitting
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
-
+
const parentContainerClasses = CX({
default: 1,
width100PC: 1,
@@ -294,7 +294,7 @@ class ComposeForm extends ImmutablePureComponent {
>
{
- !!reduxReplyToId && !shouldCondense &&
+ !!reduxReplyToId && !shouldCondense && isModalOpen &&
@@ -349,12 +343,17 @@ class ComposeForm extends ImmutablePureComponent {
}
- { /* : todo : for gif
- (isUploading || hasGif) &&
+ {
+ /*
+ !!selectedGifSrc && !anyMedia &&
-
+
- */
+ */
}
{
@@ -365,7 +364,7 @@ class ComposeForm extends ImmutablePureComponent {
}
{
- !!quoteOfId &&
+ !!quoteOfId && isModalOpen &&
- {
- !shouldCondense &&
-
- }
+
+
+
+ { /*
*/ }
+
{
!edit && !shouldCondense &&
}
- {
- !shouldCondense &&
-
- }
- {
- !shouldCondense &&
-
- }
- {
- !shouldCondense &&
-
- }
-
-
+
+ { !shouldCondense &&
}
+ { !shouldCondense &&
}
+ { !shouldCondense &&
}
+ { /* !shouldCondense &&
*/ }
{
shouldCondense &&
diff --git a/app/javascript/gabsocial/features/compose/components/gif_form.js b/app/javascript/gabsocial/features/compose/components/gif_form.js
index d12fec9c..b1373eb3 100644
--- a/app/javascript/gabsocial/features/compose/components/gif_form.js
+++ b/app/javascript/gabsocial/features/compose/components/gif_form.js
@@ -1,36 +1,39 @@
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ProgressBar from '../../../../components/progress_bar'
-import Upload from '../media_upload_item'
-import SensitiveMediaButton from '../sensitive_media_button'
+import { clearSelectedGif } from '../../../actions/tenor'
+import Image from '../../../components/image'
-const mapStateToProps = (state) => ({
- mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
- isUploading: state.getIn(['compose', 'is_uploading']),
- uploadProgress: state.getIn(['compose', 'progress']),
-});
+const mapDispatchToProps = (dispatch) => ({
+ onClearSelectedGif() {
+ dispatch(clearSelectedGif())
+ },
+})
export default
-@connect(mapStateToProps)
-class GifForm extends ImmutablePureComponent {
+@connect(null, mapDispatchToProps)
+class GifForm extends PureComponent {
static propTypes = {
- mediaIds: ImmutablePropTypes.list.isRequired,
- isUploading: PropTypes.bool,
- uploadProgress: PropTypes.number,
- };
+ onClearSelectedGif: PropTypes.func.isRequired,
+ replyToId: PropTypes.string,
+ small: PropTypes.bool,
+ selectedGifSrc: PropTypes.string.isRequired,
+ }
render () {
const {
- mediaIds,
- isUploading,
- uploadProgress,
+ selectedGifSrc,
+ small,
} = this.props
+ if (!selectedGifSrc) return null
+
return (
)
diff --git a/app/javascript/gabsocial/features/compose/components/media_upload_button.js b/app/javascript/gabsocial/features/compose/components/media_upload_button.js
index 274ee7dd..f8feebae 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_button.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_button.js
@@ -12,7 +12,7 @@ const messages = defineMessages({
const makeMapStateToProps = () => {
const mapStateToProps = (state) => ({
acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
- disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+ disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio', 'gifv'].includes(m.get('type')))),
unavailable: state.getIn(['compose', 'poll']) !== null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
})
diff --git a/app/javascript/gabsocial/features/compose/components/media_upload_item.js b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
index cad11549..195bd496 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -7,6 +7,7 @@ import { submitCompose } from '../../../actions/compose';
import Button from '../../../components/button'
import Image from '../../../components/image'
import Input from '../../../components/input'
+import Text from '../../../components/text'
const cx = classNames.bind(_s)
@@ -15,27 +16,20 @@ const messages = defineMessages({
delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
})
-const mapStateToProps = (state, { id, otherProps }) => {
- console.log("otherProps:", otherProps)
- return {
- media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
- }
-}
+const mapStateToProps = (state, { id }) => ({
+ media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
+})
const mapDispatchToProps = (dispatch) => ({
-
- onUndo: id => {
- dispatch(undoUploadCompose(id));
+ onUndo: (id) => {
+ dispatch(undoUploadCompose(id))
},
-
onDescriptionChange: (id, description) => {
- dispatch(changeUploadCompose(id, { description }));
+ dispatch(changeUploadCompose(id, { description }))
},
-
onSubmit () {
- dispatch(submitCompose());
+ dispatch(submitCompose())
},
-
});
export default
@@ -72,13 +66,13 @@ class Upload extends ImmutablePureComponent {
this.props.onSubmit()
}
- handleUndoClick = e => {
+ handleUndoClick = (e) => {
e.stopPropagation()
this.props.onUndo(this.props.media.get('id'))
}
- handleInputChange = e => {
- this.setState({ dirtyDescription: e.target.value })
+ handleInputChange = (value) => {
+ this.setState({ dirtyDescription: value })
}
handleMouseEnter = () => {
@@ -128,8 +122,6 @@ class Upload extends ImmutablePureComponent {
displayNone: !active,
})
- console.log("media:", media)
-
return (
+ {
+ media.get('type') === 'gifv' &&
+
+ GIF
+
+ }