Display profile background of other users

And add a new frontend setting to hide other people's background.

src/App.js

@@ -64,6 +64,11 @@ export default {
         '-' + this.layoutType
       ]
     },
+    pageBackground () {
+      return this.mergedConfig.displayPageBackgrounds
+        ? this.$store.state.users.displayBackground
+        : null
+    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {
@@ -71,7 +76,7 @@ export default {
         ? null
         : this.$store.state.instance.background
     },
-    background () { return this.userBackground || this.instanceBackground },
+    background () { return this.pageBackground || this.userBackground || this.instanceBackground },
     bgStyle () {
       if (this.background) {
         return {

src/components/settings_modal/tabs/general_tab.vue

@@ -146,6 +146,11 @@
             {{ $t('settings.show_wider_shortcuts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="displayPageBackgrounds">
+            {{ $t('settings.show_page_backgrounds') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}

src/components/user_profile/user_profile.js

@@ -145,10 +145,12 @@ const UserProfile = {
       if (user) {
         loadById(user.id)
         this.note = user.relationship.note
+        this.$store.dispatch('setDisplayBackground', user.background_image)
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id, relationship }) => {
+          .then(({ id, relationship, background_image }) => {
             this.note = relationship.note
+            this.$store.dispatch('setDisplayBackground', background_image)
             return loadById(id)
           })
           .catch((reason) => {
@@ -225,6 +227,9 @@ const UserProfile = {
     Conversation,
     RichContent,
     FollowedTagList
+  },
+  beforeRouteLeave(to, from) {
+    this.$store.dispatch('setDisplayBackground', null)
   }
 }
 

src/i18n/en.json

@@ -750,6 +750,7 @@
         "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
         "show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
         "show_scrollbars": "Show side column's scrollbars",
+        "show_page_backgrounds": "Show page-specific backgrounds, e.g. for user profiles",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
         "stop_gifs": "Pause animated images until you hover on them",

src/modules/config.js

@@ -55,6 +55,7 @@ export const defaultState = {
   alwaysShowNewPostButton: false,
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
+  displayPageBackgrounds: true,
   stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',

src/modules/users.js

@@ -135,6 +135,10 @@ export const mutations = {
     const user = state.usersObject[id]
     user['deactivated'] = deactivated
   },
+  setDisplayBackground(state, url) {
+    console.log("Commiting user profile bg mutation")
+    state.displayBackground = url
+  },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
     state.currentUser = mergeWith(state.currentUser || {}, user, mergeArrayLength)
@@ -307,6 +311,7 @@ export const defaultState = {
   currentUser: false,
   users: [],
   usersObject: {},
+  displayBackground: null,
   signUpPending: false,
   signUpErrors: [],
   relationships: {},
@@ -319,6 +324,10 @@ const users = {
   mutations,
   getters,
   actions: {
+    setDisplayBackground (store, url) {
+      console.log("Performing user profile bg action...")
+      store.commit('setDisplayBackground', url)
+    },
     fetchUserIfMissing (store, id) {
       if (!store.getters.findUser(id)) {
         store.dispatch('fetchUser', id)