fix: Dockerfile to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-DEBIAN11-CURL-3065656
- https://snyk.io/vuln/SNYK-DEBIAN11-CURL-3065656
- https://snyk.io/vuln/SNYK-DEBIAN11-CURL-3179181
- https://snyk.io/vuln/SNYK-DEBIAN11-TIFF-3113871
- https://snyk.io/vuln/SNYK-DEBIAN11-TIFF-3252499

.drone.yml

@@ -25,7 +25,7 @@ steps:
         path: /cache
 
   - name: Frontend install
-    image: node:24.13.1
+    image: node:18.2.0
     commands:
       - node -v
       - yarn --version
@@ -42,14 +42,8 @@ steps:
       - name: cache
         path: /cache
 
-  - name: Lint project using eslint
-    image: node:24.13.1
-    commands:
-      - yarn lint
-    failure: ignore
-
   - name: Frontend build
-    image: node:24.13.1
+    image: node:18.2.0
     commands:
       - yarn build
     environment:
@@ -62,6 +56,12 @@ steps:
       SEASONED_DOMAIN:
         from_secret: SEASONED_DOMAIN
 
+  - name: Lint project using eslint
+    image: node:18.2.0
+    commands:
+      - yarn lint
+    failure: ignore
+
   - name: Build and publish docker image
     image: plugins/docker
     settings:
@@ -105,8 +105,3 @@ trigger:
     include:
       - push
       # - pull_request
----
-kind: signature
-hmac: 6f10b2871d2bd6b5cd26ddf72796325991ba211ba1eb62b657baf993e9d549c8
-
-...

.env.example

@@ -1,3 +1,4 @@
-SEASONED_API=http://localhost:31459
+SEASONED_API=
-ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
+ELASTIC=
-ELASTIC_API_KEY=
+ELASTIC_INDEX=shows,movies
+SEASONED_DOMAIN=

.eslintrc

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "@vue/eslint-config-airbnb",
+    "plugin:vue/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+  ],
+  "rules": {
+    "vue/no-v-model-argument": "off",
+    "no-underscore-dangle": "off",
+    "vue/multi-word-component-names": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+  },
+  "settings": {
+    "import/resolver": {
+      webpack: {
+        config: "./webpack.config.js"
+      }
+    }
+  }
+}

.gitignore

@@ -4,7 +4,6 @@ src/config.json
 
 # Build directory
 dist/
-lib/
 
 # Node packages
 node_modules/

Dockerfile

@@ -1,39 +1,7 @@
-FROM node:24.13.1 AS build
+FROM nginx:1.23
 
-# Set the working directory for the build stage
+COPY public /usr/share/nginx/html
-WORKDIR /app
-
-# Install dependencies
-COPY package.json yarn.lock .
-RUN yarn install --frozen-lockfile
-
-# Copy source files that the build depends on
-COPY index.html .
-COPY public/ public/
-COPY src/ src/
-COPY tsconfig.json vite.config.ts .
-
-ARG SEASONED_API=http://localhost:31459
-ENV VITE_SEASONED_API=$SEASONED_API
-
-ARG ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
-ENV VITE_ELASTIC_URL=$ELASTIC_URL
-ARG ELASTIC_API_KEY=
-ENV VITE_ELASTIC_API_KEY=$ELASTIC_API_KEY
-
-RUN yarn build
-
-FROM nginx:1.29.5
-
-# Copy the static build from the previous stage
-COPY index.html /usr/share/nginx/html
-COPY public/ /usr/share/nginx/html
-COPY --from=build /app/dist /usr/share/nginx/html
-
-# Copy nginx config file
 COPY nginx.conf /etc/nginx/conf.d/default.conf.template
-
-# Manual entrypoint after nginx substring
 COPY docker-entrypoint.sh /docker-entrypoint.d/05-docker-entrypoint.sh
 
 RUN chmod +x /docker-entrypoint.d/05-docker-entrypoint.sh

eslint.config.mjs

@@ -1,67 +0,0 @@
-import path from "node:path";
-
-import { includeIgnoreFile } from "@eslint/compat";
-import js from "@eslint/js";
-import { defineConfig } from "eslint/config";
-import { configs, plugins } from "eslint-config-airbnb-extended";
-import { rules as prettierConfigRules } from "eslint-config-prettier";
-import prettierPlugin from "eslint-plugin-prettier";
-
-const CUSTOM_RULES = {
-  "vue/no-v-model-argument": "off",
-  "no-underscore-dangle": "off",
-  "vue/multi-word-component-names": "off",
-  "no-shadow": "off",
-  "@typescript-eslint/no-shadow": ["error"]
-};
-
-const gitignorePath = path.resolve(".", ".gitignore");
-
-// ESLint recommended config
-const jsConfig = defineConfig([
-  {
-    name: "js/config",
-    ...js.configs.recommended
-  },
-  plugins.stylistic,
-  plugins.importX,
-  ...configs.base.recommended // Airbnb base recommended config
-]);
-
-// Node & Airbnb recommended config
-const nodeConfig = defineConfig([plugins.node, ...configs.node.recommended]);
-
-// Typescript & Airbnb base TS config
-const typescriptConfig = defineConfig([
-  plugins.typescriptEslint,
-  ...configs.base.typescript
-]);
-
-// Prettier config
-const prettierConfig = defineConfig([
-  {
-    name: "prettier/plugin/config",
-    plugins: {
-      prettier: prettierPlugin
-    }
-  },
-  {
-    name: "prettier/config",
-    rules: {
-      ...prettierConfigRules,
-      "prettier/prettier": "error"
-    }
-  }
-]);
-
-export default defineConfig([
-  // Ignore files and folders listed in .gitignore
-  includeIgnoreFile(gitignorePath),
-  ...jsConfig,
-  ...nodeConfig,
-  ...typescriptConfig,
-  ...prettierConfig,
-  {
-    rules: CUSTOM_RULES
-  }
-]);

nginx.conf

