Fix fullsize post image (#2797)

* 0.19.6-beta.8

* 0.19.6-beta.9

* 0.19.6-beta.14

* Using full-size image column, not thumbnail.

- Fixes #2796

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lemmy-ui",
   "description": "An isomorphic UI for lemmy",
-  "version": "0.19.6-beta.7",
+  "version": "0.19.6-beta.14",
   "author": "Dessalines <tyhou13@gmx.com>",
   "license": "AGPL-3.0",
   "scripts": {

src/shared/components/post/post-listing.tsx

@@ -273,18 +273,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   get img() {
-    const { post } = this.postView;
-
     if (this.isoData.showAdultConsentModal) {
       return <></>;
     }
 
-    if (this.imageSrc) {
+    // Use the full-size image for expands
+    const post = this.postView.post;
+    const url = post.url;
+    const thumbnail = post.thumbnail_url;
+    const imageSrc = url && isImage(url) ? url : thumbnail;
+
+    if (imageSrc) {
       return (
         <>
           <div className="offset-sm-3 my-2 d-none d-sm-block">
-            <a href={this.imageSrc} className="d-inline-block">
+            <a href={imageSrc} className="d-inline-block">
-              <PictrsImage src={this.imageSrc} alt={post.alt_text} />
+              <PictrsImage src={imageSrc} alt={post.alt_text} />
             </a>
           </div>
           <div className="my-2 d-block d-sm-none">
@@ -293,7 +297,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               className="p-0 border-0 bg-transparent d-inline-block"
               onClick={linkEvent(this, this.handleImageExpandClick)}
             >
-              <PictrsImage src={this.imageSrc} alt={post.alt_text} />
+              <PictrsImage src={imageSrc} alt={post.alt_text} />
             </button>
           </div>
         </>
@@ -315,26 +319,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  get imageSrc(): string | undefined {
-    const post = this.postView.post;
-    const url = post.url;
-    const thumbnail = post.thumbnail_url;
-
-    if (thumbnail) {
-      return thumbnail;
-    } else if (url && isImage(url)) {
-      return url;
-    } else {
-      return undefined;
-    }
-  }
-
   thumbnail() {
     const post = this.postView.post;
     const url = post.url;
     const thumbnail = post.thumbnail_url;
 
-    if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
+    if (!this.props.hideImage && url && isImage(url) && thumbnail) {
       return (
         <button
           type="button"
@@ -343,20 +333,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
         >
-          {this.imgThumb(this.imageSrc)}
+          {this.imgThumb(thumbnail)}
           <Icon
             icon="image"
             classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
           />
         </button>
       );
-    } else if (
+    } else if (!this.props.hideImage && url && thumbnail && !isVideo(url)) {
-      !this.props.hideImage &&
-      url &&
-      thumbnail &&
-      this.imageSrc &&
-      !isVideo(url)
-    ) {
       return (
         <a
           className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
@@ -365,7 +349,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           title={url}
           target={this.linkTarget}
         >
-          {this.imgThumb(this.imageSrc)}
+          {this.imgThumb(thumbnail)}
           <Icon
             icon="external-link"
             classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"