feat: use blurHash when loading list backgrounds (#1188)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1188

package.json

@@ -26,6 +26,7 @@
     "@vue/compat": "3.2.31",
     "@vueuse/core": "8.2.3",
     "@vueuse/router": "8.2.3",
+    "blurhash": "^1.1.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.2",

src/components/home/contentAuth.vue

@@ -1,17 +1,21 @@
 <template>
-	<div>
+	<div class="content-auth" :class="{'modal-active': modalActive}">
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
 			class="menu-hide-button"
 		>
-			<icon icon="times" />
+			<icon icon="times"/>
 		</BaseButton>
 		<div
-			:class="{'has-background': background}"
+			:class="{'has-background': background || blurHash}"
-			:style="{'background-image': background && `url(${background})`}"
+			:style="{'background-image': blurHash && `url(${blurHash})`}"
 			class="app-container"
 		>
+			<div
+				:class="{'is-visible': background}"
+				class="app-container-background background-fade-in"
+				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
 			<main
 				:class="[
@@ -31,7 +35,7 @@
 
 				<router-view :route="routeWithModal" v-slot="{ Component }">
 					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
-						<component :is="Component" />
+						<component :is="Component"/>
 					</keep-alive>
 				</router-view>
 
@@ -42,7 +46,7 @@
 						variant="scrolling"
 						class="task-detail-view-modal"
 					>
-						<component :is="currentModal" />
+						<component :is="currentModal"/>
 					</modal>
 				</transition>
 
@@ -115,16 +119,17 @@ function useRouteWithModal() {
 		}
 	}
 
-	return { routeWithModal, currentModal, closeModal }
+	return {routeWithModal, currentModal, closeModal}
 }
 
-const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
-
 
 const store = useStore()
 
 const background = computed(() => store.state.background)
+const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
+const modalActive = computed(() => store.state.modalActive)
 
 function showKeyboardShortcuts() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
@@ -235,6 +240,8 @@ store.dispatch('labels/loadAllLabels')
 
 	.app-content {
 		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+		z-index: 10;
+		position: relative;
 
 		// Used to make sure the spinner is always in the middle while loading
 		> .loader-container {
@@ -296,5 +303,14 @@ store.dispatch('labels/loadAllLabels')
 	}
 }
 
+.content-auth {
+	position: relative;
+	z-index: 1;
+
+	&.modal-active {
+		z-index: unset;
+	}
+}
+
 @include modal-transition();
 </style>

src/components/list/partials/list-card.vue

@@ -2,16 +2,21 @@
 	<router-link
 		:class="{
 			'has-light-text': !colorIsDark(list.hexColor),
-			'has-background': background !== null
+			'has-background': blurHashUrl !== ''
 		}"
 		:style="{
 			'background-color': list.hexColor,
-			'background-image': background !== null ? `url(${background})` : false,
+			'background-image': blurHashUrl !== null ? `url(${blurHashUrl})` : false,
 		}"
 		:to="{ name: 'list.index', params: { listId: list.id} }"
 		class="list-card"
 		v-if="list !== null && (showArchived ? true : !list.isArchived)"
 	>
+		<div
+			class="list-background background-fade-in"
+			:class="{'is-visible': background}"
+			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+		<div class="list-content">
 			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
 				{{ $t('namespace.archived') }}
@@ -20,10 +25,11 @@
 					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
 					@click.stop="toggleFavoriteList(list)"
 					class="favorite">
-				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
+				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
 			</span>
 			</div>
 			<div class="title">{{ list.title }}</div>
+		</div>
 	</router-link>
 </template>
 
@@ -32,12 +38,14 @@ import {PropType, ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import ListModel from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
+const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
@@ -50,13 +58,18 @@ const props = defineProps({
 	},
 })
 
-watch(props.list, loadBackground, { immediate: true })
+watch(props.list, loadBackground, {immediate: true})
 
 async function loadBackground() {
 	if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) {
 		return
 	}
 
+	const blurHash = await getBlobFromBlurHash(props.list.backgroundBlurHash)
+	if (blurHash) {
+		blurHashUrl.value = window.URL.createObjectURL(blurHash)
+	}
+
 	backgroundLoading.value = true
 
 	const listService = new ListService()
