feat: data saving mode (#1638)

components/common/CommonBlurhash.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { decode } from 'blurhash'
 
-const { blurhash, src, srcset } = defineProps<{
+const { blurhash, src, srcset, shouldLoadImage = true } = defineProps<{
   blurhash?: string | null | undefined
   src: string
   srcset?: string
+  shouldLoadImage?: boolean
 }>()
 
 defineOptions({
@@ -19,7 +20,7 @@ const placeholderSrc = $computed(() => {
   return getDataUrlFromArr(pixels, 32, 32)
 })
 
-onMounted(() => {
+function loadImage() {
   const img = document.createElement('img')
 
   img.onload = () => {
@@ -34,6 +35,16 @@ onMounted(() => {
   setTimeout(() => {
     isLoaded.value = true
   }, 3_000)
+}
+
+onMounted(() => {
+  if (shouldLoadImage)
+    loadImage()
+})
+
+watch(() => shouldLoadImage, () => {
+  if (shouldLoadImage)
+    loadImage()
 })
 </script>
 

components/publish/PublishAttachment.vue

@@ -25,7 +25,7 @@ const toggleApply = () => {
 
 <template>
   <div relative group>
-    <StatusAttachment :attachment="attachment" w-full />
+    <StatusAttachment :attachment="attachment" w-full is-preview />
     <div absolute right-2 top-2>
       <div
         v-if="removable"
@@ -63,7 +63,7 @@ const toggleApply = () => {
             {{ $t('action.close') }}
           </button>
         </div>
-        <StatusAttachment :attachment="attachment" w-full />
+        <StatusAttachment :attachment="attachment" w-full is-preview />
       </div>
     </ModalDialog>
   </div>

components/publish/PublishWidget.vue

@@ -152,7 +152,7 @@ defineExpose({
         <div id="state-editing" text-secondary self-center>
           {{ $t('state.editing') }}
         </div>
-        <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" px-0 />
+        <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" is-preview px-0 />
       </div>
       <div border="b dashed gray/40" />
     </template>

components/settings/SettingsToggleItem.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+const { disabled = false } = defineProps<{
   icon?: string
   text?: string
   checked: boolean
+  disabled?: boolean
 }>()
 </script>
 
@@ -10,10 +11,13 @@ defineProps<{
   <button
     exact-active-class="text-primary"
     block w-full group focus:outline-none text-start
+    :disabled="disabled"
+    :class="disabled ? 'opacity-50 cursor-not-allowed' : ''"
   >
     <div
       w-full flex w-fit px5 py3 md:gap2 gap4 items-center
-      transition-250 group-hover:bg-active
+      transition-250
+      :class="disabled ? '' : 'group-hover:bg-active'"
       group-focus-visible:ring="2 current"
     >
       <div flex-1 flex items-center md:gap2 gap4>

components/status/StatusAttachment.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { clamp } from '@vueuse/core'
 import type { mastodon } from 'masto'
+import { decode } from 'blurhash'
 
 const {
   attachment,
   fullSize = false,
+  isPreview = false,
 } = defineProps<{
   attachment: mastodon.v1.MediaAttachment
   attachments?: mastodon.v1.MediaAttachment[]
   fullSize?: boolean
+  isPreview?: boolean
 }>()
 
 const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
@@ -89,51 +92,109 @@ useIntersectionObserver(video, (entries) => {
 }, { threshold: 0.75 })
 
 const userSettings = useUserSettings()
+
+const shouldLoadAttachment = ref(isPreview || !getPreferences(userSettings.value, 'enableDataSaving'))
+
+function loadAttachment() {
+  shouldLoadAttachment.value = true
+}
+
+const blurHashSrc = $computed(() => {
+  if (!attachment.blurhash)
+    return ''
+  const pixels = decode(attachment.blurhash, 32, 32)
+  return getDataUrlFromArr(pixels, 32, 32)
+})
+
+let videoThumbnail = shouldLoadAttachment.value
+  ? attachment.previewUrl
+  : blurHashSrc
+
+watch(shouldLoadAttachment, () => {
+  videoThumbnail = shouldLoadAttachment
+    ? attachment.previewUrl
+    : blurHashSrc
+})
 </script>
 
 <template>
   <div relative ma flex :gap="isAudio ? '2' : ''">
     <template v-if="type === 'video'">
-      <video
+      <button
-        ref="video"
+        type="button"
-        preload="none"
+        relative
-        :poster="attachment.previewUrl"
+        @click="!shouldLoadAttachment ? loadAttachment() : null"
-        muted
-        loop
-        playsinline
-        controls
-        rounded-lg
-        object-cover
-        fullscreen:object-contain
-        :width="attachment.meta?.original?.width"
-        :height="attachment.meta?.original?.height"
-        :style="{
-          aspectRatio,
-          objectPosition,
-        }"
       >
-        <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+        <video
-      </video>
+          ref="video"
+          preload="none"
+          :poster="videoThumbnail"
+          muted
+          loop
+          playsinline
+          :controls="shouldLoadAttachment"
+          rounded-lg
+          object-cover
+          fullscreen:object-contain
+          :width="attachment.meta?.original?.width"
+          :height="attachment.meta?.original?.height"
+          :style="{
+            aspectRatio,
+            objectPosition,
+          }"
+          :class="!shouldLoadAttachment ? 'brightness-60 hover:brightness-70 transition-filter' : ''"
+        >
+          <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+        </video>
+        <span
+          v-if="!shouldLoadAttachment"
+          class="status-attachment-load"
+          absolute
+          text-sm
+          text-white
+          flex flex-col justify-center items-center
+          gap-3 w-6 h-6
+          pointer-events-none
+          i-ri:video-download-line
+        />
+      </button>
     </template>
     <template v-else-if="type === 'gifv'">
-      <video
+      <button
-        ref="video"
+        type="button"
-        preload="none"
+        relative
-        :poster="attachment.previewUrl"
+        @click="!shouldLoadAttachment ? loadAttachment() : null"
-        muted
-        loop
-        playsinline
-        rounded-lg
-        object-cover
-        :width="attachment.meta?.original?.width"
-        :height="attachment.meta?.original?.height"
-        :style="{
-          aspectRatio,
-          objectPosition,
-        }"
       >
-        <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+        <video
-      </video>
+          ref="video"
+          preload="none"
+          :poster="videoThumbnail"
+          muted
+          loop
+          playsinline
+          rounded-lg
+          object-cover
+          :width="attachment.meta?.original?.width"
+          :height="attachment.meta?.original?.height"
+          :style="{
+            aspectRatio,
+            objectPosition,
+          }"
+        >
+          <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+        </video>
+        <span
+          v-if="!shouldLoadAttachment"
+          class="status-attachment-load"
+          absolute
+          text-sm
+          text-white
+          flex flex-col justify-center items-center
+          gap-3 w-6 h-6
+          pointer-events-none
+          i-ri:video-download-line
+        />
+      </button>
     </template>
     <template v-else-if="type === 'audio'">
       <audio controls h-15>
@@ -149,7 +210,8 @@ const userSettings = useUserSettings()
         h-full
         w-full
         aria-label="Open image preview dialog"
-        @click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
+        relative
+        @click="!shouldLoadAttachment ? loadAttachment() : openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >
         <CommonBlurhash
           :blurhash="attachment.blurhash"
@@ -163,10 +225,24 @@ const userSettings = useUserSettings()
             aspectRatio,
             objectPosition,
           }"
+          :should-load-image="shouldLoadAttachment"
           rounded-lg
           h-full
           w-full
           object-cover
+          :draggable="shouldLoadAttachment"
+          :class="!shouldLoadAttachment ? 'brightness-60 hover:brightness-70 transition-filter' : ''"
+        />
+        <span
+          v-if="!shouldLoadAttachment"
+          class="status-attachment-load"
+          absolute
+          text-sm
+          text-white
+          flex flex-col justify-center items-center
+          gap-3 w-6 h-6
+          pointer-events-none
+          i-ri:file-download-line
         />
       </button>
     </template>
@@ -202,3 +278,11 @@ const userSettings = useUserSettings()
     </div>
   </div>
 </template>
+
+<style lang="postcss">
+.status-attachment-load {
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+}
+</style>

components/status/StatusCard.vue

@@ -8,6 +8,7 @@ const props = withDefaults(
     context?: mastodon.v2.FilterContext
     hover?: boolean
     faded?: boolean
+    isPreview?: boolean
 
     // If we know the prev and next status in the timeline, we can simplify the card
     older?: mastodon.v1.Status
@@ -177,7 +178,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
         </div>
 
         <!-- Content -->
-        <StatusContent :status="status" :newer="newer" :context="context" mb2 :class="{ 'mt-2 mb1': isDM }" />
+        <StatusContent :status="status" :newer="newer" :context="context" :is-preview="isPreview" mb2 :class="{ 'mt-2 mb1': isDM }" />
         <StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
       </div>
     </div>

components/status/StatusContent.vue

@@ -5,6 +5,7 @@ const { status, context } = defineProps<{
   status: mastodon.v1.Status
   newer?: mastodon.v1.Status
   context?: mastodon.v2.FilterContext | 'details'
+  isPreview?: boolean
 }>()
 
 const isDM = $computed(() => status.visibility === 'direct')
@@ -44,6 +45,7 @@ const hasSensitiveSpoilerOrMedia = $computed(() => status.sensitive && (!!status
       <StatusMedia
         v-if="status.mediaAttachments?.length"
         :status="status"
+        :is-preview="isPreview"
       />
       <StatusPreviewCard
         v-if="status.card"

components/status/StatusMedia.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { status } = defineProps<{
+const { status, isPreview = false } = defineProps<{
   status: mastodon.v1.Status | mastodon.v1.StatusEdit
   fullSize?: boolean
+  isPreview?: boolean
 }>()
 </script>
 
@@ -16,6 +17,7 @@ const { status } = defineProps<{
         :full-size="fullSize"
         w-full
         h-full
+        :is-preview="isPreview"
       />
     </template>
   </div>

components/status/StatusPreviewCardNormal.vue

@@ -28,6 +28,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
   video: 'i-ri:play-line',
   rich: 'i-ri:profile-line',
 }
+
+const userSettings = useUserSettings()
+const shouldLoadAttachment = ref(!getPreferences(userSettings.value, 'enableDataSaving'))
+
+function loadAttachment() {
+  shouldLoadAttachment.value = true
+}
 </script>
 
 <template>
@@ -54,6 +61,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
         'w-full aspect-[1.91]': !isSquare,
         'rounded-lg': root,
       }"
+      relative
     >
       <CommonBlurhash
         :blurhash="card.blurhash"
@@ -61,8 +69,30 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
         :width="card.width"
         :height="card.height"
         :alt="alt"
+        :should-load-image="shouldLoadAttachment"
         w-full h-full object-cover
+        :class="!shouldLoadAttachment ? 'brightness-60' : ''"
       />
+      <button
+        v-if="!shouldLoadAttachment"
+        type="button"
+        absolute
+        class="status-preview-card-load bg-black/64"
+        p-2
+        transition
+        rounded
+        hover:bg-black
+        cursor-pointer
+        @click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
+      >
+        <span
+          text-sm
+          text-white
+          flex flex-col justify-center items-center
+          gap-3 w-6 h-6
+          i-ri:file-download-line
+        />
+      </button>
     </div>
     <div
       v-else
@@ -76,3 +106,11 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
     <StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
   </NuxtLink>
 </template>
+
+<style lang="postcss">
+.status-preview-card-load {
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+}
+</style>

composables/settings/definition.ts

@@ -18,6 +18,7 @@ export interface PreferencesSettings {
   hideAccountHoverCard: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
+  enableDataSaving: boolean
   enablePinchToZoom: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
@@ -77,6 +78,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideAccountHoverCard: false,
   grayscaleMode: false,
   enableAutoplay: true,
+  enableDataSaving: false,
   enablePinchToZoom: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,

composables/settings/storage.ts

@@ -33,7 +33,12 @@ export function usePreferences<T extends keyof PreferencesSettings>(name: T): Re
 }
 
 export function getPreferences<T extends keyof PreferencesSettings>(userSettings: UserSettings, name: T): PreferencesSettings[T] {
-  return userSettings?.preferences?.[name] ?? DEFAULT__PREFERENCES_SETTINGS[name]
+  const preference = userSettings?.preferences?.[name] ?? DEFAULT__PREFERENCES_SETTINGS[name]
+
+  if (name === 'enableAutoplay')
+    return getPreferences(userSettings, 'enableDataSaving') ? false : preference
+
+  return preference
 }
 
 export function togglePreferences(key: keyof PreferencesSettings) {

locales/en.json

@@ -402,6 +402,8 @@
     "notifications_settings": "Notifications",
     "preferences": {
       "enable_autoplay": "Enable Autoplay",
+      "enable_data_saving": "Enable data saving",
+      "enable_data_saving_description": "Save data by preventing attachments from automatically loading.",
       "enable_pinch_to_zoom": "Enable pinch to zoom",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",

pages/settings/preferences/index.vue

@@ -29,10 +29,20 @@ const userSettings = useUserSettings()
     </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'enableAutoplay')"
+      :disabled="getPreferences(userSettings, 'enableDataSaving')"
       @click="togglePreferences('enableAutoplay')"
     >
       {{ $t('settings.preferences.enable_autoplay') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enableDataSaving')"
+      @click="togglePreferences('enableDataSaving')"
+    >
+      {{ $t("settings.preferences.enable_data_saving") }}
+      <template #description>
+        {{ $t("settings.preferences.enable_data_saving_description") }}
+      </template>
+    </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'enablePinchToZoom')"
       @click="togglePreferences('enablePinchToZoom')"