feat: data saving mode (#1638)

This commit is contained in:
Tuur Martens 2023-02-15 11:34:23 +01:00 committed by GitHub
parent 52fbb70a08
commit fbe1463f17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 208 additions and 47 deletions

View file

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

View file

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

View file

@ -152,7 +152,7 @@ defineExpose({
<div id="state-editing" text-secondary self-center> <div id="state-editing" text-secondary self-center>
{{ $t('state.editing') }} {{ $t('state.editing') }}
</div> </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>
<div border="b dashed gray/40" /> <div border="b dashed gray/40" />
</template> </template>

View file

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

View file

@ -1,14 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { clamp } from '@vueuse/core' import { clamp } from '@vueuse/core'
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { decode } from 'blurhash'
const { const {
attachment, attachment,
fullSize = false, fullSize = false,
isPreview = false,
} = defineProps<{ } = defineProps<{
attachment: mastodon.v1.MediaAttachment attachment: mastodon.v1.MediaAttachment
attachments?: mastodon.v1.MediaAttachment[] attachments?: mastodon.v1.MediaAttachment[]
fullSize?: boolean fullSize?: boolean
isPreview?: boolean
}>() }>()
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!) const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
@ -89,19 +92,47 @@ useIntersectionObserver(video, (entries) => {
}, { threshold: 0.75 }) }, { threshold: 0.75 })
const userSettings = useUserSettings() 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> </script>
<template> <template>
<div relative ma flex :gap="isAudio ? '2' : ''"> <div relative ma flex :gap="isAudio ? '2' : ''">
<template v-if="type === 'video'"> <template v-if="type === 'video'">
<button
type="button"
relative
@click="!shouldLoadAttachment ? loadAttachment() : null"
>
<video <video
ref="video" ref="video"
preload="none" preload="none"
:poster="attachment.previewUrl" :poster="videoThumbnail"
muted muted
loop loop
playsinline playsinline
controls :controls="shouldLoadAttachment"
rounded-lg rounded-lg
object-cover object-cover
fullscreen:object-contain fullscreen:object-contain
@ -111,15 +142,33 @@ const userSettings = useUserSettings()
aspectRatio, aspectRatio,
objectPosition, objectPosition,
}" }"
:class="!shouldLoadAttachment ? 'brightness-60 hover:brightness-70 transition-filter' : ''"
> >
<source :src="attachment.url || attachment.previewUrl" type="video/mp4"> <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video> </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>
<template v-else-if="type === 'gifv'"> <template v-else-if="type === 'gifv'">
<button
type="button"
relative
@click="!shouldLoadAttachment ? loadAttachment() : null"
>
<video <video
ref="video" ref="video"
preload="none" preload="none"
:poster="attachment.previewUrl" :poster="videoThumbnail"
muted muted
loop loop
playsinline playsinline
@ -134,6 +183,18 @@ const userSettings = useUserSettings()
> >
<source :src="attachment.url || attachment.previewUrl" type="video/mp4"> <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video> </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>
<template v-else-if="type === 'audio'"> <template v-else-if="type === 'audio'">
<audio controls h-15> <audio controls h-15>
@ -149,7 +210,8 @@ const userSettings = useUserSettings()
h-full h-full
w-full w-full
aria-label="Open image preview dialog" 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 <CommonBlurhash
:blurhash="attachment.blurhash" :blurhash="attachment.blurhash"
@ -163,10 +225,24 @@ const userSettings = useUserSettings()
aspectRatio, aspectRatio,
objectPosition, objectPosition,
}" }"
:should-load-image="shouldLoadAttachment"
rounded-lg rounded-lg
h-full h-full
w-full w-full
object-cover 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> </button>
</template> </template>
@ -202,3 +278,11 @@ const userSettings = useUserSettings()
</div> </div>
</div> </div>
</template> </template>
<style lang="postcss">
.status-attachment-load {
left: 50%;
top: 50%;
translate: -50% -50%;
}
</style>

View file

@ -8,6 +8,7 @@ const props = withDefaults(
context?: mastodon.v2.FilterContext context?: mastodon.v2.FilterContext
hover?: boolean hover?: boolean
faded?: boolean faded?: boolean
isPreview?: boolean
// If we know the prev and next status in the timeline, we can simplify the card // If we know the prev and next status in the timeline, we can simplify the card
older?: mastodon.v1.Status older?: mastodon.v1.Status
@ -177,7 +178,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
</div> </div>
<!-- Content --> <!-- 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" /> <StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
</div> </div>
</div> </div>

View file

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

View file

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

View file

@ -28,6 +28,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
video: 'i-ri:play-line', video: 'i-ri:play-line',
rich: 'i-ri:profile-line', rich: 'i-ri:profile-line',
} }
const userSettings = useUserSettings()
const shouldLoadAttachment = ref(!getPreferences(userSettings.value, 'enableDataSaving'))
function loadAttachment() {
shouldLoadAttachment.value = true
}
</script> </script>
<template> <template>
@ -54,6 +61,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
'w-full aspect-[1.91]': !isSquare, 'w-full aspect-[1.91]': !isSquare,
'rounded-lg': root, 'rounded-lg': root,
}" }"
relative
> >
<CommonBlurhash <CommonBlurhash
:blurhash="card.blurhash" :blurhash="card.blurhash"
@ -61,8 +69,30 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
:width="card.width" :width="card.width"
:height="card.height" :height="card.height"
:alt="alt" :alt="alt"
:should-load-image="shouldLoadAttachment"
w-full h-full object-cover 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>
<div <div
v-else 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" /> <StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
</NuxtLink> </NuxtLink>
</template> </template>
<style lang="postcss">
.status-preview-card-load {
left: 50%;
top: 50%;
translate: -50% -50%;
}
</style>

View file

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

View file

@ -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] { 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) { export function togglePreferences(key: keyof PreferencesSettings) {

View file

@ -402,6 +402,8 @@
"notifications_settings": "Notifications", "notifications_settings": "Notifications",
"preferences": { "preferences": {
"enable_autoplay": "Enable Autoplay", "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", "enable_pinch_to_zoom": "Enable pinch to zoom",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"grayscale_mode": "Grayscale mode", "grayscale_mode": "Grayscale mode",

View file

@ -29,10 +29,20 @@ const userSettings = useUserSettings()
</SettingsToggleItem> </SettingsToggleItem>
<SettingsToggleItem <SettingsToggleItem
:checked="getPreferences(userSettings, 'enableAutoplay')" :checked="getPreferences(userSettings, 'enableAutoplay')"
:disabled="getPreferences(userSettings, 'enableDataSaving')"
@click="togglePreferences('enableAutoplay')" @click="togglePreferences('enableAutoplay')"
> >
{{ $t('settings.preferences.enable_autoplay') }} {{ $t('settings.preferences.enable_autoplay') }}
</SettingsToggleItem> </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 <SettingsToggleItem
:checked="getPreferences(userSettings, 'enablePinchToZoom')" :checked="getPreferences(userSettings, 'enablePinchToZoom')"
@click="togglePreferences('enablePinchToZoom')" @click="togglePreferences('enablePinchToZoom')"