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

• Added: - ability to click to enlarge profile, cover photo on profile
2020-10-22 16:57:22 -05:00 · 2020-10-22 16:57:22 -05:00 · de5a1f93b8
commit de5a1f93b8
parent 50169fcd7d
4 changed files with 105 additions and 58 deletions
--- a/app/javascript/gabsocial/components/avatar.js
+++ b/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,
 }

--- a/app/javascript/gabsocial/components/image.js
+++ b/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 (
-        <div className={classes} />
-      )
+      return <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)
--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/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 width = image.getIn(['meta', 'original', 'width']) || null
-      const height = image.getIn(['meta', 'original', 'height']) || null
+    const content = !media ?
+      <ImageLoader
+        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') {
-        return (
-          <ImageLoader
-            previewSrc={image.get('preview_url')}
-            src={image.get('url')}
-            width={width}
-            height={height}
-            alt={image.get('description')}
-            key={image.get('url')}
-            onClick={this.toggleNavigation}
-          />
-        )
-      } else if (image.get('type') === 'video') {
-        const { time } = this.props
+        if (image.get('type') === 'image') {
+          return (
+            <ImageLoader
+              previewSrc={image.get('preview_url')}
+              src={image.get('url')}
+              width={width}
+              height={height}
+              alt={image.get('description')}
+              key={image.get('url')}
+              onClick={this.toggleNavigation}
+            />
+          )
+        } else if (image.get('type') === 'video') {
+          const { time } = this.props

-        return (
-          <Video
-            preview={image.get('preview_url')}
-            blurhash={image.get('blurhash')}
-            src={image.get('url')}
-            width={image.get('width')}
-            height={image.get('height')}
-            startTime={time || 0}
-            onCloseVideo={onClose}
-            detailed
-            alt={image.get('description')}
-            key={image.get('url')}
-          />
-        )
-      } else if (image.get('type') === 'gifv') {
-        return (
-          <ExtendedVideoPlayer
-            src={image.get('url')}
-            muted
-            controls={false}
-            width={width}
-            height={height}
-            key={image.get('preview_url')}
-            alt={image.get('description')}
-            onClick={this.toggleNavigation}
-          />
-        )
-      }
+          return (
+            <Video
+              preview={image.get('preview_url')}
+              blurhash={image.get('blurhash')}
+              src={image.get('url')}
+              width={image.get('width')}
+              height={image.get('height')}
+              startTime={time || 0}
+              onCloseVideo={onClose}
+              detailed
+              alt={image.get('description')}
+              key={image.get('url')}
+            />
+          )
+        } else if (image.get('type') === 'gifv') {
+          return (
+            <ExtendedVideoPlayer
+              src={image.get('url')}
+              muted
+              controls={false}
+              width={width}
+              height={height}
+              key={image.get('preview_url')}
+              alt={image.get('description')}
+              onClick={this.toggleNavigation}
+            />
+          )
+        }

-      return null
-    }).toArray()
+        return null
+      }).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
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/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 &&