@@ -86,14 +99,34 @@ function toggleFavoriteList(list: ListModel) {
 	height: $list-height;
 	background: var(--white);
 	margin: 0 $list-spacing $list-spacing 0;
-  padding: 1rem;
 	border-radius: $radius;
 	box-shadow: var(--shadow-sm);
 	transition: box-shadow $transition;
+	position: relative;
+	overflow: hidden;
 
-  display: flex;
+	&.has-light-text .title {
-  justify-content: space-between;
+		color: var(--light);
-  flex-wrap: wrap;
+	}
+
+	&.has-background, .list-background {
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	&.has-background .list-content .title {
+		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
+		color: var(--white);
+	}
+
+	.list-background {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
 
 	&:hover {
 		box-shadow: var(--shadow-md);
@@ -141,6 +174,15 @@ function toggleFavoriteList(list: ListModel) {
 		}
 	}
 
+	.list-content {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 1rem;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+
 		.is-archived-container {
 			width: 100%;
 			text-align: right;
@@ -168,21 +210,6 @@ function toggleFavoriteList(list: ListModel) {
 			-webkit-box-orient: vertical;
 		}
 
-  &.has-light-text .title {
-    color: var(--light);
-  }
-
-  &.has-background {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    .title {
-      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
-      color: var(--white);
-    }
-  }
-
 		.favorite {
 			transition: opacity $transition, color $transition;
 			opacity: 0;
@@ -205,5 +232,7 @@ function toggleFavoriteList(list: ListModel) {
 		&:hover .favorite {
 			opacity: 1;
 		}
+
+	}
 }
 </style>

src/components/modal/modal.vue

@@ -64,6 +64,9 @@
 import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
+import {useStore} from 'vuex'
+
+const store = useStore()
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -86,6 +89,7 @@ watch(
 	() => props.enabled,
 	enabled => {
 		scrollLock.value = enabled
+		store.commit('modalActive', enabled)
 	},
 	{
 		immediate: true,

src/helpers/getBlobFromBlurHash.ts

@@ -0,0 +1,31 @@
+import {decode} from 'blurhash'
+
+export async function getBlobFromBlurHash(blurHash: string): Promise<Blob | null> {
+	if (blurHash === '') {
+		return null
+	}
+
+	const pixels = decode(blurHash, 32, 32)
+	const canvas = document.createElement('canvas')
+	canvas.width = 32
+	canvas.height = 32
+	const ctx = canvas.getContext('2d')
+	if (ctx === null) {
+		return null
+	}
+	
+	const imageData = ctx.createImageData(32, 32)
+	imageData.data.set(pixels)
+	ctx.putImageData(imageData, 0, 0)
+
+	return new Promise<Blob>((resolve, reject) => {
+		canvas.toBlob(b => {
+			if (b === null) {
+				reject(b)
+				return
+			}
+
+			resolve(b)
+		})
+	})
+}

src/models/backgroundImage.js

@@ -7,6 +7,7 @@ export default class BackgroundImageModel extends AbstractModel {
 			url: '',
 			thumb: '',
 			info: {},
+			blurHash: '',
 		}
 	}
 }

src/models/list.js

@@ -20,7 +20,7 @@ export default class ListModel extends AbstractModel {
 
 		this.owner = new UserModel(this.owner)
 
-		if(typeof this.subscription !== 'undefined' && this.subscription !== null) {
+		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
@@ -44,6 +44,7 @@ export default class ListModel extends AbstractModel {
 			isFavorite: false,
 			subscription: null,
 			position: 0,
+			backgroundBlurHash: '',
 
 			created: null,
 			updated: null,

src/store/index.js

@@ -1,6 +1,8 @@
 import {createStore} from 'vuex'
+import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
 import {
 	BACKGROUND,
+	BLUR_HASH,
 	CURRENT_LIST,
 	HAS_TASKS,
 	KEYBOARD_SHORTCUTS_ACTIVE,
@@ -44,10 +46,12 @@ export const store = createStore({
 			isArchived: false,
 		}),
 		background: '',
+		blurHash: '',
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
+		modalActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -83,6 +87,12 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
+		[BLUR_HASH](state, blurHash) {
+			state.blurHash = blurHash
+		},
+		modalActive(state, active) {
+			state.modalActive = active
+		},
 	},
 	actions: {
 		async [CURRENT_LIST]({state, commit}, currentList) {
@@ -90,6 +100,7 @@ export const store = createStore({
 			if (currentList === null) {
 				commit(CURRENT_LIST, {})
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 				return
 			}
 
@@ -122,10 +133,15 @@ export const store = createStore({
 			) {
 				if (currentList.backgroundInformation) {
 					try {
+						const blurHash = await getBlobFromBlurHash(currentList.backgroundBlurHash)
+						if (blurHash) {
+							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
+						}
+
 						const listService = new ListService()
 						const background = await listService.background(currentList)
 						commit(BACKGROUND, background)
-					} catch(e) {
+					} catch (e) {
 						console.error('Error getting background image for list', currentList.id, e)
 					}
 				}
@@ -133,6 +149,7 @@ export const store = createStore({
 
 			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 			}
 
 			commit(CURRENT_LIST, currentList)

src/store/mutation-types.js

@@ -6,6 +6,6 @@ export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
 export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
 export const BACKGROUND = 'background'
+export const BLUR_HASH = 'blurHash'
 
 export const CONFIG = 'config'
-export const AUTH = 'auth'

src/styles/theme/background.scss

@@ -1,10 +1,14 @@
 .app-container.has-background,
 .link-share-container.has-background {
+  position: relative;
+
+  &, .app-container-background {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     min-height: 100vh;
+  }
 
   // FIXME: move to pagination component
   .pagination-link:not(.is-current) {
@@ -33,3 +37,20 @@
     }
   }
 }
+
+.app-container-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 0;
+}
+
+.background-fade-in {
+  opacity: 0;
+  transition: opacity $transition;
+  transition-delay: $transition-duration * 2; // To fake an appearing background
+
+  &.is-visible {
+    opacity: 1;
+  }
+}

src/views/list/ListWrapper.vue

@@ -55,7 +55,7 @@ import Message from '@/components/misc/message.vue'
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 
-import {BACKGROUND, CURRENT_LIST} from '@/store/mutation-types'
+import {BACKGROUND, BLUR_HASH, CURRENT_LIST} from '@/store/mutation-types'
 
 import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
@@ -145,6 +145,7 @@ async function loadList(listIdToLoad: number) {
 	const listFromStore = store.getters['lists/getListById'](listData.id)
 	if (listFromStore !== null) {
 		store.commit(BACKGROUND, null)
+		store.commit(BLUR_HASH, null)
 		store.commit(CURRENT_LIST, listFromStore)
 	}
 

src/views/list/settings/background.vue

@@ -35,16 +35,25 @@
 				v-model="backgroundSearchTerm"
 			/>
 			<p class="unsplash-link">
-				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">{{ $t('list.background.poweredByUnsplash') }}</a>
+				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">
+					{{ $t('list.background.poweredByUnsplash') }}
+				</a>
 			</p>
 			<div class="image-search-result">
 				<a
 					:key="im.id"
-					:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
+					:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
 					@click="() => setBackground(im.id)"
 					class="image"
 					v-for="im in backgroundSearchResult">
-					<a :href="`https://unsplash.com/@${im.info.author}`" rel="noreferrer noopener nofollow" target="_blank" class="info">
+					<transition name="fade">
+						<img :src="backgroundThumbs[im.id]" alt="" v-if="backgroundThumbs[im.id]"/>
+					</transition>
+					<a
+						:href="`https://unsplash.com/@${im.info.author}`"
+						rel="noreferrer noopener nofollow"
+						target="_blank"
+						class="info">
 						{{ im.info.authorName }}
 					</a>
 				</a>
@@ -65,6 +74,8 @@
 
 <script>
 import {mapState} from 'vuex'
+import {getBlobFromBlurHash} from '../../../helpers/getBlobFromBlurHash'
+
 import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
 import BackgroundUploadService from '../../../services/backgroundUpload'
 import ListService from '@/services/list'
@@ -83,6 +94,7 @@ export default {
 			backgroundSearchTerm: '',
 			backgroundSearchResult: [],
 			backgroundThumbs: {},
+			backgroundBlurHashes: {},
 			currentPage: 1,
 
 			// We're using debounce to not search on every keypress but with a delay.
@@ -120,8 +132,16 @@ export default {
 			this.currentPage = page
 			const result = await this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
 			this.backgroundSearchResult = this.backgroundSearchResult.concat(result)
-			result.forEach(async background => {
+			result.forEach(background => {
-				this.backgroundThumbs[background.id] = await this.backgroundService.thumb(background)
+				getBlobFromBlurHash(background.blurHash)
+					.then(b => {
+						this.backgroundBlurHashes[background.id] = window.URL.createObjectURL(b)
+					})
+
+				this.backgroundService.thumb(background)
+					.then(b => {
+						this.backgroundThumbs[background.id] = b
+					})
 			})
 		},
 
@@ -186,6 +206,7 @@ export default {
 			background-size: cover;
 			background-position: center;
 			display: flex;
+			position: relative;
 
 			@media screen and (min-width: $desktop) {
 				&:nth-child(5n) {
@@ -229,6 +250,11 @@ export default {
 				font-weight: bold;
 				color: var(--white);
 				transition: opacity $transition;
+				position: absolute;
+			}
+
+			img {
+				object-fit: cover;
 			}
 
 			&:hover .info {

yarn.lock

@@ -4217,6 +4217,11 @@ blueimp-md5@^2.10.0:
   resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
   integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
 
+blurhash@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.4.tgz#a7010ceb3019cd2c9809b17c910ebf6175d29244"
+  integrity sha512-MXIPz6zwYUKayju+Uidf83KhH0vodZfeRl6Ich8Gu+KGl0JgKiFq9LsfqV7cVU5fKD/AotmduZqvOfrGKOfTaA==
+
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"