Merge pull request #2250 from pixelfed/staging

Update PostComponent, add recent posts

CHANGELOG.md

@@ -49,6 +49,7 @@
 - Updated AP Inbox, remove trailing comma ([5c443548](https://github.com/pixelfed/pixelfed/commit/5c443548))
 - Updated AP Helpers, update bio + name ([4bee8397](https://github.com/pixelfed/pixelfed/commit/4bee8397))
 - Updated Profile component, add bookmark loader ([c8d5edc9](https://github.com/pixelfed/pixelfed/commit/c8d5edc9))
+- Updated PostComponent, add recent posts ([b289f2f6](https://github.com/pixelfed/pixelfed/commit/b289f2f6))
 
 
 ## [v0.10.9 (2020-04-17)](https://github.com/pixelfed/pixelfed/compare/v0.10.8...v0.10.9)

package-lock.json

@@ -1312,7 +1312,7 @@
                 },
                 "util": {
                     "version": "0.10.3",
-                    "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
+                    "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
                     "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
                     "requires": {
                         "inherits": "2.0.1"
@@ -1436,7 +1436,7 @@
                 },
                 "chalk": {
                     "version": "1.1.3",
-                    "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
                     "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
                     "requires": {
                         "ansi-styles": "^2.2.1",
@@ -1453,7 +1453,7 @@
                 },
                 "supports-color": {
                     "version": "2.0.0",
-                    "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
                     "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
                 }
             }
@@ -2661,12 +2661,12 @@
             "dependencies": {
                 "jsesc": {
                     "version": "0.5.0",
-                    "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+                    "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
                     "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
                 },
                 "regexpu-core": {
                     "version": "1.0.0",
-                    "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+                    "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
                     "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
                     "requires": {
                         "regenerate": "^1.2.1",
@@ -2676,12 +2676,12 @@
                 },
                 "regjsgen": {
                     "version": "0.2.0",
-                    "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+                    "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
                     "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
                 },
                 "regjsparser": {
                     "version": "0.1.5",
-                    "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+                    "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
                     "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
                     "requires": {
                         "jsesc": "~0.5.0"
@@ -3784,7 +3784,7 @@
                 },
                 "chalk": {
                     "version": "1.1.3",
-                    "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
                     "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
                     "requires": {
                         "ansi-styles": "^2.2.1",
@@ -3796,7 +3796,7 @@
                 },
                 "supports-color": {
                     "version": "2.0.0",
-                    "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
                     "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
                 }
             }
@@ -4358,7 +4358,7 @@
                 },
                 "string-width": {
                     "version": "1.0.2",
-                    "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
                     "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
                     "requires": {
                         "code-point-at": "^1.0.0",
@@ -5037,7 +5037,7 @@
         },
         "is-accessor-descriptor": {
             "version": "0.1.6",
-            "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
             "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
             "requires": {
                 "kind-of": "^3.0.2"
@@ -5091,7 +5091,7 @@
         },
         "is-data-descriptor": {
             "version": "0.1.4",
-            "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+            "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
             "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
             "requires": {
                 "kind-of": "^3.0.2"
@@ -5506,7 +5506,7 @@
                 },
                 "pify": {
                     "version": "2.3.0",
-                    "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
                     "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
                 }
             }
@@ -6030,7 +6030,7 @@
             "dependencies": {
                 "semver": {
                     "version": "5.3.0",
-                    "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
                     "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
                 }
             }
@@ -6123,7 +6123,7 @@
                 },
                 "chalk": {
                     "version": "1.1.3",
-                    "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
                     "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
                     "requires": {
                         "ansi-styles": "^2.2.1",
@@ -6153,7 +6153,7 @@
                 },
                 "supports-color": {
                     "version": "2.0.0",
-                    "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
                     "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
                 },
                 "yallist": {
@@ -7498,7 +7498,7 @@
                 },
                 "pify": {
                     "version": "2.3.0",
-                    "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
                     "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
                 }
             }
@@ -7533,7 +7533,7 @@
         },
         "readable-stream": {
             "version": "2.3.6",
-            "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
             "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
             "requires": {
                 "core-util-is": "~1.0.0",
@@ -7654,7 +7654,7 @@
             "dependencies": {
                 "jsesc": {
                     "version": "0.5.0",
-                    "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+                    "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
                     "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
                 }
             }
@@ -7835,7 +7835,7 @@
             "dependencies": {
                 "convert-source-map": {
                     "version": "0.3.5",
-                    "resolved": "http://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
+                    "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
                     "integrity": "sha1-8dgClQr33SYxof6+BZZVDIarMZA=",
                     "dev": true
                 }
@@ -8022,7 +8022,7 @@
             "dependencies": {
                 "source-map": {
                     "version": "0.4.4",
-                    "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
                     "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
                     "requires": {
                         "amdefine": ">=0.0.4"
@@ -9873,9 +9873,9 @@
             }
         },
         "websocket-extensions": {
-            "version": "0.1.3",
+            "version": "0.1.4",
-            "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+            "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-            "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+            "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
         },
         "which": {
             "version": "1.3.1",

resources/assets/js/components/PostComponent.vue

@@ -253,6 +253,39 @@
 
         </div>
       </div>
+      <div v-if="showProfileMorePosts">
+        <div class="py-4">
+          <hr>
+        </div>
+        <p class="text-lighter px-3" style="font-weight: 600;font-size: 15px;">More posts from <a :href="'/'+statusUsername" class="text-dark">{{this.statusUsername}}</a></p>
+        <div class="profile-timeline mt-md-4">
+          <div class="row">
+            <div class="col-4 p-1 p-md-3" v-for="(s, index) in profileMorePosts" :key="'tlob:'+index">
+              <a class="card info-overlay card-md-border-0" :href="getStatusUrl(s)" v-once>
+                <div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
+                  <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
+                  <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
+                  <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
+                  <div class="square-content" v-bind:style="previewBackground(s)">
+                  </div>
+                  <div class="info-overlay-text">
+                    <h5 class="text-white m-auto font-weight-bold">
+                      <span>
+                        <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
+                        <span class="d-flex-inline">{{s.favourites_count}}</span>
+                      </span>
+                      <span>
+                        <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
+                        <span class="d-flex-inline">{{s.reblogs_count}}</span>
+                      </span>
+                    </h5>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div v-if="layout == 'moment'" class="momentui">
@@ -676,7 +709,9 @@ export default {
             ctxEmbedShowLikes: false,
             ctxEmbedCompactMode: false,
             layout: this.profileLayout,
-            canEdit: false
+            canEdit: false,
+            showProfileMorePosts: false,
+            profileMorePosts: []
           }
     },
     watch: {
@@ -782,6 +817,7 @@ export default {
                   }
                 }
                 this.loaded = true;
+                this.fetchProfilePosts();
             }).catch(error => {
               swal('Oops!', 'An error occured, please try refreshing the page.', 'error');
             });
@@ -1270,7 +1306,50 @@ export default {
             reply.url :
             '/i/web/post/_/' + profile.id + '/' + reply.id; 
         }
+      },
+
+      fetchProfilePosts() {
+        let self = this;
+        let apiUrl = '/api/pixelfed/v1/accounts/' + this.statusProfileId + '/statuses';
+        axios.get(apiUrl, {
+          params: {
+            only_media: true,
+            min_id: 1,
+            limit: 9
           }
+        })
+        .then(res => {
+          let data = res.data.filter(function(status) {
+            return status.media_attachments.length > 0 &&
+            status.id != self.statusId &&
+            status.sensitive == false
+          });
+          let ids = data.map(status => status.id);
+          if(data.length >= 3) {
+            self.showProfileMorePosts = true;
+          }
+          self.profileMorePosts = data.slice(0,6);
+        })
+      },
+
+      previewUrl(status) {
+        return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
+      },
+
+      previewBackground(status) {
+        let preview = this.previewUrl(status);
+        return 'background-image: url(' + preview + ');';
+      },
+
+      getStatusUrl(status) {
+        return status.url;
+
+        if(status.local == true) {
+          return status.url;
+        }
+
+        return '/i/web/post/_/' + status.account.id + '/' + status.id;
+      },
 
     },
 }