Upgraded all components to vue 3 & typescript

src/components/CastList.vue

@@ -1,44 +1,45 @@
 <template>
   <div class="cast">
     <ol class="persons">
-      <CastListItem v-for="person in cast" :person="person" :key="person.id" />
+      <CastListItem
+        v-for="credit in cast"
+        :creditItem="credit"
+        :key="credit.id"
+      />
     </ol>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import CastListItem from "src/components/CastListItem";
+  import { defineProps } from "vue";
+  import CastListItem from "src/components/CastListItem.vue";
+  import type { MediaTypes, CreditTypes } from "../interfaces/IList";
 
-export default {
+  interface Props {
-  name: "CastList",
+    cast: Array<MediaTypes | CreditTypes>;
-  components: { CastListItem },
-  props: {
-    cast: {
-      type: Array,
-      required: true
-    }
   }
-};
+
+  defineProps<Props>();
 </script>
 
 <style lang="scss">
-.cast {
+  .cast {
-  position: relative;
+    position: relative;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
 
-  ol {
+    ol {
-    overflow-x: scroll;
+      overflow-x: scroll;
-    padding: 0;
+      padding: 0;
-    list-style-type: none;
+      list-style-type: none;
-    margin: 0;
+      margin: 0;
-    display: flex;
+      display: flex;
 
-    scrollbar-width: none; /* for Firefox */
+      scrollbar-width: none; /* for Firefox */
 
-    &::-webkit-scrollbar {
+      &::-webkit-scrollbar {
-      display: none; /* for Chrome, Safari, and Opera */
+        display: none; /* for Chrome, Safari, and Opera */
+      }
     }
   }
-}
 </style>

src/components/CastListItem.vue

@@ -1,121 +1,116 @@
 <template>
   <li class="card">
     <a @click="openCastItem">
-      <img class="persons--image" :src="pictureUrl" />
+      <img :src="pictureUrl" />
-      <p class="name">{{ person.name || person.title }}</p>
+      <p class="name">{{ creditItem.name || creditItem.title }}</p>
-      <p class="meta">{{ person.character || person.year }}</p>
+      <p class="meta">{{ creditItem.character || creditItem.year }}</p>
     </a>
   </li>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "vuex";
+  import { defineProps, computed } from "vue";
+  import { useStore } from "vuex";
+  import type { MediaTypes, CreditTypes } from "../interfaces/IList";
 
-export default {
+  interface Props {
-  name: "CastListItem",
+    creditItem: MediaTypes | CreditTypes;
-  props: {
+  }
-    person: {
+
-      type: Object,
+  const props = defineProps<Props>();
-      required: true
+  const store = useStore();
-    }
+
-  },
+  const pictureUrl = computed(() => {
-  methods: {
+    const baseUrl = "https://image.tmdb.org/t/p/w185";
-    ...mapActions("popup", ["open"]),
+
-    openCastItem() {
+    if ("profile_path" in props.creditItem && props.creditItem.profile_path) {
-      let { id, type } = this.person;
+      return baseUrl + props.creditItem.profile_path;
-
+    } else if ("poster" in props.creditItem && props.creditItem.poster) {
-      if (type) {
+      return baseUrl + props.creditItem.poster;
-        this.open({ id, type });
+    }
-      }
+
-    }
+    return "/assets/no-image_small.svg";
-  },
+  });
-  computed: {
+
-    pictureUrl() {
+  function openCastItem() {
-      const { profile_path, poster_path, poster } = this.person;
+    store.dispatch("popup/open", { ...props.creditItem });
-      if (profile_path) return "https://image.tmdb.org/t/p/w185" + profile_path;
-      else if (poster_path)
-        return "https://image.tmdb.org/t/p/w185" + poster_path;
-      else if (poster) return "https://image.tmdb.org/t/p/w185" + poster;
-
-      return "/assets/no-image_small.svg";
-    }
   }
-};
 </script>
 
 <style lang="scss">
-li a p:first-of-type {
+  li a p:first-of-type {
-  padding-top: 10px;
+    padding-top: 10px;
-}
-
-li.card p {
-  font-size: 1em;
-  padding: 0 10px;
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: calc(10px + ((16px * var(--line-height)) * 3));
-}
-
-li.card {
-  margin: 10px;
-  margin-right: 4px;
-  padding-bottom: 10px;
-  border-radius: 8px;
-  overflow: hidden;
-
-  min-width: 140px;
-  width: 140px;
-  background-color: var(--background-color-secondary);
-  color: var(--text-color);
-
-  transition: all 0.3s ease;
-  transform: scale(0.97) translateZ(0);
-
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-  &:first-of-type {
-    margin-left: 0;
   }
 
-  &:hover {
+  li.card p {
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    font-size: 1em;
-    transform: scale(1.03);
+    padding: 0 10px;
-  }
+    margin: 0;
-
-  .name {
-    font-weight: 500;
-  }
-
-  .character {
-    font-size: 0.9em;
-  }
-
-  .meta {
-    font-size: 0.9em;
-    color: var(--text-color-70);
-    display: -webkit-box;
     overflow: hidden;
-    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
+    max-height: calc(10px + ((16px * var(--line-height)) * 3));
-    // margin-top: auto;
-    max-height: calc((0.9em * var(--line-height)) * 1);
   }
 
-  a {
+  li.card {
-    display: block;
+    margin: 10px;
-    text-decoration: none;
+    margin-right: 4px;
-    height: 100%;
+    padding-bottom: 10px;
-    display: flex;
+    border-radius: 8px;
-    flex-direction: column;
+    overflow: hidden;
-  }
+    cursor: pointer;
 
-  img {
+    min-width: 140px;
-    width: 100%;
+    width: 140px;
-    height: auto;
+    background-color: var(--background-color-secondary);
-    max-height: 210px;
+    color: var(--text-color);
-    background-color: var(--background-color);
+
-    object-fit: cover;
+    transition: all 0.3s ease;
+    transform: scale(0.97) translateZ(0);
+
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &:hover {
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+      transform: scale(1.03);
+    }
+
+    .name {
+      font-weight: 500;
+    }
+
+    .character {
+      font-size: 0.9em;
+    }
+
+    .meta {
+      font-size: 0.9em;
+      color: var(--text-color-70);
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      // margin-top: auto;
+      max-height: calc((0.9em * var(--line-height)) * 1);
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      max-height: 210px;
+      background-color: var(--background-color);
+      object-fit: cover;
+    }
   }
-}
 </style>

src/components/LandingBanner.vue

@@ -1,8 +1,6 @@
 <template>
-  <header
+  <header ref="headerElement" :class="{ expanded, noselect: true }">
-    :class="{ expanded, noselect: true }"
+    <img :src="bannerImage" ref="imageElement" />
-    v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }"
-  >
     <div class="container">
       <h1 class="title">Request movies or tv shows</h1>
       <strong class="subtitle"
@@ -10,150 +8,205 @@
       >
     </div>
 
-    <div class="expand-icon" @click="expanded = !expanded">
+    <div class="expand-icon" @click="expand" @mouseover="upgradeImage">
       <IconExpand v-if="!expanded" />
       <IconShrink v-else />
     </div>
   </header>
 </template>
 
-<script>
+<script setup lang="ts">
-import IconExpand from "../icons/IconExpand.vue";
+  import { ref, computed, onMounted } from "vue";
-import IconShrink from "../icons/IconShrink.vue";
+  import IconExpand from "@/icons/IconExpand.vue";
+  import IconShrink from "@/icons/IconShrink.vue";
+  import type { Ref } from "vue";
 
-export default {
+  const ASSET_URL = "https://request.movie/assets/";
-  components: { IconExpand, IconShrink },
+  const images: Array<string> = [
-  props: {
+    "pulp-fiction.jpg",
-    image: {
+    "arrival.jpg",
-      type: String,
+    "disaster-artist.jpg",
-      required: false
+    "dune.jpg",
-    }
+    "mandalorian.jpg"
-  },
+  ];
-  data() {
+
-    return {
+  const bannerImage: Ref<string> = ref();
-      images: [
+  const expanded: Ref<boolean> = ref(false);
-        "pulp-fiction.jpg",
+  const headerElement: Ref<HTMLElement> = ref(null);
-        "arrival.jpg",
+  const imageElement: Ref<HTMLImageElement> = ref(null);
-        "dune.jpg",
+  const defaultHeaderHeight: Ref<string> = ref();
-        "mandalorian.jpg"
+  const disableProxy = true;
-      ],
+
-      imageFile: undefined,
+  bannerImage.value = randomImage();
-      expanded: false
+
-    };
+  function expand() {
-  },
+    expanded.value = !expanded.value;
-  beforeMount() {
+    let height = defaultHeaderHeight?.value;
-    if (this.image && this.image.length > 0) {
+
-      this.imageFile = this.image;
+    if (expanded.value) {
-    } else {
+      const aspectRation =
-      this.imageFile = `/assets/${
+        imageElement.value.naturalHeight / imageElement.value.naturalWidth;
-        this.images[Math.floor(Math.random() * this.images.length)]
+      height = `${imageElement.value.clientWidth * aspectRation}px`;
-      }`;
+      defaultHeaderHeight.value = headerElement.value.style.height;
     }
+
+    headerElement.value.style.setProperty("--header-height", height);
   }
-};
+
+  function randomImage(): string {
+    const image = images[Math.floor(Math.random() * images?.length)];
+    return ASSET_URL + image;
+  }
+
+  // function sliceToHeaderSize(url: string): string {
+  //   let width = headerElement.value?.getBoundingClientRect()?.width || 1349;
+  //   let height = headerElement.value?.getBoundingClientRect()?.height || 261;
+
+  //   if (disableProxy) return url;
+
+  //   return buildProxyURL(width, height, url);
+  // }
+
+  // function upgradeImage() {
+  //   if (disableProxy || imageUpgraded.value == true) return;
+
+  //   const headerSize = 90;
+  //   const height = window.innerHeight - headerSize;
+  //   const width = window.innerWidth - headerSize;
+
+  //   const proxyHost = `http://imgproxy.schleppe:8080/insecure/`;
+  //   const proxySizeOptions = `q:65/plain/`;
+
+  //   bannerImage.value = `${proxyHost}${proxySizeOptions}${
+  //     ASSET_URL + image.value
+  //   }`;
+  // }
+
+  // function buildProxyURL(width: number, height: number, asset: string): string {
+  //   const proxyHost = `http://imgproxy.schleppe:8080/insecure/`;
+  //   const proxySizeOptions = `resize:fill:${width}:${height}:ce/q:65/plain/`;
+  //   return `${proxyHost}${proxySizeOptions}${asset}`;
+  // }
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-header {
+  header {
-  width: 100%;
+    width: 100%;
-  height: 25vh;
+    display: flex;
-  display: flex;
+    align-items: center;
-  align-items: center;
+    justify-content: center;
-  justify-content: center;
+    position: relative;
-  background-size: cover;
+    transition: height 0.5s ease;
-  background-repeat: no-repeat;
+    overflow: hidden;
-  background-position: 50% 50%;
+    --header-height: 261px;
-  position: relative;
-
-  &.expanded {
-    height: calc(100vh - var(--header-size));
-    width: calc(100vw - var(--header-size));
 
     @include mobile {
-      width: 100vw;
+      --header-height: 25vh;
-      height: 100vh;
+    }
+
+    height: var(--header-height);
+
+    > * {
+      z-index: 1;
+    }
+
+    img {
+      position: absolute;
+      z-index: 0;
+      object-fit: cover;
+      width: 100%;
+    }
+
+    &.expanded {
+      // height: calc(100vh - var(--header-size));
+      // width: calc(100vw - var(--header-size));
+
+      // @include mobile {
+      //   width: 100vw;
+      //   height: 100vh;
+      // }
+
+      &:before {
+        background-color: transparent;
+      }
+
+      .title,
+      .subtitle {
+        opacity: 0;
+      }
+    }
+
+    .expand-icon {
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.5s ease-in-out;
+      height: 1.8rem;
+      width: 1.8rem;
+      fill: var(--text-color-50);
+
+      position: absolute;
+      top: 0.5rem;
+      right: 1rem;
+
+      &:hover {
+        cursor: pointer;
+        fill: var(--text-color-90);
+      }
+    }
+
+    &:hover {
+      .expand-icon {
+        visibility: visible;
+        opacity: 1;
+      }
     }
 
     &:before {
-      background-color: transparent;
+      content: "";
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--background-70);
+      transition: inherit;
     }
 
-    .title,
+    .container {
-    .subtitle {
+      text-align: center;
-      opacity: 0;
+      position: relative;
+      transition: color 0.5s ease;
     }
-  }
 
-  .expand-icon {
+    .title {
-    visibility: hidden;
+      font-weight: 500;
-    opacity: 0;
+      font-size: 22px;
-    transition: all 0.5s ease-in-out;
+      text-transform: uppercase;
-    height: 1.8rem;
+      letter-spacing: 0.5px;
-    width: 1.8rem;
+      color: $text-color;
-    fill: var(--text-color-50);
+      margin: 0;
-
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-
-    &:hover {
-      cursor: pointer;
-      fill: var(--text-color-90);
-    }
-  }
-
-  &:hover {
-    .expand-icon {
-      visibility: visible;
       opacity: 1;
+
+      @include tablet-min {
+        font-size: 2.5rem;
+      }
+    }
+
+    .subtitle {
+      display: block;
+      font-size: 14px;
+      font-weight: 300;
+      color: $text-color-70;
+      margin: 5px 0;
+      opacity: 1;
+
+      @include tablet-min {
+        font-size: 1.3rem;
+      }
     }
   }
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--background-70);
-    transition: inherit;
-  }
-
-  .container {
-    text-align: center;
-    position: relative;
-    transition: color 0.5s ease;
-  }
-
-  .title {
-    font-weight: 500;
-    font-size: 22px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: $text-color;
-    margin: 0;
-    opacity: 1;
-
-    @include tablet-min {
-      font-size: 2.5rem;
-    }
-  }
-
-  .subtitle {
-    display: block;
-    font-size: 14px;
-    font-weight: 300;
-    color: $text-color-70;
-    margin: 5px 0;
-    opacity: 1;
-
-    @include tablet-min {
-      font-size: 1.3rem;
-    }
-  }
-}
 </style>

src/components/ListHeader.vue

@@ -1,125 +0,0 @@
-<template>
-  <header>
-    <h2>{{ prettify }}</h2>
-    <h3>{{ subtitle }}</h3>
-
-    <router-link
-      v-if="shortList"
-      :to="urlify"
-      class="view-more"
-      :aria-label="`View all ${title}`"
-    >
-      View All
-    </router-link>
-
-    <div v-else-if="info">
-      <div v-if="info instanceof Array" class="flex flex-direction-column">
-        <span v-for="item in info" :key="item" class="info">{{ item }}</span>
-      </div>
-
-      <span v-else class="info">{{ info }}</span>
-    </div>
-  </header>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    subtitle: {
-      type: String,
-      required: false,
-      default: null
-    },
-    info: {
-      type: [String, Array],
-      required: false
-    },
-    link: {
-      type: String,
-      required: false
-    },
-    shortList: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    urlify: function () {
-      return `/list/${this.title.toLowerCase().replace(" ", "_")}`;
-    },
-    prettify: function () {
-      return this.title.includes("_")
-        ? this.title.split("_").join(" ")
-        : this.title;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "src/scss/variables";
-@import "src/scss/media-queries";
-@import "src/scss/main";
-
-header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background-color: $background-color;
-
-  position: sticky;
-  position: -webkit-sticky;
-  top: $header-size;
-  z-index: 1;
-
-  h2 {
-    font-size: 1.4rem;
-    font-weight: 300;
-    text-transform: capitalize;
-    line-height: 1.4rem;
-    margin: 0;
-    color: $text-color;
-  }
-
-  .view-more {
-    font-size: 0.9rem;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    color: $text-color-70;
-    text-decoration: none;
-    transition: color 0.5s ease;
-    cursor: pointer;
-
-    &:after {
-      content: " →";
-    }
-    &:hover {
-      color: $text-color;
-    }
-  }
-
-  .info {
-    font-size: 13px;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    color: $text-color;
-    text-decoration: none;
-    text-align: right;
-  }
-
-  @include tablet-min {
-    padding-left: 1.25rem;
-  }
-
-  @include desktop-lg-min {
-    padding-left: 1.75rem;
-  }
-}
-</style>

src/components/PageHeader.vue

@@ -0,0 +1,110 @@
+<template>
+  <header>
+    <h2>{{ prettify }}</h2>
+    <h3>{{ subtitle }}</h3>
+
+    <router-link
+      v-if="shortList"
+      :to="urlify"
+      class="view-more"
+      :aria-label="`View all ${title}`"
+    >
+      View All
+    </router-link>
+
+    <div v-else-if="info">
+      <div v-if="info instanceof Array" class="flex flex-direction-column">
+        <span v-for="item in info" :key="item" class="info">{{ item }}</span>
+      </div>
+
+      <span v-else class="info">{{ info }}</span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, computed } from "vue";
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    info?: string | Array<string>;
+    link?: string;
+    shortList?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const urlify = computed(() => {
+    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
+  });
+
+  const prettify = computed(() => {
+    return props.title.includes("_")
+      ? props.title.split("_").join(" ")
+      : props.title;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "src/scss/variables";
+  @import "src/scss/media-queries";
+  @import "src/scss/main";
+
+  header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background-color: $background-color;
+
+    position: sticky;
+    position: -webkit-sticky;
+    top: $header-size;
+    z-index: 1;
+
+    h2 {
+      font-size: 1.4rem;
+      font-weight: 300;
+      text-transform: capitalize;
+      line-height: 1.4rem;
+      margin: 0;
+      color: $text-color;
+    }
+
+    .view-more {
+      font-size: 0.9rem;
+      font-weight: 300;
+      letter-spacing: 0.5px;
+      color: $text-color-70;
+      text-decoration: none;
+      transition: color 0.5s ease;
+      cursor: pointer;
+
+      &:after {
+        content: " →";
+      }
+      &:hover {
+        color: $text-color;
+      }
+    }
+
+    .info {
+      font-size: 13px;
+      font-weight: 300;
+      letter-spacing: 0.5px;
+      color: $text-color;
+      text-decoration: none;
+      text-align: right;
+    }
+
+    @include tablet-min {
+      padding-left: 1.25rem;
+    }
+
+    @include desktop-lg-min {
+      padding-left: 1.75rem;
+    }
+  }
+</style>

src/components/Popup.vue

@@ -9,117 +9,137 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapGetters } from "vuex";
+  import { ref, onMounted, onBeforeUnmount } from "vue";
-import Movie from "@/components/popup/Movie";
+  import { useStore } from "vuex";
-import Person from "@/components/popup/Person";
+  import Movie from "@/components/popup/Movie.vue";
+  import Person from "@/components/popup/Person.vue";
+  import { ListTypes } from "../interfaces/IList";
+  import type { MediaTypes } from "../interfaces/IList";
+  import type { Ref } from "vue";
 
-export default {
+  interface URLQueryParameters {
-  components: { Movie, Person },
+    id: number;
-  computed: {
+    type: ListTypes;
-    ...mapGetters("popup", ["isOpen", "id", "type"])
-  },
-  watch: {
-    isOpen(value) {
-      value
-        ? document.getElementsByTagName("body")[0].classList.add("no-scroll")
-        : document
-            .getElementsByTagName("body")[0]
-            .classList.remove("no-scroll");
-    }
-  },
-  methods: {
-    ...mapActions("popup", ["close", "open"]),
-    checkEventForEscapeKey(event) {
-      if (event.keyCode == 27) this.close();
-    }
-  },
-  created() {
-    const params = new URLSearchParams(window.location.search);
-    let id = null;
-    let type = null;
-
-    if (params.has("movie")) {
-      id = Number(params.get("movie"));
-      type = "movie";
-    } else if (params.has("show")) {
-      id = Number(params.get("show"));
-      type = "show";
-    } else if (params.has("person")) {
-      id = Number(params.get("person"));
-      type = "person";
-    }
-
-    if (id && type) {
-      this.open({ id, type });
-    }
-
-    window.addEventListener("keyup", this.checkEventForEscapeKey);
-  },
-  beforeDestroy() {
-    window.removeEventListener("keyup", this.checkEventForEscapeKey);
   }
-};
+
+  const store = useStore();
+  const isOpen: Ref<boolean> = ref();
+  const id: Ref<string> = ref();
+  const type: Ref<MediaTypes> = ref();
+
+  const unsubscribe = store.subscribe((mutation, state) => {
+    if (!mutation.type.includes("popup")) return;
+
+    isOpen.value = state.popup.open;
+    id.value = state.popup.id;
+    type.value = state.popup.type;
+
+    console.log("popup state:", isOpen.value);
+    isOpen.value
+      ? document.getElementsByTagName("body")[0].classList.add("no-scroll")
+      : document.getElementsByTagName("body")[0].classList.remove("no-scroll");
+  });
+
+  function getFromURLQuery(): URLQueryParameters {
+    let id, type;
+
+    const params = new URLSearchParams(window.location.search);
+    params.forEach((value, key) => {
+      if (!(key in ListTypes)) return;
+
+      id = Number(params.get(key));
+      type = key;
+    });
+
+    return { id, type };
+  }
+
+  function open(id: Number, type: string) {
+    if (!id || !type) return;
+    store.dispatch("popup/open", { id, type });
+  }
+
+  function close() {
+    store.dispatch("popup/close");
+  }
+
+  function checkEventForEscapeKey(event: KeyboardEvent) {
+    if (event.keyCode !== 27) return;
+    close();
+  }
+
+  window.addEventListener("keyup", checkEventForEscapeKey);
+
+  onMounted(() => {
+    const { id, type } = getFromURLQuery();
+    open(id, type);
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    window.removeEventListener("keyup", checkEventForEscapeKey);
+  });
 </script>
 
 <style lang="scss">
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.movie-popup {
+  .movie-popup {
-  position: fixed;
+    position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  width: 100%;
-  height: 100%;
-  background: rgba($dark, 0.93);
-  -webkit-overflow-scrolling: touch;
-  overflow: auto;
-
-  &__box {
-    max-width: 768px;
-    position: relative;
-    z-index: 5;
-    margin: 8vh auto;
-
-    @include mobile {
-      margin: 0 0 50px 0;
-    }
-  }
-  &__close {
-    display: block;
-    position: absolute;
     top: 0;
-    right: 0;
+    left: 0;
-    border: 0;
+    z-index: 20;
-    background: transparent;
+    width: 100%;
-    width: 40px;
+    height: 100%;
-    height: 40px;
+    background: rgba($dark, 0.93);
-    transition: background 0.5s ease;
+    -webkit-overflow-scrolling: touch;
-    cursor: pointer;
+    overflow: auto;
-    z-index: 5;
 
-    &:before,
+    &__box {
-    &:after {
+      max-width: 768px;
-      content: "";
+      position: relative;
+      z-index: 5;
+      margin: 8vh auto;
+
+      @include mobile {
+        margin: 0 0 50px 0;
+      }
+    }
+    &__close {
       display: block;
       position: absolute;
-      top: 19px;
+      top: 0;
-      left: 10px;
+      right: 0;
-      width: 20px;
+      border: 0;
-      height: 2px;
+      background: transparent;
-      background: $white;
+      width: 40px;
-    }
+      height: 40px;
-    &:before {
+      transition: background 0.5s ease;
-      transform: rotate(45deg);
+      cursor: pointer;
-    }
+      z-index: 5;
-    &:after {
+
-      transform: rotate(-45deg);
+      &:before,
-    }
+      &:after {
-    &:hover {
+        content: "";
-      background: $green;
+        display: block;
+        position: absolute;
+        top: 19px;
+        left: 10px;
+        width: 20px;
+        height: 2px;
+        background: $white;
+      }
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+      &:hover {
+        background: $green;
+      }
     }
   }
-}
 </style>

src/components/ResultsList.vue

@@ -6,9 +6,9 @@
       :class="{ shortList: shortList }"
     >
       <results-list-item
-        v-for="(movie, index) in results"
+        v-for="(result, index) in results"
-        :key="`${movie.type}-${movie.id}-${index}`"
+        :key="`${result.type}-${result.id}-${index}`"
-        :movie="movie"
+        :listItem="result"
       />
     </ul>
 
@@ -16,68 +16,58 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import ResultsListItem from "@/components/ResultsListItem";
+  import { defineProps } from "vue";
+  import ResultsListItem from "@/components/ResultsListItem.vue";
+  import type { ListResults } from "../interfaces/IList";
 
-export default {
+  interface Props {
-  components: { ResultsListItem },
+    results: Array<ListResults>;
-  props: {
+    shortList?: Boolean;
-    results: {
+    loading?: Boolean;
-      type: Array,
-      required: true
-    },
-    shortList: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
   }
-};
+
+  const props = defineProps<Props>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
 
-.no-results {
+  .no-results {
-  width: 100%;
+    width: 100%;
-  display: block;
+    display: block;
-  text-align: center;
+    text-align: center;
-  margin: 1.5rem;
+    margin: 1.5rem;
-  font-size: 1.2rem;
+    font-size: 1.2rem;
-}
-
-.results {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
-  grid-auto-rows: auto;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  @include mobile {
-    grid-template-columns: repeat(2, 1fr);
   }
 
-  &.shortList {
+  .results {
-    overflow: auto;
+    display: grid;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
-    max-width: 100vw;
+    grid-auto-rows: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
-    @include noscrollbar;
+    @include mobile {
-
+      grid-template-columns: repeat(2, 1fr);
-    > li {
-      min-width: 225px;
     }
 
-    @include tablet-min {
+    &.shortList {
-      max-width: calc(100vw - var(--header-size));
+      overflow: auto;
+      grid-auto-flow: column;
+      max-width: 100vw;
+
+      @include noscrollbar;
+
+      > li {
+        min-width: 225px;
+      }
+
+      @include tablet-min {
+        max-width: calc(100vw - var(--header-size));
+      }
     }
   }
-}
 </style>

src/components/ResultsListItem.vue

@@ -1,6 +1,10 @@
 <template>
   <li class="movie-item" ref="list-item">
-    <figure ref="poster" class="movie-item__poster" @click="openMoviePopup">
+    <figure
+      ref="posterElement"
+      class="movie-item__poster"
+      @click="openMoviePopup"
+    >
       <img
         class="movie-item__img"
         :alt="posterAltText"
@@ -8,173 +12,170 @@
         src="/assets/placeholder.png"
       />
 
-      <div v-if="movie.download" class="progress">
+      <div v-if="listItem.download" class="progress">
-        <progress :value="movie.download.progress" max="100"></progress>
+        <progress :value="listItem.download.progress" max="100"></progress>
-        <span>{{ movie.download.state }}: {{ movie.download.progress }}%</span>
+        <span
+          >{{ listItem.download.state }}:
+          {{ listItem.download.progress }}%</span
+        >
       </div>
     </figure>
 
     <div class="movie-item__info">
-      <p v-if="movie.title || movie.name" class="movie-item__title">
+      <p v-if="listItem.title || listItem.name" class="movie-item__title">
-        {{ movie.title || movie.name }}
+        {{ listItem.title || listItem.name }}
       </p>
-      <p v-if="movie.year">{{ movie.year }}</p>
+      <p v-if="listItem.year">{{ listItem.year }}</p>
-      <p v-if="movie.type == 'person'">
+      <p v-if="listItem.type == 'person'">
-        Known for: {{ movie.known_for_department }}
+        Known for: {{ listItem.known_for_department }}
       </p>
     </div>
   </li>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "vuex";
+  import { ref, computed, defineProps, onMounted } from "vue";
-import img from "../directives/v-image";
+  import { useStore } from "vuex";
-import { buildImageProxyUrl } from "../utils";
+  import { buildImageProxyUrl } from "../utils";
+  import type { Ref } from "vue";
+  import type { MediaTypes } from "../interfaces/IList";
 
-export default {
+  interface Props {
-  props: {
+    listItem: MediaTypes;
-    movie: {
+  }
-      type: Object,
-      required: true
-    }
-  },
-  directives: {
-    img: img
-  },
-  data() {
-    return {
-      poster: null,
-      observed: false
-    };
-  },
-  computed: {
-    posterAltText: function () {
-      const type = this.movie.type || "";
-      const title = this.movie.title || this.movie.name;
-      return this.movie.poster
-        ? `Poster for ${type} ${title}`
-        : `Missing image for ${type} ${title}`;
-    },
-    imageWidth() {
-      if (this.image)
-        return Math.ceil(this.image.getBoundingClientRect().width);
-    },
-    imageHeight() {
-      if (this.image)
-        return Math.ceil(this.image.getBoundingClientRect().height);
-    }
-  },
-  beforeMount() {
-    if (this.movie.poster == null) {
-      this.poster = "/assets/no-image.svg";
-      return;
-    }
 
-    this.poster = `https://image.tmdb.org/t/p/w500${this.movie.poster}`;
+  const props = defineProps<Props>();
-    // this.poster = this.buildProxyURL(
+  const store = useStore();
-    //   this.imageWidth,
+
-    //   this.imageHeight,
+  const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
-    //   assetUrl
+  const IMAGE_FALLBACK = "/assets/no-image.svg";
-    // );
+  const poster: Ref<string> = ref();
-  },
+  const posterElement: Ref<HTMLElement> = ref(null);
-  mounted() {
+  const observed: Ref<boolean> = ref(false);
-    const poster = this.$refs["poster"];
+
-    this.image = poster.getElementsByTagName("img")[0];
+  poster.value = props.listItem?.poster
-    if (this.image == null) return;
+    ? IMAGE_BASE_URL + props.listItem?.poster
+    : IMAGE_FALLBACK;
+
+  onMounted(observePosterAndSetImageSource);
+
+  function observePosterAndSetImageSource() {
+    const imageElement = posterElement.value.getElementsByTagName("img")[0];
+    if (imageElement == null) return;
 
     const imageObserver = new IntersectionObserver((entries, imgObserver) => {
       entries.forEach(entry => {
-        if (entry.isIntersecting && this.observed == false) {
+        if (entry.isIntersecting && observed.value == false) {
-          const lazyImage = entry.target;
+          const lazyImage = entry.target as HTMLImageElement;
           lazyImage.src = lazyImage.dataset.src;
-          poster.className = poster.className + " is-loaded";
+          posterElement.value.classList.add("is-loaded");
-          this.observed = true;
+          observed.value = true;
         }
       });
     });
 
-    imageObserver.observe(this.image);
+    imageObserver.observe(imageElement);
-  },
-  methods: {
-    ...mapActions("popup", ["open"]),
-    openMoviePopup() {
-      this.open({
-        id: this.movie.id,
-        type: this.movie.type
-      });
-    }
   }
-};
+
+  function openMoviePopup() {
+    store.dispatch("popup/open", { ...props.listItem });
+  }
+
+  const posterAltText = computed(() => {
+    const type = props.listItem.type || "";
+    let title: string = "";
+
+    if ("name" in props.listItem) title = props.listItem.name;
+    else if ("title" in props.listItem) title = props.listItem.title;
+
+    return props.listItem.poster
+      ? `Poster for ${type} ${title}`
+      : `Missing image for ${type} ${title}`;
+  });
+
+  const imageSize = computed(() => {
+    if (!posterElement.value) return;
+    const { height, width } = posterElement.value.getBoundingClientRect();
+    return {
+      height: Math.ceil(height),
+      width: Math.ceil(width)
+    };
+  });
+
+  // import img from "../directives/v-image";
+  //   directives: {
+  //     img: img
+  //   },
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
 
-.movie-item {
+  .movie-item {
-  padding: 15px;
+    padding: 15px;
-  width: 100%;
+    width: 100%;
-  background-color: var(--background-color);
+    background-color: var(--background-color);
 
-  &:hover &__info > p {
+    &:hover &__info > p {
-    color: $text-color;
+      color: $text-color;
-  }
-
-  &__poster {
-    text-decoration: none;
-    color: $text-color-70;
-    font-weight: 300;
-    position: relative;
-    transform: scale(0.97) translateZ(0);
-
-    &::before {
-      content: "";
-      position: absolute;
-      z-index: 1;
-      width: 100%;
-      height: 100%;
-      background-color: var(--background-color);
-      transition: 1s background-color ease;
     }
 
-    &:hover {
+    &__poster {
-      transform: scale(1.03);
+      text-decoration: none;
-      box-shadow: 0 0 10px rgba($dark, 0.1);
-    }
-
-    &.is-loaded::before {
-      background-color: transparent;
-    }
-
-    img {
-      width: 100%;
-      border-radius: 10px;
-    }
-  }
-
-  &__info {
-    padding-top: 10px;
-    font-weight: 300;
-
-    > p {
       color: $text-color-70;
-      margin: 0;
+      font-weight: 300;
-      font-size: 14px;
+      position: relative;
-      letter-spacing: 0.5px;
+      transform: scale(0.97) translateZ(0);
-      transition: color 0.5s ease;
+
-      cursor: pointer;
+      &::before {
-      @include mobile-ls-min {
+        content: "";
-        font-size: 12px;
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background-color: var(--background-color);
+        transition: 1s background-color ease;
       }
-      @include tablet-min {
+
-        font-size: 14px;
+      &:hover {
+        transform: scale(1.03);
+        box-shadow: 0 0 10px rgba($dark, 0.1);
+      }
+
+      &.is-loaded::before {
+        background-color: transparent;
+      }
+
+      img {
+        width: 100%;
+        border-radius: 10px;
       }
     }
-  }
 
-  &__title {
+    &__info {
-    font-weight: 400;
+      padding-top: 10px;
+      font-weight: 300;
+
+      > p {
+        color: $text-color-70;
+        margin: 0;
+        font-size: 14px;
+        letter-spacing: 0.5px;
+        transition: color 0.5s ease;
+        cursor: pointer;
+        @include mobile-ls-min {
+          font-size: 12px;
+        }
+        @include tablet-min {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &__title {
+      font-weight: 400;
+    }
   }
-}
 </style>

src/components/ResultsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <list-header v-bind="{ title, info, shortList }" />
+    <page-header v-bind="{ title, info, shortList }" />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"
@@ -26,177 +26,186 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import ListHeader from "@/components/ListHeader";
+  import { defineProps, ref, computed, onMounted } from "vue";
-import ResultsList from "@/components/ResultsList";
+  import { useStore } from "vuex";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import PageHeader from "@/components/PageHeader.vue";
-import store from "@/store";
+  import ResultsList from "@/components/ResultsList.vue";
-import { getTmdbMovieListByName } from "@/api";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
-import Loader from "@/components/ui/Loader";
+  import Loader from "@/components/ui/Loader.vue";
+  import { getTmdbMovieListByName } from "../api";
+  import type { Ref } from "vue";
+  import type { IList, ListResults } from "../interfaces/IList";
+  import type ISection from "../interfaces/ISection";
 
-export default {
+  interface Props extends ISection {
-  props: {
+    title: string;
-    apiFunction: {
+    apiFunction: (page: number) => Promise<IList>;
-      type: Function,
+    shortList?: boolean;
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    shortList: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  components: { ListHeader, ResultsList, SeasonedButton, Loader },
-  data() {
-    return {
-      results: [],
-      page: 1,
-      loadedPages: [],
-      totalPages: -1,
-      totalResults: 0,
-      loading: true,
-      autoLoad: false,
-      observer: undefined
-    };
-  },
-  computed: {
-    info() {
-      if (this.results.length === 0) return [null, null];
-      return [this.pageCount, this.resultCount];
-    },
-    resultCount() {
-      const loadedResults = this.results.length;
-      const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
-      return `${loadedResults} of ${totalResults} results`;
-    },
-    pageCount() {
-      return `Page ${this.page} of ${this.totalPages}`;
-    }
-  },
-  methods: {
-    loadMore() {
-      if (!this.autoLoad) {
-        this.autoLoad = true;
-      }
-
-      this.loading = true;
-      let maxPage = [...this.loadedPages].slice(-1)[0];
-
-      if (maxPage == NaN) return;
-      this.page = maxPage + 1;
-      this.getListResults();
-    },
-    loadLess() {
-      this.loading = true;
-      const minPage = this.loadedPages[0];
-      if (minPage === 1) return;
-
-      this.page = minPage - 1;
-      this.getListResults(true);
-    },
-    updateQueryParams() {
-      let params = new URLSearchParams(window.location.search);
-      if (params.has("page")) {
-        params.set("page", this.page);
-      } else if (this.page > 1) {
-        params.append("page", this.page);
-      }
-
-      window.history.replaceState(
-        {},
-        "search",
-        `${window.location.protocol}//${window.location.hostname}${
-          window.location.port ? `:${window.location.port}` : ""
-        }${window.location.pathname}${
-          params.toString().length ? `?${params}` : ""
-        }`
-      );
-    },
-    getPageFromUrl() {
-      return new URLSearchParams(window.location.search).get("page");
-    },
-    getListResults(front = false) {
-      this.apiFunction(this.page)
-        .then(results => {
-          if (!front) this.results = this.results.concat(...results.results);
-          else this.results = results.results.concat(...this.results);
-          this.page = results.page;
-          this.loadedPages.push(this.page);
-          this.loadedPages = this.loadedPages.sort((a, b) => a - b);
-          this.totalPages = results.total_pages;
-          this.totalResults = results.total_results;
-        })
-        .then(this.updateQueryParams)
-        .finally(() => (this.loading = false));
-    },
-    setupAutoloadObserver() {
-      this.observer = new IntersectionObserver(this.handleButtonIntersection, {
-        root: this.$refs.resultSection.$el,
-        rootMargin: "0px",
-        threshold: 0
-      });
-
-      this.observer.observe(this.$refs.loadMoreButton);
-    },
-    handleButtonIntersection(entries) {
-      entries.map(entry =>
-        entry.isIntersecting && this.autoLoad ? this.loadMore() : null
-      );
-    }
-  },
-  created() {
-    this.page = this.getPageFromUrl() || this.page;
-    if (this.results.length === 0) this.getListResults();
-
-    if (!this.shortList) {
-      store.dispatch(
-        "documentTitle/updateTitle",
-        `${this.$router.history.current.name} ${this.title}`
-      );
-    }
-  },
-  mounted() {
-    if (!this.shortList) {
-      this.setupAutoloadObserver();
-    }
-  },
-  beforeDestroy() {
-    this.observer = undefined;
   }
-};
+
+  const store = useStore();
+  const props = defineProps<Props>();
+
+  const results: Ref<ListResults> = ref([]);
+  const page: Ref<number> = ref(1);
+  const loadedPages: Ref<number[]> = ref([]);
+  const totalResults: Ref<number> = ref(0);
+  const totalPages: Ref<number> = ref(0);
+  const loading: Ref<boolean> = ref(true);
+  const autoLoad: Ref<boolean> = ref(false);
+  const observer: Ref<any> = ref(null);
+  const resultSection = ref(null);
+  const loadMoreButton = ref(null);
+
+  page.value = getPageFromUrl() || page.value;
+  if (results.value?.length === 0) getListResults();
+
+  const info = computed(() => {
+    if (results.value.length === 0) return [null, null];
+
+    const pageCount = pageCountString(page.value, totalPages.value);
+    const resultCount = resultCountString(results.value, totalResults.value);
+    return [pageCount, resultCount];
+  });
+
+  onMounted(() => {
+    if (!props?.shortList) setupAutoloadObserver();
+  });
+
+  function pageCountString(page: Number, totalPages: Number) {
+    return `Page ${page} of ${totalPages}`;
+  }
+
+  function resultCountString(results: ListResults, totalResults: number) {
+    const loadedResults = results.length;
+    const _totalResults = totalResults < 10000 ? totalResults : "∞";
+    return `${loadedResults} of ${_totalResults} results`;
+  }
+
+  function getPageFromUrl() {
+    const page = new URLSearchParams(window.location.search).get("page");
+    if (!page) return null;
+
+    return Number(page);
+  }
+
+  function getListResults(front = false) {
+    props
+      .apiFunction(page.value)
+      .then(listResponse => {
+        if (!front)
+          results.value = results.value.concat(...listResponse.results);
+        else results.value = listResponse.results.concat(...results.value);
+
+        page.value = listResponse.page;
+        loadedPages.value.push(page.value);
+        loadedPages.value = loadedPages.value.sort((a, b) => a - b);
+        totalPages.value = listResponse.total_pages;
+        totalResults.value = listResponse.total_results;
+      })
+      .then(updateQueryParams)
+      .finally(() => (loading.value = false));
+  }
+
+  function loadMore() {
+    if (!autoLoad.value) {
+      autoLoad.value = true;
+    }
+
+    loading.value = true;
+    let maxPage = [...loadedPages.value].slice(-1)[0];
+
+    if (maxPage == NaN) return;
+    page.value = maxPage + 1;
+    getListResults();
+  }
+
+  function loadLess() {
+    loading.value = true;
+    const minPage = loadedPages.value[0];
+    if (minPage === 1) return;
+
+    page.value = minPage - 1;
+    getListResults(true);
+  }
+
+  function updateQueryParams() {
+    let params = new URLSearchParams(window.location.search);
+    if (params.has("page")) {
+      params.set("page", page.value?.toString());
+    } else if (page.value > 1) {
+      params.append("page", page.value?.toString());
+    }
+
+    window.history.replaceState(
+      {},
+      "search",
+      `${window.location.protocol}//${window.location.hostname}${
+        window.location.port ? `:${window.location.port}` : ""
+      }${window.location.pathname}${
+        params.toString().length ? `?${params}` : ""
+      }`
+    );
+  }
+
+  function handleButtonIntersection(entries) {
+    entries.map(entry =>
+      entry.isIntersecting && autoLoad.value ? loadMore() : null
+    );
+  }
+
+  function setupAutoloadObserver() {
+    observer.value = new IntersectionObserver(handleButtonIntersection, {
+      root: resultSection.value.$el,
+      rootMargin: "0px",
+      threshold: 0
+    });
+
+    observer.value.observe(loadMoreButton.value);
+  }
+
+  //   created() {
+  //     if (!this.shortList) {
+  //       store.dispatch(
+  //         "documentTitle/updateTitle",
+  //         `${this.$router.history.current.name} ${this.title}`
+  //       );
+  //     }
+  //   },
+  //   beforeDestroy() {
+  //     this.observer = undefined;
+  //   }
+  // };
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.resultSection {
+  .resultSection {
-  background-color: var(--background-color);
+    background-color: var(--background-color);
-}
-
-.button-container {
-  display: flex;
-  justify-content: center;
-  display: flex;
-  width: 100%;
-}
-
-.load-button {
-  margin: 2rem 0;
-
-  @include mobile {
-    margin: 1rem 0;
   }
 
-  &:last-of-type {
+  .button-container {
-    margin-bottom: 4rem;
+    display: flex;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+  }
+
+  .load-button {
+    margin: 2rem 0;
 
     @include mobile {
-      margin-bottom: 2rem;
+      margin: 1rem 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 4rem;
+
+      @include mobile {
+        margin-bottom: 2rem;
+      }
     }
   }
-}
 </style>

src/components/TorrentList.vue

@@ -1,747 +0,0 @@
-<template>
-  <div v-if="show" class="container">
-    <h2 class="torrentHeader-text editable">
-      Searching for:
-      <span :contenteditable="!edit" @input="this.handleInput">{{
-        query
-      }}</span>
-
-      <IconSearch
-        class="icon"
-        v-if="editedSearchQuery && editedSearchQuery.length"
-      />
-      <IconEdit v-else class="icon" @click="() => (this.edit = !this.edit)" />
-    </h2>
-
-    <div v-if="!loading">
-      <div v-if="torrents.length > 0">
-        <table>
-          <thead class="table__header noselect">
-            <tr>
-              <th
-                v-for="column in columns"
-                :key="column"
-                @click="sortTable(column)"
-                :class="column === selectedColumn ? 'active' : null"
-              >
-                {{ column }}
-                <span v-if="prevCol === column && direction">↑</span>
-                <span v-if="prevCol === column && !direction">↓</span>
-              </th>
-            </tr>
-            <!--             <th
-              @click="sortTable('name')"
-              :class="selectedSortableClass('name')"
-            >
-              <span>Name</span>
-              <span v-if="prevCol === 'name' && direction">↑</span>
-              <span v-if="prevCol === 'name' && !direction">↓</span>
-            </th>
-            <th
-              @click="sortTable('seed')"
-              :class="selectedSortableClass('seed')"
-            >
-              <span>Seed</span>
-              <span v-if="prevCol === 'seed' && direction">↑</span>
-              <span v-if="prevCol === 'seed' && !direction">↓</span>
-            </th>
-            <th
-              @click="sortTable('size')"
-              :class="selectedSortableClass('size')"
-            >
-              <span>Size</span>
-              <span v-if="prevCol === 'size' && direction">↑</span>
-              <span v-if="prevCol === 'size' && !direction">↓</span>
-            </th>
-
-            <th>
-              <span>Magnet</span>
-            </th> -->
-          </thead>
-
-          <tbody>
-            <tr
-              v-for="torrent in torrents"
-              class="table__content"
-              :key="torrent.magnet"
-            >
-              <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
-              <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
-              <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
-              <td
-                @click="sendTorrent(torrent.magnet, torrent.name, $event)"
-                class="download"
-              >
-                <IconMagnet />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div style="display: flex; justify-content: center; padding: 1rem">
-          <seasonedButton @click="resetTorrentsAndToggleEditSearchQuery"
-            >Edit search query</seasonedButton
-          >
-        </div>
-      </div>
-
-      <div
-        v-else
-        style="
-          display: flex;
-          padding-bottom: 2rem;
-          justify-content: center;
-          flex-direction: column;
-          width: 100%;
-          align-items: center;
-        "
-      >
-        <h2>No results found</h2>
-        <br />
-
-        <div class="editQuery" v-if="editSearchQuery">
-          <seasonedInput
-            placeholder="Torrent query"
-            :value.sync="editedSearchQuery"
-            @enter="fetchTorrents(editedSearchQuery)"
-          />
-
-          <div style="height: 45px; width: 5px"></div>
-
-          <seasonedButton @click="fetchTorrents(editedSearchQuery)"
-            >Search</seasonedButton
-          >
-        </div>
-
-        <seasonedButton
-          @click="toggleEditSearchQuery"
-          :active="editSearchQuery ? true : false"
-          >Edit search query</seasonedButton
-        >
-      </div>
-    </div>
-    <div v-else class="torrentloader"><i></i></div>
-  </div>
-</template>
-
-<script>
-import store from "@/store";
-import { sortableSize } from "@/utils";
-import { searchTorrents, addMagnet } from "@/api";
-
-import IconMagnet from "../icons/IconMagnet";
-import IconEdit from "../icons/IconEdit";
-import IconSearch from "../icons/IconSearch";
-
-import SeasonedButton from "@/components/ui/SeasonedButton";
-import SeasonedInput from "@/components/ui/SeasonedInput";
-import ToggleButton from "@/components/ui/ToggleButton";
-
-export default {
-  components: {
-    IconMagnet,
-    IconEdit,
-    IconSearch,
-    SeasonedButton,
-    SeasonedInput,
-    ToggleButton
-  },
-  props: {
-    query: {
-      type: String,
-      require: true
-    },
-    tmdb_id: {
-      type: Number,
-      require: true
-    },
-    tmdb_type: String,
-    admin: Boolean,
-    show: Boolean
-  },
-  data() {
-    return {
-      edit: true,
-      loading: false,
-      torrents: [],
-      torrentResponse: undefined,
-      currentPage: 0,
-      prevCol: "",
-      direction: false,
-      release_types: ["all"],
-      selectedRelaseType: "all",
-      editSearchQuery: false,
-      editedSearchQuery: "",
-
-      columns: ["name", "seed", "size", "magnet"],
-      selectedColumn: null
-    };
-  },
-  created() {
-    this.fetchTorrents().then(_ => this.sortTable("size"));
-  },
-  watch: {
-    selectedRelaseType: function (newValue) {
-      this.applyFilter(newValue);
-    }
-  },
-  methods: {
-    selectedSortableClass(headerName) {
-      return headerName === this.prevCol ? "active" : "";
-    },
-    resetTorrentsAndToggleEditSearchQuery() {
-      this.torrents = [];
-      this.toggleEditSearchQuery();
-    },
-    toggleEditSearchQuery() {
-      this.editSearchQuery = !this.editSearchQuery;
-    },
-    expand(event, name) {
-      const existingExpandedElement =
-        document.getElementsByClassName("expanded")[0];
-
-      const clickedElement = event.target.parentNode;
-      const scopedStyleDataVariable = Object.keys(clickedElement.dataset)[0];
-
-      if (existingExpandedElement) {
-        const expandedSibling =
-          event.target.parentNode.nextSibling.className === "expanded";
-
-        existingExpandedElement.remove();
-        const table = document.getElementsByTagName("table")[0];
-        table.style.display = "block";
-
-        if (expandedSibling) {
-          return;
-        }
-      }
-
-      const nameRow = document.createElement("tr");
-      const nameCol = document.createElement("td");
-      nameRow.className = "expanded";
-      nameRow.dataset[scopedStyleDataVariable] = "";
-      nameCol.innerText = name;
-      nameCol.dataset[scopedStyleDataVariable] = "";
-
-      nameRow.appendChild(nameCol);
-
-      clickedElement.insertAdjacentElement("afterend", nameRow);
-    },
-    sendTorrent(magnet, name, event) {
-      this.$notifications.info({
-        title: "Adding torrent 🦜",
-        description: this.query,
-        timeout: 3000
-      });
-
-      event.target.parentNode.classList.add("active");
-      addMagnet(magnet, name, this.tmdb_id)
-        .catch(resp => {
-          console.log("error:", resp.data);
-        })
-        .then(resp => {
-          console.log("addTorrent resp: ", resp);
-          this.$notifications.success({
-            title: "Torrent added 🎉",
-            description: this.query,
-            timeout: 3000
-          });
-        });
-    },
-    sortTable(col, sameDirection = false) {
-      if (this.prevCol === col && sameDirection === false) {
-        this.direction = !this.direction;
-      }
-
-      if (col === "name") this.sortName();
-      else if (col === "seed") this.sortSeed();
-      else if (col === "size") this.sortSize();
-
-      this.prevCol = col;
-    },
-    sortName() {
-      const torrentsCopy = [...this.torrents];
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
-      } else {
-        this.torrents = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
-      }
-    },
-    sortSeed() {
-      const torrentsCopy = [...this.torrents];
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort(
-          (a, b) => parseInt(a.seed) - parseInt(b.seed)
-        );
-      } else {
-        this.torrents = torrentsCopy.sort(
-          (a, b) => parseInt(b.seed) - parseInt(a.seed)
-        );
-      }
-    },
-    sortSize() {
-      const torrentsCopy = [...this.torrents];
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort(
-          (a, b) =>
-            parseInt(sortableSize(a.size)) - parseInt(sortableSize(b.size))
-        );
-      } else {
-        this.torrents = torrentsCopy.sort(
-          (a, b) =>
-            parseInt(sortableSize(b.size)) - parseInt(sortableSize(a.size))
-        );
-      }
-    },
-    findRelaseTypes() {
-      this.torrents.forEach(item =>
-        this.release_types.push(...item.release_type)
-      );
-      this.release_types = [...new Set(this.release_types)];
-    },
-    applyFilter(item, index) {
-      this.selectedRelaseType = item;
-      const torrents = [...this.torrentResponse];
-
-      if (item === "all") {
-        this.torrents = torrents;
-        this.sortTable(this.prevCol, true);
-        return;
-      }
-
-      this.torrents = torrents.filter(torrent =>
-        torrent.release_type.includes(item)
-      );
-      this.sortTable(this.prevCol, true);
-    },
-    updateResultCountInStore() {
-      store.dispatch("torrentModule/setResults", this.torrents);
-      store.dispatch(
-        "torrentModule/setResultCount",
-        this.torrentResponse.length
-      );
-    },
-    filterDeadTorrents(torrents) {
-      return torrents.filter(torrent => {
-        if (isNaN(torrent.seed)) return false;
-        return parseInt(torrent.seed) > 0;
-      });
-    },
-    fetchTorrents(query = undefined) {
-      this.loading = true;
-      this.editSearchQuery = false;
-
-      return searchTorrents(query || this.query)
-        .then(data => {
-          const { results } = data;
-          if (results) {
-            this.torrentResponse = results;
-            this.torrents = this.filterDeadTorrents(results);
-          } else {
-            this.torrents = [];
-          }
-        })
-        .then(this.updateResultCountInStore)
-        .then(this.findRelaseTypes)
-        .catch(e => {
-          console.log("e:", e);
-          const error = e.toString();
-          this.errorMessage =
-            error.indexOf("401") != -1 ? "Permission denied" : "Nothing found";
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleInput(event) {
-      this.editedSearchQuery = event.target.innerText;
-      console.log("edit text:", this.editedSearchQuery);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "src/scss/variables";
-.expanded {
-  display: flex;
-  padding: 0.25rem 1rem;
-  max-width: 100%;
-  border-left: 1px solid $text-color;
-  border-right: 1px solid $text-color;
-  border-bottom: 1px solid $text-color;
-
-  td {
-    word-break: break-all;
-    padding: 0.5rem 0.15rem;
-    width: 100%;
-  }
-}
-
-$checkboxSize: 20px;
-$ui-border-width: 2px;
-
-.checkbox {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: $checkboxSize * 0.5;
-
-  input[type="checkbox"] {
-    display: block;
-    opacity: 0;
-    position: absolute;
-
-    + div {
-      position: relative;
-      display: inline-block;
-      padding-left: 1.25rem;
-      font-size: 20px;
-      line-height: $checkboxSize + $ui-border-width * 2;
-      left: $checkboxSize;
-      cursor: pointer;
-
-      &::before {
-        content: "";
-        display: inline-block;
-        position: absolute;
-        left: -$checkboxSize;
-        border: $ui-border-width solid var(--color-green);
-        width: $checkboxSize;
-        height: $checkboxSize;
-      }
-
-      &::after {
-        transition: all 0.3s ease;
-        content: "";
-        position: absolute;
-        display: inline-block;
-        left: -$checkboxSize + $ui-border-width;
-        top: $ui-border-width;
-        width: $checkboxSize + $ui-border-width;
-        height: $checkboxSize + $ui-border-width;
-      }
-    }
-
-    &:checked {
-      + div::after {
-        background-color: var(--color-green);
-        opacity: 1;
-      }
-    }
-
-    &:hover:not(checked) {
-      + div::after {
-        background-color: var(--color-green);
-        opacity: 0.4;
-      }
-    }
-
-    &:focus {
-      + div::before {
-        outline: 2px solid Highlight;
-        outline-style: auto;
-        outline-color: -webkit-focus-ring-color;
-      }
-    }
-  }
-}
-</style>
-<style lang="scss" scoped>
-@import "src/scss/variables";
-@import "src/scss/media-queries";
-@import "src/scss/elements";
-
-h2 {
-  font-size: 20px;
-}
-
-thead {
-  user-select: none;
-  -webkit-user-select: none;
-  color: var(--background-color);
-  text-transform: uppercase;
-  cursor: pointer;
-  background-color: var(--text-color);
-  letter-spacing: 0.8px;
-  font-size: 1rem;
-  border: 1px solid var(--text-color-90);
-
-  th:first-of-type {
-    border-top-left-radius: 8px;
-  }
-
-  th:last-of-type {
-    border-top-right-radius: 8px;
-  }
-}
-
-tbody {
-  tr > td:first-of-type {
-    white-space: unset;
-  }
-
-  tr > td:not(td:first-of-type) {
-    text-align: center;
-  }
-
-  tr > td:last-of-type {
-    cursor: pointer;
-  }
-
-  tr td:first-of-type {
-    border-left: 1px solid var(--text-color-90);
-  }
-
-  tr td:last-of-type {
-    border-right: 1px solid var(--text-color-90);
-  }
-
-  tr:last-of-type {
-    td {
-      border-bottom: 1px solid var(--text-color-90);
-    }
-
-    td:first-of-type {
-      border-bottom-left-radius: 8px;
-    }
-    td:last-of-type {
-      border-bottom-right-radius: 8px;
-    }
-  }
-
-  tr:nth-child(even) {
-    background-color: var(--background-70);
-  }
-}
-
-th,
-td {
-  padding: 0.35rem 0.25rem;
-  white-space: nowrap;
-
-  svg {
-    width: 24px;
-    fill: var(--text-color);
-  }
-}
-
-.toggle {
-  max-width: unset !important;
-  margin: 1rem 0;
-}
-
-.container {
-  background-color: $background-color;
-  padding: 0 1rem;
-}
-
-.torrentHeader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 20px;
-
-  &-text {
-    font-weight: 400;
-    text-transform: uppercase;
-    font-size: 20px;
-    // color: $green;
-    text-align: center;
-    margin: 0;
-
-    .icon {
-      vertical-align: text-top;
-      margin-left: 1rem;
-      fill: var(--text-color);
-      width: 22px;
-      height: 22px;
-      // stroke: white !important;
-    }
-
-    &.editable {
-      cursor: pointer;
-    }
-  }
-
-  &-editIcon {
-    margin-left: 10px;
-    margin-top: -3px;
-    width: 22px;
-    height: 22px;
-
-    &:hover {
-      fill: $green;
-      cursor: pointer;
-    }
-  }
-}
-
-table {
-  // border-collapse: collapse;
-  border-spacing: 0;
-  margin-top: 1rem;
-  width: 100%;
-  // table-layout: fixed;
-}
-
-// .table__content,
-// .table__header {
-//   display: flex;
-//   padding: 0;
-//   border-left: 1px solid $text-color;
-//   border-right: 1px solid $text-color;
-//   border-bottom: 1px solid $text-color;
-
-//   th,
-//   td {
-//     display: flex;
-//     flex-direction: column;
-//     flex-basis: 100%;
-
-//     padding: 0.4rem;
-
-//     white-space: nowrap;
-//     text-overflow: ellipsis;
-//     overflow: hidden;
-//     min-width: 75px;
-//   }
-
-//   th:first-child,
-//   td:first-child {
-//     flex: 1;
-//   }
-
-//   th:not(:first-child),
-//   td:not(:first-child) {
-//     flex: 0.2;
-//   }
-
-//   th:nth-child(2),
-//   td:nth-child(2) {
-//     flex: 0.1;
-//   }
-
-//   @include mobile-only {
-//     th:first-child,
-//     td:first-child {
-//       display: none;
-
-//       &.show {
-//         display: block;
-//         align: flex-end;
-//       }
-//     }
-
-//     th:not(:first-child),
-//     td:not(:first-child) {
-//       flex: 1;
-//     }
-//   }
-// }
-
-.table__content {
-  td:not(:last-child) {
-    border-right: 1px solid $text-color;
-  }
-}
-
-.table__content:last-child {
-  margin-bottom: 1rem;
-
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-// .table__header {
-//   color: $text-color;
-//   text-transform: uppercase;
-//   cursor: pointer;
-//   background-color: $background-color-secondary;
-
-//   border-top: 1px solid $text-color;
-//   border-top-left-radius: 3px;
-//   border-top-right-radius: 3px;
-
-//   th {
-//     display: flex;
-//     flex-direction: row;
-//     font-weight: 400;
-//     letter-spacing: 0.7px;
-//     // font-size: 1.08rem;
-//     font-size: 15px;
-
-//     &::before {
-//       content: "";
-//       min-width: 0.2rem;
-//     }
-
-//     span:first-child {
-//       margin-right: 0.6rem;
-//     }
-//     span:nth-child(2) {
-//       margin-right: 0.1rem;
-//     }
-//   }
-
-//   th:not(:last-child) {
-//     border-right: 1px solid $text-color;
-//   }
-// }
-
-.editQuery {
-  display: flex;
-  width: 70%;
-  justify-content: center;
-  margin-bottom: 1rem;
-
-  @include mobile-only {
-    width: 90%;
-  }
-}
-
-.download {
-  &__icon {
-    fill: $text-color-70;
-    height: 1.2rem;
-
-    &:hover {
-      fill: $text-color;
-      cursor: pointer;
-    }
-  }
-
-  &.active &__icon {
-    fill: $green;
-  }
-}
-
-.torrentloader {
-  width: 100%;
-  padding: 2rem 0;
-
-  i {
-    animation: load 1s linear infinite;
-    border: 2px solid $text-color;
-    border-radius: 50%;
-    display: block;
-    height: 30px;
-    left: 50%;
-    margin: 0 auto;
-    width: 30px;
-
-    &:after {
-      border: 5px solid $green;
-      border-radius: 50%;
-      content: "";
-      left: 10px;
-      position: absolute;
-      top: 16px;
-    }
-  }
-}
-@keyframes load {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>

src/components/header/AutocompleteDropdown.vue

@@ -5,9 +5,9 @@
         v-for="result in searchResults"
         :key="`${result.index}-${result.title}-${result.type}`"
         @click="openPopup(result)"
-        :class="
+        :class="`result di-${result.index} ${
-          `result di-${result.index} ${result.index === index ? 'active' : ''}`
+          result.index === index ? 'active' : ''
-        "
+        }`"
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
@@ -24,239 +24,229 @@
   </transition>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "vuex";
+  import { ref, watch, defineProps } from "vue";
-import IconMovie from "src/icons/IconMovie";
+  import { useStore } from "vuex";
-import IconShow from "src/icons/IconShow";
+  import IconMovie from "@/icons/IconMovie.vue";
-import IconPerson from "src/icons/IconPerson";
+  import IconShow from "@/icons/IconShow.vue";
-import { elasticSearchMoviesAndShows } from "@/api";
+  import IconPerson from "@/icons/IconPerson.vue";
+  import { elasticSearchMoviesAndShows } from "../../api";
+  import type { Ref } from "vue";
 
-export default {
+  interface Props {
-  components: { IconMovie, IconShow, IconPerson },
+    query?: string;
-  props: {
+    index?: Number;
-    query: {
+    results?: Array<any>;
-      type: String,
+  }
-      default: null,
+
-      required: false
+  interface Emit {
-    },
+    (e: "update:results", value: Array<any>);
-    index: {
+  }
-      type: Number,
+
-      default: -1,
+  const numberOfResults: number = 10;
-      required: false
+  const props = defineProps<Props>();
-    },
+  const emit = defineEmits<Emit>();
-    results: {
+  const store = useStore();
-      type: Array,
+
-      default: [],
+  const searchResults: Ref<Array<any>> = ref([]);
-      required: false
+  const keyboardNavigationIndex: Ref<number> = ref(0);
-    }
+
-  },
+  // on load functions
-  watch: {
+  fetchAutocompleteResults();
-    query(newQuery) {
+  // end on load functions
-      if (newQuery && newQuery.length > 1) this.fetchAutocompleteResults();
+
-    }
+  watch(
-  },
+    () => props.query,
-  data() {
+    newQuery => {
-    return {
+      if (newQuery?.length > 0) fetchAutocompleteResults();
-      searchResults: [],
+    }
-      keyboardNavigationIndex: 0,
+  );
-      numberOfResults: 10
+
-    };
+  function openPopup(result) {
-  },
+    if (!result.id || !result.type) return;
-  methods: {
+
-    ...mapActions("popup", ["open"]),
+    store.dispatch("popup/open", { ...result });
-    openPopup(result) {
+  }
-      const { id, type } = result;
+
-      this.open({ id, type });
+  function fetchAutocompleteResults() {
-    },
+    keyboardNavigationIndex.value = 0;
-    fetchAutocompleteResults() {
+    searchResults.value = [];
-      this.keyboardNavigationIndex = 0;
+
-      this.searchResults = [];
+    elasticSearchMoviesAndShows(props.query, numberOfResults)
-
+      .then(elasticResponse => parseElasticResponse(elasticResponse))
-      elasticSearchMoviesAndShows(this.query, this.numberOfResults).then(
+      .then(_searchResults => {
-        resp => {
+        emit("update:results", _searchResults);
-          const data = resp.hits.hits;
+        searchResults.value = _searchResults;
-
+      });
-          let results = data.map(item => {
+  }
-            let index = null;
+
-            if (item._source.log.file.path.includes("movie")) index = "movie";
+  function parseElasticResponse(elasticResponse: any) {
-            if (item._source.log.file.path.includes("series")) index = "show";
+    const data = elasticResponse.hits.hits;
-
+
-            if (index === "movie" || index === "show") {
+    let results = data.map(item => {
-              return {
+      let index = null;
-                title:
+      if (item._source.log.file.path.includes("movie")) index = "movie";
-                  item._source.original_name || item._source.original_title,
+      if (item._source.log.file.path.includes("series")) index = "show";
-                id: item._source.id,
+
-                adult: item._source.adult,
+      if (index === "movie" || index === "show") {
-                type: index
+        return {
-              };
+          title: item._source.original_name || item._source.original_title,
-            }
+          id: item._source.id,
-          });
+          adult: item._source.adult,
-
+          type: index
-          results = this.removeDuplicates(results);
+        };
-          results = results.map((el, index) => {
+      }
-            return { ...el, index };
+    });
-          });
+
-
+    return removeDuplicates(results).map((el, index) => {
-          this.$emit("update:results", results);
+      return { ...el, index };
-          this.searchResults = results;
+    });
-        }
+  }
-      );
+
-    },
+  function removeDuplicates(searchResults) {
-    removeDuplicates(searchResults) {
+    let filteredResults = [];
-      let filteredResults = [];
+    searchResults.map(result => {
-      searchResults.map(result => {
+      if (result === undefined) return;
-        if (result === undefined) return;
+      const numberOfDuplicates = filteredResults.filter(
-        const numberOfDuplicates = filteredResults.filter(
+        filterItem => filterItem.id == result.id
-          filterItem => filterItem.id == result.id
+      );
-        );
+      if (numberOfDuplicates.length >= 1) {
-        if (numberOfDuplicates.length >= 1) {
+        return null;
-          return null;
+      }
-        }
+      filteredResults.push(result);
-        filteredResults.push(result);
+    });
-      });
+
-
+    return filteredResults;
-      if (this.adult == false) {
-        filteredResults = filteredResults.filter(
-          result => result.adult == false
-        );
-      }
-
-      return filteredResults;
-    }
-  },
-  created() {
-    if (this.query) this.fetchAutocompleteResults();
   }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
-$sizes: 22;
+  $sizes: 22;
 
-@for $i from 0 through $sizes {
+  @for $i from 0 through $sizes {
-  .dropdown .di-#{$i} {
+    .dropdown .di-#{$i} {
-    visibility: visible;
+      visibility: visible;
-    transform-origin: top center;
+      transform-origin: top center;
-    animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
+      animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
-  }
-}
-
-@keyframes scaleZ {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  80% {
-    transform: scale(1.07);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.dropdown {
-  top: var(--header-size);
-  position: relative;
-  height: 100%;
-  width: 100%;
-  max-width: 720px;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  z-index: 5;
-
-  margin-top: -1px;
-  border-top: none;
-  padding: 0;
-
-  @include mobile {
-    position: fixed;
-    left: 0;
-    max-width: 100vw;
-  }
-
-  @include tablet-min {
-    top: unset;
-    --gutter: 1.5rem;
-    max-width: calc(100% - (2 * var(--gutter)));
-    margin: -1px var(--gutter) 0 var(--gutter);
-  }
-
-  @include desktop {
-    max-width: 720px;
-  }
-}
-
-li.result {
-  background-color: var(--background-95);
-  color: var(--text-color-50);
-  padding: 0.5rem 2rem;
-  list-style: none;
-
-  opacity: 0;
-  height: 56px;
-  width: 100%;
-  visibility: hidden;
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 2rem;
-
-  font-size: 1.4rem;
-  text-transform: capitalize;
-  list-style: none;
-  cursor: pointer;
-  white-space: nowrap;
-
-  transition: color 0.1s ease, fill 0.4s ease;
-
-  span {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    transition: inherit;
-  }
-
-  &.active,
-  &:hover,
-  &:active {
-    color: var(--text-color);
-    border-bottom: 2px solid var(--color-green);
-
-    .type-icon {
-      fill: var(--text-color);
     }
   }
 
-  .type-icon {
+  @keyframes scaleZ {
-    width: 28px;
+    0% {
-    height: 28px;
+      opacity: 0;
-    margin-right: 1rem;
+      transform: scale(0);
-    transition: inherit;
+    }
-    fill: var(--text-color-50);
+    80% {
+      transform: scale(1.07);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-}
 
-li.info {
+  .dropdown {
-  visibility: hidden;
+    top: var(--header-size);
-  opacity: 0;
+    position: relative;
-  display: flex;
+    height: 100%;
-  justify-content: center;
+    width: 100%;
-  padding: 0 1rem;
+    max-width: 720px;
-  color: var(--text-color-50);
+    display: flex;
-  background-color: var(--background-95);
+    flex-direction: column;
-  color: var(--text-color-50);
+    flex-wrap: wrap;
-  font-size: 0.6rem;
+    z-index: 5;
-  height: 16px;
-  width: 100%;
-}
 
-.shut-leave-to {
+    margin-top: -1px;
-  height: 0px;
+    border-top: none;
-  transition: height 0.4s ease;
+    padding: 0;
-  flex-wrap: no-wrap;
+
-  overflow: hidden;
+    @include mobile {
-}
+      position: fixed;
+      left: 0;
+      max-width: 100vw;
+    }
+
+    @include tablet-min {
+      top: unset;
+      --gutter: 1.5rem;
+      max-width: calc(100% - (2 * var(--gutter)));
+      margin: -1px var(--gutter) 0 var(--gutter);
+    }
+
+    @include desktop {
+      max-width: 720px;
+    }
+  }
+
+  li.result {
+    background-color: var(--background-95);
+    color: var(--text-color-50);
+    padding: 0.5rem 2rem;
+    list-style: none;
+
+    opacity: 0;
+    height: 56px;
+    width: 100%;
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 2rem;
+
+    font-size: 1.4rem;
+    text-transform: capitalize;
+    list-style: none;
+    cursor: pointer;
+    white-space: nowrap;
+
+    transition: color 0.1s ease, fill 0.4s ease;
+
+    span {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      transition: inherit;
+    }
+
+    &.active,
+    &:hover,
+    &:active {
+      color: var(--text-color);
+      border-bottom: 2px solid var(--color-green);
+
+      .type-icon {
+        fill: var(--text-color);
+      }
+    }
+
+    .type-icon {
+      width: 28px;
+      height: 28px;
+      margin-right: 1rem;
+      transition: inherit;
+      fill: var(--text-color-50);
+    }
+  }
+
+  li.info {
+    visibility: hidden;
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    padding: 0 1rem;
+    color: var(--text-color-50);
+    background-color: var(--background-95);
+    color: var(--text-color-50);
+    font-size: 0.6rem;
+    height: 16px;
+    width: 100%;
+  }
+
+  .shut-leave-to {
+    height: 0px;
+    transition: height 0.4s ease;
+    flex-wrap: no-wrap;
+    overflow: hidden;
+  }
 </style>

src/components/header/NavigationHeader.vue

@@ -10,10 +10,10 @@
     <SearchInput />
 
     <Hamburger class="mobile-only" />
-
     <NavigationIcon class="desktop-only" :route="profileRoute" />
 
-    <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }">
+    <!-- <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }"> -->
+    <div class="navigation-icons-grid mobile-only" v-if="isOpen">
       <NavigationIcons>
         <NavigationIcon :route="profileRoute" />
       </NavigationIcons>
@@ -21,106 +21,104 @@
   </nav>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters, mapActions } from "vuex";
+  import { computed, defineProps, PropType } from "vue";
-import TmdbLogo from "@/icons/tmdb-logo";
+  import type { App } from "vue";
-import IconProfile from "@/icons/IconProfile";
+  import { useStore } from "vuex";
-import IconProfileLock from "@/icons/IconProfileLock";
+  import { useRoute } from "vue-router";
-import IconSettings from "@/icons/IconSettings";
+  import SearchInput from "@/components/header/SearchInput.vue";
-import IconActivity from "@/icons/IconActivity";
+  import Hamburger from "@/components/ui/Hamburger.vue";
-import SearchInput from "@/components/header/SearchInput";
+  import NavigationIcons from "@/components/header/NavigationIcons.vue";
-import NavigationIcons from "src/components/header/NavigationIcons";
+  import NavigationIcon from "@/components/header/NavigationIcon.vue";
-import NavigationIcon from "src/components/header/NavigationIcon";
+  import TmdbLogo from "@/icons/tmdb-logo.vue";
-import Hamburger from "@/components/ui/Hamburger";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconProfileLock from "@/icons/IconProfileLock.vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
 
-export default {
+  const route = useRoute();
-  components: {
+  const store = useStore();
-    NavigationIcons,
+
-    NavigationIcon,
+  const signinNavigationIcon: INavigationIcon = {
-    SearchInput,
+    title: "Signin",
-    TmdbLogo,
+    route: "/signin",
-    IconProfile,
+    icon: IconProfileLock
-    IconProfileLock,
+  };
-    IconSettings,
+
-    IconActivity,
+  const profileNavigationIcon: INavigationIcon = {
-    Hamburger
+    title: "Profile",
-  },
+    route: "/profile",
-  computed: {
+    icon: IconProfile
-    ...mapGetters("user", ["loggedIn"]),
+  };
-    ...mapGetters("hamburger", ["isOpen"]),
+
-    isHome() {
+  const isHome = computed(() => route.path === "/");
-      return this.$route.path === "/";
+  const isOpen = computed(() => store.getters["hamburger/isOpen"]);
-    },
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
-    profileRoute() {
+
-      return {
+  const profileRoute = computed(() =>
-        title: !this.loggedIn ? "Signin" : "Profile",
+    !loggedIn.value ? signinNavigationIcon : profileNavigationIcon
-        route: !this.loggedIn ? "/signin" : "/profile",
+  );
-        icon: !this.loggedIn ? IconProfileLock : IconProfile
-      };
-    }
-  }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.spacer {
+  .spacer {
-  @include mobile-only {
+    @include mobile-only {
+      width: 100%;
+      height: $header-size;
+    }
+  }
+
+  nav {
+    display: grid;
+    grid-template-columns: var(--header-size) 1fr var(--header-size);
+
+    > * {
+      z-index: 10;
+    }
+  }
+
+  .nav__logo {
+    overflow: hidden;
+  }
+
+  .logo {
+    padding: 1rem;
+    fill: var(--color-green);
+    width: var(--header-size);
+    height: var(--header-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $background-nav-logo;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.08);
+    }
+
+    @include mobile {
+      padding: 0.5rem;
+    }
+  }
+
+  .navigation-icons-grid {
+    display: flex;
+    flex-wrap: wrap;
+    position: fixed;
+    top: var(--header-size);
+    left: 0;
     width: 100%;
-    height: $header-size;
+    background-color: $background-95;
-  }
+    visibility: hidden;
-}
+    opacity: 0;
+    transition: opacity 0.4s ease;
 
-nav {
-  display: grid;
-  grid-template-columns: var(--header-size) 1fr var(--header-size);
-
-  > * {
-    z-index: 10;
-  }
-}
-
-.nav__logo {
-  overflow: hidden;
-}
-
-.logo {
-  padding: 1rem;
-  fill: var(--color-green);
-  width: var(--header-size);
-  height: var(--header-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: $background-nav-logo;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: scale(1.08);
-  }
-
-  @include mobile {
-    padding: 0.5rem;
-  }
-}
-
-.navigation-icons-grid {
-  display: flex;
-  flex-wrap: wrap;
-  position: fixed;
-  top: var(--header-size);
-  left: 0;
-  width: 100%;
-  background-color: $background-95;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-
-  &.open {
     opacity: 1;
     visibility: visible;
+
+    &.open {
+    }
   }
-}
 </style>

src/components/header/NavigationIcon.vue

@@ -1,8 +1,8 @@
 <template>
   <router-link
-    :to="{ path: route.route }"
+    :to="{ path: route?.route }"
-    :key="route.title"
+    :key="route?.title"
-    v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
+    v-if="route?.requiresAuth == undefined || (route?.requiresAuth && loggedIn)"
   >
     <li class="navigation-link" :class="{ active: route.route == active }">
       <component class="navigation-icon" :is="route.icon"></component>
@@ -11,71 +11,66 @@
   </router-link>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters, mapActions } from "vuex";
+  import { useStore } from "vuex";
+  import { computed, defineProps } from "vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
 
-export default {
+  interface Props {
-  name: "NavigationIcon",
+    route: INavigationIcon;
-  props: {
+    active?: string;
-    active: {
-      type: String,
-      required: false
-    },
-    route: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    ...mapGetters("user", ["loggedIn"])
   }
-};
+
+  defineProps<Props>();
+
+  const store = useStore();
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.navigation-link {
+  .navigation-link {
-  display: grid;
+    display: grid;
-  place-items: center;
+    place-items: center;
-  min-height: var(--header-size);
+    min-height: var(--header-size);
-  list-style: none;
+    list-style: none;
-  padding: 1rem 0.15rem;
+    padding: 1rem 0.15rem;
-  text-align: center;
+    text-align: center;
-  background-color: var(--background-color-secondary);
+    background-color: var(--background-color-secondary);
-  transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
+    transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-    fill 0.3s ease, background-color 0.5s ease;
+      fill 0.3s ease, background-color 0.5s ease;
 
-  &:hover {
+    &:hover {
-    transform: scale(1.05);
+      transform: scale(1.05);
-  }
+    }
 
-  &:hover,
+    &:hover,
-  &.active {
+    &.active {
-    background-color: var(--background-color);
+      background-color: var(--background-color);
 
-    span,
+      span,
-    .navigation-icon {
+      .navigation-icon {
-      color: var(--text-color);
+        color: var(--text-color);
-      fill: var(--text-color);
+        fill: var(--text-color);
+      }
+    }
+
+    span {
+      text-transform: uppercase;
+      font-size: 11px;
+      margin-top: 0.25rem;
+      color: var(--text-color-70);
     }
   }
 
-  span {
+  a {
-    text-transform: uppercase;
+    text-decoration: none;
-    font-size: 11px;
-    margin-top: 0.25rem;
-    color: var(--text-color-70);
   }
-}
 
-a {
+  .navigation-icon {
-  text-decoration: none;
+    width: 28px;
-}
+    fill: var(--text-color-70);
-
+    transition: inherit;
-.navigation-icon {
+  }
-  width: 28px;
-  fill: var(--text-color-70);
-  transition: inherit;
-}
 </style>

src/components/header/NavigationIcons.vue

@@ -10,94 +10,83 @@
   </ul>
 </template>
 
-<script>
+<script setup lang="ts">
-import NavigationIcon from "@/components/header/NavigationIcon";
+  import { ref, watch } from "vue";
-import IconInbox from "@/icons/IconInbox";
+  import { useRoute } from "vue-router";
-import IconNowPlaying from "@/icons/IconNowPlaying";
+  import NavigationIcon from "@/components/header/NavigationIcon.vue";
-import IconPopular from "@/icons/IconPopular";
+  import IconInbox from "@/icons/IconInbox.vue";
-import IconUpcoming from "@/icons/IconUpcoming";
+  import IconNowPlaying from "@/icons/IconNowPlaying.vue";
-import IconSettings from "@/icons/IconSettings";
+  import IconPopular from "@/icons/IconPopular.vue";
-import IconActivity from "@/icons/IconActivity";
+  import IconUpcoming from "@/icons/IconUpcoming.vue";
+  import IconSettings from "@/icons/IconSettings.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
 
-export default {
+  const route = useRoute();
-  name: "NavigationIcons",
+  const activeRoute = ref(window?.location?.pathname);
-  components: {
+  const routes: INavigationIcon[] = [
-    NavigationIcon,
+    {
-    IconInbox,
+      title: "Requests",
-    IconPopular,
+      route: "/list/requests",
-    IconNowPlaying,
+      icon: IconInbox
-    IconUpcoming,
+    },
-    IconSettings,
+    {
-    IconActivity
+      title: "Now Playing",
-  },
+      route: "/list/now_playing",
-  data() {
+      icon: IconNowPlaying
-    return {
+    },
-      routes: [
+    {
-        {
+      title: "Popular",
-          title: "Requests",
+      route: "/list/popular",
-          route: "/list/requests",
+      icon: IconPopular
-          icon: IconInbox
+    },
-        },
+    {
-        {
+      title: "Upcoming",
-          title: "Now Playing",
+      route: "/list/upcoming",
-          route: "/list/now_playing",
+      icon: IconUpcoming
-          icon: IconNowPlaying
+    },
-        },
+    {
-        {
+      title: "Activity",
-          title: "Popular",
+      route: "/activity",
-          route: "/list/popular",
+      requiresAuth: true,
-          icon: IconPopular
+      icon: IconActivity
-        },
+    },
-        {
+    {
-          title: "Upcoming",
+      title: "Torrents",
-          route: "/list/upcoming",
+      route: "/torrents",
-          icon: IconUpcoming
+      requiresAuth: true,
-        },
+      icon: IconBinoculars
-        {
+    },
-          title: "Activity",
+    {
-          route: "/activity",
+      title: "Settings",
-          requiresAuth: true,
+      route: "/profile?settings=true",
-          icon: IconActivity
+      requiresAuth: true,
-        },
+      icon: IconSettings
-        {
-          title: "Settings",
-          route: "/profile?settings=true",
-          requiresAuth: true,
-          icon: IconSettings
-        }
-      ],
-      activeRoute: null
-    };
-  },
-  watch: {
-    $route() {
-      this.activeRoute = window.location.pathname;
     }
-  },
+  ];
-  created() {
+
-    this.activeRoute = window.location.pathname;
+  watch(route, () => (activeRoute.value = window?.location?.pathname));
-  }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.navigation-icons {
+  .navigation-icons {
-  display: grid;
+    display: grid;
-  grid-column: 1fr;
+    grid-column: 1fr;
-  padding-left: 0;
+    padding-left: 0;
-  margin: 0;
+    margin: 0;
-  background-color: var(--background-color-secondary);
+    background-color: var(--background-color-secondary);
-  z-index: 15;
+    z-index: 15;
-  width: 100%;
+    width: 100%;
 
-  @include desktop {
+    @include desktop {
-    grid-template-rows: var(--header-size);
+      grid-template-rows: var(--header-size);
+    }
+
+    @include mobile {
+      grid-template-columns: 1fr 1fr;
+    }
   }
-
-  @include mobile {
-    grid-template-columns: 1fr 1fr;
-  }
-}
 </style>

src/components/header/SearchInput.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="search" :class="{ active: focusingInput }">
+    <div class="search" :class="{ active: inputIsActive }">
       <IconSearch class="search-icon" tabindex="-1" />
 
       <input
-        ref="input"
+        ref="inputElement"
         type="text"
         placeholder="Search for movie or show"
         aria-label="Search input for finding a movie or show"
@@ -13,21 +13,21 @@
         tabindex="0"
         v-model="query"
         @input="handleInput"
-        @click="focusingInput = true"
+        @click="focus"
         @keydown.escape="handleEscape"
         @keyup.enter="handleSubmit"
         @keydown.up="navigateUp"
         @keydown.down="navigateDown"
-        @focus="focusingInput = true"
+        @focus="focus"
-        @blur="focusingInput = false"
+        @blur="blur"
       />
 
       <IconClose
         tabindex="0"
         aria-label="button"
         v-if="query && query.length"
-        @click="resetQuery"
+        @click="clearInput"
-        @keydown.enter.stop="resetQuery"
+        @keydown.enter.stop="clearInput"
         class="close-icon"
       />
     </div>
@@ -36,246 +36,258 @@
       v-if="showAutocompleteResults"
       :query="query"
       :index="dropdownIndex"
-      :results.sync="dropdownResults"
+      v-model:results="dropdownResults"
     />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapGetters } from "vuex";
+  import { ref, computed } from "vue";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import { useStore } from "vuex";
-import AutocompleteDropdown from "@/components/header/AutocompleteDropdown";
+  import { useRouter } from "vue-router";
+  import { useRoute } from "vue-router";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
+  import IconSearch from "@/icons/IconSearch.vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import config from "../../config";
+  import type { Ref } from "vue";
+  import type { ListTypes } from "../../interfaces/IList";
 
-import IconSearch from "src/icons/IconSearch";
+  interface ISearchResult {
-import IconClose from "src/icons/IconClose";
+    title: string;
-import config from "@/config";
+    id: number;
+    adult: boolean;
+    type: ListTypes;
+  }
 
-export default {
+  const store = useStore();
-  name: "SearchInput",
+  const router = useRouter();
-  components: {
+  const route = useRoute();
-    SeasonedButton,
-    AutocompleteDropdown,
-    IconClose,
-    IconSearch
-  },
-  data() {
-    return {
-      query: null,
-      disabled: false,
-      dropdownIndex: -1,
-      dropdownResults: [],
-      focusingInput: false,
-      showAutocomplete: false
-    };
-  },
-  computed: {
-    ...mapGetters("popup", ["isOpen"]),
-    showAutocompleteResults() {
-      return (
-        !this.disabled &&
-        this.focusingInput &&
-        this.query &&
-        this.query.length > 0
-      );
-    }
-  },
-  created() {
-    const params = new URLSearchParams(window.location.search);
-    if (params && params.has("query")) {
-      this.query = decodeURIComponent(params.get("query"));
-    }
 
-    const elasticUrl = config.ELASTIC_URL;
+  const query: Ref<string> = ref(null);
-    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === "") {
+  const disabled: Ref<boolean> = ref(false);
-      this.disabled = true;
+  const dropdownIndex: Ref<number> = ref(-1);
-    }
+  const dropdownResults: Ref<ISearchResult[]> = ref([]);
-  },
+  const inputIsActive: Ref<boolean> = ref(false);
-  methods: {
+  const showAutocomplete: Ref<boolean> = ref(false);
-    ...mapActions("popup", ["open"]),
+  const inputElement: Ref<any> = ref(null);
-    navigateDown() {
-      if (this.dropdownIndex < this.dropdownResults.length - 1) {
-        this.dropdownIndex++;
-      }
-    },
-    navigateUp() {
-      if (this.dropdownIndex > -1) this.dropdownIndex--;
 
-      const input = this.$refs.input;
+  const isOpen = computed(() => store.getters["popup/isOpen"]);
-      const textLength = input.value.length;
+  const showAutocompleteResults = computed(() => {
+    return (
+      !disabled.value &&
+      inputIsActive.value &&
+      query.value &&
+      query.value.length > 0
+    );
+  });
 
-      setTimeout(() => {
+  const params = new URLSearchParams(window.location.search);
-        input.focus();
+  if (params && params.has("query")) {
-        input.setSelectionRange(textLength, textLength + 1);
+    query.value = decodeURIComponent(params.get("query"));
-      }, 1);
+  }
-    },
-    search() {
-      const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
 
-      this.$router.push({
+  const elasticUrl = config.ELASTIC_URL;
-        name: "search",
+  if (elasticUrl === undefined || elasticUrl === "") {
-        query: {
+    disabled.value = true;
-          ...this.$route.query,
+  }
-          query: encodedQuery
-        }
-      });
-    },
-    resetQuery(event) {
-      this.query = "";
-      this.$refs.input.focus();
-    },
-    handleInput(e) {
-      this.$emit("input", this.query);
-      this.dropdownIndex = -1;
-    },
-    handleSubmit() {
-      if (!this.query || this.query.length == 0) return;
 
-      if (this.dropdownIndex >= 0) {
+  function navigateDown() {
-        const resultItem = this.dropdownResults[this.dropdownIndex];
+    if (dropdownIndex.value < dropdownResults.value.length - 1) {
-
+      dropdownIndex.value++;
-        console.log("resultItem:", resultItem);
-        this.open({
-          id: resultItem.id,
-          type: resultItem.type
-        });
-        return;
-      }
-
-      this.search();
-      this.$refs.input.blur();
-      this.dropdownIndex = -1;
-    },
-    handleEscape() {
-      if (!this.isOpen) {
-        this.$refs.input.blur();
-        this.dropdownIndex = -1;
-      }
     }
   }
-};
+
+  function navigateUp() {
+    if (dropdownIndex.value > -1) dropdownIndex.value--;
+
+    const textLength = inputElement.value.value.length;
+
+    setTimeout(() => {
+      inputElement.value.focus();
+      inputElement.value.setSelectionRange(textLength, textLength + 1);
+    }, 1);
+  }
+
+  function search() {
+    const encodedQuery = encodeURI(query.value.replace("/ /g", "+"));
+
+    router.push({
+      name: "search",
+      query: {
+        ...route.query,
+        query: encodedQuery
+      }
+    });
+  }
+
+  function handleInput(e) {
+    dropdownIndex.value = -1;
+  }
+
+  function handleSubmit() {
+    if (!query.value || query.value.length == 0) return;
+
+    if (dropdownIndex.value >= 0) {
+      const resultItem = dropdownResults.value[dropdownIndex.value];
+
+      store.dispatch("popup/open", {
+        id: resultItem?.id,
+        type: resultItem?.type
+      });
+      return;
+    }
+
+    search();
+    reset();
+  }
+
+  function focus() {
+    inputIsActive.value = true;
+  }
+
+  function blur(event: MouseEvent = null) {
+    return setTimeout(reset, 150);
+  }
+
+  function reset() {
+    inputElement.value.blur();
+    dropdownIndex.value = -1;
+    inputIsActive.value = false;
+  }
+
+  function clearInput(event: MouseEvent) {
+    query.value = "";
+    inputElement.value.focus();
+  }
+
+  function handleEscape() {
+    if (!isOpen.value) reset();
+  }
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
 
-.close-icon {
+  .close-icon {
-  position: absolute;
+    position: absolute;
-  top: calc(50% - 12px);
+    top: calc(50% - 12px);
-  right: 0;
+    right: 0;
-  cursor: pointer;
+    cursor: pointer;
-  fill: var(--text-color);
+    fill: var(--text-color);
-  height: 24px;
+    height: 24px;
-  width: 24px;
+    width: 24px;
 
-  @include tablet-min {
+    @include tablet-min {
-    right: 6px;
+      right: 6px;
-  }
-}
-
-.filter {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin: 1rem 2rem;
-
-  h2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    font-weight: 400;
-  }
-
-  &-items {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    > :not(:first-child) {
-      margin-left: 1rem;
     }
   }
-}
 
-hr {
+  .filter {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-bottom: 1px solid $text-color-50;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 90%;
-}
-
-.search.active {
-  input {
-    border-color: var(--color-green);
-  }
-
-  .search-icon {
-    fill: var(--color-green);
-  }
-}
-
-.search {
-  height: $header-size;
-  display: flex;
-  position: fixed;
-  flex-wrap: wrap;
-  z-index: 5;
-  border: 0;
-  background-color: $background-color-secondary;
-
-  // TODO check if this is for mobile
-  width: calc(100% - 110px);
-  top: 0;
-  right: 55px;
-
-  @include tablet-min {
-    position: relative;
     width: 100%;
-    right: 0px;
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 2rem;
+
+    h2 {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-weight: 400;
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      > :not(:first-child) {
+        margin-left: 1rem;
+      }
+    }
   }
 
-  input {
+  hr {
     display: block;
-    width: 100%;
+    height: 1px;
-    padding: 13px 28px 13px 45px;
-    outline: none;
-    margin: 0;
     border: 0;
-    background-color: $background-color-secondary;
+    border-bottom: 1px solid $text-color-50;
-    font-weight: 300;
+    margin-top: 10px;
-    font-size: 18px;
+    margin-bottom: 10px;
-    color: $text-color;
+    width: 90%;
-    border-bottom: 1px solid transparent;
+  }
 
-    &:focus {
+  .search.active {
-      // border-bottom: 1px solid var(--color-green);
+    input {
       border-color: var(--color-green);
     }
 
-    @include tablet-min {
+    .search-icon {
-      font-size: 24px;
+      fill: var(--color-green);
-      padding: 13px 40px 13px 60px;
     }
   }
 
-  &-icon {
+  .search {
-    width: 20px;
+    height: $header-size;
-    height: 20px;
+    display: flex;
-    fill: var(--text-color-50);
+    position: fixed;
-    pointer-events: none;
+    flex-wrap: wrap;
-    position: absolute;
+    z-index: 5;
-    left: 15px;
+    border: 0;
-    top: calc(50% - 10px);
+    background-color: $background-color-secondary;
+
+    // TODO check if this is for mobile
+    width: calc(100% - 110px);
+    top: 0;
+    right: 55px;
 
     @include tablet-min {
-      width: 24px;
+      position: relative;
-      height: 24px;
+      width: 100%;
-      top: calc(50% - 12px);
+      right: 0px;
-      left: 22px;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      padding: 13px 28px 13px 45px;
+      outline: none;
+      margin: 0;
+      border: 0;
+      background-color: $background-color-secondary;
+      font-weight: 300;
+      font-size: 18px;
+      color: $text-color;
+      border-bottom: 1px solid transparent;
+
+      &:focus {
+        // border-bottom: 1px solid var(--color-green);
+        border-color: var(--color-green);
+      }
+
+      @include tablet-min {
+        font-size: 24px;
+        padding: 13px 40px 13px 60px;
+      }
+    }
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      fill: var(--text-color-50);
+      pointer-events: none;
+      position: absolute;
+      left: 15px;
+      top: calc(50% - 10px);
+
+      @include tablet-min {
+        width: 24px;
+        height: 24px;
+        top: calc(50% - 12px);
+        left: 22px;
+      }
     }
   }
-}
 </style>

src/components/popup/ActionButton.vue

@@ -1,82 +1,85 @@
 <template>
   <li
     class="sidebar-list-element"
-    @click="event => $emit('click', event)"
+    @click="emit('click')"
     :class="{ active, disabled }"
   >
     <slot></slot>
   </li>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { defineProps, defineEmits } from "vue";
-  props: {
+
-    active: {
+  interface Props {
-      type: Boolean,
+    active?: Boolean;
-      default: false
+    disabled?: Boolean;
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
   }
-};
+
+  interface Emit {
+    (e: "click");
+  }
+
+  const emit = defineEmits<Emit>();
+  defineProps<Props>();
 </script>
 
 <style lang="scss">
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-li.sidebar-list-element {
+  li.sidebar-list-element {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  text-decoration: none;
+    text-decoration: none;
-  text-transform: uppercase;
+    text-transform: uppercase;
-  color: var(--text-color-50);
+    color: var(--text-color-50);
-  font-size: 12px;
+    font-size: 12px;
-  padding: 10px 0;
+    padding: 10px 0;
-  border-bottom: 1px solid var(--text-color-5);
+    border-bottom: 1px solid var(--text-color-5);
-  cursor: pointer;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
 
-  &:first-of-type {
+    &:first-of-type {
-    padding-top: 0;
+      padding-top: 0;
-  }
+    }
-
-  div > svg,
-  svg {
-    width: 26px;
-    height: 26px;
-    margin-right: 1rem;
-    transition: all 0.3s ease;
-    fill: var(--text-color-70);
-  }
-
-  &:hover,
-  &.active {
-    color: var(--text-color);
 
     div > svg,
     svg {
-      fill: var(--text-color);
+      width: 26px;
-      transform: scale(1.1, 1.1);
+      height: 26px;
+      margin-right: 1rem;
+      transition: all 0.3s ease;
+      fill: var(--text-color-70);
+    }
+
+    &:hover,
+    &.active {
+      color: var(--text-color);
+
+      div > svg,
+      svg {
+        fill: var(--text-color);
+        transform: scale(1.1, 1.1);
+      }
+    }
+
+    &.active > div > svg,
+    &.active > svg {
+      fill: var(--color-green);
+    }
+
+    &.disabled {
+      cursor: default;
+    }
+
+    .pending {
+      color: #f8bd2d;
+    }
+
+    .meta {
+      margin-left: auto;
+      text-align: right;
     }
   }
-
-  &.active > div > svg,
-  &.active > svg {
-    fill: var(--color-green);
-  }
-
-  &.disabled {
-    cursor: default;
-  }
-
-  .pending {
-    color: #f8bd2d;
-  }
-
-  .meta {
-    margin-left: auto;
-    text-align: right;
-  }
-}
 </style>

src/components/popup/Description.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    id="description"
+    ref="descriptionElement"
     class="movie-description noselect"
     @click="overflow ? (truncated = !truncated) : null"
   >
-    <span ref="description" :class="{ truncated }">{{ description }}</span>
+    <span :class="{ truncated }">{{ description }}</span>
 
     <button v-if="description && overflow" class="truncate-toggle">
       <IconArrowDown :class="{ rotate: !truncated }" />
@@ -12,113 +12,114 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import IconArrowDown from "../../icons/IconArrowDown";
+  import { ref, defineProps, onMounted } from "vue";
-export default {
+  import IconArrowDown from "../../icons/IconArrowDown.vue";
-  components: { IconArrowDown },
+  import type { Ref } from "vue";
-  props: {
-    description: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      truncated: true,
-      overflow: false
-    };
-  },
-  mounted() {
-    this.checkDescriptionOverflowing();
-  },
-  methods: {
-    checkDescriptionOverflowing() {
-      const descriptionEl = document.getElementById("description");
-      if (!descriptionEl) return;
 
-      const { height, width } = descriptionEl.getBoundingClientRect();
+  interface Props {
-      const { fontSize, lineHeight } = getComputedStyle(descriptionEl);
+    description: string;
-
+  }
-      const elementWithoutOverflow = document.createElement("div");
+
-      elementWithoutOverflow.setAttribute(
+  const props = defineProps<Props>();
-        "style",
+  const truncated: Ref<boolean> = ref(true);
-        `max-width: ${Math.ceil(
+  const overflow: Ref<boolean> = ref(false);
-          width + 10
+  const descriptionElement: Ref<HTMLElement> = ref(null);
-        )}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
+
-      );
+  onMounted(checkDescriptionOverflowing);
-      // Don't know why need to add 10px to width, but works out perfectly
+
-
+  // The description element overflows text after 4 rows with css
-      elementWithoutOverflow.classList.add("dummy-non-overflow");
+  // line-clamp this takes the same text and adds to a temporary
-      elementWithoutOverflow.innerText = this.description;
+  // element without css overflow. If the temp element is
-
+  // higher then description element, we display expand button
-      document.body.appendChild(elementWithoutOverflow);
+  function checkDescriptionOverflowing() {
-      const elemWithoutOverflowHeight =
+    const element = descriptionElement?.value;
-        elementWithoutOverflow.getBoundingClientRect()["height"];
+    if (!element) return;
-
+
-      this.overflow = elemWithoutOverflowHeight > height;
+    const { height, width } = element.getBoundingClientRect();
-      this.removeElements(document.querySelectorAll(".dummy-non-overflow"));
+    const { fontSize, lineHeight } = getComputedStyle(element);
-    },
+
-    removeElements: elems => elems.forEach(el => el.remove())
+    const descriptionComparisonElement = document.createElement("div");
+    descriptionComparisonElement.setAttribute(
+      "style",
+      `max-width: ${Math.ceil(
+        width + 10
+      )}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
+    );
+    // Don't know why need to add 10px to width, but works out perfectly
+
+    descriptionComparisonElement.classList.add("dummy-non-overflow");
+    descriptionComparisonElement.innerText = props.description;
+
+    document.body.appendChild(descriptionComparisonElement);
+    const elemWithoutOverflowHeight =
+      descriptionComparisonElement.getBoundingClientRect()["height"];
+
+    overflow.value = elemWithoutOverflowHeight > height;
+    removeElements(document.querySelectorAll(".dummy-non-overflow"));
+  }
+
+  function removeElements(elems: NodeListOf<Element>) {
+    elems.forEach(el => el.remove());
   }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.movie-description {
+  .movie-description {
-  font-weight: 300;
+    font-weight: 300;
-  font-size: 13px;
+    font-size: 13px;
-  line-height: 1.8;
+    line-height: 1.8;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
-  transition: all 1s ease;
+    transition: all 1s ease;
 
-  @include tablet-min {
+    @include tablet-min {
-    margin-bottom: 30px;
+      margin-bottom: 30px;
-    font-size: 14px;
+      font-size: 14px;
-  }
-}
-
-span.truncated {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-}
-
-.truncate-toggle {
-  border: none;
-  background: none;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: var(--text-color);
-  margin-top: 1rem;
-  cursor: pointer;
-
-  svg {
-    transition: 0.4s ease all;
-    height: 22px;
-    width: 22px;
-    fill: var(--text-color);
-
-    &.rotate {
-      transform: rotateX(180deg);
     }
   }
 
-  &::before,
+  span.truncated {
-  &::after {
+    display: -webkit-box;
-    content: "";
+    overflow: hidden;
-    flex: 1;
+    -webkit-line-clamp: 4;
-    border-bottom: 1px solid var(--text-color-50);
+    -webkit-box-orient: vertical;
   }
-  &::before {
+
-    margin-right: 1rem;
+  .truncate-toggle {
+    border: none;
+    background: none;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: var(--text-color);
+    margin-top: 1rem;
+    cursor: pointer;
+
+    svg {
+      transition: 0.4s ease all;
+      height: 22px;
+      width: 22px;
+      fill: var(--text-color);
+
+      &.rotate {
+        transform: rotateX(180deg);
+      }
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      border-bottom: 1px solid var(--text-color-50);
+    }
+    &::before {
+      margin-right: 1rem;
+    }
+    &::after {
+      margin-left: 1rem;
+    }
   }
-  &::after {
-    margin-left: 1rem;
-  }
-}
 </style>

src/components/popup/Detail.vue

@@ -7,52 +7,48 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { defineProps } from "vue";
-  props: {
+
-    title: {
+  interface Props {
-      type: String,
+    title: string;
-      required: true
+    detail?: string | number;
-    },
-    detail: {
-      required: false,
-      default: null
-    }
   }
-};
+
+  defineProps<Props>();
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.movie-detail {
+  .movie-detail {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 
-  &:last-of-type {
+    &:last-of-type {
-    margin-bottom: 0px;
+      margin-bottom: 0px;
-  }
+    }
 
-  @include tablet-min {
+    @include tablet-min {
-    margin-bottom: 30px;
+      margin-bottom: 30px;
-  }
+    }
 
-  h2.title {
+    h2.title {
-    margin: 0;
+      margin: 0;
-    font-weight: 400;
+      font-weight: 400;
-    text-transform: uppercase;
+      text-transform: uppercase;
-    font-size: 1.2rem;
+      font-size: 1.2rem;
-    color: var(--color-green);
+      color: var(--color-green);
 
-    @include mobile {
+      @include mobile {
-      font-size: 1.1rem;
+        font-size: 1.1rem;
+      }
+    }
+
+    span.info {
+      font-weight: 300;
+      font-size: 1rem;
+      letter-spacing: 0.8px;
+      margin-top: 5px;
     }
   }
-
-  span.info {
-    font-weight: 300;
-    font-size: 1rem;
-    letter-spacing: 0.8px;
-    margin-top: 5px;
-  }
-}
 </style>

src/components/popup/Movie.vue

@@ -2,7 +2,7 @@
   <section class="movie">
     <!-- HEADER w/ POSTER -->
     <header
-      ref="header"
+      ref="backdropElement"
       :class="compact ? 'compact' : ''"
       @click="compact = !compact"
     >
@@ -10,13 +10,13 @@
         <img
           class="movie-item__img is-loaded"
           ref="poster-image"
-          src="/assets/placeholder.png"
+          :src="poster"
         />
       </figure>
 
-      <div v-if="movie" class="movie__title">
+      <div v-if="media" class="movie__title">
-        <h1>{{ movie.title || movie.name }}</h1>
+        <h1>{{ media.title || media.name }}</h1>
-        <i>{{ movie.tagline }}</i>
+        <i>{{ media.tagline }}</i>
       </div>
       <loading-placeholder v-else :count="2" />
     </header>
@@ -25,11 +25,15 @@
     <div class="movie__main">
       <div class="movie__wrap movie__wrap--main">
         <!-- SIDEBAR ACTIONS -->
-        <div class="movie__actions" v-if="movie">
+        <div class="movie__actions" v-if="media">
-          <action-button :active="matched" :disabled="true">
+          <action-button :active="media?.exists_in_plex" :disabled="true">
-            <IconThumbsUp v-if="matched" />
+            <IconThumbsUp v-if="media?.exists_in_plex" />
             <IconThumbsDown v-else />
-            {{ !matched ? "Not yet available" : "Already available 🎉" }}
+            {{
+              !media?.exists_in_plex
+                ? "Not yet available"
+                : "Already available 🎉"
+            }}
           </action-button>
 
           <action-button @click="sendRequest" :active="requested">
@@ -37,16 +41,19 @@
               <div v-if="!requested" key="request"><IconRequest /></div>
               <div v-else key="requested"><IconRequested /></div>
             </transition>
-            {{ !requested ? `Request ${this.type}?` : "Already requested" }}
+            {{ !requested ? `Request ${type}?` : "Already requested" }}
           </action-button>
 
-          <action-button v-if="plexId && matched" @click="openInPlex">
+          <action-button
+            v-if="plexId && media?.exists_in_plex"
+            @click="openInPlex"
+          >
             <IconPlay />
             Open and watch in plex now!
           </action-button>
 
           <action-button
-            v-if="credits && credits.cast && credits.cast.length"
+            v-if="cast?.length"
             :active="showCast"
             @click="() => (showCast = !showCast)"
           >
@@ -94,451 +101,419 @@
           </div>
 
           <Description
-            v-if="!loading && movie && movie.overview"
+            v-if="!loading && media && media.overview"
-            :description="movie.overview"
+            :description="media.overview"
           />
 
-          <div class="movie__details" v-if="movie">
+          <div class="movie__details" v-if="media">
             <Detail
-              v-if="movie.year"
+              v-if="media.year"
               title="Release date"
-              :detail="movie.year"
+              :detail="media.year"
             />
-            <Detail v-if="movie.rating" title="Rating" :detail="movie.rating" />
+            <Detail v-if="media.rating" title="Rating" :detail="media.rating" />
             <Detail
-              v-if="movie.type == 'show'"
+              v-if="media.type == ListTypes.Show"
               title="Seasons"
-              :detail="movie.seasons"
+              :detail="media.seasons"
             />
             <Detail
-              v-if="movie.genres && movie.genres.length"
+              v-if="media.genres && media.genres.length"
               title="Genres"
-              :detail="movie.genres.join(', ')"
+              :detail="media.genres.join(', ')"
             />
             <Detail
               v-if="
-                movie.production_status &&
+                media.production_status &&
-                movie.production_status !== 'Released'
+                media.production_status !== 'Released'
               "
               title="Production status"
-              :detail="movie.production_status"
+              :detail="media.production_status"
             />
             <Detail
-              v-if="movie.runtime"
+              v-if="media.runtime"
               title="Runtime"
-              :detail="humanMinutes(movie.runtime)"
+              :detail="humanMinutes(media.runtime)"
             />
           </div>
         </div>
 
         <!-- TODO: change this classname, this is general  -->
 
-        <div
+        <div class="movie__admin" v-if="showCast && cast?.length">
-          class="movie__admin"
-          v-if="showCast && credits && credits.cast && credits.cast.length"
-        >
           <Detail title="cast">
-            <CastList :cast="credits.cast" />
+            <CastList :cast="cast" />
           </Detail>
         </div>
       </div>
 
       <!-- TORRENT LIST -->
       <TorrentList
-        v-if="movie && admin"
+        v-if="media && admin && showTorrents"
-        :show="showTorrents"
+        class="torrents"
-        :query="title"
+        :query="media?.title"
         :tmdb_id="id"
-        :admin="admin"
       ></TorrentList>
     </div>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters } from "vuex";
+  import { ref, computed, defineProps } from "vue";
-import img from "@/directives/v-image";
+  import { useStore } from "vuex";
-import IconProfile from "@/icons/IconProfile";
-import IconThumbsUp from "@/icons/IconThumbsUp";
-import IconThumbsDown from "@/icons/IconThumbsDown";
-import IconInfo from "@/icons/IconInfo";
-import IconRequest from "@/icons/IconRequest";
-import IconRequested from "@/icons/IconRequested";
-import IconBinoculars from "@/icons/IconBinoculars";
-import IconPlay from "@/icons/IconPlay";
-import TorrentList from "@/components/TorrentList";
-import CastList from "@/components/CastList";
-import Detail from "@/components/popup/Detail";
-import ActionButton from "@/components/popup/ActionButton";
-import Description from "@/components/popup/Description";
-import store from "@/store";
-import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
 
-import {
+  // import img from "@/directives/v-image";
-  getMovie,
+  import IconProfile from "@/icons/IconProfile.vue";
-  getShow,
+  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  getPerson,
+  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  getCredits,
+  import IconInfo from "@/icons/IconInfo.vue";
-  request,
+  import IconRequest from "@/icons/IconRequest.vue";
-  getRequestStatus,
+  import IconRequested from "@/icons/IconRequested.vue";
-  watchLink
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
-} from "@/api";
+  import IconPlay from "@/icons/IconPlay.vue";
+  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
+  import CastList from "@/components/CastList.vue";
+  import Detail from "@/components/popup/Detail.vue";
+  import ActionButton from "@/components/popup/ActionButton.vue";
+  import Description from "@/components/popup/Description.vue";
+  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
+  import type { Ref, ComputedRef } from "vue";
+  import type {
+    IMovie,
+    IShow,
+    IMediaCredits,
+    ICast
+  } from "../../interfaces/IList";
+  import { ListTypes } from "../../interfaces/IList";
 
-export default {
+  import { humanMinutes } from "../../utils";
-  // props: ['id', 'type'],
+  import {
-  props: {
+    getMovie,
-    id: {
+    getShow,
-      required: true,
+    getPerson,
-      type: Number
+    getMovieCredits,
-    },
+    getShowCredits,
-    type: {
+    request,
-      required: false,
+    getRequestStatus,
-      type: String
+    watchLink
-    }
+  } from "../../api";
-  },
-  components: {
-    Description,
-    Detail,
-    ActionButton,
-    IconProfile,
-    IconThumbsUp,
-    IconThumbsDown,
-    IconRequest,
-    IconRequested,
-    IconInfo,
-    IconBinoculars,
-    IconPlay,
-    TorrentList,
-    CastList,
-    LoadingPlaceholder
-  },
-  directives: { img: img }, // TODO decide to remove or use
-  data() {
-    return {
-      ASSET_URL: "https://image.tmdb.org/t/p/",
-      ASSET_SIZES: ["w500", "w780", "original"],
-      movie: undefined,
-      title: undefined,
-      poster: undefined,
-      backdrop: undefined,
-      matched: false,
-      requested: false,
-      showTorrents: false,
-      showCast: false,
-      credits: [],
-      compact: false,
-      loading: true
-    };
-  },
-  watch: {
-    id: function (val) {
-      this.fetchByType();
-    },
-    backdrop: function (backdrop) {
-      if (backdrop != null) {
-        const style = {
-          backgroundImage:
-            "url(" + this.ASSET_URL + this.ASSET_SIZES[1] + backdrop + ")"
-        };
 
-        Object.assign(this.$refs.header.style, style);
+  interface Props {
-      }
+    id: number;
-    }
+    type: ListTypes.Movie | ListTypes.Show;
-  },
+  }
-  computed: {
+
-    ...mapGetters("user", ["loggedIn", "admin", "plexId"]),
+  const props = defineProps<Props>();
-    numberOfTorrentResults: () => {
+  const ASSET_URL = "https://image.tmdb.org/t/p/";
-      let numTorrents = store.getters["torrentModule/resultCount"];
+  const ASSET_SIZES = ["w500", "w780", "original"];
-      return numTorrents !== null ? numTorrents + " results" : null;
+
-    }
+  const media: Ref<IMovie | IShow> = ref();
-  },
+  const requested: Ref<boolean> = ref();
-  methods: {
+  const showTorrents: Ref<boolean> = ref();
-    async fetchByType() {
+  const showCast: Ref<boolean> = ref();
-      try {
+  const cast: Ref<ICast[]> = ref([]);
-        let response;
+  const compact: Ref<boolean> = ref();
-        if (this.type === "movie") {
+  const loading: Ref<boolean> = ref();
-          response = await getMovie(this.id, true, false);
+  const backdropElement: Ref<HTMLElement> = ref();
-        } else if (this.type === "show") {
+
-          response = await getShow(this.id, false, false);
+  const store = useStore();
-        } else {
+
-          this.$router.push({ name: "404" });
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
-        }
+  const admin = computed(() => store.getters["user/admin"]);
-
+  const plexId = computed(() => store.getters["user/plexId"]);
-        this.parseResponse(response);
+  const poster = computed(() => computePoster());
-      } catch (error) {
+
-        this.$router.push({ name: "404" });
+  const numberOfTorrentResults = computed(() => {
-      }
+    const count = store.getters["torrentModule/resultCount"];
-
+    return count ? `${count} results` : null;
-      // async get credits
+  });
-      getCredits(this.type, this.id).then(credits => (this.credits = credits));
+
-    },
+  // On created functions
-    parseResponse(movie) {
+  fetchMedia();
-      this.loading = false;
+  setBackdrop();
-      this.movie = { ...movie };
+  store.dispatch("torrentModule/setResultCount", null);
-      this.title = movie.title;
+  // End on create functions
-      this.poster = movie.poster;
+
-      this.backdrop = movie.backdrop;
+  function fetchMedia() {
-      this.matched = movie.exists_in_plex || false;
+    if (!props.id || !props.type) {
-      this.checkIfRequested(movie).then(status => (this.requested = status));
+      console.error("Unable to fetch media, requires id & type");
-
+      return;
-      store.dispatch("documentTitle/updateTitle", movie.title);
+    }
-      this.setPosterSrc();
+
-    },
+    let apiFunction: Function;
-    async checkIfRequested(movie) {
+    let parameters: object;
-      return await getRequestStatus(movie.id, movie.type);
+
-    },
+    if (props.type === ListTypes.Movie) {
-    setPosterSrc() {
+      apiFunction = getMovie;
-      const poster = this.$refs["poster-image"];
+      parameters = { checkExistance: true, credits: false };
-      if (this.poster == null) {
+    } else if (props.type === ListTypes.Show) {
-        poster.src = "/assets/no-image.svg";
+      apiFunction = getShow;
-        return;
+      parameters = { checkExistance: true, credits: false };
-      }
+    }
-
+
-      poster.src = `${this.ASSET_URL}${this.ASSET_SIZES[0]}${this.poster}`;
+    apiFunction(props.id, { ...parameters })
-    },
+      .then(setAndReturnMedia)
-    humanMinutes(minutes) {
+      .then(media => getCredits(props.type))
-      if (minutes instanceof Array) {
+      .then(credits => (cast.value = credits?.cast))
-        minutes = minutes[0];
+      .then(() => getRequestStatus(props.id, props.type))
-      }
+      .then(requestStatus => (requested.value = requestStatus || false));
-
+  }
-      const hours = Math.floor(minutes / 60);
+
-      const minutesLeft = minutes - hours * 60;
+  function getCredits(
-
+    type: ListTypes.Movie | ListTypes.Show
-      if (minutesLeft == 0) {
+  ): Promise<IMediaCredits> {
-        return hours > 1 ? `${hours} hours` : `${hours} hour`;
+    if (type === ListTypes.Movie) {
-      } else if (hours == 0) {
+      return getMovieCredits(props.id);
-        return `${minutesLeft} min`;
+    } else if (type === ListTypes.Show) {
-      }
+      return getShowCredits(props.id);
-
+    }
-      return `${hours}h ${minutesLeft}m`;
+
-    },
+    return Promise.reject();
-    sendRequest() {
+  }
-      request(this.id, this.type).then(resp => {
+
-        if (resp.success) {
+  function setAndReturnMedia(_media: IMovie | IShow) {
-          this.requested = true;
+    media.value = _media;
-        }
+    return _media;
-      });
+  }
-    },
+
-    openInPlex() {
+  const computePoster = () => {
-      watchLink(this.title, this.movie.year).then(
+    if (!media.value) return "/assets/placeholder.png";
-        watchLink => (window.location = watchLink)
+    else if (!media.value?.poster) return "/assets/no-image.svg";
-      );
+
-    },
+    return `${ASSET_URL}${ASSET_SIZES[0]}${media.value.poster}`;
-    openTmdb() {
+  };
-      const tmdbType = this.type === "show" ? "tv" : this.type;
+
-      window.location.href =
+  function setBackdrop() {
-        "https://www.themoviedb.org/" + tmdbType + "/" + this.id;
+    if (!media.value?.backdrop || !backdropElement.value?.style) return "";
-    }
+
-  },
+    const backdropURL = `${ASSET_URL}${ASSET_SIZES[1]}${media.value.backdrop}`;
-  created() {
+    backdropElement.value.style.backgroundImage = `url(${backdropURL})`;
-    store.dispatch("torrentModule/setResultCount", null);
+  }
-    this.prevDocumentTitle = store.getters["documentTitle/title"];
+
-    this.fetchByType();
+  function sendRequest() {
-  },
+    request(props.id, props.type).then(
-  beforeDestroy() {
+      resp => (requested.value = resp?.success || false)
-    store.dispatch("documentTitle/updateTitle", this.prevDocumentTitle);
+    );
+  }
+
+  function openInPlex() {
+    return;
+  }
+
+  function openTmdb() {
+    const tmdbType = props.type === ListTypes.Show ? "tv" : props.type;
+    const tmdbURL = "https://www.themoviedb.org/" + tmdbType + "/" + props.id;
+    window.location.href = tmdbURL;
   }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
 
-header {
+  header {
-  $duration: 0.2s;
+    $duration: 0.2s;
-  transform: scaleY(1);
+    transform: scaleY(1);
-  transition: height $duration ease;
+    transition: height $duration ease;
-  transform-origin: top;
+    transform-origin: top;
-  position: relative;
+    position: relative;
-  background-size: cover;
+    background-size: cover;
-  background-repeat: no-repeat;
+    background-repeat: no-repeat;
-  background-position: 50% 50%;
+    background-position: 50% 50%;
-  background-color: $background-color;
+    background-color: $background-color;
-  display: grid;
+    display: grid;
-  grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-  height: 350px;
+    height: 350px;
 
-  @include mobile {
+    @include mobile {
-    grid-template-columns: 1fr;
+      grid-template-columns: 1fr;
-    height: 250px;
+      height: 250px;
-    place-items: center;
+      place-items: center;
-  }
-
-  * {
-    z-index: 2;
-  }
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: $background-dark-85;
-  }
-
-  @include mobile {
-    &.compact {
-      height: 100px;
     }
-  }
-}
 
-.movie__poster {
+    * {
-  display: none;
+      z-index: 2;
+    }
 
-  @include desktop {
+    &::before {
-    background: var(--background-color);
+      content: "";
-    height: auto;
+      display: block;
-    display: block;
+      position: absolute;
-    width: calc(100% - 80px);
+      top: 0;
-    margin: 40px;
+      left: 0;
-
+      z-index: 1;
-    > img {
       width: 100%;
-      border-radius: 10px;
+      height: 100%;
+      background: $background-dark-85;
+    }
+
+    @include mobile {
+      &.compact {
+        height: 100px;
+      }
     }
   }
-}
 
-.movie {
+  .movie__poster {
-  &__wrap {
+    display: none;
-    &--header {
+
-      align-items: center;
+    @include desktop {
-      height: 100%;
+      background: var(--background-color);
+      height: auto;
+      display: block;
+      width: calc(100% - 80px);
+      margin: 40px;
+
+      > img {
+        width: 100%;
+        border-radius: 10px;
+      }
     }
-    &--main {
+  }
+
+  .movie {
+    &__wrap {
+      &--header {
+        align-items: center;
+        height: 100%;
+      }
+      &--main {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        @include tablet-min {
+          flex-direction: row;
+        }
+
+        background-color: $background-color;
+        color: $text-color;
+      }
+    }
+
+    &__img {
+      display: block;
+      width: 100%;
+      opacity: 0;
+      transform: scale(0.97) translateZ(0);
+      transition: opacity 0.5s ease, transform 0.5s ease;
+
+      &.is-loaded {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &__title {
+      position: relative;
+      padding: 20px;
+      text-align: center;
+      width: 100%;
+      height: fit-content;
+
+      @include tablet-min {
+        text-align: left;
+        padding: 140px 30px 0 40px;
+      }
+      h1 {
+        color: var(--color-green);
+        font-weight: 500;
+        line-height: 1.4;
+        font-size: 24px;
+        margin-bottom: 0;
+
+        @include tablet-min {
+          font-size: 30px;
+        }
+      }
+
+      i {
+        display: block;
+        color: rgba(255, 255, 255, 0.8);
+        margin-top: 1rem;
+      }
+    }
+
+    &__actions {
+      text-align: center;
+      width: 100%;
+      order: 2;
+      padding: 20px;
+      border-top: 1px solid $text-color-5;
+      @include tablet-min {
+        order: 1;
+        width: 45%;
+        padding: 185px 0 40px 40px;
+        border-top: 0;
+      }
+    }
+    &__info {
+      width: 100%;
+      padding: 20px;
+      order: 1;
+      @include tablet-min {
+        order: 2;
+        padding: 40px;
+        width: 55%;
+        margin-left: 45%;
+      }
+    }
+    &__info {
+      margin-left: 0;
+    }
+    &__details {
       display: flex;
       flex-wrap: wrap;
-      flex-direction: column;
-      @include tablet-min {
-        flex-direction: row;
-      }
 
-      background-color: $background-color;
+      > * {
-      color: $text-color;
+        margin-right: 30px;
-    }
-  }
 
-  &__img {
+        @include mobile {
-    display: block;
+          margin-right: 20px;
-    width: 100%;
+        }
-    opacity: 0;
-    transform: scale(0.97) translateZ(0);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-
-    &.is-loaded {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &__title {
-    position: relative;
-    padding: 20px;
-    text-align: center;
-    width: 100%;
-    height: fit-content;
-
-    @include tablet-min {
-      text-align: left;
-      padding: 140px 30px 0 40px;
-    }
-    h1 {
-      color: var(--color-green);
-      font-weight: 500;
-      line-height: 1.4;
-      font-size: 24px;
-      margin-bottom: 0;
-
-      @include tablet-min {
-        font-size: 30px;
       }
     }
-
+    &__admin {
-    i {
+      width: 100%;
-      display: block;
+      padding: 20px;
-      color: rgba(255, 255, 255, 0.8);
-      margin-top: 1rem;
-    }
-  }
-
-  &__actions {
-    text-align: center;
-    width: 100%;
-    order: 2;
-    padding: 20px;
-    border-top: 1px solid $text-color-5;
-    @include tablet-min {
-      order: 1;
-      width: 45%;
-      padding: 185px 0 40px 40px;
-      border-top: 0;
-    }
-  }
-  &__info {
-    width: 100%;
-    padding: 20px;
-    order: 1;
-    @include tablet-min {
       order: 2;
-      padding: 40px;
+      @include tablet-min {
-      width: 55%;
+        order: 3;
-      margin-left: 45%;
+        padding: 40px;
+        padding-top: 0px;
+        width: 100%;
+      }
+      &-title {
+        margin: 0;
+        font-weight: 400;
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 14px;
+        color: $green;
+        padding-bottom: 20px;
+        @include tablet-min {
+          font-size: 16px;
+        }
+      }
     }
-  }
-  &__info {
-    margin-left: 0;
-  }
-  &__details {
-    display: flex;
-    flex-wrap: wrap;
 
-    > * {
+    .torrents {
-      margin-right: 30px;
+      background-color: var(--background-color);
+      padding: 0 1rem;
 
       @include mobile {
-        margin-right: 20px;
+        padding: 0 0.5rem;
       }
     }
   }
-  &__admin {
-    width: 100%;
-    padding: 20px;
-    order: 2;
-    @include tablet-min {
-      order: 3;
-      padding: 40px;
-      padding-top: 0px;
-      width: 100%;
-    }
-    &-title {
-      margin: 0;
-      font-weight: 400;
-      text-transform: uppercase;
-      text-align: center;
-      font-size: 14px;
-      color: $green;
-      padding-bottom: 20px;
-      @include tablet-min {
-        font-size: 16px;
-      }
-    }
-  }
-}
 
-.fade-enter-active,
+  .fade-enter-active,
-.fade-leave-active {
+  .fade-leave-active {
-  transition: opacity 0.4s;
+    transition: opacity 0.4s;
-}
+  }
-.fade-enter,
+  .fade-enter,
-.fade-leave-to {
+  .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
-}
+  }
 </style>

src/components/popup/Person.vue

@@ -23,7 +23,7 @@
         <img
           class="person-item__img is-loaded"
           ref="poster-image"
-          src="/assets/placeholder.png"
+          :src="poster"
         />
       </figure>
     </header>
@@ -51,250 +51,219 @@
 
       <Detail
         title="movies"
-        :detail="`Credited in ${movieCredits.length} movies`"
+        :detail="`Credited in ${creditedMovies.length} movies`"
-        v-if="credits"
+        v-if="creditedShows.length"
       >
-        <CastList :cast="movieCredits" />
+        <CastList :cast="creditedMovies" />
       </Detail>
 
       <Detail
         title="shows"
-        :detail="`Credited in ${showCredits.length} shows`"
+        :detail="`Credited in ${creditedShows.length} shows`"
-        v-if="credits"
+        v-if="creditedShows.length"
       >
-        <CastList :cast="showCredits" />
+        <CastList :cast="creditedShows" />
       </Detail>
     </div>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import img from "@/directives/v-image";
+  import { ref, computed, defineProps } from "vue";
-import CastList from "@/components/CastList";
+  import img from "@/directives/v-image.vue";
-import Detail from "@/components/popup/Detail";
+  import CastList from "@/components/CastList.vue";
-import Description from "@/components/popup/Description";
+  import Detail from "@/components/popup/Detail.vue";
-import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
+  import Description from "@/components/popup/Description.vue";
+  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
+  import { getPerson, getPersonCredits } from "../../api";
+  import type { Ref, ComputedRef } from "vue";
+  import type {
+    IPerson,
+    IPersonCredits,
+    ICast,
+    IMovie,
+    IShow
+  } from "../../interfaces/IList";
+  import { ListTypes } from "../../interfaces/IList";
 
-import { getPerson, getPersonCredits } from "@/api";
+  interface Props {
-
+    id: number;
-export default {
-  props: {
-    id: {
-      required: true,
-      type: Number
-    },
-    type: {
-      required: false,
-      type: String,
-      default: "person"
-    }
-  },
-  components: {
-    Detail,
-    Description,
-    CastList,
-    LoadingPlaceholder
-  },
-  directives: { img: img }, // TODO decide to remove or use
-  data() {
-    return {
-      ASSET_URL: "https://image.tmdb.org/t/p/",
-      ASSET_SIZES: ["w500", "w780", "original"],
-      person: undefined,
-      loading: true,
-      credits: undefined
-    };
-  },
-  watch: {
-    backdrop: function (backdrop) {
-      if (backdrop != null) {
-        const style = {
-          backgroundImage:
-            "url(" + this.ASSET_URL + this.ASSET_SIZES[1] + backdrop + ")"
-        };
-
-        Object.assign(this.$refs.header.style, style);
-      }
-    }
-  },
-  computed: {
-    age: function () {
-      if (!this.person || !this.person.birthday) {
-        return;
-      }
-
-      const today = new Date().getFullYear();
-      const birthYear = new Date(this.person.birthday).getFullYear();
-      return `${today - birthYear} years old`;
-    },
-    movieCredits: function () {
-      const { cast } = this.credits;
-      if (!cast) return;
-
-      return cast
-        .filter(l => l.type === "movie")
-        .filter((item, pos, self) => self.indexOf(item) == pos)
-        .sort((a, b) => a.popularity < b.popularity);
-    },
-    showCredits: function () {
-      const { cast } = this.credits;
-      if (!cast) return;
-
-      const alreadyExists = (item, pos, self) => {
-        const names = self.map(item => item.title);
-        return names.indexOf(item.title) == pos;
-      };
-
-      return cast
-        .filter(item => item.type === "show")
-        .filter(alreadyExists)
-        .sort((a, b) => a.popularity < b.popularity);
-    }
-  },
-  methods: {
-    parseResponse(person) {
-      this.loading = false;
-      this.person = { ...person };
-      this.title = person.title;
-      this.poster = person.poster;
-      if (person.credits) this.credits = person.credits;
-
-      this.setPosterSrc();
-    },
-    setPosterSrc() {
-      const poster = this.$refs["poster-image"];
-      if (this.poster == null) {
-        poster.src = "/assets/no-image.svg";
-        return;
-      }
-
-      poster.src = `${this.ASSET_URL}${this.ASSET_SIZES[0]}${this.poster}`;
-    }
-  },
-  created() {
-    getPerson(this.id, false)
-      .then(this.parseResponse)
-      .catch(error => {
-        console.error(error);
-        this.$router.push({ name: "404" });
-      });
-
-    getPersonCredits(this.id)
-      .then(credits => (this.credits = credits))
-      .catch(error => {
-        console.error(error);
-      });
   }
-};
+
+  const props = defineProps<Props>();
+  const ASSET_URL = "https://image.tmdb.org/t/p/";
+  const ASSET_SIZES = ["w500", "w780", "original"];
+
+  const person: Ref<IPerson> = ref();
+  const credits: Ref<IPersonCredits> = ref();
+  const loading: Ref<boolean> = ref(false);
+  const creditedMovies: Ref<Array<IMovie | IShow>> = ref([]);
+  const creditedShows: Ref<Array<IMovie | IShow>> = ref([]);
+
+  const poster: ComputedRef<string> = computed(() => computePoster());
+  const age: ComputedRef<string> = computed(() => {
+    if (!person.value?.birthday) return;
+
+    const today = new Date().getFullYear();
+    const birthYear = new Date(person.value.birthday).getFullYear();
+    return `${today - birthYear} years old`;
+  });
+
+  // On create functions
+  fetchPerson();
+  //
+
+  function fetchPerson() {
+    if (!props.id) {
+      console.error("Unable to fetch person, missing id!");
+      return;
+    }
+
+    getPerson(props.id)
+      .then(_person => (person.value = _person))
+      .then(() => getPersonCredits(person.value?.id))
+      .then(_credits => (credits.value = _credits))
+      .then(() => personCreditedFrom(credits.value?.cast));
+  }
+
+  function sortPopularity(a: IMovie | IShow, b: IMovie | IShow): number {
+    return a.popularity < b.popularity ? 1 : -1;
+  }
+
+  function alreadyExists(item: IMovie | IShow, pos: number, self: any[]) {
+    const names = self.map(item => item.title);
+    return names.indexOf(item.title) === pos;
+  }
+
+  function personCreditedFrom(cast: Array<IMovie | IShow>): void {
+    creditedMovies.value = cast
+      .filter(credit => credit.type === ListTypes.Movie)
+      .filter(alreadyExists)
+      .sort(sortPopularity);
+
+    creditedShows.value = cast
+      .filter(credit => credit.type === ListTypes.Show)
+      .filter(alreadyExists)
+      .sort(sortPopularity);
+  }
+
+  const computePoster = () => {
+    if (!person.value) return "/assets/placeholder.png";
+    else if (!person.value?.poster) return "/assets/no-image.svg";
+
+    return `${ASSET_URL}${ASSET_SIZES[0]}${person.value.poster}`;
+  };
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
-@import "src/scss/main";
+  @import "src/scss/main";
 
-section.person {
+  section.person {
-  overflow: hidden;
+    overflow: hidden;
-  position: relative;
+    position: relative;
-  padding: 40px;
+    padding: 40px;
-  background-color: var(--background-color);
+    background-color: var(--background-color);
 
-  @include mobile {
+    @include mobile {
-    padding: 50px 20px 10px;
+      padding: 50px 20px 10px;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -130px;
+      left: -100px;
+      z-index: 1;
+      width: 1000px;
+      height: 500px;
+      transform: rotate(21deg);
+      background-color: #062541;
+
+      @include mobile {
+        // top: -52vw;
+        top: -215px;
+      }
+    }
   }
 
-  &:before {
+  header {
-    content: "";
+    $duration: 0.2s;
+    transition: height $duration ease;
+    position: relative;
+    background-color: transparent;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 350px;
+    z-index: 2;
+
+    @include mobile {
+      height: 180px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      padding: 30px;
+      padding-left: 0;
+      text-align: left;
+
+      @include mobile {
+        padding: 0;
+      }
+    }
+
+    h1 {
+      color: $green;
+      width: 100%;
+      font-weight: 500;
+      line-height: 1.4;
+      font-size: 30px;
+      margin-top: 0;
+
+      @include mobile {
+        font-size: 24px;
+        margin: 10px 0;
+        // padding: 30px 30px 30px 40px;
+      }
+    }
+
+    .known-for {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 1.2rem;
+    }
+  }
+
+  .person__poster {
     display: block;
-    position: absolute;
+    margin: auto;
-    top: -130px;
+    width: fit-content;
-    left: -100px;
-    z-index: 1;
-    width: 1000px;
-    height: 500px;
-    transform: rotate(21deg);
-    background-color: #062541;
-
-    @include mobile {
-      // top: -52vw;
-      top: -215px;
-    }
-  }
-}
-
-header {
-  $duration: 0.2s;
-  transition: height $duration ease;
-  position: relative;
-  background-color: transparent;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  height: 350px;
-  z-index: 2;
-
-  @include mobile {
-    height: 180px;
-  }
-
-  .info {
-    display: flex;
-    flex-direction: column;
-    padding: 30px;
-    padding-left: 0;
-    text-align: left;
-
-    @include mobile {
-      padding: 0;
-    }
-  }
-
-  h1 {
-    color: $green;
-    width: 100%;
-    font-weight: 500;
-    line-height: 1.4;
-    font-size: 30px;
-    margin-top: 0;
-
-    @include mobile {
-      font-size: 24px;
-      margin: 10px 0;
-      // padding: 30px 30px 30px 40px;
-    }
-  }
-
-  .known-for {
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 1.2rem;
-  }
-}
-
-.person__poster {
-  display: block;
-  border-radius: 10px;
-  background-color: grey;
-  animation: pulse 1s infinite ease-in-out;
-
-  @keyframes pulse {
-    0% {
-      background-color: rgba(165, 165, 165, 0.1);
-    }
-    50% {
-      background-color: rgba(165, 165, 165, 0.3);
-    }
-    100% {
-      background-color: rgba(165, 165, 165, 0.1);
-    }
-  }
-
-  > img {
     border-radius: 10px;
-    width: 100%;
+    background-color: grey;
+    animation: pulse 1s infinite ease-in-out;
 
-    @include mobile {
+    @keyframes pulse {
-      max-width: 225px;
+      0% {
+        background-color: rgba(165, 165, 165, 0.1);
+      }
+      50% {
+        background-color: rgba(165, 165, 165, 0.3);
+      }
+      100% {
+        background-color: rgba(165, 165, 165, 0.1);
+      }
+    }
+
+    > img {
+      border-radius: 10px;
+      width: 100%;
+
+      @include mobile {
+        max-width: 225px;
+      }
     }
   }
-}
 </style>

src/components/profile/ChangePassword.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <h3 class="settings__header">Change password</h3>
+    <form class="form">
+      <seasoned-input
+        placeholder="old password"
+        icon="Keyhole"
+        type="password"
+        v-model="oldPassword"
+      />
+
+      <seasoned-input
+        placeholder="new password"
+        icon="Keyhole"
+        type="password"
+        v-model="newPassword"
+      />
+
+      <seasoned-input
+        placeholder="repeat new password"
+        icon="Keyhole"
+        type="password"
+        v-model="newPasswordRepeat"
+      />
+
+      <seasoned-button @click="changePassword">change password</seasoned-button>
+    </form>
+    <seasoned-messages v-model:messages="messages" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import SeasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import type { Ref } from "vue";
+  import type IErrorMessage from "../../interfaces/IErrorMessage";
+
+  interface ResetPasswordPayload {
+    old_password: string;
+    new_password: string;
+  }
+
+  const oldPassword: Ref<string> = ref("");
+  const newPassword: Ref<string> = ref("");
+  const newPasswordRepeat: Ref<string> = ref("");
+  const messages: Ref<IErrorMessage[]> = ref([]);
+
+  function clearMessages() {
+    messages.value = [];
+  }
+
+  function addWarningMessage(message: string, title?: string) {
+    messages.value.push({ message, title, type: "warning" });
+  }
+
+  function validate() {
+    return new Promise((resolve, reject) => {
+      if (!oldPassword.value || oldPassword?.value?.length === 0) {
+        addWarningMessage("Missing old password!", "Validation error");
+        return reject();
+      }
+
+      if (!newPassword.value || newPassword?.value?.length === 0) {
+        addWarningMessage("Missing new password!", "Validation error");
+        return reject();
+      }
+
+      if (newPassword.value !== newPasswordRepeat.value) {
+        addWarningMessage(
+          "Password and password repeat do not match!",
+          "Validation error"
+        );
+        return reject();
+      }
+
+      resolve(true);
+    });
+  }
+
+  // TODO seasoned-api /user/password-reset
+  async function changePassword() {
+    try {
+      validate();
+    } catch (error) {
+      console.log("not valid!");
+      return;
+    }
+
+    const body: ResetPasswordPayload = {
+      old_password: oldPassword.value,
+      new_password: newPassword.value
+    };
+    const options = {};
+    // fetch()
+  }
+</script>

src/components/profile/LinkPlexAccount.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <h3 class="settings__header">Plex account</h3>
+
+    <div v-if="!plexId">
+      <span class="info"
+        >Sign in to your plex account to get information about recently added
+        movies and to see your watch history</span
+      >
+
+      <form class="form">
+        <seasoned-input
+          placeholder="plex username"
+          type="email"
+          v-model="username"
+        />
+        <seasoned-input
+          placeholder="plex password"
+          type="password"
+          v-model="password"
+          @enter="authenticatePlex"
+        >
+        </seasoned-input>
+
+        <seasoned-button @click="authenticatePlex"
+          >link plex account</seasoned-button
+        >
+      </form>
+    </div>
+
+    <div v-else>
+      <span class="info"
+        >Awesome, your account is already authenticated with plex! Enjoy viewing
+        your seasoned search history, plex watch history and real-time torrent
+        download progress.</span
+      >
+      <seasoned-button @click="unauthenticatePlex"
+        >un-link plex account</seasoned-button
+      >
+    </div>
+    <seasoned-messages v-model:messages="messages" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, defineEmits } from "vue";
+  import { useStore } from "vuex";
+  import seasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import { linkPlexAccount, unlinkPlexAccount } from "../../api";
+  import type { Ref, ComputedRef } from "vue";
+  import type IErrorMessage from "../../interfaces/IErrorMessage";
+
+  interface Emit {
+    (e: "reload");
+  }
+
+  const username: Ref<string> = ref("");
+  const password: Ref<string> = ref("");
+  const messages: Ref<IErrorMessage[]> = ref([]);
+
+  const store = useStore();
+  const emit = defineEmits<Emit>();
+
+  const loggedIn: ComputedRef<boolean> = computed(
+    () => store.getters["user/loggedIn"]
+  );
+  const plexId: ComputedRef<boolean> = computed(
+    () => store.getters["user/plexId"]
+  );
+  const settings: ComputedRef<boolean> = computed(
+    () => store.getters["user/settings"]
+  );
+
+  async function authenticatePlex() {
+    let username = this.plexUsername;
+    let password = this.plexPassword;
+
+    const { success, message } = await linkPlexAccount(
+      username.value,
+      password.value
+    );
+
+    if (success) {
+      username.value = "";
+      password.value = "";
+      emit("reload");
+    }
+
+    messages.value.push({
+      type: success ? "success" : "error",
+      title: success ? "Authenticated with plex" : "Something went wrong",
+      message: message
+    });
+  }
+
+  async function unauthenticatePlex() {
+    const response = await unlinkPlexAccount();
+
+    if (response?.success) {
+      emit("reload");
+    }
+
+    messages.value.push({
+      type: response.success ? "success" : "error",
+      title: response.success
+        ? "Unlinked plex account "
+        : "Something went wrong",
+      message: response.message
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .info {
+    display: block;
+    margin-bottom: 25px;
+  }
+</style>

src/components/torrent/ActiveTorrents.vue

@@ -0,0 +1,6 @@
+<template>
+  <code
+    >Monitor active torrents requested. Requires authentication with owners plex
+    library!</code
+  >
+</template>

src/components/torrent/TorrentSearchResults.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="container" v-if="query?.length">
+    <h2 class="torrent-header-text">
+      Searching for: <span class="query">{{ query }}</span>
+    </h2>
+
+    <loader v-if="loading" type="section" />
+    <div v-else>
+      <div v-if="torrents.length > 0" class="torrent-table">
+        <torrent-table :torrents="torrents" @magnet="addTorrent" />
+
+        <slot />
+      </div>
+
+      <div v-else class="no-results">
+        <h2>No results found</h2>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, inject, defineProps } from "vue";
+  import { useStore } from "vuex";
+  import { sortableSize } from "../../utils";
+  import { searchTorrents, addMagnet } from "../../api";
+
+  import Loader from "@/components/ui/Loader.vue";
+  import TorrentTable from "@/components/torrent/TorrentTable.vue";
+  import type { Ref } from "vue";
+  import type ITorrent from "../../interfaces/ITorrent";
+
+  interface Props {
+    query: string;
+    tmdb_id?: number;
+  }
+
+  const loading: Ref<boolean> = ref(true);
+  const torrents: Ref<ITorrent[]> = ref([]);
+  const release_types: Ref<string[]> = ref(["all"]);
+
+  const props = defineProps<Props>();
+  const store = useStore();
+  const notifications: {
+    info;
+    success;
+    error;
+  } = inject("notifications");
+
+  fetchTorrents();
+
+  function fetchTorrents() {
+    loading.value = true;
+
+    searchTorrents(props.query)
+      .then(torrentResponse => (torrents.value = torrentResponse?.results))
+      .then(() => updateResultCountDisplay())
+      .finally(() => (loading.value = false));
+  }
+
+  function updateResultCountDisplay() {
+    store.dispatch("torrentModule/setResults", torrents.value);
+    store.dispatch(
+      "torrentModule/setResultCount",
+      torrents.value?.length || -1
+    );
+  }
+
+  function addTorrent(torrent: ITorrent) {
+    const { name, magnet } = torrent;
+
+    notifications.info({
+      title: "Adding torrent 🧲",
+      description: props.query,
+      timeout: 3000
+    });
+
+    addMagnet(magnet, name, props.tmdb_id)
+      .then(resp => {
+        notifications.success({
+          title: "Torrent added 🎉",
+          description: props.query,
+          timeout: 3000
+        });
+      })
+      .catch(resp => {
+        console.log("Error while adding torrent:", resp?.data);
+        notifications.error({
+          title: "Failed to add torrent 🙅‍♀️",
+          description: "Check console for more info",
+          timeout: 3000
+        });
+      });
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "src/scss/variables";
+  @import "src/scss/media-queries";
+  @import "src/scss/elements";
+
+  h2 {
+    font-size: 20px;
+  }
+
+  .toggle {
+    max-width: unset !important;
+    margin: 1rem 0;
+  }
+
+  .container {
+    background-color: $background-color;
+  }
+
+  .no-results {
+    display: flex;
+    padding-bottom: 2rem;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+  }
+
+  .torrent-header-text {
+    font-weight: 300;
+    text-transform: uppercase;
+    font-size: 20px;
+    color: var(--text-color);
+    text-align: center;
+    margin: 0;
+
+    .query {
+      font-weight: 500;
+      white-space: pre;
+    }
+
+    @include mobile {
+      text-align: left;
+    }
+  }
+
+  .download {
+    &__icon {
+      fill: $text-color-70;
+      height: 1.2rem;
+
+      &:hover {
+        fill: $text-color;
+        cursor: pointer;
+      }
+    }
+
+    &.active &__icon {
+      fill: $green;
+    }
+  }
+</style>

src/components/torrent/TorrentTable.vue

@@ -0,0 +1,250 @@
+<template>
+  <table>
+    <thead class="table__header noselect">
+      <tr>
+        <th
+          v-for="column in columns"
+          :key="column"
+          @click="sortTable(column)"
+          :class="column === selectedColumn ? 'active' : null"
+        >
+          {{ column }}
+          <span v-if="prevCol === column && direction">↑</span>
+          <span v-if="prevCol === column && !direction">↓</span>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr
+        v-for="torrent in torrents"
+        class="table__content"
+        :key="torrent.magnet"
+      >
+        <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
+        <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
+        <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
+        <td @click="() => emit('magnet', torrent)" class="download">
+          <IconMagnet />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits } from "vue";
+  import IconMagnet from "@/icons/IconMagnet.vue";
+  import { sortableSize } from "../../utils";
+  import type { Ref } from "vue";
+  import type ITorrent from "../../interfaces/ITorrent";
+
+  interface Props {
+    torrents: Array<ITorrent>;
+  }
+
+  interface Emit {
+    (e: "magnet", torrent: ITorrent): void;
+  }
+
+  const props = defineProps<Props>();
+  const emit = defineEmits<Emit>();
+
+  const columns: string[] = ["name", "seed", "size", "add"];
+
+  const torrents: Ref<ITorrent[]> = ref(props.torrents);
+  const direction: Ref<boolean> = ref(false);
+  const selectedColumn: Ref<string> = ref(columns[0]);
+  const prevCol: Ref<string> = ref("");
+
+  function expand(event: MouseEvent, text: string) {
+    const elementClicked = event.target as HTMLElement;
+    const tableRow = elementClicked.parentElement;
+    const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
+
+    const existingExpandedElement =
+      document.getElementsByClassName("expanded")[0];
+    const clickedSameTwice =
+      existingExpandedElement?.previousSibling?.isEqualNode(tableRow);
+
+    if (existingExpandedElement) {
+      existingExpandedElement.remove();
+
+      // Clicked the same element twice, remove and return
+      // not recreate and collapse
+      if (clickedSameTwice) return;
+    }
+
+    const expandedRow = document.createElement("tr");
+    const expandedCol = document.createElement("td");
+    expandedRow.dataset[scopedStyleDataVariable] = "";
+    expandedCol.dataset[scopedStyleDataVariable] = "";
+    expandedRow.className = "expanded";
+    expandedCol.innerText = text;
+    expandedCol.colSpan = 4;
+
+    expandedRow.appendChild(expandedCol);
+    tableRow.insertAdjacentElement("afterend", expandedRow);
+  }
+
+  function sortTable(col, sameDirection = false) {
+    if (prevCol.value === col && sameDirection === false) {
+      direction.value = !direction.value;
+    }
+
+    if (col === "name") sortName();
+    else if (col === "seed") sortSeed();
+    else if (col === "size") sortSize();
+
+    prevCol.value = col;
+  }
+
+  function sortName() {
+    const torrentsCopy = [...torrents.value];
+    if (direction.value) {
+      torrents.value = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
+    } else {
+      torrents.value = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
+    }
+  }
+
+  function sortSeed() {
+    const torrentsCopy = [...torrents.value];
+    if (direction.value) {
+      torrents.value = torrentsCopy.sort(
+        (a, b) => parseInt(a.seed) - parseInt(b.seed)
+      );
+    } else {
+      torrents.value = torrentsCopy.sort(
+        (a, b) => parseInt(b.seed) - parseInt(a.seed)
+      );
+    }
+  }
+
+  function sortSize() {
+    const torrentsCopy = [...torrents.value];
+    if (direction.value) {
+      torrents.value = torrentsCopy.sort(
+        (a, b) => sortableSize(a.size) - sortableSize(b.size)
+      );
+    } else {
+      torrents.value = torrentsCopy.sort(
+        (a, b) => sortableSize(b.size) - sortableSize(a.size)
+      );
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "src/scss/variables";
+  @import "src/scss/media-queries";
+  @import "src/scss/elements";
+
+  table {
+    border-spacing: 0;
+    margin-top: 0.5rem;
+    width: 100%;
+    // border-collapse: collapse;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  th,
+  td {
+    border: 0.5px solid var(--background-color-40);
+    @include mobile {
+      white-space: nowrap;
+      padding: 0;
+    }
+  }
+
+  thead {
+    position: relative;
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--table-header-text-color);
+    text-transform: uppercase;
+    cursor: pointer;
+    background-color: var(--table-background-color);
+    // background-color: black;
+    // color: var(--color-green);
+    letter-spacing: 0.8px;
+    font-size: 1rem;
+
+    th:last-of-type {
+      padding-right: 0.4rem;
+    }
+  }
+
+  tbody {
+    // first column
+    tr td:first-of-type {
+      position: relative;
+      padding: 0 0.3rem;
+      cursor: default;
+      word-break: break-all;
+      border-left: 1px solid var(--table-background-color);
+
+      @include mobile {
+        max-width: 40vw;
+        overflow-x: hidden;
+      }
+    }
+
+    // all columns except first
+    tr td:not(td:first-of-type) {
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    // last column
+    tr td:last-of-type {
+      vertical-align: middle;
+      cursor: pointer;
+      border-right: 1px solid var(--table-background-color);
+
+      svg {
+        width: 21px;
+        display: block;
+        margin: auto;
+        padding: 0.3rem 0;
+        fill: var(--text-color);
+      }
+    }
+
+    // alternate background color per row
+    tr:nth-child(even) {
+      background-color: var(--background-70);
+    }
+
+    // last element rounded corner border
+    tr:last-of-type {
+      td {
+        border-bottom: 1px solid var(--table-background-color);
+      }
+
+      td:first-of-type {
+        border-bottom-left-radius: 0.5rem;
+      }
+
+      td:last-of-type {
+        border-bottom-right-radius: 0.5rem;
+      }
+    }
+  }
+
+  .expanded {
+    padding: 0.25rem 1rem;
+    max-width: 100%;
+    border-left: 1px solid $text-color;
+    border-right: 1px solid $text-color;
+    border-bottom: 1px solid $text-color;
+
+    td {
+      white-space: normal;
+      word-break: break-all;
+      padding: 0.5rem 0.15rem;
+      width: 100%;
+    }
+  }
+</style>

src/components/torrent/TruncatedTorrentResults.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <torrent-search-results
+      :query="query"
+      :tmdb_id="tmdb_id"
+      :class="{ truncated: truncated }"
+      ><div
+        v-if="truncated"
+        class="load-more"
+        role="button"
+        @click="truncated = false"
+      >
+        <icon-arrow-down />
+      </div>
+    </torrent-search-results>
+
+    <div class="edit-query-btn-container">
+      <seasonedButton @click="openInTorrentPage"
+        >View on torrent page</seasonedButton
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, inject, defineProps } from "vue";
+  import { useRouter } from "vue-router";
+  import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import IconArrowDown from "@/icons/IconArrowDown.vue";
+  import type { Ref } from "vue";
+
+  interface Props {
+    query: string;
+    tmdb_id?: number;
+  }
+
+  const props = defineProps<Props>();
+  const router = useRouter();
+
+  const truncated: Ref<boolean> = ref(true);
+
+  function openInTorrentPage() {
+    if (!props.query?.length) {
+      router.push("/torrents");
+      return;
+    }
+
+    router.push({ path: "/torrents", query: { query: props.query } });
+  }
+</script>
+
+<style lang="scss" scoped>
+  :global(.truncated .torrent-table) {
+    position: relative;
+    max-height: 500px;
+    overflow-y: hidden;
+  }
+
+  .load-more {
+    position: absolute;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    bottom: 0rem;
+    width: 100%;
+    height: 3rem;
+    cursor: pointer;
+    background: linear-gradient(
+      to top,
+      var(--background-color) 20%,
+      var(--background-0) 100%
+    );
+  }
+
+  svg {
+    height: 30px;
+    fill: var(--text-color);
+  }
+
+  .edit-query-btn-container {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+  }
+</style>

src/components/ui/DarkmodeToggle.vue

@@ -4,49 +4,43 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { ref, computed } from "vue";
-  data() {
+
-    return {
+  let darkmode = ref(systemDarkModeEnabled());
-      darkmode: this.systemDarkModeEnabled()
+  const darkmodeToggleIcon = computed(() => {
-    };
+    return darkmode.value ? "🌝" : "🌚";
-  },
+  });
-  methods: {
+
-    toggleDarkmode() {
+  function toggleDarkmode() {
-      this.darkmode = !this.darkmode;
+    darkmode.value = !darkmode.value;
-      document.body.className = this.darkmode ? "dark" : "light";
+    document.body.className = darkmode.value ? "dark" : "light";
-    },
+  }
-    systemDarkModeEnabled() {
+
-      const computedStyle = window.getComputedStyle(document.body);
+  function systemDarkModeEnabled() {
-      if (computedStyle["colorScheme"] != null) {
+    const computedStyle = window.getComputedStyle(document.body);
-        return computedStyle.colorScheme.includes("dark");
+    if (computedStyle["colorScheme"] != null) {
-      }
+      return computedStyle.colorScheme.includes("dark");
-      return false;
+    }
-    }
+    return false;
-  },
-  computed: {
-    darkmodeToggleIcon() {
-      return this.darkmode ? "🌝" : "🌚";
-    }
   }
-};
 </script>
 
 <style lang="scss" scoped>
-.darkToggle {
+  .darkToggle {
-  height: 25px;
+    height: 25px;
-  width: 25px;
+    width: 25px;
-  cursor: pointer;
+    cursor: pointer;
-  position: fixed;
+    position: fixed;
-  margin-bottom: 1.5rem;
+    margin-bottom: 1.5rem;
-  margin-right: 2px;
+    margin-right: 2px;
-  bottom: 0;
+    bottom: 0;
-  right: 0;
+    right: 0;
-  z-index: 10;
+    z-index: 10;
 
-  -webkit-user-select: none;
+    -webkit-user-select: none;
-  -moz-user-select: none;
+    -moz-user-select: none;
-  -ms-user-select: none;
+    -ms-user-select: none;
-  user-select: none;
+    user-select: none;
-}
+  }
 </style>

src/components/ui/Hamburger.vue

@@ -10,73 +10,76 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters, mapActions } from "vuex";
+  import { computed } from "vue";
+  import { useStore } from "vuex";
 
-export default {
+  const store = useStore();
-  computed: { ...mapGetters("hamburger", ["isOpen"]) },
+
-  methods: { ...mapActions("hamburger", ["toggle"]) }
+  const isOpen = computed(() => store.getters["hamburger/isOpen"]);
-};
+  const toggle = () => {
+    store.dispatch("hamburger/toggle");
+  };
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.nav__hamburger {
+  .nav__hamburger {
-  display: block;
+    display: block;
-  position: relative;
+    position: relative;
-  width: var(--header-size);
+    width: var(--header-size);
-  height: var(--header-size);
+    height: var(--header-size);
-  cursor: pointer;
+    cursor: pointer;
-  border-left: 1px solid var(--background-color);
+    border-left: 1px solid var(--background-color);
-  background-color: var(--background-color-secondary);
+    background-color: var(--background-color-secondary);
 
-  @include tablet-min {
+    @include tablet-min {
-    display: none;
+      display: none;
-  }
+    }
 
-  .bar {
-    position: absolute;
-    width: 23px;
-    height: 1px;
-    background-color: var(--text-color-70);
-    transition: all 300ms ease;
-    &:nth-child(1) {
-      left: 16px;
-      top: 17px;
-    }
-    &:nth-child(2) {
-      left: 16px;
-      top: 25px;
-      &:after {
-        content: "";
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 23px;
-        height: 1px;
-        transition: all 300ms ease;
-      }
-    }
-    &:nth-child(3) {
-      right: 15px;
-      top: 33px;
-    }
-  }
-  &.open {
     .bar {
-      &:nth-child(1),
+      position: absolute;
-      &:nth-child(3) {
+      width: 23px;
-        width: 0;
+      height: 1px;
+      background-color: var(--text-color-70);
+      transition: all 300ms ease;
+      &:nth-child(1) {
+        left: 16px;
+        top: 17px;
       }
       &:nth-child(2) {
-        transform: rotate(-45deg);
+        left: 16px;
+        top: 25px;
+        &:after {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          width: 23px;
+          height: 1px;
+          transition: all 300ms ease;
+        }
       }
-      &:nth-child(2):after {
+      &:nth-child(3) {
-        transform: rotate(-90deg);
+        right: 15px;
-        background-color: var(--text-color-70);
+        top: 33px;
+      }
+    }
+    &.open {
+      .bar {
+        &:nth-child(1),
+        &:nth-child(3) {
+          width: 0;
+        }
+        &:nth-child(2) {
+          transform: rotate(-45deg);
+        }
+        &:nth-child(2):after {
+          transform: rotate(-90deg);
+          background-color: var(--text-color-70);
+        }
       }
     }
   }
-}
 </style>

src/components/ui/Loader.vue

@@ -1,48 +1,72 @@
 <template>
-  <div class="loader">
+  <div :class="`loader type-${type}`">
     <i class="loader--icon">
       <i class="loader--icon-spinner" />
     </i>
   </div>
-</template>
+
+  <!--
+  TODO: fetch and display movie facts after 1.5 seconds while loading?
+  
+
+--></template>
+
+<script setup lang="ts">
+  import { defineProps } from "vue";
+
+  enum LoaderHeightType {
+    Page = "page",
+    Section = "section"
+  }
+
+  interface Props {
+    type?: LoaderHeightType;
+  }
+
+  const { type = LoaderHeightType.Page } = defineProps<Props>();
+</script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
 
-.loader {
+  .loader {
-  display: flex;
+    display: flex;
-  width: 100%;
+    width: 100%;
-  height: 30vh;
+    height: 30vh;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
 
-  &--icon {
+    &.type-section {
-    border: 2px solid $text-color-70;
+      height: 15vh;
-    border-radius: 50%;
+    }
-    display: block;
-    height: 40px;
-    position: absolute;
-    width: 40px;
 
-    &-spinner {
+    &--icon {
+      border: 2px solid $text-color-70;
+      border-radius: 50%;
       display: block;
-      animation: load 1s linear infinite;
+      height: 40px;
-      height: 35px;
+      position: absolute;
-      width: 35px;
+      width: 40px;
-      &:after {
+
-        border: 7px solid $green-90;
+      &-spinner {
-        border-radius: 50%;
+        display: block;
-        content: "";
+        animation: load 1s linear infinite;
-        left: 8px;
+        height: 35px;
-        position: absolute;
+        width: 35px;
-        top: 22px;
+        &:after {
+          border: 7px solid $green-90;
+          border-radius: 50%;
+          content: "";
+          left: 8px;
+          position: absolute;
+          top: 22px;
+        }
+      }
+    }
+    @keyframes load {
+      100% {
+        transform: rotate(360deg);
       }
     }
   }
-  @keyframes load {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
 </style>

src/components/ui/LoadingPlaceholder.vue

@@ -9,26 +9,18 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { defineProps } from "vue";
-  props: {
+
-    count: {
+  interface Props {
-      type: Number,
+    count?: Number;
-      default: 1,
+    lineClass?: String;
-      require: false
+    top?: Number;
-    },
-    lineClass: {
-      type: String,
-      default: ""
-    },
-    top: {
-      type: Number,
-      default: 0
-    }
   }
-};
+
+  const { count = 1, lineClass = "", top = 0 } = defineProps<Props>();
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
 </style>

src/components/ui/SeasonedButton.vue

@@ -8,77 +8,71 @@
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { ref, defineProps, defineEmits } from "vue";
-  name: "seasonedButton",
+  import type { Ref } from "vue";
-  props: {
+
-    active: {
+  interface Props {
-      type: Boolean,
+    active?: Boolean;
-      default: false,
+    fullWidth?: Boolean;
-      required: false
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  },
-  methods: {
-    emit() {
-      this.$emit("click");
-    }
   }
-};
+
+  interface Emit {
+    (e: "click");
+  }
+
+  const props = defineProps<Props>();
+  const emit = defineEmits<Emit>();
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-button {
+  button {
-  display: inline-block;
+    display: inline-block;
-  border: 1px solid $text-color;
+    border: 1px solid $text-color;
-  font-size: 11px;
+    font-size: 11px;
-  font-weight: 300;
+    font-weight: 300;
-  line-height: 1.5;
+    line-height: 1.5;
-  letter-spacing: 0.5px;
+    letter-spacing: 0.5px;
-  text-transform: uppercase;
+    text-transform: uppercase;
-  min-height: 45px;
+    min-height: 45px;
-  padding: 5px 10px 4px 10px;
+    padding: 5px 10px 4px 10px;
-  margin: 0;
+    margin: 0;
-  margin-right: 0.3rem;
+    margin-right: 0.3rem;
-  color: $text-color;
+    color: $text-color;
-  background: $background-color-secondary;
+    background: $background-color-secondary;
-  cursor: pointer;
+    cursor: pointer;
-  outline: none;
+    outline: none;
-  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
+    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
 
-  @include desktop {
+    @include desktop {
-    font-size: 0.8rem;
+      font-size: 0.8rem;
-    padding: 6px 20px 5px 20px;
+      padding: 6px 20px 5px 20px;
-  }
-
-  &.fullwidth {
-    font-size: 14px;
-    width: 40%;
-
-    @include mobile {
-      width: 60%;
     }
-  }
 
-  &:focus,
+    &.fullwidth {
-  &:active,
+      font-size: 14px;
-  &.active {
+      width: 40%;
-    background: $text-color;
-    color: $background-color;
-  }
 
-  @media (hover: hover) {
+      @include mobile {
-    &:hover {
+        width: 60%;
+      }
+    }
+
+    &:focus,
+    &:active,
+    &.active {
       background: $text-color;
       color: $background-color;
     }
+
+    @media (hover: hover) {
+      &:hover {
+        background: $text-color;
+        color: $background-color;
+      }
+    }
   }
-}
 </style>

src/components/ui/SeasonedInput.vue

@@ -1,134 +1,139 @@
 <template>
-  <div class="group" :class="{ completed: value, focus }">
+  <div class="group" :class="{ completed: modelValue, focus }">
     <component :is="inputIcon" v-if="inputIcon" />
 
     <input
       class="input"
-      :type="tempType || type"
+      :type="toggledType || type"
-      @input="handleInput"
-      v-model="inputValue"
       :placeholder="placeholder"
-      @keyup.enter="event => $emit('enter', event)"
+      :value="modelValue"
+      @input="handleInput"
+      @keyup.enter="event => emit('enter', event)"
       @focus="focus = true"
       @blur="focus = false"
     />
 
     <i
-      v-if="value && type === 'password'"
+      v-if="modelValue && type === 'password'"
       @click="toggleShowPassword"
       @keydown.enter="toggleShowPassword"
       class="show noselect"
       tabindex="0"
-      >{{ tempType == "password" ? "show" : "hide" }}</i
+      >{{ toggledType == "password" ? "show" : "hide" }}</i
     >
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import IconKey from "../../icons/IconKey";
+  import { ref, computed, defineProps, defineEmits } from "vue";
-import IconEmail from "../../icons/IconEmail";
+  import IconKey from "@/icons/IconKey.vue";
+  import IconEmail from "@/icons/IconEmail.vue";
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
+  import type { Ref } from "vue";
 
-export default {
+  interface Props {
-  components: { IconKey, IconEmail },
+    modelValue: string;
-  props: {
+    placeholder: string;
-    placeholder: { type: String },
+    type?: string;
-    type: { type: String, default: "text" },
+  }
-    value: { type: String, default: undefined }
+
-  },
+  interface Emit {
-  data() {
+    (e: "change");
-    return {
+    (e: "enter");
-      inputValue: this.value || undefined,
+    (e: "update:modelValue", value: string);
-      tempType: this.type,
+  }
-      focus: false
+
-    };
+  const { placeholder, type = "text", modelValue } = defineProps<Props>();
-  },
+  const emit = defineEmits<Emit>();
-  computed: {
+
-    inputIcon() {
+  const toggledType: Ref<string> = ref(type);
-      if (this.type === "password") return IconKey;
+  const focus: Ref<boolean> = ref(false);
-      if (this.type === "email") return IconEmail;
+
-      return false;
+  const inputIcon = computed(() => {
-    }
+    if (type === "password") return IconKey;
-  },
+    if (type === "email") return IconEmail;
-  methods: {
+    if (type === "torrents") return IconBinoculars;
-    handleInput(event) {
+    return false;
-      if (this.value !== undefined) {
+  });
-        this.$emit("update:value", this.inputValue);
+
-      } else {
+  function handleInput(event: KeyboardEvent) {
-        this.$emit("change", this.inputValue, event);
+    const target = event?.target as HTMLInputElement;
-      }
+    if (!target) return;
-    },
+
-    toggleShowPassword() {
+    emit("update:modelValue", target?.value);
-      if (this.tempType === "text") {
+  }
-        this.tempType = "password";
+
-      } else {
+  // Could we move this to component that injects ??
-        this.tempType = "text";
+  function toggleShowPassword() {
-      }
+    if (toggledType.value === "text") {
+      toggledType.value = "password";
+    } else {
+      toggledType.value = "text";
     }
   }
-};
 </script>
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.group {
+  .group {
-  display: flex;
+    display: flex;
-  width: 100%;
+    width: 100%;
-  position: relative;
+    position: relative;
-  max-width: 35rem;
+    max-width: 35rem;
-  border: 1px solid var(--text-color-50);
+    border: 1px solid var(--text-color-50);
-  background-color: var(--background-color-secondary);
+    background-color: var(--background-color-secondary);
 
-  &.completed,
+    &.completed,
-  &.focus,
+    &.focus,
-  &:hover,
+    &:hover,
-  &:focus {
+    &:focus {
-    border-color: var(--text-color);
+      border-color: var(--text-color);
+
+      svg {
+        fill: var(--text-color);
+      }
+    }
 
     svg {
-      fill: var(--text-color);
+      width: 24px;
+      height: 24px;
+      fill: var(--text-color-50);
+      pointer-events: none;
+      margin-top: 10px;
+      margin-left: 10px;
+      z-index: 8;
+    }
+
+    input {
+      width: 100%;
+      padding: 10px;
+      outline: none;
+      background-color: var(--background-color-secondary);
+      color: var(--text-color);
+      font-weight: 100;
+      font-size: 1.2rem;
+      margin: 0;
+      z-index: 3;
+      border: none;
+
+      border-radius: 0;
+      -webkit-appearance: none;
+    }
+
+    .show {
+      position: absolute;
+      display: grid;
+      place-items: center;
+      right: 20px;
+      z-index: 11;
+      margin: auto 0;
+      height: 100%;
+      font-size: 0.9rem;
+      cursor: pointer;
+      color: var(--text-color-50);
+      -webkit-user-select: none;
+      user-select: none;
     }
   }
-
-  svg {
-    width: 24px;
-    height: 24px;
-    fill: var(--text-color-50);
-    pointer-events: none;
-    margin-top: 10px;
-    margin-left: 10px;
-    z-index: 8;
-  }
-
-  input {
-    width: 100%;
-    padding: 10px;
-    outline: none;
-    background-color: var(--background-color-secondary);
-    color: var(--text-color);
-    font-weight: 100;
-    font-size: 1.2rem;
-    margin: 0;
-    z-index: 3;
-    border: none;
-
-    border-radius: 0;
-    -webkit-appearance: none;
-  }
-
-  .show {
-    position: absolute;
-    display: grid;
-    place-items: center;
-    right: 20px;
-    z-index: 11;
-    margin: auto 0;
-    height: 100%;
-    font-size: 0.9rem;
-    cursor: pointer;
-    color: var(--text-color-50);
-    -webkit-user-select: none;
-    user-select: none;
-  }
-}
 </style>

src/components/ui/SeasonedMessages.vue

@@ -1,13 +1,13 @@
 <template>
   <transition-group name="fade">
     <div
-      class="message"
+      class="card"
-      v-for="(message, index) in reversedMessages"
+      v-for="(message, index) in messages"
       :key="`${index}-${message.title}-${message.type}}`"
       :class="message.type || 'warning'"
     >
       <span class="pinstripe"></span>
-      <div>
+      <div class="content">
         <h2 class="title">
           {{ message.title || defaultTitles[message.type] }}
         </h2>
@@ -16,150 +16,149 @@
         }}</span>
       </div>
 
-      <button class="dismiss" @click="clicked(message)">X</button>
+      <button class="dismiss" @click="dismiss(index)">X</button>
     </div>
   </transition-group>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { defineProps, defineEmits } from "vue";
-  props: {
+  import type { Ref } from "vue";
-    messages: {
+
-      required: true,
+  interface IErrorMessage {
-      type: Array
+    title: string;
-    }
+    message: string;
-  },
+    type: "error" | "success" | "warning";
-  data() {
+  }
-    return {
+
-      defaultTitles: {
+  interface Props {
-        error: "Unexpected error",
+    messages: IErrorMessage[];
-        warning: "Something went wrong",
+  }
-        undefined: "Something went wrong"
+
-      },
+  interface Emit {
-      localMessages: [...this.messages]
+    (e: "update:messages", messages: IErrorMessage[]);
-    };
+  }
-  },
+
-  computed: {
+  const props = defineProps<Props>();
-    reversedMessages() {
+  const emit = defineEmits<Emit>();
-      return [...this.messages].reverse();
+
-    }
+  const defaultTitles = {
-  },
+    error: "Unexpected error",
-  methods: {
+    warning: "Something went wrong",
-    clicked(e) {
+    success: "",
-      const removedMessage = [...this.messages].filter(mes => mes !== e);
+    undefined: "Something went wrong"
-      this.$emit("update:messages", removedMessage);
+  };
-    }
+
+  function dismiss(index: number) {
+    props.messages.splice(index, 1);
+    emit("update:messages", [...props.messages]);
   }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.fade-enter-active {
+  .fade-active {
-  transition: opacity 0.4s;
+    transition: opacity 0.4s;
-}
+  }
-.fade-leave-active {
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  transition: opacity 0.1s;
+    opacity: 0;
-}
+  }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
 
-.message {
+  .card {
-  width: 100%;
-  max-width: 35rem;
-
-  display: flex;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  color: $text-color-70;
-
-  > div {
-    margin: 10px 24px;
     width: 100%;
-  }
+    max-width: 35rem;
 
-  .title {
+    display: flex;
-    font-weight: 300;
+    margin-top: 0.8rem;
-    letter-spacing: 0.25px;
-    margin: 0;
-    font-size: 1.3rem;
-    color: $text-color;
-    transition: color 0.5s ease;
-  }
-  .message {
-    font-weight: 300;
     color: $text-color-70;
-    transition: color 0.5s ease;
-    margin: 0.2rem 0 0.5rem;
-  }
 
-  @include mobile-only {
+    .content {
-    > div {
+      margin: 0.4rem 1.2rem;
-      margin: 6px 6px;
+      width: 100%;
-      line-height: 1.3rem;
+
+      .title {
+        font-weight: 300;
+        letter-spacing: 0.25px;
+        margin: 0;
+        font-size: 1.3rem;
+        color: $text-color;
+        transition: color 0.5s ease;
+      }
+
+      .message {
+        font-weight: 400;
+        font-size: 1.2rem;
+        color: $text-color-70;
+        transition: color 0.5s ease;
+        margin-bottom: 0.2rem;
+      }
+
+      @include mobile-only {
+        margin: 6px 6px;
+        line-height: 1.3rem;
+
+        h2 {
+          font-size: 1.1rem;
+        }
+        span {
+          font-size: 0.9rem;
+        }
+      }
     }
-    h2 {
-      font-size: 1.1rem;
-    }
-    span {
-      font-size: 0.9rem;
-    }
-  }
-
-  .pinstripe {
-    width: 0.5rem;
-    background-color: $color-error-highlight;
-  }
-
-  .dismiss {
-    position: relative;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-color: transparent;
-    border: unset;
-    font-size: 18px;
-    cursor: pointer;
-
-    top: 0;
-    float: right;
-    height: 1.5rem;
-    width: 1.5rem;
-    padding: 0;
-    margin-top: 0.5rem;
-    margin-right: 0.5rem;
-    color: $text-color-70;
-    transition: color 0.5s ease;
-
-    &:hover {
-      color: $text-color;
-    }
-  }
-
-  &.success {
-    background-color: $color-success;
-
-    .pinstripe {
-      background-color: $color-success-highlight;
-    }
-  }
-
-  &.error {
-    background-color: $color-error;
 
     .pinstripe {
+      width: 0.5rem;
       background-color: $color-error-highlight;
     }
-  }
 
-  &.warning {
+    .dismiss {
-    background-color: $color-warning;
+      position: relative;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background-color: transparent;
+      border: unset;
+      font-size: 18px;
+      cursor: pointer;
 
-    .pinstripe {
+      top: 0;
-      background-color: $color-warning-highlight;
+      float: right;
+      height: 1.5rem;
+      width: 1.5rem;
+      padding: 0;
+      margin-top: 0.5rem;
+      margin-right: 0.5rem;
+      color: $text-color-70;
+      transition: color 0.5s ease;
+
+      &:hover {
+        color: $text-color;
+      }
+    }
+
+    &.success {
+      background-color: $color-success;
+
+      .pinstripe {
+        background-color: $color-success-highlight;
+      }
+    }
+
+    &.error {
+      background-color: $color-error;
+
+      .pinstripe {
+        background-color: $color-error-highlight;
+      }
+    }
+
+    &.warning {
+      background-color: $color-warning;
+
+      .pinstripe {
+        background-color: $color-warning-highlight;
+      }
     }
   }
-}
 </style>

src/components/ui/ToggleButton.vue

@@ -4,83 +4,74 @@
       v-for="option in options"
       :key="option"
       class="toggle-button"
-      @click="toggle(option)"
+      @click="toggleTo(option)"
-      :class="toggleValue === option ? 'selected' : null"
+      :class="selected === option ? 'selected' : null"
     >
       {{ option }}
     </button>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { ref, defineProps, defineEmits } from "vue";
-  props: {
+  import type { Ref } from "vue";
-    options: {
+
-      Array,
+  interface Props {
-      required: true
+    options: string[];
-    },
+    selected?: string;
-    selected: {
+  }
-      type: String,
+
-      required: false,
+  interface Emit {
-      default: undefined
+    (e: "update:selected", selected: string);
-    }
+    (e: "change");
-  },
+  }
-  data() {
+
-    return {
+  defineProps<Props>();
-      toggleValue: this.selected || this.options[0]
+  const emit = defineEmits<Emit>();
-    };
+
-  },
+  function toggleTo(option: string) {
-  methods: {
+    emit("update:selected", option);
-    toggle(toggleValue) {
+    emit("change");
-      this.toggleValue = toggleValue;
-      if (this.selected !== undefined) {
-        this.$emit("update:selected", toggleValue);
-        this.$emit("change", toggleValue);
-      } else {
-        this.$emit("change", toggleValue);
-      }
-    }
   }
-};
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/variables";
+  @import "src/scss/variables";
 
-$background: $background-ui;
+  $background: $background-ui;
-$background-selected: $background-color-secondary;
+  $background-selected: $background-color-secondary;
 
-.toggle-container {
+  .toggle-container {
-  width: 100%;
+    width: 100%;
-  display: flex;
+    display: flex;
-  overflow-x: scroll;
+    overflow-x: scroll;
-  flex-direction: row;
+    flex-direction: row;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-  background-color: $background;
-  border: 2px solid $background;
-  border-radius: 8px;
-  border-left: 4px solid $background;
-  border-right: 4px solid $background;
-
-  .toggle-button {
-    font-size: 1rem;
-    line-height: 1rem;
-    font-weight: normal;
-    padding: 0.5rem;
-    border: 0;
-    color: $text-color;
     background-color: $background;
-    text-transform: capitalize;
+    border: 2px solid $background;
-    cursor: pointer;
+    border-radius: 8px;
-    display: block;
+    border-left: 4px solid $background;
-    flex: 1 0 auto;
+    border-right: 4px solid $background;
 
-    &.selected {
+    .toggle-button {
+      font-size: 1rem;
+      line-height: 1rem;
+      font-weight: normal;
+      padding: 0.5rem;
+      border: 0;
       color: $text-color;
-      background-color: $background-selected;
+      background-color: $background;
-      border-radius: 8px;
+      text-transform: capitalize;
+      cursor: pointer;
+      display: block;
+      flex: 1 0 auto;
+
+      &.selected {
+        color: $text-color;
+        background-color: $background-selected;
+        border-radius: 8px;
+      }
     }
   }
-}
 </style>