Merge pull request 'Let (foreign) user profiles override current wallpaper' (#3498) from profile-bg into develop

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3498

changelog.d/profilebg.add

@@ -0,0 +1 @@
+displaying other user's backgrounds (if supported by BE)

src/App.js

@@ -149,13 +149,23 @@ export default {
     userBackground() {
       return this.currentUser.background_image
     },
+    foreignProfileBackground() {
+      return (
+        useMergedConfigStore().mergedConfig.allowForeignUserBackground &&
+        useInterfaceStore().foreignProfileBackground
+      )
+    },
     instanceBackground() {
       return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
         ? null
         : this.instanceBackgroundUrl
     },
     background() {
-      return this.userBackground || this.instanceBackground
+      return (
+        this.foreignProfileBackground ||
+        this.userBackground ||
+        this.instanceBackground
+      )
     },
     bgStyle() {
       if (this.background) {

src/App.scss

@@ -200,6 +200,7 @@ nav {
   background-color: var(--wallpaper);
   background-image: var(--body-background-image);
   background-position: 50%;
+  transition: background-image 1s;
 }
 
 .underlay {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -263,6 +263,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="allowForeignUserBackground">
+            {{ $t('settings.foreign_user_background') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="compactProfiles">
             {{ $t('settings.compact_profiles') }}

src/components/status_action_buttons/action_button_container.vue

@@ -79,7 +79,7 @@
       :button="button"
       :status="status"
       v-bind="$attrs"
-      @emojiPickerShown="e => $emit('emojiPickerShown', e)"
+      @emoji-picker-shown="e => $emit('emojiPickerShown', e)"
     />
     <teleport to="#modal">
       <MuteConfirm

src/components/status_action_buttons/status_action_buttons.vue

@@ -20,7 +20,7 @@
           :get-component="getComponent"
           :close="() => { /* no-op */ }"
           :do-action="doAction"
-          @emojiPickerShown="onEmojiPickerShown"
+          @emoji-picker-shown="onEmojiPickerShown"
         />
         <button
           v-if="showPin && currentUser"

src/components/user_profile/user_profile.js

@@ -12,6 +12,7 @@ import UserCard from '../user_card/user_card.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -56,9 +57,14 @@ const UserProfile = {
     const routeParams = this.$route.params
     this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
+  },
+  updated() {
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
   },
   unmounted() {
     this.stopFetching()
+    useInterfaceStore().setForeignProfileBackground(null)
   },
   computed: {
     timeline() {

src/i18n/en.json

@@ -636,6 +636,7 @@
     "navbar_column_stretch": "Stretch navbar to columns width",
     "always_show_post_button": "Always show floating New Post button",
     "hide_wallpaper": "Hide instance wallpaper",
+    "foreign_user_background": "Allow other user's profiles to override wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",

src/modules/default_config_state.js

@@ -140,6 +140,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Hide Instance-specific panel',
     default: false,
   },
+  allowForeignUserBackground: {
+    description: "Allow other user's profiles to override wallpaper",
+    default: true,
+  },
   hideInstanceWallpaper: {
     description: 'Hide Instance default background',
     default: false,

src/stores/interface.js

@@ -60,6 +60,7 @@ export const useInterfaceStore = defineStore('interface', {
     globalNotices: [],
     layoutHeight: 0,
     lastTimeline: null,
+    foreignProfileBackground: null,
   }),
   actions: {
     setTemporaryChanges({ confirm, revert }) {
@@ -96,6 +97,9 @@ export const useInterfaceStore = defineStore('interface', {
         console.error(`${error}`)
       }
     },
+    setForeignProfileBackground(url) {
+      this.foreignProfileBackground = url
+    },
     settingsSaved({ success, error }) {
       if (success) {
         if (this.noticeClearTimeout) {