Update Timeline component

resources/assets/components/partials/post/PostHeader.vue

@@ -1,4 +1,15 @@
 <template>
+    <div>
+        <div v-if="isReblog" class="card-header bg-light border-0" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
+            <div class="media align-items-center" style="height:10px;">
+                <a :href="reblogAccount.url" class="mx-2" @click.prevent="goToProfileById(reblogAccount.id)">
+                    <img :src="reblogAccount.avatar" style="border-radius:10px;" width="24" height="24" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
+                </a>
+                <div style="font-size:12px;font-weight:bold">
+                    <i class="far fa-retweet text-warning mr-1"></i> Reblogged by <a :href="reblogAccount.url" class="text-dark" @click.prevent="goToProfileById(reblogAccount.id)">&commat;{{ reblogAccount.acct }}</a>
+                </div>
+            </div>
+        </div>
         <div class="card-header border-0" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
             <div class="media align-items-center">
                 <a :href="status.account.url" @click.prevent="goToProfile()" style="margin-right: 10px;">
@@ -86,6 +97,7 @@
 
             <edit-history-modal ref="editModal" :status="status" />
         </div>
+    </div>
 </template>
 
 <script type="text/javascript">
@@ -105,6 +117,15 @@
             useDropdownMenu: {
                 type: Boolean,
                 default: false
+            },
+
+            isReblog: {
+                type: Boolean,
+                default: false
+            },
+
+            reblogAccount: {
+                type: Object
             }
         },
 
@@ -204,6 +225,19 @@
                 })
             },
 