@@ -2,7 +2,7 @@ server {
   listen 5000 default_server;
   listen [::]:5000 default_server;
 
-  server_name _;
+  server_name $SEASONED_DOMAIN;
   root /usr/share/nginx/html;
 
   gzip on;

package.json

@@ -5,31 +5,57 @@
   "author": "Kevin Midboe",
   "private": true,
   "scripts": {
-    "dev": "NODE_ENV=development vite",
+    "dev": "NODE_ENV=development webpack server",
-    "build": "yarn vite build",
+    "build": "yarn build:ts && yarn build:webpack",
-    "clean": "rm -r dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null",
+    "build:ts": "tsc --project tsconfig.json",
+    "build:webpack": "NODE_ENV=production webpack-cli build --progress",
+    "postbuild": "cp public/dist/index.html public/index.html",
+    "clean": "rm -r public/dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null",
     "start": "echo 'Start using docker, consult README'",
     "lint": "eslint src --ext .ts,.vue",
     "docs": "documentation build src/api.ts -f html -o docs/api && documentation build src/api.ts -f md -o docs/api.md"
   },
   "dependencies": {
     "chart.js": "3.9.1",
-    "vue": "3.5.28",
+    "connect-history-api-fallback": "2.0.0",
-    "vue-router": "5.0.3",
+    "dotenv": "^16.0.1",
-    "vuex": "4.1.0"
+    "express": "4.18.1",
+    "vue": "3.2.37",
+    "vue-router": "4.1.3",
+    "vuex": "4.0.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
+    "@babel/core": "7.18.10",
-    "@eslint/js": "^10.0.1",
+    "@babel/plugin-transform-runtime": "7.18.10",
-    "@types/node": "^25.3.0",
+    "@babel/preset-env": "7.18.10",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@babel/runtime": "7.18.9",
-    "eslint": "^10.0.1",
+    "@types/express": "4.17.13",
-    "eslint-config-airbnb-extended": "^3.0.1",
+    "@types/node": "18.6.1",
-    "eslint-config-prettier": "^10.1.8",
+    "@typescript-eslint/eslint-plugin": "5.33.0",
-    "eslint-plugin-prettier": "^5.5.5",
+    "@typescript-eslint/parser": "5.33.0",
-    "prettier": "^3.8.1",
+    "@vue/cli": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/eslint-config-airbnb": "6.0.0",
+    "babel-loader": "8.2.5",
+    "css-loader": "6.7.1",
+    "documentation": "13.2.5",
+    "eslint": "8.21.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.3.0",
+    "eslint-plugin-vuejs-accessibility": "1.2.0",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "5.5.0",
+    "prettier": "2.7.1",
     "sass": "1.54.3",
-    "typescript": "5.9.3",
+    "sass-loader": "13.0.2",
-    "vite": "^6.0.3"
+    "terser-webpack-plugin": "5.3.3",
+    "ts-loader": "9.3.1",
+    "typescript": "4.7.4",
+    "vue-loader": "17.0.0",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3"
   }
 }

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="content">
+  <div id="app">
     <!-- Header and hamburger navigation -->
     <NavigationHeader class="header" />
 
@@ -28,13 +28,13 @@
 </script>
 
 <style lang="scss">
-  @import "scss/main";
+  @import "src/scss/main";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
-  #content {
+  #app {
     display: grid;
     grid-template-rows: var(--header-size);
-    grid-template-columns: var(--header-size) 100%;
+    grid-template-columns: var(--header-size) 1fr;
 
     @include mobile {
       grid-template-columns: 1fr;
@@ -58,7 +58,6 @@
 
     .content {
       display: grid;
-      width: calc(100% - var(--header-size));
       grid-column: 2 / 3;
       grid-row: 2;
       z-index: 5;

src/api.ts

@@ -1,13 +1,11 @@
-/* eslint-disable n/no-unsupported-features/node-builtins */
 import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList";
 import type {
   IRequestStatusResponse,
   IRequestSubmitResponse
 } from "./interfaces/IRequestResponse";
 
-const API_HOSTNAME = import.meta.env.VITE_SEASONED_API;
+const { ELASTIC, ELASTIC_INDEX } = process.env;
-const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+const API_HOSTNAME = window.location.origin;
-const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
 
 // - - - TMDB - - -
 
@@ -336,11 +334,7 @@ const register = (username, password) => {
     });
 };
 
