From 4522b0c3a8380065331c78cd2bacc9017e8c1ad7 Mon Sep 17 00:00:00 2001 From: tykayn Date: Sat, 9 Jan 2021 19:56:49 +0100 Subject: [PATCH] gallery counting --- app/javascript/mastodon/components/gallery.js | 3 ++ .../mastodon/components/media_gallery.js | 37 ++++++++++++++++--- app/javascript/mastodon/components/status.js | 1 + .../features/gallery_timeline/index.js | 14 +++---- .../ui/containers/status_list_container.js | 2 + app/javascript/mastodon/features/ui/index.js | 2 +- app/javascript/styles/bliss.scss | 1 + app/javascript/styles/bliss/_gallery.scss | 4 ++ 8 files changed, 49 insertions(+), 15 deletions(-) create mode 100644 app/javascript/styles/bliss/_gallery.scss diff --git a/app/javascript/mastodon/components/gallery.js b/app/javascript/mastodon/components/gallery.js index ccaa7693d..3ee67e926 100644 --- a/app/javascript/mastodon/components/gallery.js +++ b/app/javascript/mastodon/components/gallery.js @@ -77,6 +77,9 @@ export default class Gallery extends ImmutablePureComponent { }; render() { + + console.log('gallery props', this.props); + const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other } = this.props; const { isLoading, isPartial } = other; diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 0a8f42585..2acf1b516 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -25,12 +25,14 @@ class Item extends React.PureComponent { displayWidth: PropTypes.number, visible: PropTypes.bool.isRequired, autoplay: PropTypes.bool, + allMaxWidth: PropTypes.bool, }; static defaultProps = { standalone: false, index: 0, size: 1, + allMaxWidth: false, }; state = { @@ -79,7 +81,7 @@ class Item extends React.PureComponent { } render () { - const { attachment, index, size, standalone, displayWidth, visible } = this.props; + const { attachment, index, size, standalone, displayWidth, visible, allMaxWidth } = this.props; let width = 50; let height = 100; @@ -88,6 +90,8 @@ class Item extends React.PureComponent { let bottom = 'auto'; let right = 'auto'; + if(!allMaxWidth){ + if (size === 1) { width = 100; } @@ -130,6 +134,11 @@ class Item extends React.PureComponent { } } + } + else{ + width = 100; + } + let thumbnail = ''; if (attachment.get('type') === 'unknown') { @@ -144,7 +153,8 @@ class Item extends React.PureComponent { ); - } else if (attachment.get('type') === 'image') { + } + else if (attachment.get('type') === 'image') { const previewUrl = attachment.get('preview_url'); const previewWidth = attachment.getIn(['meta', 'small', 'width']); @@ -224,6 +234,7 @@ export default @injectIntl class MediaGallery extends React.PureComponent { static propTypes = { + bigGalleryStyle: PropTypes.bool, sensitive: PropTypes.bool, standalone: PropTypes.bool, media: ImmutablePropTypes.list.isRequired, @@ -240,6 +251,7 @@ class MediaGallery extends React.PureComponent { static defaultProps = { standalone: false, + bigGalleryStyle:false, }; state = { @@ -305,12 +317,15 @@ class MediaGallery extends React.PureComponent { } isFullSizeEligible() { - const { media } = this.props; + const { media, bigGalleryStyle } = this.props; + if(bigGalleryStyle){ + return true; + } return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); } render () { - const { media, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props; + const { media, intl, sensitive, height, defaultWidth, standalone, autoplay, bigGalleryStyle } = this.props; const { visible } = this.state; const width = this.state.width || defaultWidth; @@ -335,7 +350,12 @@ class MediaGallery extends React.PureComponent { if (standalone && this.isFullSizeEligible()) { children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) =>{ + console.log('width', width); + return ( + + ); + }); } if (uncached) { @@ -354,13 +374,18 @@ class MediaGallery extends React.PureComponent { ); } + console.log('style', style) + return (
{spoilerButton}
- +
+ {size} médias +
{children} +
); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 295e83f58..7803928ad 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -287,6 +287,7 @@ class Status extends ImmutablePureComponent { let { status, account, ...other } = this.props; + if (status === null) { return null; } diff --git a/app/javascript/mastodon/features/gallery_timeline/index.js b/app/javascript/mastodon/features/gallery_timeline/index.js index c18cf4f4e..7a200af28 100644 --- a/app/javascript/mastodon/features/gallery_timeline/index.js +++ b/app/javascript/mastodon/features/gallery_timeline/index.js @@ -15,11 +15,10 @@ const messages = defineMessages({ }); const mapStateToProps = (state, { columnId }) => { - const uuid = columnId; - const columns = state.getIn(['settings', 'columns']); - const index = columns.findIndex(c => c.get('uuid') === uuid); - const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'community', 'other', 'onlyMedia']); - const timelineState = state.getIn(['timelines', `community${onlyMedia ? ':media' : ''}`]); + console.log('columnId', columnId); + + const onlyMedia = true; + const timelineState = state.getIn(['timelines', `gallery${onlyMedia ? ':media' : ''}`]); return { hasUnread: !!timelineState && timelineState.get('unread') > 0, @@ -36,7 +35,7 @@ class GalleryTimeline extends React.PureComponent { }; static defaultProps = { - onlyMedia: false, + onlyMedia: true, // we are in a gallery, we only want medias }; static propTypes = { @@ -120,9 +119,8 @@ class GalleryTimeline extends React.PureComponent { pinned={pinned} multiColumn={multiColumn} > - + {/**/} - createSelector([ (state, { type }) => state.getIn(['timelines', type, pending ? 'pendingItems' : 'items'], ImmutableList()), (state) => state.get('statuses'), ], (columnSettings, statusIds, statuses) => { + return statusIds.filter(id => { if (id === null) return true; @@ -35,6 +36,7 @@ const makeMapStateToProps = () => { const getStatusIds = makeGetStatusIds(); const getPendingStatusIds = makeGetStatusIds(true); + const mapStateToProps = (state, { timelineId }) => ({ statusIds: getStatusIds(state, { type: timelineId }), isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true), diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 9895d5a00..8ca8e116b 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -60,7 +60,6 @@ import { previewState as previewVideoState } from './components/video_modal'; // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. import '../../components/status'; -import GalleryTk from './components/bliss/gallery-tk'; const messages = defineMessages({ beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' }, @@ -149,6 +148,7 @@ class SwitchingColumnsArea extends React.PureComponent { render () { const { children, mobile } = this.props; + console.log('children', children) const redirect = mobile ? : ; return ( diff --git a/app/javascript/styles/bliss.scss b/app/javascript/styles/bliss.scss index c5dc571f6..3e3091e0d 100644 --- a/app/javascript/styles/bliss.scss +++ b/app/javascript/styles/bliss.scss @@ -17,6 +17,7 @@ @import 'bliss/forms'; @import 'bliss/accounts'; @import 'bliss/statuses'; +@import 'bliss/gallery'; @import 'bliss/boost'; @import 'bliss/components'; @import 'bliss/polls'; diff --git a/app/javascript/styles/bliss/_gallery.scss b/app/javascript/styles/bliss/_gallery.scss new file mode 100644 index 000000000..157a8edbb --- /dev/null +++ b/app/javascript/styles/bliss/_gallery.scss @@ -0,0 +1,4 @@ +.count_medias{ + text-align: right; + +}