Added ability to click to enlarge profile, cover photo on profile

• Added:
- ability to click to enlarge profile, cover photo on profile

app/javascript/gabsocial/components/avatar.js

@@ -84,7 +84,11 @@ class Avatar extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, size } = this.props
+    const {
+      account,
+      expandOnClick,
+      size,
+    } = this.props
     const { hovering, sameImg } = this.state
 
     const isPro = !!account ? account.get('is_pro') : false
@@ -110,6 +114,7 @@ class Avatar extends ImmutablePureComponent {
         alt={alt}
         imageRef={this.setRef}
         className={classes.join(' ')}
+        expandOnClick={expandOnClick}
         {...options}
       />
     )
@@ -130,6 +135,7 @@ Avatar.propTypes = {
   account: ImmutablePropTypes.map,
   noHover: PropTypes.bool,
   openUserInfoPopover: PropTypes.func.isRequired,
+  expandOnClick: PropTypes.bool,
   size: PropTypes.number,
 }
 

app/javascript/gabsocial/components/image.js

@@ -1,6 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CX } from '../constants'
+import { connect } from 'react-redux'
+import {
+  CX,
+  MODAL_MEDIA,
+} from '../constants'
+import { openModal } from '../actions/modal'
 
 class Image extends React.PureComponent {
 
@@ -12,6 +17,10 @@ class Image extends React.PureComponent {
     this.setState({ error: true })
   }
 
+  handleOnClick = () => {
+    this.props.onOpenMediaModal()
+  }
+
   render() {
     const {
       alt,
@@ -21,6 +30,7 @@ class Image extends React.PureComponent {
       nullable,
       isLazy,
       imageRef,
+      expandOnClick,
       ...otherProps
     } = this.props
     const { error } = this.state
@@ -37,9 +47,7 @@ class Image extends React.PureComponent {
     }
 
     if (!src) {
-      return (
+      return <div className={classes} />
-        <div className={classes} />
-      )
     }
 
     return (
@@ -50,6 +58,7 @@ class Image extends React.PureComponent {
         ref={imageRef}
         src={src}
         onError={this.handleOnError}
+        onClick={expandOnClick ? this.handleOnClick : undefined}
         loading={isLazy ? 'lazy' : undefined}
       />
     )
@@ -57,6 +66,15 @@ class Image extends React.PureComponent {
 
 }
 
+const mapDispatchToProps = (dispatch, { alt, src }) => ({
+  onOpenMediaModal() {
+    dispatch(openModal(MODAL_MEDIA, {
+      alt,
+      src,
+    }))
+  },
+});
+
 Image.propTypes = {
   alt: PropTypes.string.isRequired,
   isLazy: PropTypes.string,
@@ -73,6 +91,8 @@ Image.propTypes = {
   nullable: PropTypes.bool,
   lazy: PropTypes.bool,
   imageRef: PropTypes.func,
+  expandOnClick: PropTypes.bool,
+  onOpenMedia: PropTypes.func.isRequired,
 }
 
 Image.defaultProps = {
@@ -80,4 +100,4 @@ Image.defaultProps = {
   fit: 'cover',
 }
 
-export default Image
+export default connect(null, mapDispatchToProps)(Image)

app/javascript/gabsocial/components/modal/media_modal.js

@@ -25,22 +25,32 @@ class MediaModal extends ImmutablePureComponent {
   }
 
   handleSwipe = (index) => {
+    if (!this.props.media) return
+
     this.setState({ index: index % this.props.media.size })
   }
 
   handleNextClick = () => {
+    if (!this.props.media) return
+
     this.setState({ index: (this.getIndex() + 1) % this.props.media.size })
   }
 
   handlePrevClick = () => {
+    if (!this.props.media) return
+
     this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size })
   }
 
   handleChangeIndex = (i) => {
+    if (!this.props.media) return
+
     this.setState({ index: i % this.props.media.size })
   }
 
   handleKeyDown = (e) => {
+    if (!this.props.media) return
+
     switch (e.key) {
       case 'ArrowLeft':
         this.handlePrevClick()
@@ -101,6 +111,8 @@ class MediaModal extends ImmutablePureComponent {
   render() {
     const {
       media,
+      src,
+      alt,
       status,
       intl,
       onClose,
@@ -109,56 +121,63 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex()
 
-    const content = media.map((image) => {
+    const content = !media ?
-      const width = image.getIn(['meta', 'original', 'width']) || null
+      <ImageLoader
-      const height = image.getIn(['meta', 'original', 'height']) || null
+        previewSrc={src}
+        src={src}
+        alt={alt}
+        key={src}
+      /> :
+      media.map((image) => {
+        const width = image.getIn(['meta', 'original', 'width']) || null
+        const height = image.getIn(['meta', 'original', 'height']) || null
 
-      if (image.get('type') === 'image') {
+        if (image.get('type') === 'image') {
-        return (
+          return (
-          <ImageLoader
+            <ImageLoader
-            previewSrc={image.get('preview_url')}
+              previewSrc={image.get('preview_url')}
-            src={image.get('url')}
+              src={image.get('url')}
-            width={width}
+              width={width}
-            height={height}
+              height={height}
-            alt={image.get('description')}
+              alt={image.get('description')}
-            key={image.get('url')}
+              key={image.get('url')}
-            onClick={this.toggleNavigation}
+              onClick={this.toggleNavigation}
-          />
+            />
-        )
+          )
-      } else if (image.get('type') === 'video') {
+        } else if (image.get('type') === 'video') {
-        const { time } = this.props
+          const { time } = this.props
 
-        return (
+          return (
-          <Video
+            <Video
-            preview={image.get('preview_url')}
+              preview={image.get('preview_url')}
-            blurhash={image.get('blurhash')}
+              blurhash={image.get('blurhash')}
-            src={image.get('url')}
+              src={image.get('url')}
-            width={image.get('width')}
+              width={image.get('width')}
-            height={image.get('height')}
+              height={image.get('height')}
-            startTime={time || 0}
+              startTime={time || 0}
-            onCloseVideo={onClose}
+              onCloseVideo={onClose}
-            detailed
+              detailed
-            alt={image.get('description')}
+              alt={image.get('description')}
-            key={image.get('url')}
+              key={image.get('url')}
-          />
+            />
-        )
+          )
-      } else if (image.get('type') === 'gifv') {
+        } else if (image.get('type') === 'gifv') {
-        return (
+          return (
-          <ExtendedVideoPlayer
+            <ExtendedVideoPlayer
-            src={image.get('url')}
+              src={image.get('url')}
-            muted
+              muted
-            controls={false}
+              controls={false}
-            width={width}
+              width={width}
-            height={height}
+              height={height}
-            key={image.get('preview_url')}
+              key={image.get('preview_url')}
-            alt={image.get('description')}
+              alt={image.get('description')}
-            onClick={this.toggleNavigation}
+              onClick={this.toggleNavigation}
-          />
+            />
-        )
+          )
-      }
+        }
 
-      return null
+        return null
-    }).toArray()
+      }).toArray()
 
     // you can't use 100vh, because the viewport height is taller
     // than the visible part of the document in some mobile
@@ -215,7 +234,7 @@ class MediaModal extends ImmutablePureComponent {
           </div>
 
           {
-            media.size > 1 &&
+            !!media && media.size > 1 &&
             <Button
               tabIndex='0'
               backgroundColor='black'
@@ -228,7 +247,7 @@ class MediaModal extends ImmutablePureComponent {
           }
 
           {
-            media.size > 1 &&
+            !!media && media.size > 1 &&
             <Button
               tabIndex='0'
               backgroundColor='black'
@@ -253,7 +272,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         {
-          media.size > 1 &&
+          !!media && media.size > 1 &&
           <div className={[_s.d, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
             <div className={[_s.d, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
               <Pagination

app/javascript/gabsocial/components/profile_header.js

@@ -179,6 +179,7 @@ class ProfileHeader extends ImmutablePureComponent {
                     alt={intl.formatMessage(messages.headerPhoto)}
                     className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.h100PC].join(' ')}
                     src={headerSrc}
+                    expandOnClick
                   />
                 </div>
               }
@@ -191,7 +192,7 @@ class ProfileHeader extends ImmutablePureComponent {
 
                 <div className={[_s.d, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
                   <div className={mobileAvatarContainerClasses}>
-                    <Avatar size={100} account={account} noHover />
+                    <Avatar size={100} account={account} noHover expandOnClick />
                   </div>
 
                   <div className={[_s.d, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
@@ -285,6 +286,7 @@ class ProfileHeader extends ImmutablePureComponent {
                       alt={intl.formatMessage(messages.headerPhoto)}
                       className={_s.h100PC}
                       src={headerSrc}
+                      expandOnClick
                     />
                   </div>
                 }
@@ -299,7 +301,7 @@ class ProfileHeader extends ImmutablePureComponent {
                     <div className={avatarContainerClasses}>
                       {
                         account &&
-                        <Avatar size={avatarSize} account={account} noHover />
+                        <Avatar size={avatarSize} account={account} noHover expandOnClick />
                       }
                       {
                         !account &&