zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: data saving mode (#1638)

zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/common/CommonBlurhash.vue
View File

@ -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>

4
components/publish/PublishAttachment.vue
View File

@ -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>

2
components/publish/PublishWidget.vue
View File

@ -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>

8
components/settings/SettingsToggleItem.vue
View File

@ -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>

158
components/status/StatusAttachment.vue
View File

@ -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>

3
components/status/StatusCard.vue
View File

@ -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>

2
components/status/StatusContent.vue
View File

@ -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"

4
components/status/StatusMedia.vue
View File

@ -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>

38
components/status/StatusPreviewCardNormal.vue
View File

@ -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>

2
composables/settings/definition.ts
View File

@ -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,

7
composables/settings/storage.ts
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] {
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) {

2
locales/en.json
View File

@ -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",

10
pages/settings/preferences/index.vue
View File

@ -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')"