feat: respect Media Display preferences (#2065)

components/status/StatusContent.vue

@@ -22,6 +22,12 @@ const isFiltered = $computed(() => status.account.id !== currentUser.value?.acco
 // check spoiler text or media attachment
 // needed to handle accounts that mark all their posts as sensitive
 const hasSpoilerOrSensitiveMedia = $computed(() => !!status.spoilerText || (status.sensitive && !!status.mediaAttachments.length))
+const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText)
+const hideAllMedia = computed(
+  () => {
+    return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && !!status.mediaAttachments.length) : false
+  },
+)
 </script>
 
 <template>
@@ -32,15 +38,15 @@ const hasSpoilerOrSensitiveMedia = $computed(() => !!status.spoilerText || (stat
       'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
     }"
   >
-    <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
-    <StatusSpoiler :enabled="hasSpoilerOrSensitiveMedia || isFiltered" :filter="isFiltered" :is-d-m="isDM">
+    <StatusBody v-if="(!isFiltered && isSensitiveNonSpoiler) || hideAllMedia" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+    <StatusSpoiler :enabled="hasSpoilerOrSensitiveMedia || isFiltered" :filter="isFiltered" :sensitive-non-spoiler="isSensitiveNonSpoiler || hideAllMedia" :is-d-m="isDM">
       <template v-if="status.spoilerText" #spoiler>
         <p>{{ status.spoilerText }}</p>
       </template>
       <template v-else-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
       </template>
-      <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusBody v-if="!(isSensitiveNonSpoiler || hideAllMedia)" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
       <StatusTranslation :status="status" />
       <StatusPoll v-if="status.poll" :status="status" />
       <StatusMedia

components/status/StatusSpoiler.vue

@@ -1,18 +1,31 @@
 <script setup lang="ts">
-const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean }>()
+const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean; sensitiveNonSpoiler?: boolean }>()
 
-const expandSpoilersByDefault = computed(() => currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false)
+const expandSpoilers = computed(() => {
+  const expandCW = currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false
+  const expandMedia = currentUser.value ? getExpandMediaByDefault(currentUser.value.account) : false
 
-const showContent = ref(expandSpoilersByDefault.value ? true : !props.enabled)
+  return !props.filter // always prevent expansion if filtered
+    && ((props.sensitiveNonSpoiler && expandMedia)
+    || (!props.sensitiveNonSpoiler && expandCW))
+})
+
+const hideContent = props.enabled || props.sensitiveNonSpoiler
+const showContent = ref(expandSpoilers.value ? true : !hideContent)
 const toggleContent = useToggle(showContent)
 
 watchEffect(() => {
-  showContent.value = expandSpoilersByDefault.value ? true : !props.enabled
+  showContent.value = expandSpoilers.value ? true : !hideContent
 })
+function getToggleText() {
+  if (props.sensitiveNonSpoiler)
+    return 'status.spoiler_media_hidden'
+  return props.filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more'
+}
 </script>
 
 <template>
-  <div v-if="enabled" flex flex-col items-start>
+  <div v-if="hideContent" flex flex-col items-start>
     <div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
       <slot name="spoiler" />
     </div>
@@ -20,9 +33,9 @@ watchEffect(() => {
       <button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
         <div v-if="showContent" i-ri:eye-line />
         <div v-else i-ri:eye-close-line />
-        {{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
+        {{ showContent ? $t('status.spoiler_show_less') : $t(getToggleText()) }}
       </button>
     </div>
   </div>
-  <slot v-if="!enabled || showContent" />
+  <slot v-if="!hideContent || showContent" />
 </template>

composables/users.ts

@@ -170,10 +170,28 @@ export async function loginTo(masto: ElkMasto, user: Overwrite<UserLogin, { acco
 }
 
 const accountPreferencesMap = new Map<string, mastodon.v1.Preference>()
+
+/**
+ * @returns `true` when user ticked the preference to always expand posts with content warnings
+ */
 export function getExpandSpoilersByDefault(account: mastodon.v1.AccountCredentials) {
   return accountPreferencesMap.get(account.acct)?.['reading:expand:spoilers'] ?? false
 }
 
+/**
+ * @returns `true` when user selected "Always show media" as Media Display preference
+ */
+export function getExpandMediaByDefault(account: mastodon.v1.AccountCredentials) {
+  return accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'show_all' ?? false
+}
+
+/**
+ * @returns `true` when user selected "Always hide media" as Media Display preference
+ */
+export function getHideMediaByDefault(account: mastodon.v1.AccountCredentials) {
+  return accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'hide_all' ?? false
+}
+
 export async function fetchAccountInfo(client: mastodon.Client, server: string) {
   const [account, preferences] = await Promise.all([
     client.v1.accounts.verifyCredentials(),

locales/en.json

@@ -527,6 +527,7 @@
     "replying_to": "Replying to {0}",
     "show_full_thread": "Show Full thread",
     "someone": "someone",
+    "spoiler_media_hidden": "Media hidden",
     "spoiler_show_less": "Show less",
     "spoiler_show_more": "Show more",
     "thread": "Thread",

locales/tl-PH.json

@@ -523,6 +523,7 @@
     "replying_to": "Sumasagot kay {0}",
     "show_full_thread": "Ipakita ang buong thread",
     "someone": "isa",
+    "spoiler_media_hidden": "Nakatago and media",
     "spoiler_show_less": "Ipakita nang mas kaunti",
     "spoiler_show_more": "Ipakita nang mas marami",
     "thread": "Thread",