+            goToProfileById(id) {
+                this.$nextTick(() => {
+                    this.$router.push({
+                        name: 'profile',
+                        path: `/i/web/profile/${id}`,
+                        params: {
+                            id: id,
+                            cachedUser: this.profile
+                        }
+                    });
+                });
+            },
+
             goToProfile() {
                 this.$nextTick(() => {
                     this.$router.push({

resources/assets/components/sections/Timeline.vue

@@ -8,6 +8,30 @@
         </div>
 
         <div v-else>
+            <transition name="fade">
+                <div v-if="showReblogBanner && getScope() === 'home'" class="card bg-g-amin card-body shadow-sm mb-3" style="border-radius: 15px;">
+                    <div class="d-flex justify-content-around align-items-center">
+                        <div class="flex-grow-1 ft-std">
+                            <h2 class="font-weight-bold text-white mb-0">Introducing Reblogs in feeds</h2>
+                            <hr />
+                            <p class="lead text-white mb-0">
+                                See reblogs from accounts you follow in your home feed!
+                            </p>
+                            <p class="text-white small mb-1" style="opacity:0.6">
+                                You can disable reblogs in feeds on the Timeline Settings page.
+                            </p>
+                            <hr />
+                            <div class="d-flex">
+                                <button class="btn btn-light rounded-pill font-weight-bold btn-block mr-2" @click.prevent="enableReblogs()">
+                                    <template v-if="!enablingReblogs">Show reblogs in home feed</template>
+                                    <b-spinner small v-else />
+                                </button>
+                                <button class="btn btn-outline-light rounded-pill font-weight-bold px-5" @click.prevent="hideReblogs()">Hide</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </transition>
             <status
                 v-for="(status, index) in feed"
                 :key="'pf_feed:' + status.id + ':idx:' + index + ':fui:' + forceUpdateIdx"
@@ -140,6 +164,7 @@
 
         data() {
             return {
+                settings: [],
                 isLoaded: false,
                 feed: [],
                 ids: [],
@@ -159,7 +184,9 @@
                 reportedStatusId: 0,
                 showSharesModal: false,
                 sharesModalPost: {},
-                forceUpdateIdx: 0
+                forceUpdateIdx: 0,
+                showReblogBanner: false,
+                enablingReblogs: false
             }
         },
 
@@ -174,7 +201,7 @@
                     return;
                 };
             }
-            this.fetchTimeline();
+            this.fetchSettings();
         },
 
         methods: {
@@ -194,13 +221,48 @@
                 }
             },
 
-            fetchTimeline(scrollToTop = false) {
+            fetchSettings() {
-                let url = `/api/pixelfed/v1/timelines/${this.getScope()}`;
+                axios.get('/api/pixelfed/v1/web/settings')
-                axios.get(url, {
+                .then(res => {
-                    params: {
+                    this.settings = res.data;
-                        max_id: this.max_id,
+
-                        limit: 6
+                    if(!res.data) {
+                        this.showReblogBanner = true;
+                    } else {
+                        if(res.data.hasOwnProperty('hide_reblog_banner')) {
+                        } else if(res.data.hasOwnProperty('enable_reblogs')) {
+                            if(!res.data.enable_reblogs) {
+                                this.showReblogBanner = true;
                             }
+                        } else {
+                            this.showReblogBanner = true;
+                        }
+                    }
+                })
+                .finally(() => {
+                    this.fetchTimeline();
+                })
+            },
+
+            fetchTimeline(scrollToTop = false) {
+                let url, params;
+                if(this.getScope() === 'home' && this.settings && this.settings.hasOwnProperty('enable_reblogs') && this.settings.enable_reblogs) {
+                    url = `/api/v1/timelines/home`;
+                    params = {
+                        '_pe': 1,
+                        max_id: this.max_id,
+                        limit: 6,
+                        include_reblogs: true,
+                    }
+                } else {
+                    url = `/api/pixelfed/v1/timelines/${this.getScope()}`;
+                    params = {
+                        max_id: this.max_id,
+                        limit: 6,
+                    }
+                }
+                axios.get(url, {
+                    params: params
                 }).then(res => {
                     let ids = res.data.map(p => {
                         if(p && p.hasOwnProperty('relationship')) {
@@ -242,12 +304,24 @@
 
                 this.isFetchingMore = true;
 
-                let url = `/api/pixelfed/v1/timelines/${this.getScope()}`;
+                let url, params;
-                axios.get(url, {
+                if(this.getScope() === 'home' && this.settings && this.settings.hasOwnProperty('enable_reblogs') && this.settings.enable_reblogs) {
-                    params: {
+                    url = `/api/v1/timelines/home`;
+                    params = {
+                        '_pe': 1,
                         max_id: this.max_id,
-                        limit: 6
+                        limit: 6,
+                        include_reblogs: true,
                     }
+                } else {
+                    url = `/api/pixelfed/v1/timelines/${this.getScope()}`;
+                    params = {
+                        max_id: this.max_id,
+                        limit: 6,
+                    }
+                }
+                axios.get(url, {
+                    params: params
                 }).then(res => {
                     if(!res.data.length) {
                         this.endFeedReached = true;
@@ -568,7 +642,31 @@
                 this.$nextTick(() => {
                     this.forceUpdateIdx++;
                 });
-            }
+            },
+
+            enableReblogs() {
+                this.enablingReblogs = true;
+
+                axios.post('/api/pixelfed/v1/web/settings', {
+                    field: 'enable_reblogs',
+                    value: true
+                })
+                .then(res => {
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1000);
+                })
+            },
+
+            hideReblogs() {
+                this.showReblogBanner = false;
+                axios.post('/api/pixelfed/v1/web/settings', {
+                    field: 'hide_reblog_banner',
+                    value: true
+                })
+                .then(res => {
+                })
+            },
         },
 
         watch: {

resources/assets/sass/spa.scss

@@ -152,6 +152,12 @@ body {
     color: var(--primary);
 }
 
+.bg-g-amin {
+    background: #8E2DE2;
+    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
+    background: linear-gradient(to left, #4A00E0, #8E2DE2);
+}
+
 .text-lighter {
     color: var(--text-lighter) !important;
 }
@@ -382,6 +388,10 @@ span.twitter-typeahead .tt-suggestion:focus {
     }
 }
 
+.ft-std {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
 .timeline-status-component {
     .username {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;