move utility methods to @/utils

src/utils/index.ts

@@ -0,0 +1,18 @@
+import focusElem from "./useFocusElem";
+import putCommas from "./usePutCommas";
+import useVisibility from "./useVisibility";
+import formatSeconds from "./useFormatSeconds";
+import useDebouncedRef from "./useDebouncedRef";
+import createSubPaths from "./useCreateSubPaths";
+import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
+
+export {
+  readLocalStorage,
+  writeLocalStorage,
+  createSubPaths,
+  useDebouncedRef,
+  focusElem,
+  useVisibility,
+  formatSeconds,
+  putCommas,
+};

src/utils/useCreateSubPaths.ts

@@ -0,0 +1,53 @@
+import { subPath } from "@/interfaces";
+
+/**
+ * Breaks a path into sub-paths.
+ * @param {string} newpath the new path to break into sub-paths.
+ * @param {string} oldpath the old path to compare with the new path.
+ */
+export default function createSubPaths(
+  newpath: string,
+  oldpath: string
+): [string, subPath[]] {
+  if (oldpath === undefined) oldpath = "";
+
+  const newlist = newpath.split("/");
+
+  if (newlist[0] == "$home") {
+    newlist.shift();
+  }
+
+  if (oldpath.includes(newpath)) {
+    const oldlist = oldpath.split("/");
+
+    const current = newlist.slice(-1)[0];
+    return [oldpath, createSubs(oldlist, current)];
+  } else {
+    const current = newlist.slice(-1)[0];
+
+    return [newpath, createSubs(newlist, current)];
+  }
+
+  function createSubs(list: string[], current: string) {
+    const paths = list.map((path, index) => {
+      return {
+        active: false,
+        name: path,
+        path: list.slice(0, index + 1).join("/"),
+      };
+    });
+    paths.reverse();
+
+    for (let i = 0; i < paths.length; i++) {
+      if (paths[i].name === current) {
+        paths[i].active = true;
+        break;
+      }
+    }
+
+    return paths.reverse();
+  }
+}
+
+// function that takes 2 strings as parameters and returns a string
+// that is the concatenation of the two strings

src/utils/useDebouncedRef.ts

@@ -0,0 +1,56 @@
+import { customRef, Ref, ref } from "vue";
+
+/**
+ * Debounces a function
+ *
+ * @param {*} fn The function to debounce
+ * @param {*} delay The delay in milliseconds
+ * @param {*} immediate whether to debounce immediately
+ */
+const debounce = (
+  fn: (...params: any) => void,
+  delay: number = 0,
+  immediate: any = false
+) => {
+  let timeout: any;
+  return (...args: any) => {
+    if (immediate && !timeout) fn(...args);
+    clearTimeout(timeout);
+
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+};
+
+/**
+ * Emits the ref updated value after the given delay.
+ *
+ * @param {*} initialValue The default value of the ref
+ * @param {*} delay The delay in milliseconds
+ * @param {*} immediate Whether to call the function immediately
+ * @returns {Object} The ref and a function to call to update the ref
+ */
+const useDebouncedRef = (
+  initialValue: string,
+  delay: number,
+  immediate = false
+) => {
+  const state = ref(initialValue);
+  return customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: debounce(
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      immediate
+    ),
+  }));
+};
+
+export default useDebouncedRef;

src/utils/useFocusElem.ts

@@ -0,0 +1,23 @@
+/**
+ * Scrolls a element into view.
+ * @param className The class to focus
+ * @param delay Delay in milliseconds
+ * @param pos Positioning of the focus element
+ */
+export default function focusElem(
+  className: string,
+  delay?: number,
+  pos?: any
+) {
+  const dom = document.getElementsByClassName(className)[0];
+
+  setTimeout(() => {
+    if (dom) {
+      dom.scrollIntoView({
+        behavior: "smooth",
+        block: `${pos ?? "start"}` as any,
+        inline: "center",
+      });
+    }
+  }, delay | 300);
+}

src/utils/useFormatSeconds.ts

@@ -0,0 +1,46 @@
+/**
+ * Converts seconds into minutes and hours.
+ * @param seconds The seconds to convert
+ * @param long Whether to provide the time in the long format
+ */
+export default function formatSeconds(seconds: number, long?: boolean) {
+  if (seconds == undefined) {
+    return "00:00";
+  }
+
+  const date = new Date(seconds * 1000);
+
+  const hh = date.getUTCHours();
+  const mm = date.getUTCMinutes();
+  const ss = date.getUTCSeconds();
+
+  let _hh = hh < 10 ? `0${hh}` : hh;
+  let _mm = mm < 10 ? `0${mm}` : mm;
+  let _ss = ss < 10 ? `0${ss}` : ss;
+
+  if (long == true) {
+    if (hh === 1) {
+      _hh = hh + " Hour";
+    } else {
+      _hh = `${hh} Hours`;
+    }
+
+    if (mm === 1) {
+      _mm = mm + " Minute";
+    } else {
+      _mm = `${mm} Minutes`;
+    }
+
+    if (hh > 0) {
+      return `${_hh}, ${_mm}`;
+    } else {
+      return `${_mm}`;
+    }
+  }
+
+  if (hh > 0) {
+    return `${_hh}:${_mm}:${_ss}`;
+  } else {
+    return `${_mm}:${_ss}`;
+  }
+}

src/utils/useLocalStorage.ts

@@ -0,0 +1,25 @@
+/**
+ * Retrieeves the value of a key from localStorage.
+ * @param key the key to read from local storage
+ * @returns A javascript object representing the value stored in local storage
+ */
+export function readLocalStorage(key: string) {
+  return JSON.parse(localStorage.getItem(key));
+}
+
+/**
+ * Stores a value in localStorage.
+ * @param key the key to store the value in local storage
+ * @param value the value to store in local storage
+ * @returns true if the value was successfully stored, false otherwise
+ * @throws if the value is not a valid JSON string
+ */
+
+export function writeLocalStorage(key: string, value: any) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}

src/utils/usePutCommas.ts

@@ -0,0 +1,18 @@
+/**
+ * Turns a list of artists into a string of artists separated by commas.
+ * @param artists artists array to put commas in
+ * @returns a string with commas in between each artist
+ */
+export default (artists: string[]) => {
+  let result = [];
+
+  artists.forEach((i, index, artists) => {
+    if (index !== artists.length - 1) {
+      result.push(i + ", ");
+    } else {
+      result.push(i);
+    }
+  });
+
+  return result;
+};

src/utils/useVisibility.ts

@@ -0,0 +1,21 @@
+import { ref } from "@vue/reactivity";
+import { useIntersectionObserver } from "@vueuse/core";
+import { Ref, watch } from "vue";
+
+export default function useVisibility(
+  elem: Ref<HTMLElement>,
+  callback: (state: boolean) => void
+) {
+  const visible = ref(false);
+
+  useIntersectionObserver(elem, ([{ isIntersecting }], observerElement) => {
+    visible.value = isIntersecting;
+  });
+
+  watch(
+    () => visible.value,
+    (newVal) => {
+      callback(newVal);
+    }
+  );
+}