Use gunicorn instead of Werkzeug and 32 more very minor changes (#35)

package.json

@@ -9,8 +9,9 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "mitt": "^3.0.0",
+    "node-vibrant": "^3.2.1-alpha.1",
     "pinia": "^2.0.11",
     "register-service-worker": "^1.7.1",
     "sass": "^1.49.0",

server/app/__init__.py

@@ -1,7 +1,6 @@
 from flask import Flask
-from flask_cors import CORS
-
 from flask_caching import Cache
+from flask_cors import CORS
 
 config = {"CACHE_TYPE": "SimpleCache", "CACHE_DEFAULT_TIMEOUT": 300}
 
@@ -19,7 +18,7 @@ def create_app():
     cache.init_app(app)
 
     with app.app_context():
-        from app.api import artist, track, search, folder, album, playlist
+        from app.api import album, artist, folder, playlist, search, track
 
         app.register_blueprint(album.album_bp, url_prefix="/")
         app.register_blueprint(artist.artist_bp, url_prefix="/")
@@ -28,5 +27,4 @@ def create_app():
         app.register_blueprint(folder.folder_bp, url_prefix="/")
         app.register_blueprint(playlist.playlist_bp, url_prefix="/")
 
-
         return app

server/app/api/album.py

@@ -1,12 +1,13 @@
 """
 Contains all the album routes.
 """
-
-from flask import Blueprint, request
 from app import api
-from app import helpers, cache
 from app import functions
-from app.lib import albumslib, trackslib
+from app import helpers
+from app.lib import albumslib
+from app.lib import trackslib
+from flask import Blueprint
+from flask import request
 
 album_bp = Blueprint("album", __name__, url_prefix="")
 

server/app/lib/playlistlib.py

@@ -4,6 +4,7 @@ This library contains all the functions related to playlists.
 import os
 import random
 import string
+from datetime import datetime
 
 from app import api
 from app import exceptions
@@ -55,6 +56,7 @@ def create_all_playlists():
     playlists = instances.playlist_instance.get_all_playlists()
 
     _bar = Bar("Creating playlists", max=len(playlists))
+
     for playlist in playlists:
         api.PLAYLISTS.append(models.Playlist(playlist))
 
@@ -132,3 +134,7 @@ def validate_images():
     for image in os.listdir(p_path):
         if image not in images:
             os.remove(os.path.join(p_path, image))
+
+
+def create_new_date():
+    return datetime.now()

server/app/serializer.py

@@ -4,16 +4,17 @@ from datetime import datetime
 from app import models
 
 
-def date_string_to_time_passed(dstring: str) -> str:
+def date_string_to_time_passed(prev_date: str) -> str:
     """
     Converts a date string to time passed. eg. 2 minutes ago, 1 hour ago, yesterday, 2 days ago, 2 weeks ago, etc.
     """
 
     now = datetime.now()
-    then = datetime.strptime(dstring, "%Y-%m-%d %H:%M:%S")
+    then = datetime.strptime(prev_date, "%Y-%m-%d %H:%M:%S")
 
     diff = now - then
     days = diff.days
+    print(days)
 
     if days < 0:
         return "in the future"
@@ -32,22 +33,19 @@ def date_string_to_time_passed(dstring: str) -> str:
     elif days == 1:
         return "yesterday"
     elif days < 7:
-        if days == 1:
-            return "1 day ago"
-
         return str(days) + " days ago"
     elif days < 30:
-        if days == 7:
+        if days < 14:
             return "1 week ago"
 
         return str(days // 7) + " weeks ago"
     elif days < 365:
-        if days == 30:
+        if days < 60:
             return "1 month ago"
 
         return str(days // 30) + " months ago"
     elif days > 365:
-        if days == 365:
+        if days < 730:
             return "1 year ago"
 
         return str(days // 365) + " years ago"

server/start.sh

@@ -1,9 +1,8 @@
+# ppath=$(poetry run which python)
 
-ppath=$(poetry run which python)
+# $ppath manage.py
-
-$ppath manage.py
-
 
 #python manage.py
+gpath=$(poetry run which gunicorn)
 
-# gunicorn -b 0.0.0.0:9876 --workers=4 "wsgi:create_app()" --log-level=debug
+"$gpath" -b 0.0.0.0:9876 -w 1 --threads=4 "manage:create_app()" #--log-level=debug

src/App.vue

@@ -9,9 +9,9 @@
           ><div class="logo"></div
         ></router-link>
       </div>
-      <Navigation :collapsed="collapsed" />
+      <Navigation />
       <div class="l-album-art">
-        <nowPlaying :collapsed="collapsed" />
+        <nowPlaying />
       </div>
     </div>
     <NavBar />
@@ -40,6 +40,7 @@ import ContextMenu from "./components/contextMenu.vue";
 import Modal from "./components/modal.vue";
 import Notification from "./components/Notification.vue";
 import useQStore from "./stores/queue";
+import shortcuts from "./composables/keyboard";
 
 const context_store = useContextStore();
 const queue = useQStore();
@@ -48,7 +49,7 @@ queue.readQueueFromLocalStorage();
 
 const RightSideBar = Main;
 
-const collapsed = ref(false);
+shortcuts(queue);
 
 const app_dom = document.getElementById("app");
 

src/components/AlbumView/Header.vue

@@ -32,9 +32,16 @@ import perks from "../../composables/perks.js";
 import { AlbumInfo } from "../../interfaces.js";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { playSources } from "../../composables/enums";
+
 const props = defineProps<{
   album: AlbumInfo;
 }>();
+
+function extrackColors() {
+
+}
+
+extrackColors();
 </script>
 
 <style lang="scss">
@@ -47,9 +54,9 @@ const props = defineProps<{
   grid-template-columns: 15rem 1fr;
   padding: 1rem;
   height: 100%;
-  background-color: $gray4;
+  background-color: $black;
-  background-image: linear-gradient(37deg, $black 20%, $gray5, $black 90%);
+  background-color: #000000;
-
+  background-image: linear-gradient(147deg, #436a91 0%, #2c3e50 74%);
   .art {
     width: 100%;
     height: 100%;

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" v-if="props.tracks.length">
+    <div class="table rounded" v-if="tracks.length">
       <div class="thead">
         <div class="index"></div>
         <div class="track-header">Track</div>
@@ -10,7 +10,7 @@
       </div>
       <div class="songlist">
         <SongItem
-          v-for="(song, index) in props.tracks"
+          v-for="(song, index) in tracks"
           :key="song.trackid"
           :song="song"
           :index="index + 1"
@@ -20,7 +20,7 @@
         />
       </div>
     </div>
-    <div v-else-if="props.tracks.length === 0 && search_query">
+    <div v-else-if="tracks.length === 0 && search_query">
       <div class="no-results">
         <div class="text">Nothing down here 😑</div>
       </div>
@@ -49,9 +49,13 @@ const props = defineProps<{
 let route = useRoute().name;
 const search_query = state.search_query;
 
+/**
+ * Plays a clicked track and updates the queue
+ *
+ * @param track Track object
+ */
 function updateQueue(track: Track) {
   switch (route) {
-    // check which route the play request come from
     case "FolderView":
       queue.playFromFolder(props.path, props.tracks);
       queue.play(track);

src/components/LeftSidebar/SongCard.vue

@@ -11,10 +11,10 @@
           ></div>
         </div>
         <div id="bitrate">
-          <span v-if="track.bitrate > 330"
+          <span v-if="track.bitrate > 1500">MASTER</span>
-            >FLAC • {{ track.bitrate }}</span
+          <span v-else-if="track.bitrate > 330">FLAC</span>
-          >
+          <span v-else>MP3</span>
-          <span v-else>MP3 | {{ track.bitrate }}</span>
+          • {{ track.bitrate }}
         </div>
         <div class="title ellip">{{ props.track.title }}</div>
         <div class="separator no-border"></div>

src/components/LeftSidebar/nowPlaying.vue

@@ -84,7 +84,7 @@ const queue = useQStore();
     position: absolute;
     font-size: 0.75rem;
     width: max-content;
-    padding: 0.2rem;
+    padding: 0.2rem .35rem;
     top: 13.25rem;
     left: 1.5rem;
     background-color: $black;

src/components/Notification.vue

@@ -10,7 +10,7 @@
       ]"
       v-for="notif in notifStore.notifs"
     >
-      <div>{{ notif.text }}</div>
+      <div class="ellip">{{ notif.text }}</div>
     </div>
   </div>
 </template>

src/components/PlaylistView/Header.vue

@@ -30,7 +30,7 @@
     </div>
     <div class="last-updated">
       <span class="status"
-        >Last updated {{ props.info.lastUpdated }} |&#160;</span
+        >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
       >
       <span class="edit" @click="editPlaylist">Edit</span>
     </div>

src/components/RightSideBar/Search.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="right-search">
     <Options />
-    <!-- </div> -->
     <div class="scrollable" ref="search_thing">
       <TracksGrid
         v-if="tracks.tracks.length"
         :more="tracks.more"
         :tracks="tracks.tracks"
+        :query="search.query"
         @loadMore="loadMoreTracks"
       />
       <div class="separator no-border" v-if="tracks.tracks.length"></div>
@@ -49,8 +49,7 @@
 
 <script setup>
 import { reactive, ref } from "@vue/reactivity";
-
+import state from "../../composables/state";
-import state from "@/composables/state";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
 import AlbumGrid from "@/components/Search/AlbumGrid.vue";
@@ -83,8 +82,6 @@ const artists = reactive({
   more: false,
 });
 
-const query = useDebouncedRef("", 600);
-
 function scrollSearchThing() {
   search_thing.value.scroll({
     top: search_thing.value.scrollTop + 330,

src/components/RightSideBar/SearchInput.vue

@@ -6,13 +6,10 @@
         id="search"
         class="rounded"
         v-model="search.query"
-        placeholder="Search"
+        placeholder="Search your library"
         type="text"
         @keyup.backspace="removeLastFilter"
       />
-      <div class="_loader">
-        <Loader />
-      </div>
     </div>
   </div>
 </template>
@@ -68,23 +65,15 @@ function removeLastFilter() {
       align-items: center;
       width: 100%;
       border: none;
-      border: solid 1px $primary;
       line-height: 2.25rem;
-      background-color: transparent;
+      background-color: $gray5;
-      color: rgb(255, 255, 255);
+      color: inherit;
       font-size: 1rem;
-      outline: none;
-      transition: all 0.5s ease;
       padding-left: 0.75rem;
+      outline: 2px solid transparent;
 
       &:focus {
-        transition: all 0.5s ease;
+        outline: solid $accent;
-        color: rgb(255, 255, 255);
-        outline: none;
-
-        &::placeholder {
-          display: none;
-        }
       }
     }
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -1,54 +1,59 @@
 <template>
   <div id="playing-from" class="rounded" @click="goTo">
     <div class="h">
-      <div class="icon image" :class="from.type"></div>
+      <div class="icon image" :class="from.icon"></div>
      Playing from
     </div>
     <div class="name">
       <div id="to">
-        {{ from.name }}
+        {{ from.text }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { fromFolder, fromAlbum, fromPlaylist } from "../../../interfaces";
+import { fromFolder, fromAlbum, fromPlaylist, fromSearch } from "../../../interfaces";
 import { FromOptions } from "../../../composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 
 const props = defineProps<{
-  from: fromFolder | fromAlbum | fromPlaylist;
+  from: fromFolder | fromAlbum | fromPlaylist | fromSearch;
 }>();
 
 interface from {
-  type: string;
+  icon: string;
-  name: string;
+  text: string;
 }
 
 const from = computed((): from => {
   switch (props.from.type) {
     case undefined:
       return {
-        type: "album",
+        icon: "album",
-        name: "Welcome to Alice",
+        text: "Welcome to Alice",
       };
     case FromOptions.folder:
       return {
-        type: "folder",
+        icon: "folder",
-        name: props.from.name,
+        text: props.from.name,
       };
     case FromOptions.album:
       return {
-        type: "album",
+        icon: "album",
-        name: props.from.name,
+        text: props.from.name,
       };
     case FromOptions.playlist:
       return {
-        type: "playlist",
+        icon: "playlist",
-        name: props.from.name,
+        text: props.from.name,
       };
+    case FromOptions.search:
+      return {
+        icon: "search",
+        text: `Search results for: "${props.from.query}"`
+      }
   }
 });
 

src/components/Search/LoadMore.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="">
+    <div @click="loadMore" class="btn circular">
       <div class="text">Load More</div>
-    </button>
+    </div>
   </div>
 </template>
 
@@ -22,19 +22,18 @@ function loadMore() {
   place-items: center;
   margin-top: $small;
 
-  button {
+  .btn {
-    border-radius: 1.5rem;
     height: 2.5rem;
     width: 15rem;
     display: grid;
+    place-items: center;
     transition: all 0.5s ease;
-    color: rgba(255, 255, 255, 0.87) !important;
+    background-image: linear-gradient(37deg, $red, $blue);
-    background-color: $accent;
+    cursor: pointer;
-    // border: solid 1px $gray;
 
     &:hover {
       background-color: $blue !important;
-      width: 50%;
+      width: 12rem;
     }
   }
 }

src/components/Search/TracksGrid.vue

@@ -1,40 +1,35 @@
 <template>
   <div class="tracks-results" v-if="tracks">
     <div class="heading">Tracks</div>
-    <div class="items">
+    <TransitionGroup class="items" name="list">
-      <table>
-        <tbody>
       <TrackItem
-            v-for="track in props.tracks"
+        v-for="track in tracks"
         :key="track.trackid"
         :track="track"
         :isPlaying="queue.playing"
         :isCurrent="queue.current.trackid == track.trackid"
+        :isSearchTrack="true"
+        @PlayThis="updateQueue"
       />
-        </tbody>
+    </TransitionGroup>
-      </table>
     <LoadMore v-if="more" @loadMore="loadMore" />
   </div>
-  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../shared/TrackItem.vue";
 import useQStore from "../../stores/queue";
+import { Track } from "../../interfaces";
 
 let counter = 0;
 const queue = useQStore();
-const props = defineProps({
+
-  tracks: {
+const props = defineProps<{
-    type: Object,
+  tracks: Track[];
-    required: true,
+  more: boolean;
-  },
+  query: string;
-  more: {
+}>();
-    type: Boolean,
-    required: true,
-  },
-});
 
 const emit = defineEmits(["loadMore"]);
 
@@ -42,6 +37,12 @@ function loadMore() {
   counter += 5;
   emit("loadMore", counter);
 }
+
+function updateQueue(track: Track) {
+  console.log(props.query);
+  queue.playFromSearch(props.query, props.tracks);
+  queue.play(track);
+}
 </script>
 
 <style lang="scss">
@@ -49,6 +50,16 @@ function loadMore() {
   border-radius: 0.5rem;
   padding: $small;
   border: 1px solid $gray3;
-  // background: ;
+
+  .list-enter-active,
+  .list-leave-active {
+    transition: all 0.5s ease;
+    transition-delay: 0.5s;
+  }
+  .list-enter-from,
+  .list-leave-to {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
 }
 </style>

src/components/nav/NavBar.vue

@@ -11,6 +11,8 @@
           <div class="play">
             <PlayBtnRect />
           </div>
+          <Option v-if="$route.name === 'FolderView'" />
+
           <div class="fname">
             <div class="icon image"></div>
             <div class="ellip">
@@ -35,6 +37,7 @@ import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import Search from "./Search.vue";
+import Option from "../shared/Option.vue";
 </script>
 
 <style lang="scss">
@@ -49,7 +52,6 @@ import Search from "./Search.vue";
   .left {
     display: flex;
     align-items: center;
-    gap: $small;
 
     .info {
       .title {
@@ -59,26 +61,32 @@ import Search from "./Search.vue";
 
       .folder {
         display: flex;
-        gap: 1rem;
+        gap: $small;
 
         .playbtnrect {
           height: 2.25rem;
         }
 
+        .drop-btn {
+          width: 2.25rem;
+
+          .drop-icon {
+            height: 2.25rem;
+            width: 2.25rem;
+          }
+        }
+
         .fname {
-          position: relative;
+          padding-left: 0.5rem;
-          padding-left: 2.25rem;
           background-color: $gray4;
           border-radius: $small;
           height: 2.25rem;
           display: flex;
           align-items: center;
           padding-right: $small;
+          gap: 0.25rem;
 
           .icon {
-            position: absolute;
-            left: $small;
-            top: $small;
             width: 1.5rem;
             height: 1.5rem;
             background-image: url("../../assets/icons/folder.fill.svg");
@@ -96,6 +104,8 @@ import Search from "./Search.vue";
 
   .right {
     width: 100%;
+    display: flex;
+    gap: $small;
   }
 }
 </style>

src/components/playlists/PlaylistCard.vue

@@ -91,6 +91,7 @@ const props = defineProps<{
 
     .name {
       text-transform: capitalize;
+      font-weight: 900;
     }
 
     .count {

src/components/shared/Loader.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
+  <div
-    <div v-if="!loading">🦋</div>
+    class="loaderx"
+    :class="{ loader: loader.loading, not_loader: !loader.loading }"
+  >
+    <div v-if="!loader.loading">🦋</div>
   </div>
 </template>
 
 <script setup>
-import state from "@/composables/state";
+import useLoaderStore from "../../stores/loader";
-
+const loader = useLoaderStore();
-const loading = state.loading;
 </script>
 
 <style lang="scss">

src/components/shared/Option.vue

@@ -17,9 +17,8 @@ import { ContextSrc } from "../../composables/enums";
 let elem: DOMRect;
 const clicked = ref(false);
 
-const props = defineProps<{
+defineProps<{
   src?: string;
-  color?: string;
 }>();
 
 const emit = defineEmits<{
@@ -45,7 +44,6 @@ function showDropdown(e: Event) {
 <style lang="scss">
 .drop-btn {
   width: 2.5rem;
-  height: 2.5rem;
   background-color: $accent;
   transition: all 0.5s ease-in-out;
   cursor: pointer;

src/components/shared/SongItem.vue

@@ -20,14 +20,6 @@
       </div>
       <div @click="emitUpdate(props.song)">
         <span class="ellip title">{{ props.song.title }}</span>
-        <div class="artist ellip">
-          <span
-            v-for="artist in perks.putCommas(props.song.artists)"
-            :key="artist"
-          >
-            {{ artist }}
-          </span>
-        </div>
       </div>
     </div>
     <div class="song-artists">
@@ -200,17 +192,6 @@ function emitUpdate(track: Track) {
     .title {
       cursor: pointer;
     }
-
-    .artist {
-      display: none;
-      font-size: 0.8rem;
-      color: rgba(255, 255, 255, 0.719);
-      cursor: pointer;
-
-      @include phone-only {
-        display: unset;
-      }
-    }
   }
 
   td {

src/composables/enums.ts

@@ -22,4 +22,5 @@ export enum ContextSrc {
   PHeader = "PHeader",
   Track = "Track",
   AHeader = "AHeader",
+  FHeader = "FHeader"
 }

src/composables/keyboard.ts

@@ -0,0 +1,78 @@
+import { Store } from "pinia";
+
+let key_down_fired = false;
+
+function focusSearchBox() {
+  const elem = document.getElementById("search");
+
+  elem.focus();
+}
+
+export default function (queue: any) {
+  window.addEventListener("keydown", (e: any) => {
+    let target = e.target;
+    let ctrlKey = e.ctrlKey;
+
+    switch (e.key) {
+      case "ArrowRight":
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+
+        {
+          if (!key_down_fired) {
+            key_down_fired = true;
+
+            setTimeout(() => {
+              key_down_fired = false;
+            }, 1000);
+
+            queue.playNext();
+          }
+        }
+        break;
+
+      case "ArrowLeft":
+        {
+          if (!key_down_fired) {
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+
+            key_down_fired = true;
+
+            queue.playPrev();
+
+            setTimeout(() => {
+              key_down_fired = false;
+            }, 1000);
+          }
+        }
+
+        break;
+
+      case " ":
+        {
+          if (!key_down_fired) {
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+            e.preventDefault();
+            key_down_fired = true;
+
+            queue.playPause();
+          }
+        }
+
+        break;
+
+      case "f": {
+        if (!key_down_fired) {
+          if (!ctrlKey) return;
+          e.preventDefault();
+          focusSearchBox();
+
+          key_down_fired = true;
+        }
+      }
+    }
+  });
+}
+
+window.addEventListener("keyup", () => {
+  key_down_fired = false;
+});

src/composables/perks.js

@@ -35,81 +35,6 @@ function getElem(identifier, type) {
   }
 }
 
-function focusSearchBox() {
-  const elem = getElem("search", "id");
-
-  elem.focus();
-}
-
-let key_down_fired = false;
-
-window.addEventListener("keydown", (e) => {
-  let target = e.target;
-  let ctrlKey = e.ctrlKey;
-
-  switch (e.key) {
-    case "ArrowRight":
-      if (target.tagName === "INPUT") return;
-
-      {
-        if (!key_down_fired) {
-          key_down_fired = true;
-
-          setTimeout(() => {
-            key_down_fired = false;
-          }, 1000);
-
-          // playAudio.playNext();
-        }
-      }
-      break;
-
-    case "ArrowLeft":
-      {
-        if (!key_down_fired) {
-          if (target.tagName === "INPUT") return;
-
-          key_down_fired = true;
-
-          // playAudio.playPrev();
-
-          setTimeout(() => {
-            key_down_fired = false;
-          }, 1000);
-        }
-      }
-
-      break;
-
-    case " ":
-      {
-        if (!key_down_fired) {
-          if (target.tagName === "INPUT") return;
-          e.preventDefault();
-          key_down_fired = true;
-
-          // playAudio.playPause();
-        }
-      }
-
-      break;
-
-    case "f": {
-      if (!key_down_fired) {
-        if (!ctrlKey) return;
-        e.preventDefault();
-        focusSearchBox();
-
-        key_down_fired = true;
-      }
-    }
-  }
-});
-
-window.addEventListener("keyup", () => {
-  key_down_fired = false;
-});
-
 function formatSeconds(seconds) {
   // check if there are arguments
 

src/interfaces.ts

@@ -80,6 +80,11 @@ interface fromPlaylist {
   playlistid: string;
 }
 
+interface fromSearch {
+  type: FromOptions;
+  query: string;
+}
+
 export {
   Track,
   Folder,
@@ -91,4 +96,5 @@ export {
   fromFolder,
   fromAlbum,
   fromPlaylist,
+  fromSearch,
 };

src/stores/album.ts

@@ -21,9 +21,9 @@ export default defineStore("album", {
       this.tracks = tracks.tracks;
       this.info = tracks.info;
       this.artists = artists;
-      this.bio = null;
     },
     fetchBio(title: string, albumartist: string) {
+      this.bio = null;
       getAlbumBio(title, albumartist).then((bio) => {
         this.bio = bio;
       });

src/stores/loader.ts

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+export default defineStore("Loader", {
+  state: () => ({
+    loading: false,
+    duration: 0,
+  }),
+  actions: {
+    startLoading() {
+      this.loading = true;
+      this.duration = new Date().getTime();
+    },
+    stopLoading() {
+      const diff = new Date().getTime() - this.duration;
+      console.log(diff);
+
+      if (diff <= 250) {
+        setTimeout(() => {
+          this.loading = false;
+        }, 250 - diff);
+      } else {
+        this.loading = false;
+      }
+    },
+  },
+});

src/stores/queue.ts

@@ -1,6 +1,12 @@
 import { defineStore } from "pinia";
 import state from "../composables/state";
-import { Track, fromFolder, fromAlbum, fromPlaylist } from "../interfaces";
+import {
+  Track,
+  fromFolder,
+  fromAlbum,
+  fromPlaylist,
+  fromSearch,
+} from "../interfaces";
 import notif from "../composables/mediaNotification";
 import { FromOptions } from "../composables/enums";
 
@@ -181,6 +187,14 @@ export default defineStore("Queue", {
         playlistid: pid,
       };
 
+      this.setNewQueue(tracks);
+    },
+    playFromSearch(query: string, tracks: Track[]) {
+      this.from = <fromSearch>{
+        type: FromOptions.search,
+        query: query,
+      };
+
       this.setNewQueue(tracks);
     },
   },

src/stores/tabs.ts

@@ -13,7 +13,7 @@ export default defineStore("tabs", {
     current: tablist.home,
   }),
   actions: {
-    changeTab(tab) {
+    changeTab(tab: string) {
       if (tab === this.tabs.queue) {
         setTimeout(() => {
           perks.focusCurrent();

src/views/FolderView.vue

@@ -20,19 +20,21 @@ import FolderList from "@/components/FolderView/FolderList.vue";
 
 import useFStore from "../stores/folder";
 import state from "../composables/state";
+import useLoaderStore from "../stores/loader";
 
+const loader = useLoaderStore();
 const FStore = useFStore();
 
 const scrollable = ref(null);
 
 onBeforeRouteUpdate((to) => {
-  state.loading.value = true;
+  loader.startLoading();
   FStore.fetchAll(to.params.path)
     .then(() => {
       scrollable.value.scrollTop = 0;
     })
     .then(() => {
-      state.loading.value = false;
+      loader.stopLoading();
     });
 });
 </script>

yarn.lock

@@ -7,6 +7,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.0.tgz#f0ac33eddbe214e4105363bb17c3341c5ffcc43c"
   integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==
 
+"@babel/runtime@^7.7.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@eslint/eslintrc@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
@@ -36,6 +43,105 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@jimp/bmp@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.16.1.tgz#6e2da655b2ba22e721df0795423f34e92ef13768"
+  integrity sha512-iwyNYQeBawrdg/f24x3pQ5rEx+/GwjZcCXd3Kgc+ZUd+Ivia7sIqBsOnDaMZdKCBPlfW364ekexnlOqyVa0NWg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+    bmp-js "^0.1.0"
+
+"@jimp/core@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/core/-/core-0.16.1.tgz#68c4288f6ef7f31a0f6b859ba3fb28dae930d39d"
+  integrity sha512-la7kQia31V6kQ4q1kI/uLimu8FXx7imWVajDGtwUG8fzePLWDFJyZl0fdIXVCL1JW2nBcRHidUot6jvlRDi2+g==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+    any-base "^1.1.0"
+    buffer "^5.2.0"
+    exif-parser "^0.1.12"
+    file-type "^9.0.0"
+    load-bmfont "^1.3.1"
+    mkdirp "^0.5.1"
+    phin "^2.9.1"
+    pixelmatch "^4.0.2"
+    tinycolor2 "^1.4.1"
+
+"@jimp/custom@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/custom/-/custom-0.16.1.tgz#28b659c59e20a1d75a0c46067bd3f4bd302cf9c5"
+  integrity sha512-DNUAHNSiUI/j9hmbatD6WN/EBIyeq4AO0frl5ETtt51VN1SvE4t4v83ZA/V6ikxEf3hxLju4tQ5Pc3zmZkN/3A==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/core" "^0.16.1"
+
+"@jimp/gif@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/gif/-/gif-0.16.1.tgz#d1f7c3a58f4666482750933af8b8f4666414f3ca"
+  integrity sha512-r/1+GzIW1D5zrP4tNrfW+3y4vqD935WBXSc8X/wm23QTY9aJO9Lw6PEdzpYCEY+SOklIFKaJYUAq/Nvgm/9ryw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+    gifwrap "^0.9.2"
+    omggif "^1.0.9"
+
+"@jimp/jpeg@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/jpeg/-/jpeg-0.16.1.tgz#3b7bb08a4173f2f6d81f3049b251df3ee2ac8175"
+  integrity sha512-8352zrdlCCLFdZ/J+JjBslDvml+fS3Z8gttdml0We759PnnZGqrnPRhkOEOJbNUlE+dD4ckLeIe6NPxlS/7U+w==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+    jpeg-js "0.4.2"
+
+"@jimp/plugin-resize@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-resize/-/plugin-resize-0.16.1.tgz#65e39d848ed13ba2d6c6faf81d5d590396571d10"
+  integrity sha512-u4JBLdRI7dargC04p2Ha24kofQBk3vhaf0q8FwSYgnCRwxfvh2RxvhJZk9H7Q91JZp6wgjz/SjvEAYjGCEgAwQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+
+"@jimp/png@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/png/-/png-0.16.1.tgz#f24cfc31529900b13a2dd9d4fdb4460c1e4d814e"
+  integrity sha512-iyWoCxEBTW0OUWWn6SveD4LePW89kO7ZOy5sCfYeDM/oTPLpR8iMIGvZpZUz1b8kvzFr27vPst4E5rJhGjwsdw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.16.1"
+    pngjs "^3.3.3"
+
+"@jimp/tiff@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/tiff/-/tiff-0.16.1.tgz#0e8756695687d7574b6bc73efab0acd4260b7a12"
+  integrity sha512-3K3+xpJS79RmSkAvFMgqY5dhSB+/sxhwTFA9f4AVHUK0oKW+u6r52Z1L0tMXHnpbAdR9EJ+xaAl2D4x19XShkQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    utif "^2.0.1"
+
+"@jimp/types@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/types/-/types-0.16.1.tgz#0dbab37b3202315c91010f16c31766d35a2322cc"
+  integrity sha512-g1w/+NfWqiVW4CaXSJyD28JQqZtm2eyKMWPhBBDCJN9nLCN12/Az0WFF3JUAktzdsEC2KRN2AqB1a2oMZBNgSQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/bmp" "^0.16.1"
+    "@jimp/gif" "^0.16.1"
+    "@jimp/jpeg" "^0.16.1"
+    "@jimp/png" "^0.16.1"
+    "@jimp/tiff" "^0.16.1"
+    timm "^1.6.1"
+
+"@jimp/utils@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@jimp/utils/-/utils-0.16.1.tgz#2f51e6f14ff8307c4aa83d5e1a277da14a9fe3f7"
+  integrity sha512-8fULQjB0x4LzUSiSYG6ZtQl355sZjxbv8r9PPAuYHzS9sGiSHJQavNqK/nKnpDsVkU88/vRGcE7t3nMU0dEnVw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    regenerator-runtime "^0.13.3"
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -67,6 +173,104 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.14.tgz#33b9b94f789a8fedd30a68efdbca4dbb06b61f20"
   integrity sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==
 
+"@types/node@16.9.1":
+  version "16.9.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
+  integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
+
+"@types/node@^10.12.18":
+  version "10.17.60"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
+  integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
+
+"@vibrant/color@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/color/-/color-3.2.1-alpha.1.tgz#1bcee4545d2276d36f9a1acb42ab3485a9b489ec"
+  integrity sha512-cvm+jAPwao2NerTr3d1JttYyLhp3eD/AQBeevxF7KT6HctToWZCwr2AeTr003/wKgbjzdOV1qySnbyOeu+R+Jw==
+
+"@vibrant/core@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/core/-/core-3.2.1-alpha.1.tgz#9adff0835b5c750be3386ec01669d2a8d6389fdb"
+  integrity sha512-X9Oa9WfPEQnZ6L+5dLRlh+IlsxJkYTw9b/g3stFKoNXbVRKCeXHmH48l7jIBBOg3VcXOGUdsYBqsTwPNkIveaA==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/generator" "^3.2.1-alpha.1"
+    "@vibrant/image" "^3.2.1-alpha.1"
+    "@vibrant/quantizer" "^3.2.1-alpha.1"
+    "@vibrant/types" "^3.2.1-alpha.1"
+    "@vibrant/worker" "^3.2.1-alpha.1"
+
+"@vibrant/generator-default@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/generator-default/-/generator-default-3.2.1-alpha.1.tgz#70ae71ea1f72d3e71aa6b244830d01ecae1d755a"
+  integrity sha512-BWnQhDaz92UhyHnpdAzKXHQecY+jvyMXtzjKYbveFxThm6+HVoLjwONlbck7oyOpFzV2OM7V11XuR85BxaHvjw==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/generator" "^3.2.1-alpha.1"
+
+"@vibrant/generator@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/generator/-/generator-3.2.1-alpha.1.tgz#887b36f7ed978ff94c93cc8a3ac742ce769b6112"
+  integrity sha512-luS5YvMhwMqG01YTj1dJ+cmkuIw1VCByOR6zIaCOwQqI/mcOs88JBWcA1r2TywJTOPlVpjfnDvAlyaKBKh4dMA==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/types" "^3.2.1-alpha.1"
+
+"@vibrant/image-browser@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/image-browser/-/image-browser-3.2.1-alpha.1.tgz#fe595bfe0c0ddc412300b5419e1e42d8b88d4380"
+  integrity sha512-6xWvQfB20sE6YtCWylgEAHuee3iD8h3aFIDbCS2yj7jIelKcYTrrp5jg2d2BhOOB6pC5JzF+QfpCrm0DmAIlgQ==
+  dependencies:
+    "@vibrant/image" "^3.2.1-alpha.1"
+
+"@vibrant/image-node@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/image-node/-/image-node-3.2.1-alpha.1.tgz#2901e09aee05d64ac9e792a951ee0727299ab80f"
+  integrity sha512-/Io/Rpo4EkO6AhaXdcxUXkbOFhSFtjm0LSAM4c0AyGA5EbC8PyZqjk8b11bQAEMCaYaweFQfTdGD7oVbXe21CQ==
+  dependencies:
+    "@jimp/custom" "^0.16.1"
+    "@jimp/plugin-resize" "^0.16.1"
+    "@jimp/types" "^0.16.1"
+    "@vibrant/image" "^3.2.1-alpha.1"
+
+"@vibrant/image@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/image/-/image-3.2.1-alpha.1.tgz#8bcde820f5ad873e2e96b00479def80f86e925a5"
+  integrity sha512-4aF5k79QfyhZOqRovJpbnIjWfe3uuWhY8voqVdd4/qgu4o70/AwVlM+pYmCaJVzI45VWNWWHYA5QlYuKsXnBqQ==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/types" "^3.2.1-alpha.1"
+
+"@vibrant/quantizer-mmcq@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/quantizer-mmcq/-/quantizer-mmcq-3.2.1-alpha.1.tgz#b36ecb48f4bff9ea35ed23389d8af79c079c079a"
+  integrity sha512-Wuk9PTZtxr8qsWTcgP6lcrrmrq36syVwxf+BUxdgQYntBcQ053SaN34lVGOJ0WPdK5vABoxbYljhceCgiILtZw==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/image" "^3.2.1-alpha.1"
+    "@vibrant/quantizer" "^3.2.1-alpha.1"
+
+"@vibrant/quantizer@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/quantizer/-/quantizer-3.2.1-alpha.1.tgz#8d29e288ea7acbcd0c9ab8c6b86f80adce606210"
+  integrity sha512-iHnPx/+n4iLtYLm1GClSfyg2fFbMatFG0ipCyp9M6tXNIPAg+pSvUJSGBnVnH7Nl/bR8Gkkj1h0pJ4RsKcdIrQ==
+  dependencies:
+    "@vibrant/color" "^3.2.1-alpha.1"
+    "@vibrant/image" "^3.2.1-alpha.1"
+    "@vibrant/types" "^3.2.1-alpha.1"
+
+"@vibrant/types@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/types/-/types-3.2.1-alpha.1.tgz#54ecf8b4d1045af699bfaf592e455079801bc951"
+  integrity sha512-ts9u7nsrENoYI5s0MmPOeY5kCLFKvQndKVDOPFCbTA0z493uhDp8mpiQhjFYTf3kPbS04z9zbHLE2luFC7x4KQ==
+
+"@vibrant/worker@^3.2.1-alpha.1":
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@vibrant/worker/-/worker-3.2.1-alpha.1.tgz#d09e4ec72902d36b9632c2c0aab855747acf1015"
+  integrity sha512-mtSlBdHkFNr4FOnMtqtHJxy9z5AsUcZzGlpiHzvWOoaoN9lNTDPwxOBd0q4VTYWuGPrIm6Fuq5m7aRbLv7KqiQ==
+  dependencies:
+    "@vibrant/types" "^3.2.1-alpha.1"
+
 "@vitejs/plugin-vue@^1.6.1":
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz#d718479e2789d8a94b63e00f23f1898ba239253a"
@@ -345,6 +549,11 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+any-base@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
+  integrity sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -358,10 +567,10 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-axios@^0.26.0:
+axios@^0.26.1:
-  version "0.26.0"
+  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
-  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
   dependencies:
     follow-redirects "^1.14.8"
 
@@ -370,6 +579,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -380,6 +594,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bmp-js@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233"
+  integrity sha1-4Fpj95amwf8l9Hcex62twUjAcjM=
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -406,11 +625,24 @@ browserslist@^4.14.5:
     node-releases "^2.0.1"
     picocolors "^1.0.0"
 
+buffer-equal@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-0.0.1.tgz#91bc74b11ea405bc916bc6aa908faafa5b4aac4b"
+  integrity sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer@^5.2.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -504,6 +736,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 electron-to-chromium@^1.4.17:
   version "1.4.63"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.63.tgz#866db72d1221fda89419dc22669d03833e11625d"
@@ -777,6 +1014,11 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
+exif-parser@^0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/exif-parser/-/exif-parser-0.1.12.tgz#58a9d2d72c02c1f6f02a0ef4a9166272b7760922"
+  integrity sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -799,6 +1041,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-type@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-9.0.0.tgz#a68d5ad07f486414dfb2c8866f73161946714a18"
+  integrity sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -844,6 +1091,14 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+gifwrap@^0.9.2:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/gifwrap/-/gifwrap-0.9.4.tgz#f4eb6169ba027d61df64aafbdcb1f8ae58ccc0c5"
+  integrity sha512-MDMwbhASQuVeD4JKd1fKgNgCRL3fGqMM4WaqpNhWO0JiMOAjbQdumbs4BbBZEy9/M00EHEjKN3HieVhCUlwjeQ==
+  dependencies:
+    image-q "^4.0.0"
+    omggif "^1.0.10"
+
 glob-parent@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
@@ -875,6 +1130,14 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@~4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^13.6.0, globals@^13.9.0:
   version "13.12.1"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.1.tgz#ec206be932e6c77236677127577aa8e50bf1c5cb"
@@ -899,6 +1162,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -909,6 +1177,13 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+image-q@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/image-q/-/image-q-4.0.0.tgz#31e075be7bae3c1f42a85c469b4732c358981776"
+  integrity sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==
+  dependencies:
+    "@types/node" "16.9.1"
+
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -959,6 +1234,11 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
+is-function@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -985,6 +1265,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jpeg-js@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
+  integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -1027,6 +1312,20 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+load-bmfont@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/load-bmfont/-/load-bmfont-1.4.1.tgz#c0f5f4711a1e2ccff725a7b6078087ccfcddd3e9"
+  integrity sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==
+  dependencies:
+    buffer-equal "0.0.1"
+    mime "^1.3.4"
+    parse-bmfont-ascii "^1.0.3"
+    parse-bmfont-binary "^1.0.5"
+    parse-bmfont-xml "^1.1.4"
+    phin "^2.9.1"
+    xhr "^2.0.1"
+    xtend "^4.0.0"
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@@ -1082,6 +1381,18 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.51.0"
 
+mime@^1.3.4:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -1089,7 +1400,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.5:
+minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -1099,6 +1410,13 @@ mitt@^3.0.0:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
   integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
 
+mkdirp@^0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -1124,11 +1442,29 @@ node-releases@^2.0.1:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
   integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
+node-vibrant@^3.2.1-alpha.1:
+  version "3.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/node-vibrant/-/node-vibrant-3.2.1-alpha.1.tgz#d80a3dd22741150b804ae0d3eb99ceaf9f79980a"
+  integrity sha512-EQergCp7fvbvUCE0VMCBnvaAV0lGWSP8SXLmuWQIBzQK5M5pIwcd9fIOXuzFkJx/8hUiiiLvAzzGDS/bIy2ikA==
+  dependencies:
+    "@types/node" "^10.12.18"
+    "@vibrant/core" "^3.2.1-alpha.1"
+    "@vibrant/generator-default" "^3.2.1-alpha.1"
+    "@vibrant/image-browser" "^3.2.1-alpha.1"
+    "@vibrant/image-node" "^3.2.1-alpha.1"
+    "@vibrant/quantizer-mmcq" "^3.2.1-alpha.1"
+    url "^0.11.0"
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+omggif@^1.0.10, omggif@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
+  integrity sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -1148,6 +1484,11 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+pako@^1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -1155,6 +1496,29 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-bmfont-ascii@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz#11ac3c3ff58f7c2020ab22769079108d4dfa0285"
+  integrity sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU=
+
+parse-bmfont-binary@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz#d038b476d3e9dd9db1e11a0b0e53a22792b69006"
+  integrity sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY=
+
+parse-bmfont-xml@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz#015319797e3e12f9e739c4d513872cd2fa35f389"
+  integrity sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==
+  dependencies:
+    xml-parse-from-string "^1.0.0"
+    xml2js "^0.4.5"
+
+parse-headers@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.5.tgz#069793f9356a54008571eb7f9761153e6c770da9"
+  integrity sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -1170,6 +1534,11 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+phin@^2.9.1:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
+  integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -1188,6 +1557,18 @@ pinia@^2.0.11:
     "@vue/devtools-api" "^6.0.0-beta.21"
     vue-demi "*"
 
+pixelmatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
+  integrity sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=
+  dependencies:
+    pngjs "^3.0.0"
+
+pngjs@^3.0.0, pngjs@^3.3.3:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 postcss@^8.1.10, postcss@^8.4.5:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
@@ -1202,11 +1583,26 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -1221,6 +1617,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -1284,6 +1685,11 @@ sass@^1.49.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sax@>=0.6.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
 schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
@@ -1408,6 +1814,16 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+timm@^1.6.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/timm/-/timm-1.7.1.tgz#96bab60c7d45b5a10a8a4d0f0117c6b7e5aff76f"
+  integrity sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==
+
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -1434,6 +1850,21 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+utif@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/utif/-/utif-2.0.1.tgz#9e1582d9bbd20011a6588548ed3266298e711759"
+  integrity sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==
+  dependencies:
+    pako "^1.0.5"
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -1552,6 +1983,39 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+xhr@^2.0.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/xhr/-/xhr-2.6.0.tgz#b69d4395e792b4173d6b7df077f0fc5e4e2b249d"
+  integrity sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==
+  dependencies:
+    global "~4.4.0"
+    is-function "^1.0.1"
+    parse-headers "^2.0.0"
+    xtend "^4.0.0"
+
+xml-parse-from-string@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz#a9029e929d3dbcded169f3c6e28238d95a5d5a28"
+  integrity sha1-qQKekp09vN7RafPG4oI42VpdWig=
+
+xml2js@^0.4.5:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
+  integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
+xmlbuilder@~11.0.0:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
+  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"