fix: Dockerfile to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-DEBIAN11-CURL-3320493
- https://snyk.io/vuln/SNYK-DEBIAN11-CURL-3320493
- https://snyk.io/vuln/SNYK-DEBIAN11-FREETYPE-5423814
- https://snyk.io/vuln/SNYK-DEBIAN11-NCURSES-5421197
- https://snyk.io/vuln/SNYK-DEBIAN11-NCURSES-5421197

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.29.4-trixie
+FROM nginx:1-bullseye
 
 COPY public /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf.template

src/api.ts

@@ -4,7 +4,7 @@ import type {
   IRequestSubmitResponse
 } from "./interfaces/IRequestResponse";
 
-const { ELASTIC, ELASTIC_INDEX, ELASTIC_APIKEY } = process.env;
+const { ELASTIC, ELASTIC_INDEX } = process.env;
 const API_HOSTNAME = window.location.origin;
 
 // - - - TMDB - - -
@@ -430,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 => {
@@ -451,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)
@@ -472,58 +468,33 @@ const getEmoji = async () => {
  * @param {string} query
  * @returns {object} List of movies and shows matching query
  */
-const elasticSearchMoviesAndShows = (query: string, count = 22) => {
+const elasticSearchMoviesAndShows = (query, count = 22) => {
   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" },
-      Authorization: `ApiKey ${ELASTIC_APIKEY}`,
-      "Content-Type": "application/json"
-    },
     body: JSON.stringify(body)
   };
 

src/components/CastList.vue

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

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/PageHeader.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from "vue";
+  import { defineProps, computed } from "vue";
 
   interface Props {
     title: string;

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";
 

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";

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";

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,25 +23,18 @@
   </transition>
 </template>
 
-<!--
-Searches Elasticsearch for results based on changes to `query`.
--->
-
 <script setup lang="ts">
-  import { ref, watch } from "vue";
+  import { ref, watch, defineProps } from "vue";
   import { useStore } from "vuex";
   import IconMovie from "@/icons/IconMovie.vue";
   import IconShow from "@/icons/IconShow.vue";
-  import IconPerson from "@/icons/IconPerson.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 {
@@ -56,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();
@@ -64,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
@@ -81,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() {
@@ -127,34 +123,11 @@ 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

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 {

src/components/header/SearchInput.vue

@@ -42,18 +42,6 @@
   </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 { ref, computed } from "vue";
   import { useStore } from "vuex";
@@ -63,7 +51,6 @@ the `query`.
   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,13 +85,8 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const { ELASTIC, ELASTIC_APIKEY } = process.env;
+  const { ELASTIC } = process.env;
-  if (
+  if (ELASTIC === undefined || ELASTIC === "") {
-    ELASTIC === undefined ||
-    ELASTIC === "" ||
-    ELASTIC_APIKEY === undefined ||
-    ELASTIC_APIKEY === ""
-  ) {
     disabled.value = true;
   }
 
@@ -163,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];
 

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;

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";
 

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;

src/components/popup/Movie.vue

@@ -165,7 +165,7 @@
 </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";

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";

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";

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";

src/components/torrent/TruncatedTorrentResults.vue

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

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 {

src/components/ui/LoadingPlaceholder.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps } from "vue";
+
   interface Props {
     count?: number;
     lineClass?: string;

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;

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";

src/components/ui/SeasonedMessages.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+  import { defineProps, defineEmits } from "vue";
   import type {
     ErrorMessageTypes,
     IErrorMessage

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;

src/interfaces/IAutocompleteSearch.ts

@@ -13,7 +13,6 @@ export interface IAutocompleteSearchResults {
   timed_out: boolean;
   _shards: Shards;
   hits: Hits;
-  suggest: Suggest;
 }
 
 export interface Shards {
@@ -38,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"
@@ -79,8 +57,6 @@ export interface Source {
   agent: Agent;
   original_title: string;
   original_name?: string;
-  name?: string;
-  type?: MediaTypes;
 }
 
 export interface Agent {

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";