feat(backdrop): add backdrop support

A component has been added to the default layout, which displays a blurhash from a Vuex store. The
Vuex store can either set or clear backdrops. To set a backdrop, you must pass a BaseItemDto[] in
order to retrieve the relevant images.

components/Backdrop.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="backdrop">
+    <v-fade-transition>
+      <blurhash-canvas
+        v-if="blurhash"
+        :hash="blurhash"
+        :width="32"
+        :height="18"
+      />
+    </v-fade-transition>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    blurhash() {
+      if (this.$store.state.backdrop.blurhash) {
+        return this.$store.state.backdrop.blurhash;
+      }
+
+      return false;
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+.backdrop {
+  & canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+}
+</style>

layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-app dark>
+  <v-app ref="app">
+    <backdrop />
     <v-navigation-drawer v-model="drawer" :clipped="clipped" fixed app>
       <v-list>
         <v-list-item

layouts/fullpage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app dark>
+  <v-app>
     <v-main>
       <nuxt />
     </v-main>

pages/item/_itemId/index.vue

@@ -54,21 +54,26 @@ export default Vue.extend({
       backdropImageSource: ''
     };
   },
-
   async beforeMount() {
-    const Item = (
+    const items = (
       await this.$itemsApi.getItems({
         uId: this.$auth.user.Id,
         userId: this.$auth.user.Id,
         ids: this.$route.params.itemId,
         fields: 'Overview,Genres'
       })
-    ).data.Items as BaseItemDto[];
+    ).data.Items;
 
-    this.item = Item[0];
+    if (items) {
+      this.$store.dispatch('backdrop/set', { item: items[0] });
+      this.item = items[0];
+    }
 
     this.updateBackdropImage();
   },
+  destroyed() {
+    this.$store.dispatch('backdrop/clear');
+  },
   methods: {
     getAspectRatio() {
       return window.innerWidth / window.innerHeight;

store/backdrop.ts

@@ -0,0 +1,39 @@
+import { ActionTree, GetterTree, MutationTree } from 'vuex';
+
+export interface BackdropState {
+  blurhash: string;
+}
+
+export const state = (): BackdropState => ({
+  blurhash: ''
+});
+
+export const getters: GetterTree<BackdropState, BackdropState> = {
+  getBackdropBlurhash: (state: BackdropState) => state.blurhash
+};
+
+export const mutations: MutationTree<BackdropState> = {
+  SET_CURRENT_BACKDROP(state: BackdropState, newBlurhash: string) {
+    state.blurhash = newBlurhash;
+  },
+  CLEAR_CURRENT_BACKDROP(state: BackdropState) {
+    state.blurhash = '';
+  }
+};
+
+export const actions: ActionTree<BackdropState, BackdropState> = {
+  set({ commit }, { item }) {
+    let hash: string;
+
+    if (item.ImageBlurHashes.Backdrop && item.BackdropImageTags) {
+      hash = item.ImageBlurHashes?.Backdrop[item.BackdropImageTags[0]];
+    } else {
+      hash = '';
+    }
+
+    commit('SET_CURRENT_BACKDROP', hash);
+  },
+  clear({ commit }) {
+    commit('CLEAR_CURRENT_BACKDROP');
+  }
+};