-const login = async (
+const login = (username, password, throwError = false) => {
-  username: string,
-  password: string,
-  throwError = false
-) => {
   const url = new URL("/api/v1/user/login", API_HOSTNAME);
   const options = {
     method: "POST",
@@ -357,7 +351,7 @@ const login = async (
   });
 };
 
-const logout = async (throwError = false) => {
+const logout = (throwError = false) => {
   const url = new URL("/api/v1/user/logout", API_HOSTNAME);
   const options = { method: "POST" };
 
@@ -436,13 +430,9 @@ const unlinkPlexAccount = () => {
 
 // - - - User graphs - - -
 
-const fetchGraphData = async (
+const fetchGraphData = (urlPath, days, chartType) => {
-  urlPath: string,
-  days: number,
-  chartType: string
-) => {
   const url = new URL(`/api/v1/user/${urlPath}`, API_HOSTNAME);
-  url.searchParams.append("days", String(days));
+  url.searchParams.append("days", days);
   url.searchParams.append("y_axis", chartType);
 
   return fetch(url.href).then(resp => {
@@ -457,7 +447,7 @@ const fetchGraphData = async (
 
 // - - - Random emoji - - -
 
-const getEmoji = async () => {
+const getEmoji = () => {
   const url = new URL("/api/v1/emoji", API_HOSTNAME);
 
   return fetch(url.href)
@@ -478,59 +468,33 @@ const getEmoji = async () => {
  * @param {string} query
  * @returns {object} List of movies and shows matching query
  */
-
 const elasticSearchMoviesAndShows = (query, count = 22) => {
-  const url = new URL(`${ELASTIC_URL}/_search`);
+  const url = new URL(`${ELASTIC_INDEX}/_search`, ELASTIC);
 
   const body = {
     sort: [{ popularity: { order: "desc" } }, "_score"],
-    size: count,
     query: {
-      multi_match: {
+      bool: {
-        query,
+        should: [
-        fields: ["name", "original_title", "original_name"],
+          {
-        type: "phrase_prefix",
+            match_phrase_prefix: {
-        tie_breaker: 0.3
+              original_name: query
+            }
+          },
+          {
+            match_phrase_prefix: {
+              original_title: query
+            }
+          }
+        ]
       }
     },
-    suggest: {
+    size: count
-      text: query,
-      "person-suggest": {
-        prefix: query,
-        completion: {
-          field: "name.completion",
-          fuzzy: {
-            fuzziness: "AUTO"
-          }
-        }
-      },
-      "movie-suggest": {
-        prefix: query,
-        completion: {
-          field: "original_title.completion",
-          fuzzy: {
-            fuzziness: "AUTO"
-          }
-        }
-      },
-      "show-suggest": {
-        prefix: query,
-        completion: {
-          field: "original_name.completion",
-          fuzzy: {
-            fuzziness: "AUTO"
-          }
-        }
-      }
-    }
   };
 
   const options = {
     method: "POST",
-    headers: {
+    headers: { "Content-Type": "application/json" },
-      "Content-Type": "application/json",
-      Authorization: `ApiKey ${ELASTIC_API_KEY}`
-    },
     body: JSON.stringify(body)
   };
 

src/components/CastList.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
   import { defineProps } from "vue";
-  import CastListItem from "@/components/CastListItem.vue";
+  import CastListItem from "src/components/CastListItem.vue";
   import type {
     IMovie,
     IShow,

src/components/CastListItem.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from "vue";
+  import { defineProps, computed } from "vue";
   import { useStore } from "vuex";
   import type { ICast, ICrew, IMovie, IShow } from "../interfaces/IList";
 

src/components/Graph.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from "vue";
+  import { ref, defineProps, onMounted, watch } from "vue";
   import {
     Chart,
     LineElement,

src/components/LandingBanner.vue

@@ -100,8 +100,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   header {
     width: 100%;

src/components/PageHeader.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from "vue";
+  import { defineProps, computed } from "vue";
 
   interface Props {
     title: string;
@@ -47,9 +47,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   header {
     width: 100%;

src/components/Popup.vue

@@ -46,7 +46,7 @@
     let _type: MediaTypes;
 
     const params = new URLSearchParams(window.location.search);
-    params.forEach((_, key) => {
+    params.forEach((value, key) => {
       if (
         key !== MediaTypes.Movie &&
         key !== MediaTypes.Show &&
@@ -90,8 +90,8 @@
 </script>
 
 <style lang="scss">
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .movie-popup {
     position: fixed;

src/components/ResultsList.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps } from "vue";
   import ResultsListItem from "@/components/ResultsListItem.vue";
   import type { ListResults } from "../interfaces/IList";
 
@@ -34,8 +35,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   .no-results {
     width: 100%;

src/components/ResultsListItem.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted } from "vue";
+  import { ref, computed, defineProps, onMounted } from "vue";
   import { useStore } from "vuex";
   import type { Ref } from "vue";
   import type { IMovie, IShow, IPerson } from "../interfaces/IList";
@@ -111,9 +111,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   .movie-item {
     padding: 15px;

src/components/ResultsSection.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted } from "vue";
+  import { defineProps, ref, computed, onMounted } from "vue";
   import PageHeader from "@/components/PageHeader.vue";
   import ResultsList from "@/components/ResultsList.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
@@ -172,7 +172,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .resultSection {
     background-color: var(--background-color);

src/components/header/AutocompleteDropdown.vue

@@ -10,7 +10,6 @@
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
-        <IconPerson v-if="result.type == 'person'" class="type-icon" />
         <span class="title">{{ result.title }}</span>
       </li>
 
@@ -24,24 +23,18 @@
   </transition>
 </template>
 
-<!--
-Searches Elasticsearch for results based on changes to `query`.
--->
-
 <script setup lang="ts">
-  import type { Ref } from "vue";
   import { ref, watch, defineProps } from "vue";
   import { useStore } from "vuex";
-  import IconMovie from "../../icons/IconMovie.vue";
+  import IconMovie from "@/icons/IconMovie.vue";
-  import IconShow from "../../icons/IconShow.vue";
+  import IconShow from "@/icons/IconShow.vue";
+  import type { Ref } from "vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
+  import { Index } from "../../interfaces/IAutocompleteSearch";
   import type {
     IAutocompleteResult,
-    IAutocompleteSearchResults,
+    IAutocompleteSearchResults
-    Hit,
-    Option,
-    Source
   } from "../../interfaces/IAutocompleteSearch";
 
   interface Props {
@@ -55,7 +48,6 @@ Searches Elasticsearch for results based on changes to `query`.
   }
 
   const numberOfResults = 10;
-  let timeoutId = null;
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
   const store = useStore();
@@ -63,9 +55,23 @@ Searches Elasticsearch for results based on changes to `query`.
   const searchResults: Ref<Array<IAutocompleteResult>> = ref([]);
   const keyboardNavigationIndex: Ref<number> = ref(0);
 
-  function removeDuplicates(_searchResults: Array<IAutocompleteResult>) {
+  watch(
+    () => props.query,
+    newQuery => {
+      if (newQuery?.length > 0)
+        fetchAutocompleteResults(); /* eslint-disable-line no-use-before-define */
+    }
+  );
+
+  function openPopup(result) {
+    if (!result.id || !result.type) return;
+
+    store.dispatch("popup/open", { ...result });
+  }
+
+  function removeDuplicates(_searchResults) {
     const filteredResults = [];
-    _searchResults.forEach((result: IAutocompleteResult) => {
+    _searchResults.forEach(result => {
       if (result === undefined) return;
       const numberOfDuplicates = filteredResults.filter(
         filterItem => filterItem.id === result.id
@@ -80,43 +86,34 @@ Searches Elasticsearch for results based on changes to `query`.
     return filteredResults;
   }
 
-  function convertMediaType(type: string | null): MediaTypes | null {
+  function elasticIndexToMediaType(index: Index): MediaTypes {
-    if (type === "movie") return MediaTypes.Movie;
+    if (index === Index.Movies) return MediaTypes.Movie;
-
+    if (index === Index.Shows) return MediaTypes.Show;
-    if (type === "tv_series") return MediaTypes.Show;
-
-    if (type === "person") return MediaTypes.Person;
 
     return null;
   }
 
   function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
-    const elasticResults = elasticResponse.hits.hits;
+    const data = elasticResponse.hits.hits;
-    const suggestResults = elasticResponse.suggest["movie-suggest"][0].options;
-
-    let data: Array<Source> = elasticResults.map((el: Hit) => el._source);
-    data = data.concat(suggestResults.map((el: Option) => el._source));
-
-    //    data = data.concat(elasticResponse['suggest']['person-suggest'][0]['options'])
-    //    data = data.concat(elasticResponse['suggest']['show-suggest'][0]['options'])
-    data = data.sort((a, b) => (a.popularity < b.popularity ? 1 : -1));
 
     const results: Array<IAutocompleteResult> = [];
 
     data.forEach(item => {
+      if (!Object.values(Index).includes(item._index)) {
+        return;
+      }
+
       results.push({
-        title: item?.original_name || item?.original_title || item?.name,
+        title: item._source?.original_name || item._source.original_title,
-        id: item.id,
+        id: item._source.id,
-        adult: item.adult,
+        adult: item._source.adult,
-        type: convertMediaType(item?.type)
+        type: elasticIndexToMediaType(item._index)
       });
     });
 
-    return removeDuplicates(results)
+    return removeDuplicates(results).map((el, index) => {
-      .map((el, index) => {
+      return { ...el, index };
-        return { ...el, index };
+    });
-      })
-      .slice(0, 10);
   }
 
   function fetchAutocompleteResults() {
@@ -126,43 +123,20 @@ Searches Elasticsearch for results based on changes to `query`.
     elasticSearchMoviesAndShows(props.query, numberOfResults)
       .then(elasticResponse => parseElasticResponse(elasticResponse))
       .then(_searchResults => {
-        console.log(_searchResults);
         emit("update:results", _searchResults);
         searchResults.value = _searchResults;
       });
   }
 
-  const debounce = (callback: () => void, wait: number) => {
-    window.clearTimeout(timeoutId);
-    timeoutId = window.setTimeout(() => {
-      callback();
-    }, wait);
-  };
-
-  watch(
-    () => props.query,
-    newQuery => {
-      if (newQuery?.length > 0) {
-        debounce(fetchAutocompleteResults, 150);
-      }
-    }
-  );
-
-  function openPopup(result: IAutocompleteResult) {
-    if (!result.id || !result.type) return;
-
-    store.dispatch("popup/open", { ...result });
-  }
-
   // on load functions
   fetchAutocompleteResults();
   // end on load functions
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
   $sizes: 22;
 
   @for $i from 0 through $sizes {
@@ -240,9 +214,7 @@ Searches Elasticsearch for results based on changes to `query`.
     cursor: pointer;
     white-space: nowrap;
 
-    transition:
+    transition: color 0.1s ease, fill 0.4s ease;
-      color 0.1s ease,
-      fill 0.4s ease;
 
     span {
       overflow-x: hidden;

src/components/header/NavigationHeader.vue

@@ -61,8 +61,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .spacer {
     @include mobile-only {

src/components/header/NavigationIcon.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
   import { useStore } from "vuex";
-  import { computed } from "vue";
+  import { computed, defineProps } from "vue";
   import type INavigationIcon from "../../interfaces/INavigationIcon";
 
   interface Props {
@@ -37,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .navigation-link {
     display: grid;
@@ -47,13 +47,8 @@
     padding: 1rem 0.15rem;
     text-align: center;
     background-color: var(--background-color-secondary);
-    transition:
+    transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-      transform 0.3s ease,
+      fill 0.3s ease, background-color 0.5s ease;
-      color 0.3s ease,
-      stoke 0.3s ease,
-      fill 0.3s ease,
-      background-color 0.5s ease;
-    transition: all 0.3s ease;
 
     &:hover {
       transform: scale(1.05);

src/components/header/NavigationIcons.vue

@@ -77,7 +77,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .navigation-icons {
     display: grid;

src/components/header/SearchInput.vue

@@ -42,28 +42,15 @@
   </div>
 </template>
 
-<!-- Handles constructing markup and state for dropdown.
-
-Markup:
-Consist of: search icon, input & close button.
-
-State:
-State is passing input variable `query` to dropdown and carrying state
-of selected dropdown element as variable `index`. This is because
-index is manipulated based on arrow key events from same input as
-the `query`.
--->
-
 <script setup lang="ts">
-  import type { Ref } from "vue";
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import { useRouter, useRoute } from "vue-router";
-  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
-  import IconSearch from "../../icons/IconSearch.vue";
+  import IconSearch from "@/icons/IconSearch.vue";
-  import IconClose from "../../icons/IconClose.vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import type { Ref } from "vue";
   import type { MediaTypes } from "../../interfaces/IList";
-import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 
   interface ISearchResult {
     title: string;
@@ -79,7 +66,7 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
   const query: Ref<string> = ref(null);
   const disabled: Ref<boolean> = ref(false);
   const dropdownIndex: Ref<number> = ref(-1);
-  const dropdownResults: Ref<IAutocompleteResult[]> = ref([]);
+  const dropdownResults: Ref<ISearchResult[]> = ref([]);
   const inputIsActive: Ref<boolean> = ref(false);
   const inputElement: Ref<HTMLInputElement> = ref(null);
 
@@ -98,9 +85,8 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+  const { ELASTIC } = process.env;
-  const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
+  if (ELASTIC === undefined || ELASTIC === "") {
-  if (!ELASTIC_URL || !ELASTIC_API_KEY) {
     disabled.value = true;
   }
 
@@ -159,7 +145,6 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
   function handleSubmit() {
     if (!query.value || query.value.length === 0) return;
 
-    // if index is set, navigation has happened. Open popup else search
     if (dropdownIndex.value >= 0) {
       const resultItem = dropdownResults.value[dropdownIndex.value];
 
@@ -180,9 +165,9 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   .close-icon {
     position: absolute;

src/components/popup/ActionButton.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps, defineEmits } from "vue";
+
   interface Props {
     active?: boolean;
     disabled?: boolean;
@@ -24,7 +26,7 @@
 </script>
 
 <style lang="scss">
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   li.sidebar-list-element {
     display: flex;

src/components/popup/Description.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from "vue";
+  import { ref, defineProps, onMounted } from "vue";
   import type { Ref } from "vue";
   import IconArrowDown from "../../icons/IconArrowDown.vue";
 
@@ -27,6 +27,7 @@
   const overflow: Ref<boolean> = ref(false);
   const descriptionElement: Ref<HTMLElement> = ref(null);
 
+  // eslint-disable-next-line no-undef
   function removeElements(elems: NodeListOf<Element>) {
     elems.forEach(el => el.remove());
   }
@@ -66,7 +67,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .movie-description {
     font-weight: 300;

src/components/popup/Detail.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps } from "vue";
+
   interface Props {
     title: string;
     detail?: string | number;
@@ -17,7 +19,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .movie-detail {
     margin-bottom: 20px;

src/components/popup/Movie.vue

@@ -165,24 +165,25 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted } from "vue";
+  import { ref, computed, defineProps, onMounted } from "vue";
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
-  import IconProfile from "../../icons/IconProfile.vue";
+  import IconProfile from "@/icons/IconProfile.vue";
-  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  import IconInfo from "../../icons/IconInfo.vue";
+  import IconInfo from "@/icons/IconInfo.vue";
-  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequest from "@/icons/IconRequest.vue";
-  import IconRequested from "../../icons/IconRequested.vue";
+  import IconRequested from "@/icons/IconRequested.vue";
-  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconPlay from "../../icons/IconPlay.vue";
+  import IconPlay from "@/icons/IconPlay.vue";
-  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
-  import CastList from "../CastList.vue";
+  import CastList from "@/components/CastList.vue";
-  import Detail from "./Detail.vue";
+  import Detail from "@/components/popup/Detail.vue";
-  import ActionButton from "./ActionButton.vue";
+  import ActionButton from "@/components/popup/ActionButton.vue";
-  import Description from "./Description.vue";
+  import Description from "@/components/popup/Description.vue";
-  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
+  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
+  import type { Ref } from "vue";
   import type {
     IMovie,
     IShow,
@@ -341,10 +342,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   header {
     $duration: 0.2s;

src/components/popup/Person.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, defineProps } from "vue";
   import CastList from "@/components/CastList.vue";
   import Detail from "@/components/popup/Detail.vue";
   import Description from "@/components/popup/Description.vue";
@@ -165,10 +165,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/main";
+  @import "src/scss/main";
 
   section.person {
     overflow: hidden;

src/components/profile/ChangePassword.vue

@@ -85,7 +85,7 @@
     try {
       validate();
     } catch (error) {
-      console.log("not valid! error:", error); // eslint-disable-line no-console
+      console.log("not valid!"); // eslint-disable-line no-console
     }
 
     // const body: ResetPasswordPayload = {

src/components/profile/LinkPlexAccount.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, defineEmits } from "vue";
   import { useStore } from "vuex";
   import seasonedInput from "@/components/ui/SeasonedInput.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";

src/components/torrent/TorrentSearchResults.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, inject } from "vue";
+  import { ref, watch, inject, defineProps } from "vue";
   import { useStore } from "vuex";
   import Loader from "@/components/ui/Loader.vue";
   import TorrentTable from "@/components/torrent/TorrentTable.vue";
@@ -102,9 +102,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/elements";
+  @import "src/scss/elements";
 
   h2 {
     font-size: 20px;
@@ -115,8 +115,13 @@
     margin: 1rem 0;
   }
 
+  .container {
+    background-color: $background-color;
+  }
+
   .no-results {
     display: flex;
+    padding-bottom: 2rem;
     justify-content: center;
     flex-direction: column;
     width: 100%;

src/components/torrent/TorrentTable.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from "vue";
+  import { ref, defineProps, defineEmits } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -155,9 +155,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
-  @import "scss/elements";
+  @import "src/scss/elements";
 
   table {
     border-spacing: 0;

src/components/torrent/TruncatedTorrentResults.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
+  import { ref, defineProps } from "vue";
   import { useRouter } from "vue-router";
-  import { ref, defineProps, computed } from "vue";
   import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import IconArrowDown from "@/icons/IconArrowDown.vue";

src/components/ui/Hamburger.vue

@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .nav__hamburger {
     display: block;

src/components/ui/Loader.vue

@@ -12,6 +12,7 @@
 --></template>
 
 <script setup lang="ts">
+  import { defineProps } from "vue";
   import LoaderHeightType from "../../interfaces/ILoader";
 
   interface Props {
@@ -22,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
 
   .loader {
     display: flex;

src/components/ui/LoadingPlaceholder.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps } from "vue";
+
   interface Props {
     count?: number;
     lineClass?: string;
@@ -20,5 +22,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/loading-placeholder";
+  @import "src/scss/loading-placeholder";
 </style>

src/components/ui/SeasonedButton.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps, defineEmits } from "vue";
+
   interface Props {
     active?: boolean;
     fullWidth?: boolean;
@@ -23,8 +25,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   button {
     display: inline-block;
@@ -42,10 +44,7 @@
     background: $background-color-secondary;
     cursor: pointer;
     outline: none;
-    transition:
+    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
-      background 0.5s ease,
-      color 0.5s ease,
-      border-color 0.5s ease;
 
     @include desktop {
       font-size: 0.8rem;

src/components/ui/SeasonedInput.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, defineProps, defineEmits } from "vue";
   import IconKey from "@/icons/IconKey.vue";
   import IconEmail from "@/icons/IconEmail.vue";
   import IconBinoculars from "@/icons/IconBinoculars.vue";
@@ -74,8 +74,8 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .group {
     display: flex;

src/components/ui/SeasonedMessages.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps, defineEmits } from "vue";
   import type {
     ErrorMessageTypes,
     IErrorMessage
@@ -64,8 +65,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .fade-active {
     transition: opacity 0.4s;

src/components/ui/ToggleButton.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps, defineEmits } from "vue";
+
   interface Props {
     options: string[];
     selected?: string;
@@ -33,7 +35,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
 
   $background: $background-ui;
   $background-selected: $background-color-secondary;

src/directives/v-formatDate.js

@@ -1,4 +1,3 @@
-/*
 let setValue = function(el, binding) {
   let value = binding.value;
   let dateArray = value.split('-');
@@ -14,4 +13,3 @@ module.exports = {
     setValue(el, binding);
   }
 }
-*/

src/directives/v-image.js

@@ -1,6 +1,5 @@
-/*
+let setValue = function(el, binding) {
-const setValue = function(el, binding) {
+  let img = new Image();
-  const img = new Image();
   img.src = binding.value;
 
   img.onload = function() {
@@ -11,11 +10,10 @@ const setValue = function(el, binding) {
 
 module.exports = {
   isLiteral: true,
-  bind(el, binding) {
+  bind(el, binding){
     setValue(el, binding);
   },
-  update(el, binding) {
+  update(el, binding){
     setValue(el, binding);
   }
-};
+}
-*/

src/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#081c24" />
   </head>
   <body>
-    <div id="app"></div>
+    <div id="entry"></div>
-
-    <script type="module" src="/src/main.ts"></script>
   </body>
 
   <script

src/interfaces/IAutocompleteSearch.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import { MediaTypes } from "./IList";
 
 export interface IAutocompleteResult {
@@ -12,7 +13,6 @@ export interface IAutocompleteSearchResults {
   timed_out: boolean;
   _shards: Shards;
   hits: Hits;
-  suggest: Suggest;
 }
 
 export interface Shards {
@@ -37,27 +37,6 @@ export interface Hit {
   sort: number[];
 }
 
-export interface Suggest {
-  "movie-suggest": SuggestOptions[];
-  "person-suggest": SuggestOptions[];
-  "show-suggest": SuggestOptions[];
-}
-
-export interface SuggestOptions {
-  text: string;
-  offset: number;
-  length: number;
-  options: Option[];
-}
-
-export interface Option {
-  text: string;
-  _index: string;
-  _id: string;
-  _score: number;
-  _source: Source;
-}
-
 export enum Index {
   Movies = "movies",
   Shows = "shows"
@@ -78,8 +57,6 @@ export interface Source {
   agent: Agent;
   original_title: string;
   original_name?: string;
-  name?: string;
-  type?: MediaTypes;
 }
 
 export interface Agent {

src/interfaces/IGraph.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-use-before-define */
+
 export enum GraphTypes {
   Plays = "plays",
   Duration = "duration"
@@ -10,12 +12,12 @@ export enum GraphValueTypes {
 
 export interface IGraphDataset {
   name: string;
-  data: number[];
+  data: Array<number>;
 }
 
 export interface IGraphData {
-  labels: string[];
+  labels: Array<string>;
-  series: IGraphDataset[];
+  series: Array<IGraphDataset>;
 }
 
 export interface IGraphResponse {

src/interfaces/IList.ts

@@ -67,7 +67,7 @@ export interface IMovie {
   backdrop: string;
   release_date: string | Date;
   rating: number;
-  genres: MovieGenres[];
+  genres: Array<MovieGenres>;
   production_status: MovieProductionStatus;
   tagline: string;
   runtime: number;
@@ -88,9 +88,9 @@ export interface IShow {
   seasons?: number;
   episodes?: number;
   popularity?: number;
-  genres?: ShowGenres[];
+  genres?: Array<ShowGenres>;
   production_status?: string;
-  runtime?: number[];
+  runtime?: Array<number>;
   exists_in_plex?: boolean;
   type: MediaTypes.Show;
 }
@@ -135,19 +135,19 @@ export interface ICrew {
 }
 
 export interface IMediaCredits {
-  cast: ICast[];
+  cast: Array<ICast>;
-  crew: ICrew[];
+  crew: Array<ICrew>;
   id: number;
 }
 
 export interface IPersonCredits {
-  cast: (IMovie | IShow)[];
+  cast: Array<IMovie | IShow>;
-  crew: ICrew[];
+  crew: Array<ICrew>;
   id: number;
   type?: string;
 }
 
-export type ListResults = (IMovie | IShow | IPerson | IRequest)[];
+export type ListResults = Array<IMovie | IShow | IPerson | IRequest>;
 
 export interface IList {
   results: ListResults;

src/interfaces/INavigationIcon.ts

@@ -1,7 +1,7 @@
 export default interface INavigationIcon {
   title: string;
   route: string;
-  icon: any;
+  icon: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   requiresAuth?: boolean;
   useStroke?: boolean;
 }

src/interfaces/IStateTorrent.ts

@@ -1,6 +1,6 @@
 import type ITorrent from "./ITorrent";
 
 export default interface IStateTorrent {
-  results: ITorrent[];
+  results: Array<ITorrent>;
   resultCount: number | null;
 }

src/interfaces/ITorrent.ts

@@ -7,5 +7,5 @@ export default interface ITorrent {
   seed: string;
   leech: string;
   url: string | null;
-  release_type: string[];
+  release_type: Array<string>;
 }

src/main.ts

@@ -3,7 +3,8 @@ import router from "./routes";
 import store from "./store";
 import Toast from "./plugins/Toast";
 
-import App from "./App.vue";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const App = require("./App.vue").default;
 
 store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
 store.dispatch("user/initUserFromCookie");
@@ -13,5 +14,4 @@ const app = createApp(App);
 app.use(router);
 app.use(store);
 app.use(Toast);
-
+app.mount("#entry");
-app.mount("#app");

src/modules/darkmodeModule.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import IStateDarkmode from "../interfaces/IStateDarkmode";
 
 const state: IStateDarkmode = {
@@ -11,7 +10,9 @@ export default {
   namespaced: true,
   state,
   getters: {
-    darkmodeSupported: (state: IStateDarkmode) => state.darkmodeSupported
+    darkmodeSupported: (state: IStateDarkmode) => {
+      return state.darkmodeSupported;
+    }
   },
   mutations: {
     SET_DARKMODE_SUPPORT: (

src/modules/documentTitle.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import type IStateDocumentTitle from "../interfaces/IStateDocumentTitle";
 
 const capitalize = (string: string) => {
@@ -27,7 +26,7 @@ const state: IStateDocumentTitle = {
   title: undefined
 };
 
-/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/no-shadow, no-return-assign */
 export default {
   namespaced: true,
   state,

src/modules/hamburger.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import type IStateHamburger from "../interfaces/IStateHamburger";
 
 const state: IStateHamburger = {

src/modules/popup.ts

@@ -1,16 +1,15 @@
-/* eslint-disable no-param-reassign */
 import { MediaTypes } from "../interfaces/IList";
 import type { IStatePopup, IPopupQuery } from "../interfaces/IStatePopup";
 
-/* eslint-disable-next-line import-x/no-cycle */
+/* eslint-disable-next-line import/no-cycle */
 import router from "../routes";
 
-const removeIncludedQueryParams = (params: URLSearchParams, key: string) => {
+const removeIncludedQueryParams = (params, key) => {
   if (params.has(key)) params.delete(key);
   return params;
 };
 
-function paramsToObject(entries: Iterator<[string, string]>) {
+function paramsToObject(entries) {
   const result = {};
   // eslint-disable-next-line no-restricted-syntax
   for (const [key, value] of entries) {
@@ -66,7 +65,7 @@ export default {
   actions: {
     open: ({ commit }, { id, type }: { id: number; type: MediaTypes }) => {
       if (!Number.isNaN(id)) {
-        id = Number(id);
+        id = Number(id); /* eslint-disable-line no-param-reassign */
       }
 
       commit("SET_OPEN", { id, type });

src/modules/torrentModule.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import type ITorrent from "../interfaces/ITorrent";
 import type IStateTorrent from "../interfaces/IStateTorrent";
 
@@ -12,12 +11,16 @@ export default {
   namespaced: true,
   state,
   getters: {
-    results: (state: IStateTorrent) => state.results,
+    results: (state: IStateTorrent) => {
-    resultCount: (state: IStateTorrent) => state.resultCount
+      return state.results;
+    },
+    resultCount: (state: IStateTorrent) => {
+      return state.resultCount;
+    }
   },
 
   mutations: {
-    SET_RESULTS: (state: IStateTorrent, results: ITorrent[]) => {
+    SET_RESULTS: (state: IStateTorrent, results: Array<ITorrent>) => {
       state.results = results;
     },
     SET_RESULT_COUNT: (state: IStateTorrent, count: number) => {
@@ -29,7 +32,7 @@ export default {
     }
   },
   actions: {
-    setResults({ commit }, results: ITorrent[]) {
+    setResults({ commit }, results: Array<ITorrent>) {
       commit("SET_RESULTS", results);
     },
     setResultCount({ commit }, count: number) {

src/pages/404Page.vue

@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables.scss";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .button {
     font-size: 1.2rem;

src/pages/ActivityPage.vue

@@ -141,7 +141,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
 
   .wrapper {
     padding: 2rem;

src/pages/ProfilePage.vue

@@ -118,8 +118,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .button--group {
     display: flex;

src/pages/RegisterPage.vue

@@ -131,7 +131,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
 
   section {
     padding: 1.3rem;

src/pages/SearchPage.vue

@@ -89,7 +89,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .filter {
     margin-top: 0.5rem;

src/pages/SettingsPage.vue

@@ -48,8 +48,8 @@
 </script>
 
 <style lang="scss">
-  @import "scss/variables";
+  @import "src/scss/variables";
-  @import "scss/media-queries";
+  @import "src/scss/media-queries";
 
   .settings {
     padding: 3rem;

src/pages/SigninPage.vue

@@ -112,7 +112,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "src/scss/variables";
 
   section {
     padding: 1.3rem;

src/plugins/Toast/ToastComponent.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from "vue";
+  import { ref, defineProps, onMounted } from "vue";
   import { useRouter } from "vue-router";
   import type { Ref } from "vue";
 
@@ -94,9 +94,7 @@
 
     background-color: white;
     border-radius: 3px;
-    box-shadow:
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-      0 4px 8px 0 rgba(0, 0, 0, 0.17),
-      0 2px 4px 0 rgba(0, 0, 0, 0.08);
     padding: 0.5rem;
     margin: 1rem 2rem 1rem 0.71rem;
     // max-width: calc(100% - 3rem);

src/routes.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
 
-/* eslint-disable-next-line import-x/no-cycle */
+/* eslint-disable-next-line import/no-cycle */
 import store from "./store";
 
 declare global {
@@ -10,7 +10,7 @@ declare global {
   }
 }
 
-const routes: RouteRecordRaw[] = [
+const routes: Array<RouteRecordRaw> = [
   {
     name: "home",
     path: "/",
@@ -99,6 +99,7 @@ const loggedIn = () => store.getters["user/loggedIn"];
 const hasPlexAccount = () => store.getters["user/plexUserId"] !== null;
 const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 router.beforeEach(
   (to: RouteLocationNormalized, from: RouteLocationNormalized, next: any) => {
     store.dispatch("documentTitle/updateTitle", to.name);

src/scss/elements.scss

@@ -1,5 +1,5 @@
-@import "scss/variables";
+@import "src/scss/variables";
-@import "scss/media-queries";
+@import "src/scss/media-queries";
 
 .filter {
   margin: 1rem;

src/scss/loading-placeholder.scss

@@ -1,4 +1,4 @@
-@import "scss/variables";
+@import "src/scss/variables";
 
 // Loading placeholder styling
 @mixin nth-children($points...) {

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "scss/variables";
+@import "src/scss/variables";
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

src/scss/media-queries.scss

@@ -8,72 +8,72 @@ $desktop-l-width: 1600px;
 $mobile-width: 768px;
 
 @mixin desktop {
-  @media (min-width: #{$mobile-width + 1px}) {
+	@media (min-width: #{$mobile-width + 1px}) {
-    @content;
+		@content;
-  }
+	}
 }
 
 @mixin mobile {
-  @media (max-width: #{$mobile-width}) {
+	@media (max-width: #{$mobile-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 
 .desktop-only {
-  @include mobile {
+	@include mobile {
-    display: none !important;
+		display: none !important;
-  }
+	}
 }
 
 .mobile-only {
-  @include desktop {
+	@include desktop {
-    display: none !important;
+		display: none !important;
-  }
+	}
 }
 
 // Media
 @mixin mobile-only {
-  @media (max-width: #{$tablet-p-width - 1px}) {
+	@media (max-width: #{$tablet-p-width - 1px}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin mobile-ls-min {
-  @media (min-width: #{$phone-xs-width}) {
+	@media (min-width: #{$phone-xs-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin tablet-only {
-  @media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
+	@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin tablet-min {
-  @media (min-width: #{$tablet-p-width}) {
+	@media (min-width: #{$tablet-p-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin tablet-portrait-only {
-  @media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
+	@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin tablet-landscape-min {
-  @media (min-width: #{$tablet-l-width}) {
+	@media (min-width: #{$tablet-l-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin desktop-min {
-  @media (min-width: #{$desktop-width}) {
+	@media (min-width: #{$desktop-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin desktop-lg-min {
-  @media (min-width: #{$desktop-l-width}) {
+	@media (min-width: #{$desktop-l-width}) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin retina {
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    @content;
+		@content;
-  }
+	}
 }

src/scss/variables.scss

@@ -1,6 +1,6 @@
 // Colors
 // @import "./media-queries";
-@import "scss/media-queries";
+@import "src/scss/media-queries";
 
 :root {
   color-scheme: light;

src/store.ts

@@ -6,7 +6,7 @@ import torrentModule from "./modules/torrentModule";
 import user from "./modules/user";
 import hamburger from "./modules/hamburger";
 
-/* eslint-disable-next-line import-x/no-cycle */
+/* eslint-disable-next-line import/no-cycle */
 import popup from "./modules/popup";
 
 const store = createStore({

src/utils.ts

@@ -14,7 +14,9 @@ export const parseJwt = (token: string) => {
   const jsonPayload = decodeURIComponent(
     atob(base64)
       .split("")
-      .map(c => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
+      .map(c => {
+        return `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`;
+      })
       .join("")
   );
 
@@ -60,10 +62,10 @@ export function focusOnNextElement(elementEvent: KeyboardEvent): void {
   }
 }
 
-export function humanMinutes(minutes: number[] | number) {
+export function humanMinutes(minutes) {
   if (minutes instanceof Array) {
-    /* eslint-disable-next-line no-param-reassign */
+    /* eslint-disable-next-line prefer-destructuring, no-param-reassign */
-    [minutes] = minutes;
+    minutes = minutes[0];
   }
 
   const hours = Math.floor(minutes / 60);
@@ -91,7 +93,7 @@ export function setUrlQueryParameter(parameter: string, value: string): void {
 
   const url = `${window.location.protocol}//${window.location.hostname}${
     window.location.port ? `:${window.location.port}` : ""
-  }${ndow.location.pathname}${params.toString().length ? `?${params}` : ""}`;
+  }${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
 
   window.history.pushState({}, "search", url);
 }

src/vite-env.d.ts

@@ -1,9 +0,0 @@
-interface ImportMetaEnv {
-  readonly VITE_SEASONED_API: string;
-  readonly VITE_ELASTIC_URL: string;
-  readonly VITE_ELASTIC_API_KEY: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

tsconfig.json

@@ -12,8 +12,7 @@
     "outDir": "lib",
     "baseUrl": "/",
     "paths": {
-      "@/*": ["./src/*"],
+      "@": ["src"]
-      "scss/*": ["./src/scss/*"]
     }
   },
   "include": [

vite.config.ts

@@ -1,14 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-
-// https://vite.dev/config/
-export default defineConfig({
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-      scss: path.resolve(__dirname, "./src/scss")
-    }
-  },
-  plugins: [vue()]
-});

webpack.config.js

@@ -0,0 +1,157 @@
+const path = require("path");
+const webpack = require("webpack");
+const sass = require("sass");
+const HTMLWebpackPlugin = require("html-webpack-plugin");
+const { VueLoaderPlugin } = require("vue-loader");
+const TerserPlugin = require("terser-webpack-plugin");
+const dotenv = require("dotenv").config({ path: "./.env" });
+const dotenvExample = require("dotenv").config({ path: "./.env.example" });
+
+const sourcePath = path.resolve(__dirname, "src");
+const indexFile = path.join(sourcePath, "index.html");
+const javascriptEntry = path.join(sourcePath, "main.ts");
+const publicPath = path.resolve(__dirname, "public");
+const isProd = process.env.NODE_ENV === "production";
+const variables = dotenv.parsed || dotenvExample.parsed;
+
+// Merge inn all process.env values that match dotenv keys
+Object.keys(process.env).forEach(key => {
+  if (key in variables) {
+    variables[key] = process.env[key];
+  }
+});
+
+module.exports = {
+  mode: process.env.NODE_ENV,
+  context: publicPath,
+  entry: javascriptEntry,
+  output: {
+    path: `${publicPath}/dist/`,
+    publicPath: "/dist/",
+    filename: "[name].[contenthash].js",
+    clean: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-env"]
+        },
+        exclude: /node_modules/
+      },
+      {
+        test: /\.vue$/,
+        use: ["vue-loader"]
+      },
+      {
+        test: /\.ts$/,
+        loader: "ts-loader",
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "vue-style-loader",
+          // isProd ? MiniCssExtractPlugin.loader : "vue-style-loader",
+          "css-loader",
+          "sass-loader"
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: "file-loader",
+        options: {
+          name: "[name].[ext]?[hash]"
+        }
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HTMLWebpackPlugin({
+      template: indexFile,
+      filename: "index.html",
+      minify: isProd
+    }),
+    new webpack.DefinePlugin({
+      "process.env": JSON.stringify(variables)
+    })
+  ],
+  resolve: {
+    extensions: [".js", ".ts", ".vue", ".json", ".scss"],
+    alias: {
+      vue: "@vue/runtime-dom",
+      "@": path.resolve(__dirname, "src"),
+      src: path.resolve(__dirname, "src"),
+      assets: `${publicPath}/assets`,
+      components: path.resolve(__dirname, "src/components")
+    }
+  },
+  devtool: "source-map",
+  performance: {
+    hints: false
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "all",
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            // get the name. E.g. node_modules/packageName/not/this/part.js
+            // or node_modules/packageName
+            const packageName = module.context.match(
+              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+            )[1];
+
+            // npm package names are URL-safe, but some servers don't like @ symbols
+            return `npm.${packageName.replace("@", "")}`;
+          }
+        }
+      }
+    },
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          sourceMap: true
+          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+        }
+      })
+    ]
+  },
+  devServer: {
+    static: publicPath,
+    historyApiFallback: {
+      index: "/dist/index.html"
+    },
+    compress: true,
+    hot: true,
+    port: 8080
+  }
+};
+
+if (isProd) {
+  module.exports.mode = "production";
+  module.exports.devtool = false;
+  module.exports.performance.hints = "warning";
+}
+
+// enable proxy for anything that hits /Api
+// View README or update src/config.ts:SEASONED_API_URL
+const { SEASONED_API } = process.env;
+if (SEASONED_API) {
+  module.exports.devServer.proxy = {
+    "/api": {
+      target: SEASONED_API,
+      changeOrigin: true
+    }
+  };
+}