feat: data saving mode (#1638)

2023-02-15 11:34:23 +01:00 · 2023-02-15 11:34:23 +01:00 · fbe1463f17
commit fbe1463f17
parent 52fbb70a08
13 changed files with 208 additions and 47 deletions
--- a/components/status/StatusAttachment.vue
+++ b/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
-        ref="video"
-        preload="none"
-        :poster="attachment.previewUrl"
-        muted
-        loop
-        playsinline
-        controls
-        rounded-lg
-        object-cover
-        fullscreen:object-contain
-        :width="attachment.meta?.original?.width"
-        :height="attachment.meta?.original?.height"
-        :style="{
-          aspectRatio,
-          objectPosition,
-        }"
+      <button
+        type="button"
+        relative
+        @click="!shouldLoadAttachment ? loadAttachment() : null"
      >
-        <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
-        ref="video"
-        preload="none"
-        :poster="attachment.previewUrl"
-        muted
-        loop
-        playsinline
-        rounded-lg
-        object-cover
-        :width="attachment.meta?.original?.width"
-        :height="attachment.meta?.original?.height"
-        :style="{
-          aspectRatio,
-          objectPosition,
-        }"
+      <button
+        type="button"
+        relative
+        @click="!shouldLoadAttachment ? loadAttachment() : null"
      >
-        <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>
--- a/components/status/StatusCard.vue
+++ b/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>
--- a/components/status/StatusContent.vue
+++ b/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"
--- a/components/status/StatusMedia.vue
+++ b/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>
--- a/components/status/StatusPreviewCardNormal.vue
+++ b/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>