gallery counting

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;
 

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 {
           </a>
         </div>
       );
-    } 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 = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
     } else {
-      children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />);
+      children = media.take(4).map((attachment, i) =>{
+        console.log('width', width);
+        return (
+          <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />
+        );
+    });
     }
 
     if (uncached) {
@@ -354,13 +374,18 @@ class MediaGallery extends React.PureComponent {
       );
     }
 
+    console.log('style', style)
+
     return (
       <div className='media-gallery' style={style} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
           {spoilerButton}
         </div>
-
+        <div className='count_medias text-right'>
+          {size} médias <i className='fa fa-picture'></i>
+        </div>
         {children}
+
       </div>
     );
   }

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;
     }

app/javascript/mastodon/features/gallery_timeline/index.js

@@ -15,11 +15,10 @@ const messages = defineMessages({
 });
 
 const mapStateToProps = (state, { columnId }) => {
-  const uuid = columnId;
+  console.log('columnId', columnId);
-  const columns = state.getIn(['settings', 'columns']);
+
-  const index = columns.findIndex(c => c.get('uuid') === uuid);
+  const onlyMedia = true;
-  const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'community', 'other', 'onlyMedia']);
+  const timelineState = state.getIn(['timelines', `gallery${onlyMedia ? ':media' : ''}`]);
-  const timelineState = state.getIn(['timelines', `community${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}
         >
-          <ColumnSettingsContainer columnId={columnId} />
+          {/*<ColumnSettingsContainer columnId={columnId} />*/}
         </ColumnHeader>
-
         <StatusListContainer
           trackScroll={!pinned}
           scrollKey={`community_timeline-${columnId}`}

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -11,6 +11,7 @@ const makeGetStatusIds = (pending = false) => 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),

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 <Status /> 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 ? <Redirect from='/' to='/timelines/home' exact /> : <Redirect from='/' to='/getting-started' exact />;
 
     return (

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';

app/javascript/styles/bliss/_gallery.scss

@@ -0,0 +1,4 @@
+.count_medias{
+  text-align: right;
+
+}