diff --git a/themes-default/slim/src/components/helpers/show-selector.vue b/themes-default/slim/src/components/helpers/show-selector.vue
index dbe4c51975..76cf811d25 100644
--- a/themes-default/slim/src/components/helpers/show-selector.vue
+++ b/themes-default/slim/src/components/helpers/show-selector.vue
@@ -58,7 +58,7 @@ export default {
 
             const sortedShows = [...showsInLists];
 
-            const sortKey = title => (sortArticle ? title.replace(/^((?:the|a|an)\s)/i, '') : title).toLowerCase();
+            const sortKey = title => (sortArticle ? title : title.replace(/^((?:the|a|an)\s)/i, '')).toLowerCase();
             const sortFn = (showA, showB) => {
                 const titleA = sortKey(showA.title);
                 const titleB = sortKey(showB.title);
diff --git a/themes-default/slim/src/components/show-list/poster.vue b/themes-default/slim/src/components/show-list/poster.vue
index 0636aecb02..8c9aaafbd4 100644
--- a/themes-default/slim/src/components/show-list/poster.vue
+++ b/themes-default/slim/src/components/show-list/poster.vue
@@ -100,7 +100,7 @@ export default {
                         const { stateLayout } = this;
                         const { sortArticle } = stateLayout;
 
-                        if (!sortArticle) {
+                        if (sortArticle) {
                             return row.title;
                         }
 
diff --git a/themes-default/slim/test/specs/__snapshots__/show-selector.spec.js.snap b/themes-default/slim/test/specs/__snapshots__/show-selector.spec.js.snap
index 08d1127ba9..d67aa64eee 100644
--- a/themes-default/slim/test/specs/__snapshots__/show-selector.spec.js.snap
+++ b/themes-default/slim/test/specs/__snapshots__/show-selector.spec.js.snap
@@ -60,14 +60,14 @@ exports[`ShowSelector.test.js renders with articles(The|A|An) ignored in /home/d
         label="Anime"
       >
         <option
-          value="tvdb360438"
+          value="tvdb300835"
         >
-          A Certain Scientific Accelerator
+          Ajin
         </option>
         <option
-          value="tvdb300835"
+          value="tvdb360438"
         >
-          Ajin
+          A Certain Scientific Accelerator
         </option>
         <option
           value="tvdb313867"
@@ -121,14 +121,14 @@ exports[`ShowSelector.test.js renders with shows in /home/displayShow 1`] = `
         label="Anime"
       >
         <option
-          value="tvdb300835"
+          value="tvdb360438"
         >
-          Ajin
+          A Certain Scientific Accelerator
         </option>
         <option
-          value="tvdb360438"
+          value="tvdb300835"
         >
-          A Certain Scientific Accelerator
+          Ajin
         </option>
         <option
           value="tvdb313867"
@@ -182,14 +182,14 @@ exports[`ShowSelector.test.js renders with shows in /home/editShow 1`] = `
         label="Anime"
       >
         <option
-          value="tvdb300835"
+          value="tvdb360438"
         >
-          Ajin
+          A Certain Scientific Accelerator
         </option>
         <option
-          value="tvdb360438"
+          value="tvdb300835"
         >
-          A Certain Scientific Accelerator
+          Ajin
         </option>
         <option
           value="tvdb313867"
@@ -243,14 +243,14 @@ exports[`ShowSelector.test.js renders with split sections in /home/displayShow 1
         label="Anime"
       >
         <option
-          value="tvdb300835"
+          value="tvdb360438"
         >
-          Ajin
+          A Certain Scientific Accelerator
         </option>
         <option
-          value="tvdb360438"
+          value="tvdb300835"
         >
-          A Certain Scientific Accelerator
+          Ajin
         </option>
         <option
           value="tvdb313867"
@@ -298,14 +298,14 @@ exports[`ShowSelector.test.js renders without placeholder in /home/displayShow 1
         label="Anime"
       >
         <option
-          value="tvdb300835"
+          value="tvdb360438"
         >
-          Ajin
+          A Certain Scientific Accelerator
         </option>
         <option
-          value="tvdb360438"
+          value="tvdb300835"
         >
-          A Certain Scientific Accelerator
+          Ajin
         </option>
         <option
           value="tvdb313867"
diff --git a/themes/dark/assets/js/medusa-runtime.js b/themes/dark/assets/js/medusa-runtime.js
index a4b5287e87..790f3abd1a 100644
--- a/themes/dark/assets/js/medusa-runtime.js
+++ b/themes/dark/assets/js/medusa-runtime.js
@@ -416,7 +416,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'show-selector',\n  props: {\n    showSlug: String,\n    followSelection: {\n      type: Boolean,\n      default: false\n    },\n    placeholder: String,\n    selectClass: {\n      type: String,\n      default: 'select-show form-control input-sm-custom'\n    }\n  },\n\n  data() {\n    const selectedShowSlug = this.showSlug || this.placeholder;\n    return {\n      selectedShowSlug\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      layout: state => state.config.layout,\n      shows: state => state.shows.shows\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      showsInLists: 'showsInLists'\n    }),\n\n    sortedLists() {\n      const {\n        layout,\n        showsInLists\n      } = this;\n      const {\n        sortArticle\n      } = layout;\n      const sortedShows = [...showsInLists];\n\n      const sortKey = title => (sortArticle ? title.replace(/^((?:the|a|an)\\s)/i, '') : title).toLowerCase();\n\n      const sortFn = (showA, showB) => {\n        const titleA = sortKey(showA.title);\n        const titleB = sortKey(showB.title);\n\n        if (titleA < titleB) {\n          return -1;\n        }\n\n        if (titleA > titleB) {\n          return 1;\n        }\n\n        return 0;\n      };\n\n      sortedShows.forEach(list => {\n        list.shows.sort(sortFn);\n      });\n      return sortedShows;\n    },\n\n    showForRoutes() {\n      const {\n        $route\n      } = this;\n      return ['show', 'editShow'].includes($route.name);\n    }\n\n  },\n  watch: {\n    showSlug(newSlug) {\n      this.selectedShowSlug = newSlug;\n    },\n\n    selectedShowSlug(newSlug) {\n      if (!this.followSelection) {\n        return;\n      }\n\n      const {\n        $store,\n        shows\n      } = this;\n      const selectedShow = shows.find(show => show.id.slug === newSlug);\n\n      if (!selectedShow) {\n        return;\n      }\n\n      const indexerName = selectedShow.indexer;\n      const seriesId = selectedShow.id[indexerName]; // Make sure the correct show, has been set as current show.\n\n      console.debug(`Setting current show to ${selectedShow.title}`);\n      $store.commit('currentShow', {\n        indexer: indexerName,\n        id: seriesId\n      }); // To make it complete, make sure to switch route.\n\n      this.$router.push({\n        query: {\n          indexername: indexerName,\n          seriesid: String(seriesId)\n        }\n      });\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/show-selector.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'show-selector',\n  props: {\n    showSlug: String,\n    followSelection: {\n      type: Boolean,\n      default: false\n    },\n    placeholder: String,\n    selectClass: {\n      type: String,\n      default: 'select-show form-control input-sm-custom'\n    }\n  },\n\n  data() {\n    const selectedShowSlug = this.showSlug || this.placeholder;\n    return {\n      selectedShowSlug\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      layout: state => state.config.layout,\n      shows: state => state.shows.shows\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      showsInLists: 'showsInLists'\n    }),\n\n    sortedLists() {\n      const {\n        layout,\n        showsInLists\n      } = this;\n      const {\n        sortArticle\n      } = layout;\n      const sortedShows = [...showsInLists];\n\n      const sortKey = title => (sortArticle ? title : title.replace(/^((?:the|a|an)\\s)/i, '')).toLowerCase();\n\n      const sortFn = (showA, showB) => {\n        const titleA = sortKey(showA.title);\n        const titleB = sortKey(showB.title);\n\n        if (titleA < titleB) {\n          return -1;\n        }\n\n        if (titleA > titleB) {\n          return 1;\n        }\n\n        return 0;\n      };\n\n      sortedShows.forEach(list => {\n        list.shows.sort(sortFn);\n      });\n      return sortedShows;\n    },\n\n    showForRoutes() {\n      const {\n        $route\n      } = this;\n      return ['show', 'editShow'].includes($route.name);\n    }\n\n  },\n  watch: {\n    showSlug(newSlug) {\n      this.selectedShowSlug = newSlug;\n    },\n\n    selectedShowSlug(newSlug) {\n      if (!this.followSelection) {\n        return;\n      }\n\n      const {\n        $store,\n        shows\n      } = this;\n      const selectedShow = shows.find(show => show.id.slug === newSlug);\n\n      if (!selectedShow) {\n        return;\n      }\n\n      const indexerName = selectedShow.indexer;\n      const seriesId = selectedShow.id[indexerName]; // Make sure the correct show, has been set as current show.\n\n      console.debug(`Setting current show to ${selectedShow.title}`);\n      $store.commit('currentShow', {\n        indexer: indexerName,\n        id: seriesId\n      }); // To make it complete, make sure to switch route.\n\n      this.$router.push({\n        query: {\n          indexername: indexerName,\n          seriesid: String(seriesId)\n        }\n      });\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/show-selector.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -620,7 +620,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(pretty_bytes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers */ \"./src/components/helpers/index.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vueisotope */ \"./node_modules/vueisotope/dist/vue_isotope.min.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(vueisotope__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-images-loaded */ \"./node_modules/vue-images-loaded/dist/vueimagesloaded.js\");\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'poster',\n  directives: {\n    imagesLoaded: (vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default())\n  },\n  components: {\n    Asset: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"Asset\"],\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"AppLink\"],\n    ProgressBar: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"ProgressBar\"],\n    QualityPill: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"QualityPill\"],\n    Isotope: (vueisotope__WEBPACK_IMPORTED_MODULE_3___default())\n  },\n  props: {\n    layout: {\n      validator: val => val === null || typeof val === 'string',\n      required: true\n    },\n    shows: {\n      type: Array,\n      required: true\n    },\n    listTitle: {\n      type: String\n    },\n    header: {\n      type: Boolean\n    }\n  },\n\n  data() {\n    return {\n      // Isotope stuff\n      itemSelector: '.show-container',\n      selected: null,\n      option: {\n        getSortData: {\n          id: row => row.id.slug,\n          name: row => {\n            const {\n              stateLayout\n            } = this;\n            const {\n              sortArticle\n            } = stateLayout;\n\n            if (!sortArticle) {\n              return row.title;\n            }\n\n            return row.title.replace(/^((?:a(?!\\s+to)n?)|the)\\s/i, '').toLowerCase();\n          },\n          date: row => {\n            const {\n              maxNextAirDate\n            } = this;\n\n            if (row.nextAirDate && Date.parse(row.nextAirDate) > Date.now()) {\n              return Date.parse(row.nextAirDate) - Date.now();\n            }\n\n            if (row.prevAirDate) {\n              return maxNextAirDate + Date.now() - Date.parse(row.prevAirDate);\n            }\n\n            return Date.now();\n          },\n          network: 'network',\n          progress: row => {\n            if (!row.stats) {\n              return 0;\n            }\n\n            return Math.round(row.stats.episodes.downloaded / row.stats.episodes.total * 100);\n          },\n          indexer: row => {\n            const {\n              indexers\n            } = this;\n            return indexers.indexers[row.indexer].id;\n          }\n        },\n        sortBy: () => this.posterSortBy,\n        layoutMode: 'fitRows',\n        sortAscending: () => this.posterSortDir\n      },\n      fontSize: null,\n      logoWidth: null,\n      borderRadius: null,\n      borderWidth: null,\n      isotopeLoaded: false,\n      imgLazyLoad: null,\n      filterByTitle: ''\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config.general,\n      stateLayout: state => state.config.layout,\n      indexers: state => state.config.indexers,\n      // Need to map these computed, as we need them in the $watch.\n      posterSortBy: state => state.config.layout.posterSortby,\n      posterSortDir: state => state.config.layout.posterSortdir,\n      posterSize: state => state.config.layout.local.posterSize,\n      currentShowTab: state => state.config.layout.local.currentShowTab,\n      showFilterByName: state => state.config.layout.local.showFilterByName\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      fuzzyParseDateTime: 'fuzzyParseDateTime'\n    }),\n\n    showsReady() {\n      const {\n        shows,\n        maxNextAirDate\n      } = this;\n\n      if (shows.length === 0 || !maxNextAirDate) {\n        return [];\n      }\n\n      return shows;\n    },\n\n    showContainerStyle() {\n      const {\n        posterSize,\n        borderWidth,\n        borderRadius\n      } = this;\n      return {\n        width: posterSize + 'px',\n        borderWidth: borderWidth + 'px',\n        borderRadius: borderRadius + 'px'\n      };\n    },\n\n    maxNextAirDate() {\n      const {\n        shows\n      } = this;\n      return Math.max(...shows.filter(show => show.nextAirDate).map(show => Date.parse(show.nextAirDate)));\n    }\n\n  },\n  methods: {\n    prettyBytes: bytes => pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default()(bytes),\n\n    showIndexerUrl(show) {\n      const {\n        indexers\n      } = this;\n\n      if (!show.indexer) {\n        return;\n      }\n\n      const id = show.id[show.indexer];\n      const indexerUrl = indexers.indexers[show.indexer].showUrl;\n      return `${indexerUrl}${id}`;\n    },\n\n    parsePrevDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.prevAirDate) {\n        console.log(`Calculating time for show ${row.title} prev date: ${row.prevAirDate}`);\n        return fuzzyParseDateTime(row.prevAirDate);\n      }\n\n      return '';\n    },\n\n    parseNextDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.nextAirDate) {\n        console.log(`Calculating time for show ${row.title} next date: ${row.nextAirDate}`);\n        return fuzzyParseDateTime(row.nextAirDate);\n      }\n\n      return '';\n    },\n\n    calculateSize() {\n      const {\n        posterSize\n      } = this;\n\n      if (posterSize < 125) {\n        // Small\n        this.fontSize = null;\n        this.borderRadius = 3;\n        this.borderWidth = 4;\n      } else if (posterSize < 175) {\n        // Medium\n        this.fontSize = 9;\n        this.logoWidth = 40;\n        this.borderRadius = 4;\n        this.borderWidth = 5;\n      } else {\n        // Large\n        this.fontSize = 11;\n        this.logoWidth = 50;\n        this.borderRadius = 6;\n        this.borderWidth = 6;\n      }\n    },\n\n    updateLayout() {\n      const {\n        calculateSize,\n        listTitle,\n        posterSortBy,\n        posterSortDir\n      } = this;\n      this.isotopeLoaded = true;\n      calculateSize(); // Render layout (for sizing)\n\n      this.$refs[`isotope-${listTitle}`].layout(); // Arrange & Sort\n\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: posterSortDir\n      });\n      console.log('isotope Layout loaded');\n    },\n\n    dateOrStatus(show) {\n      if (show.nextAirDate) {\n        const {\n          fuzzyParseDateTime\n        } = this;\n        return fuzzyParseDateTime(show.nextAirDate);\n      }\n\n      if (!show.status.includes('nded') && show.config.paused) {\n        return 'Paused';\n      }\n\n      return show.status;\n    }\n\n  },\n  watch: {\n    posterSortBy(key) {\n      const {\n        listTitle\n      } = this;\n      this.$refs[`isotope-${listTitle}`].sort(key);\n    },\n\n    posterSortDir(value) {\n      const {\n        listTitle,\n        posterSortBy\n      } = this;\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: value\n      });\n    },\n\n    posterSize(oldSize, newSize) {\n      const {\n        calculateSize,\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded || oldSize === newSize) {\n        return;\n      }\n\n      calculateSize();\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    currentShowTab() {\n      const {\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded) {\n        return;\n      }\n\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    showFilterByName(value) {\n      const {\n        $refs,\n        listTitle\n      } = this;\n      const allContainers = $refs[`isotope-${listTitle}`].$el.querySelectorAll('.show-container');\n\n      for (const container of allContainers) {\n        if (container.textContent.toLowerCase().includes(value.toLowerCase())) {\n          container.classList.remove('hide');\n        } else {\n          container.classList.add('hide');\n        }\n      }\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/show-list/poster.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(pretty_bytes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers */ \"./src/components/helpers/index.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vueisotope */ \"./node_modules/vueisotope/dist/vue_isotope.min.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(vueisotope__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-images-loaded */ \"./node_modules/vue-images-loaded/dist/vueimagesloaded.js\");\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'poster',\n  directives: {\n    imagesLoaded: (vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default())\n  },\n  components: {\n    Asset: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"Asset\"],\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"AppLink\"],\n    ProgressBar: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"ProgressBar\"],\n    QualityPill: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"QualityPill\"],\n    Isotope: (vueisotope__WEBPACK_IMPORTED_MODULE_3___default())\n  },\n  props: {\n    layout: {\n      validator: val => val === null || typeof val === 'string',\n      required: true\n    },\n    shows: {\n      type: Array,\n      required: true\n    },\n    listTitle: {\n      type: String\n    },\n    header: {\n      type: Boolean\n    }\n  },\n\n  data() {\n    return {\n      // Isotope stuff\n      itemSelector: '.show-container',\n      selected: null,\n      option: {\n        getSortData: {\n          id: row => row.id.slug,\n          name: row => {\n            const {\n              stateLayout\n            } = this;\n            const {\n              sortArticle\n            } = stateLayout;\n\n            if (sortArticle) {\n              return row.title;\n            }\n\n            return row.title.replace(/^((?:a(?!\\s+to)n?)|the)\\s/i, '').toLowerCase();\n          },\n          date: row => {\n            const {\n              maxNextAirDate\n            } = this;\n\n            if (row.nextAirDate && Date.parse(row.nextAirDate) > Date.now()) {\n              return Date.parse(row.nextAirDate) - Date.now();\n            }\n\n            if (row.prevAirDate) {\n              return maxNextAirDate + Date.now() - Date.parse(row.prevAirDate);\n            }\n\n            return Date.now();\n          },\n          network: 'network',\n          progress: row => {\n            if (!row.stats) {\n              return 0;\n            }\n\n            return Math.round(row.stats.episodes.downloaded / row.stats.episodes.total * 100);\n          },\n          indexer: row => {\n            const {\n              indexers\n            } = this;\n            return indexers.indexers[row.indexer].id;\n          }\n        },\n        sortBy: () => this.posterSortBy,\n        layoutMode: 'fitRows',\n        sortAscending: () => this.posterSortDir\n      },\n      fontSize: null,\n      logoWidth: null,\n      borderRadius: null,\n      borderWidth: null,\n      isotopeLoaded: false,\n      imgLazyLoad: null,\n      filterByTitle: ''\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config.general,\n      stateLayout: state => state.config.layout,\n      indexers: state => state.config.indexers,\n      // Need to map these computed, as we need them in the $watch.\n      posterSortBy: state => state.config.layout.posterSortby,\n      posterSortDir: state => state.config.layout.posterSortdir,\n      posterSize: state => state.config.layout.local.posterSize,\n      currentShowTab: state => state.config.layout.local.currentShowTab,\n      showFilterByName: state => state.config.layout.local.showFilterByName\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      fuzzyParseDateTime: 'fuzzyParseDateTime'\n    }),\n\n    showsReady() {\n      const {\n        shows,\n        maxNextAirDate\n      } = this;\n\n      if (shows.length === 0 || !maxNextAirDate) {\n        return [];\n      }\n\n      return shows;\n    },\n\n    showContainerStyle() {\n      const {\n        posterSize,\n        borderWidth,\n        borderRadius\n      } = this;\n      return {\n        width: posterSize + 'px',\n        borderWidth: borderWidth + 'px',\n        borderRadius: borderRadius + 'px'\n      };\n    },\n\n    maxNextAirDate() {\n      const {\n        shows\n      } = this;\n      return Math.max(...shows.filter(show => show.nextAirDate).map(show => Date.parse(show.nextAirDate)));\n    }\n\n  },\n  methods: {\n    prettyBytes: bytes => pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default()(bytes),\n\n    showIndexerUrl(show) {\n      const {\n        indexers\n      } = this;\n\n      if (!show.indexer) {\n        return;\n      }\n\n      const id = show.id[show.indexer];\n      const indexerUrl = indexers.indexers[show.indexer].showUrl;\n      return `${indexerUrl}${id}`;\n    },\n\n    parsePrevDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.prevAirDate) {\n        console.log(`Calculating time for show ${row.title} prev date: ${row.prevAirDate}`);\n        return fuzzyParseDateTime(row.prevAirDate);\n      }\n\n      return '';\n    },\n\n    parseNextDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.nextAirDate) {\n        console.log(`Calculating time for show ${row.title} next date: ${row.nextAirDate}`);\n        return fuzzyParseDateTime(row.nextAirDate);\n      }\n\n      return '';\n    },\n\n    calculateSize() {\n      const {\n        posterSize\n      } = this;\n\n      if (posterSize < 125) {\n        // Small\n        this.fontSize = null;\n        this.borderRadius = 3;\n        this.borderWidth = 4;\n      } else if (posterSize < 175) {\n        // Medium\n        this.fontSize = 9;\n        this.logoWidth = 40;\n        this.borderRadius = 4;\n        this.borderWidth = 5;\n      } else {\n        // Large\n        this.fontSize = 11;\n        this.logoWidth = 50;\n        this.borderRadius = 6;\n        this.borderWidth = 6;\n      }\n    },\n\n    updateLayout() {\n      const {\n        calculateSize,\n        listTitle,\n        posterSortBy,\n        posterSortDir\n      } = this;\n      this.isotopeLoaded = true;\n      calculateSize(); // Render layout (for sizing)\n\n      this.$refs[`isotope-${listTitle}`].layout(); // Arrange & Sort\n\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: posterSortDir\n      });\n      console.log('isotope Layout loaded');\n    },\n\n    dateOrStatus(show) {\n      if (show.nextAirDate) {\n        const {\n          fuzzyParseDateTime\n        } = this;\n        return fuzzyParseDateTime(show.nextAirDate);\n      }\n\n      if (!show.status.includes('nded') && show.config.paused) {\n        return 'Paused';\n      }\n\n      return show.status;\n    }\n\n  },\n  watch: {\n    posterSortBy(key) {\n      const {\n        listTitle\n      } = this;\n      this.$refs[`isotope-${listTitle}`].sort(key);\n    },\n\n    posterSortDir(value) {\n      const {\n        listTitle,\n        posterSortBy\n      } = this;\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: value\n      });\n    },\n\n    posterSize(oldSize, newSize) {\n      const {\n        calculateSize,\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded || oldSize === newSize) {\n        return;\n      }\n\n      calculateSize();\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    currentShowTab() {\n      const {\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded) {\n        return;\n      }\n\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    showFilterByName(value) {\n      const {\n        $refs,\n        listTitle\n      } = this;\n      const allContainers = $refs[`isotope-${listTitle}`].$el.querySelectorAll('.show-container');\n\n      for (const container of allContainers) {\n        if (container.textContent.toLowerCase().includes(value.toLowerCase())) {\n          container.classList.remove('hide');\n        } else {\n          container.classList.add('hide');\n        }\n      }\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/show-list/poster.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
diff --git a/themes/light/assets/js/medusa-runtime.js b/themes/light/assets/js/medusa-runtime.js
index a4b5287e87..790f3abd1a 100644
--- a/themes/light/assets/js/medusa-runtime.js
+++ b/themes/light/assets/js/medusa-runtime.js
@@ -416,7 +416,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'show-selector',\n  props: {\n    showSlug: String,\n    followSelection: {\n      type: Boolean,\n      default: false\n    },\n    placeholder: String,\n    selectClass: {\n      type: String,\n      default: 'select-show form-control input-sm-custom'\n    }\n  },\n\n  data() {\n    const selectedShowSlug = this.showSlug || this.placeholder;\n    return {\n      selectedShowSlug\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      layout: state => state.config.layout,\n      shows: state => state.shows.shows\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      showsInLists: 'showsInLists'\n    }),\n\n    sortedLists() {\n      const {\n        layout,\n        showsInLists\n      } = this;\n      const {\n        sortArticle\n      } = layout;\n      const sortedShows = [...showsInLists];\n\n      const sortKey = title => (sortArticle ? title.replace(/^((?:the|a|an)\\s)/i, '') : title).toLowerCase();\n\n      const sortFn = (showA, showB) => {\n        const titleA = sortKey(showA.title);\n        const titleB = sortKey(showB.title);\n\n        if (titleA < titleB) {\n          return -1;\n        }\n\n        if (titleA > titleB) {\n          return 1;\n        }\n\n        return 0;\n      };\n\n      sortedShows.forEach(list => {\n        list.shows.sort(sortFn);\n      });\n      return sortedShows;\n    },\n\n    showForRoutes() {\n      const {\n        $route\n      } = this;\n      return ['show', 'editShow'].includes($route.name);\n    }\n\n  },\n  watch: {\n    showSlug(newSlug) {\n      this.selectedShowSlug = newSlug;\n    },\n\n    selectedShowSlug(newSlug) {\n      if (!this.followSelection) {\n        return;\n      }\n\n      const {\n        $store,\n        shows\n      } = this;\n      const selectedShow = shows.find(show => show.id.slug === newSlug);\n\n      if (!selectedShow) {\n        return;\n      }\n\n      const indexerName = selectedShow.indexer;\n      const seriesId = selectedShow.id[indexerName]; // Make sure the correct show, has been set as current show.\n\n      console.debug(`Setting current show to ${selectedShow.title}`);\n      $store.commit('currentShow', {\n        indexer: indexerName,\n        id: seriesId\n      }); // To make it complete, make sure to switch route.\n\n      this.$router.push({\n        query: {\n          indexername: indexerName,\n          seriesid: String(seriesId)\n        }\n      });\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/show-selector.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'show-selector',\n  props: {\n    showSlug: String,\n    followSelection: {\n      type: Boolean,\n      default: false\n    },\n    placeholder: String,\n    selectClass: {\n      type: String,\n      default: 'select-show form-control input-sm-custom'\n    }\n  },\n\n  data() {\n    const selectedShowSlug = this.showSlug || this.placeholder;\n    return {\n      selectedShowSlug\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      layout: state => state.config.layout,\n      shows: state => state.shows.shows\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      showsInLists: 'showsInLists'\n    }),\n\n    sortedLists() {\n      const {\n        layout,\n        showsInLists\n      } = this;\n      const {\n        sortArticle\n      } = layout;\n      const sortedShows = [...showsInLists];\n\n      const sortKey = title => (sortArticle ? title : title.replace(/^((?:the|a|an)\\s)/i, '')).toLowerCase();\n\n      const sortFn = (showA, showB) => {\n        const titleA = sortKey(showA.title);\n        const titleB = sortKey(showB.title);\n\n        if (titleA < titleB) {\n          return -1;\n        }\n\n        if (titleA > titleB) {\n          return 1;\n        }\n\n        return 0;\n      };\n\n      sortedShows.forEach(list => {\n        list.shows.sort(sortFn);\n      });\n      return sortedShows;\n    },\n\n    showForRoutes() {\n      const {\n        $route\n      } = this;\n      return ['show', 'editShow'].includes($route.name);\n    }\n\n  },\n  watch: {\n    showSlug(newSlug) {\n      this.selectedShowSlug = newSlug;\n    },\n\n    selectedShowSlug(newSlug) {\n      if (!this.followSelection) {\n        return;\n      }\n\n      const {\n        $store,\n        shows\n      } = this;\n      const selectedShow = shows.find(show => show.id.slug === newSlug);\n\n      if (!selectedShow) {\n        return;\n      }\n\n      const indexerName = selectedShow.indexer;\n      const seriesId = selectedShow.id[indexerName]; // Make sure the correct show, has been set as current show.\n\n      console.debug(`Setting current show to ${selectedShow.title}`);\n      $store.commit('currentShow', {\n        indexer: indexerName,\n        id: seriesId\n      }); // To make it complete, make sure to switch route.\n\n      this.$router.push({\n        query: {\n          indexername: indexerName,\n          seriesid: String(seriesId)\n        }\n      });\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/show-selector.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -620,7 +620,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(pretty_bytes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers */ \"./src/components/helpers/index.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vueisotope */ \"./node_modules/vueisotope/dist/vue_isotope.min.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(vueisotope__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-images-loaded */ \"./node_modules/vue-images-loaded/dist/vueimagesloaded.js\");\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'poster',\n  directives: {\n    imagesLoaded: (vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default())\n  },\n  components: {\n    Asset: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"Asset\"],\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"AppLink\"],\n    ProgressBar: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"ProgressBar\"],\n    QualityPill: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"QualityPill\"],\n    Isotope: (vueisotope__WEBPACK_IMPORTED_MODULE_3___default())\n  },\n  props: {\n    layout: {\n      validator: val => val === null || typeof val === 'string',\n      required: true\n    },\n    shows: {\n      type: Array,\n      required: true\n    },\n    listTitle: {\n      type: String\n    },\n    header: {\n      type: Boolean\n    }\n  },\n\n  data() {\n    return {\n      // Isotope stuff\n      itemSelector: '.show-container',\n      selected: null,\n      option: {\n        getSortData: {\n          id: row => row.id.slug,\n          name: row => {\n            const {\n              stateLayout\n            } = this;\n            const {\n              sortArticle\n            } = stateLayout;\n\n            if (!sortArticle) {\n              return row.title;\n            }\n\n            return row.title.replace(/^((?:a(?!\\s+to)n?)|the)\\s/i, '').toLowerCase();\n          },\n          date: row => {\n            const {\n              maxNextAirDate\n            } = this;\n\n            if (row.nextAirDate && Date.parse(row.nextAirDate) > Date.now()) {\n              return Date.parse(row.nextAirDate) - Date.now();\n            }\n\n            if (row.prevAirDate) {\n              return maxNextAirDate + Date.now() - Date.parse(row.prevAirDate);\n            }\n\n            return Date.now();\n          },\n          network: 'network',\n          progress: row => {\n            if (!row.stats) {\n              return 0;\n            }\n\n            return Math.round(row.stats.episodes.downloaded / row.stats.episodes.total * 100);\n          },\n          indexer: row => {\n            const {\n              indexers\n            } = this;\n            return indexers.indexers[row.indexer].id;\n          }\n        },\n        sortBy: () => this.posterSortBy,\n        layoutMode: 'fitRows',\n        sortAscending: () => this.posterSortDir\n      },\n      fontSize: null,\n      logoWidth: null,\n      borderRadius: null,\n      borderWidth: null,\n      isotopeLoaded: false,\n      imgLazyLoad: null,\n      filterByTitle: ''\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config.general,\n      stateLayout: state => state.config.layout,\n      indexers: state => state.config.indexers,\n      // Need to map these computed, as we need them in the $watch.\n      posterSortBy: state => state.config.layout.posterSortby,\n      posterSortDir: state => state.config.layout.posterSortdir,\n      posterSize: state => state.config.layout.local.posterSize,\n      currentShowTab: state => state.config.layout.local.currentShowTab,\n      showFilterByName: state => state.config.layout.local.showFilterByName\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      fuzzyParseDateTime: 'fuzzyParseDateTime'\n    }),\n\n    showsReady() {\n      const {\n        shows,\n        maxNextAirDate\n      } = this;\n\n      if (shows.length === 0 || !maxNextAirDate) {\n        return [];\n      }\n\n      return shows;\n    },\n\n    showContainerStyle() {\n      const {\n        posterSize,\n        borderWidth,\n        borderRadius\n      } = this;\n      return {\n        width: posterSize + 'px',\n        borderWidth: borderWidth + 'px',\n        borderRadius: borderRadius + 'px'\n      };\n    },\n\n    maxNextAirDate() {\n      const {\n        shows\n      } = this;\n      return Math.max(...shows.filter(show => show.nextAirDate).map(show => Date.parse(show.nextAirDate)));\n    }\n\n  },\n  methods: {\n    prettyBytes: bytes => pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default()(bytes),\n\n    showIndexerUrl(show) {\n      const {\n        indexers\n      } = this;\n\n      if (!show.indexer) {\n        return;\n      }\n\n      const id = show.id[show.indexer];\n      const indexerUrl = indexers.indexers[show.indexer].showUrl;\n      return `${indexerUrl}${id}`;\n    },\n\n    parsePrevDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.prevAirDate) {\n        console.log(`Calculating time for show ${row.title} prev date: ${row.prevAirDate}`);\n        return fuzzyParseDateTime(row.prevAirDate);\n      }\n\n      return '';\n    },\n\n    parseNextDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.nextAirDate) {\n        console.log(`Calculating time for show ${row.title} next date: ${row.nextAirDate}`);\n        return fuzzyParseDateTime(row.nextAirDate);\n      }\n\n      return '';\n    },\n\n    calculateSize() {\n      const {\n        posterSize\n      } = this;\n\n      if (posterSize < 125) {\n        // Small\n        this.fontSize = null;\n        this.borderRadius = 3;\n        this.borderWidth = 4;\n      } else if (posterSize < 175) {\n        // Medium\n        this.fontSize = 9;\n        this.logoWidth = 40;\n        this.borderRadius = 4;\n        this.borderWidth = 5;\n      } else {\n        // Large\n        this.fontSize = 11;\n        this.logoWidth = 50;\n        this.borderRadius = 6;\n        this.borderWidth = 6;\n      }\n    },\n\n    updateLayout() {\n      const {\n        calculateSize,\n        listTitle,\n        posterSortBy,\n        posterSortDir\n      } = this;\n      this.isotopeLoaded = true;\n      calculateSize(); // Render layout (for sizing)\n\n      this.$refs[`isotope-${listTitle}`].layout(); // Arrange & Sort\n\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: posterSortDir\n      });\n      console.log('isotope Layout loaded');\n    },\n\n    dateOrStatus(show) {\n      if (show.nextAirDate) {\n        const {\n          fuzzyParseDateTime\n        } = this;\n        return fuzzyParseDateTime(show.nextAirDate);\n      }\n\n      if (!show.status.includes('nded') && show.config.paused) {\n        return 'Paused';\n      }\n\n      return show.status;\n    }\n\n  },\n  watch: {\n    posterSortBy(key) {\n      const {\n        listTitle\n      } = this;\n      this.$refs[`isotope-${listTitle}`].sort(key);\n    },\n\n    posterSortDir(value) {\n      const {\n        listTitle,\n        posterSortBy\n      } = this;\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: value\n      });\n    },\n\n    posterSize(oldSize, newSize) {\n      const {\n        calculateSize,\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded || oldSize === newSize) {\n        return;\n      }\n\n      calculateSize();\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    currentShowTab() {\n      const {\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded) {\n        return;\n      }\n\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    showFilterByName(value) {\n      const {\n        $refs,\n        listTitle\n      } = this;\n      const allContainers = $refs[`isotope-${listTitle}`].$el.querySelectorAll('.show-container');\n\n      for (const container of allContainers) {\n        if (container.textContent.toLowerCase().includes(value.toLowerCase())) {\n          container.classList.remove('hide');\n        } else {\n          container.classList.add('hide');\n        }\n      }\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/show-list/poster.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n/* harmony import */ var pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(pretty_bytes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers */ \"./src/components/helpers/index.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vueisotope */ \"./node_modules/vueisotope/dist/vue_isotope.min.js\");\n/* harmony import */ var vueisotope__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(vueisotope__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-images-loaded */ \"./node_modules/vue-images-loaded/dist/vueimagesloaded.js\");\n/* harmony import */ var vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(vue_images_loaded__WEBPACK_IMPORTED_MODULE_4__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'poster',\n  directives: {\n    imagesLoaded: (vue_images_loaded__WEBPACK_IMPORTED_MODULE_4___default())\n  },\n  components: {\n    Asset: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"Asset\"],\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"AppLink\"],\n    ProgressBar: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"ProgressBar\"],\n    QualityPill: _helpers__WEBPACK_IMPORTED_MODULE_2__[\"QualityPill\"],\n    Isotope: (vueisotope__WEBPACK_IMPORTED_MODULE_3___default())\n  },\n  props: {\n    layout: {\n      validator: val => val === null || typeof val === 'string',\n      required: true\n    },\n    shows: {\n      type: Array,\n      required: true\n    },\n    listTitle: {\n      type: String\n    },\n    header: {\n      type: Boolean\n    }\n  },\n\n  data() {\n    return {\n      // Isotope stuff\n      itemSelector: '.show-container',\n      selected: null,\n      option: {\n        getSortData: {\n          id: row => row.id.slug,\n          name: row => {\n            const {\n              stateLayout\n            } = this;\n            const {\n              sortArticle\n            } = stateLayout;\n\n            if (sortArticle) {\n              return row.title;\n            }\n\n            return row.title.replace(/^((?:a(?!\\s+to)n?)|the)\\s/i, '').toLowerCase();\n          },\n          date: row => {\n            const {\n              maxNextAirDate\n            } = this;\n\n            if (row.nextAirDate && Date.parse(row.nextAirDate) > Date.now()) {\n              return Date.parse(row.nextAirDate) - Date.now();\n            }\n\n            if (row.prevAirDate) {\n              return maxNextAirDate + Date.now() - Date.parse(row.prevAirDate);\n            }\n\n            return Date.now();\n          },\n          network: 'network',\n          progress: row => {\n            if (!row.stats) {\n              return 0;\n            }\n\n            return Math.round(row.stats.episodes.downloaded / row.stats.episodes.total * 100);\n          },\n          indexer: row => {\n            const {\n              indexers\n            } = this;\n            return indexers.indexers[row.indexer].id;\n          }\n        },\n        sortBy: () => this.posterSortBy,\n        layoutMode: 'fitRows',\n        sortAscending: () => this.posterSortDir\n      },\n      fontSize: null,\n      logoWidth: null,\n      borderRadius: null,\n      borderWidth: null,\n      isotopeLoaded: false,\n      imgLazyLoad: null,\n      filterByTitle: ''\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config.general,\n      stateLayout: state => state.config.layout,\n      indexers: state => state.config.indexers,\n      // Need to map these computed, as we need them in the $watch.\n      posterSortBy: state => state.config.layout.posterSortby,\n      posterSortDir: state => state.config.layout.posterSortdir,\n      posterSize: state => state.config.layout.local.posterSize,\n      currentShowTab: state => state.config.layout.local.currentShowTab,\n      showFilterByName: state => state.config.layout.local.showFilterByName\n    }),\n    ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])({\n      fuzzyParseDateTime: 'fuzzyParseDateTime'\n    }),\n\n    showsReady() {\n      const {\n        shows,\n        maxNextAirDate\n      } = this;\n\n      if (shows.length === 0 || !maxNextAirDate) {\n        return [];\n      }\n\n      return shows;\n    },\n\n    showContainerStyle() {\n      const {\n        posterSize,\n        borderWidth,\n        borderRadius\n      } = this;\n      return {\n        width: posterSize + 'px',\n        borderWidth: borderWidth + 'px',\n        borderRadius: borderRadius + 'px'\n      };\n    },\n\n    maxNextAirDate() {\n      const {\n        shows\n      } = this;\n      return Math.max(...shows.filter(show => show.nextAirDate).map(show => Date.parse(show.nextAirDate)));\n    }\n\n  },\n  methods: {\n    prettyBytes: bytes => pretty_bytes__WEBPACK_IMPORTED_MODULE_1___default()(bytes),\n\n    showIndexerUrl(show) {\n      const {\n        indexers\n      } = this;\n\n      if (!show.indexer) {\n        return;\n      }\n\n      const id = show.id[show.indexer];\n      const indexerUrl = indexers.indexers[show.indexer].showUrl;\n      return `${indexerUrl}${id}`;\n    },\n\n    parsePrevDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.prevAirDate) {\n        console.log(`Calculating time for show ${row.title} prev date: ${row.prevAirDate}`);\n        return fuzzyParseDateTime(row.prevAirDate);\n      }\n\n      return '';\n    },\n\n    parseNextDateFn(row) {\n      const {\n        fuzzyParseDateTime\n      } = this;\n\n      if (row.nextAirDate) {\n        console.log(`Calculating time for show ${row.title} next date: ${row.nextAirDate}`);\n        return fuzzyParseDateTime(row.nextAirDate);\n      }\n\n      return '';\n    },\n\n    calculateSize() {\n      const {\n        posterSize\n      } = this;\n\n      if (posterSize < 125) {\n        // Small\n        this.fontSize = null;\n        this.borderRadius = 3;\n        this.borderWidth = 4;\n      } else if (posterSize < 175) {\n        // Medium\n        this.fontSize = 9;\n        this.logoWidth = 40;\n        this.borderRadius = 4;\n        this.borderWidth = 5;\n      } else {\n        // Large\n        this.fontSize = 11;\n        this.logoWidth = 50;\n        this.borderRadius = 6;\n        this.borderWidth = 6;\n      }\n    },\n\n    updateLayout() {\n      const {\n        calculateSize,\n        listTitle,\n        posterSortBy,\n        posterSortDir\n      } = this;\n      this.isotopeLoaded = true;\n      calculateSize(); // Render layout (for sizing)\n\n      this.$refs[`isotope-${listTitle}`].layout(); // Arrange & Sort\n\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: posterSortDir\n      });\n      console.log('isotope Layout loaded');\n    },\n\n    dateOrStatus(show) {\n      if (show.nextAirDate) {\n        const {\n          fuzzyParseDateTime\n        } = this;\n        return fuzzyParseDateTime(show.nextAirDate);\n      }\n\n      if (!show.status.includes('nded') && show.config.paused) {\n        return 'Paused';\n      }\n\n      return show.status;\n    }\n\n  },\n  watch: {\n    posterSortBy(key) {\n      const {\n        listTitle\n      } = this;\n      this.$refs[`isotope-${listTitle}`].sort(key);\n    },\n\n    posterSortDir(value) {\n      const {\n        listTitle,\n        posterSortBy\n      } = this;\n      this.$refs[`isotope-${listTitle}`].arrange({\n        sortBy: posterSortBy,\n        sortAscending: value\n      });\n    },\n\n    posterSize(oldSize, newSize) {\n      const {\n        calculateSize,\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded || oldSize === newSize) {\n        return;\n      }\n\n      calculateSize();\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    currentShowTab() {\n      const {\n        isotopeLoaded,\n        listTitle\n      } = this;\n\n      if (!isotopeLoaded) {\n        return;\n      }\n\n      this.$nextTick(() => {\n        this.$refs[`isotope-${listTitle}`].arrange();\n      });\n    },\n\n    showFilterByName(value) {\n      const {\n        $refs,\n        listTitle\n      } = this;\n      const allContainers = $refs[`isotope-${listTitle}`].$el.querySelectorAll('.show-container');\n\n      for (const container of allContainers) {\n        if (container.textContent.toLowerCase().includes(value.toLowerCase())) {\n          container.classList.remove('hide');\n        } else {\n          container.classList.add('hide');\n        }\n      }\n    }\n\n  }\n});\n\n//# sourceURL=webpack:///./src/components/show-list/poster.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),