diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75451d9163..49e6250c55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,10 @@
 
 #### Improvements
 - Add show names with dashes to guessit expected titles ([#7918](https://github.com/pymedusa/Medusa/pull/7918))
+- Provider YggTorrents: Add 'saison' as a season pack search keyword ([#7920](https://github.com/pymedusa/Medusa/pull/7920))
 
 #### Fixes
+- Fixed root dirs not always shown on Home page ([#7921](https://github.com/pymedusa/Medusa/pull/7921))
 
 -----
 
diff --git a/themes-default/slim/src/components/home.vue b/themes-default/slim/src/components/home.vue
index 93525d4801..e2b124fba0 100644
--- a/themes-default/slim/src/components/home.vue
+++ b/themes-default/slim/src/components/home.vue
@@ -116,7 +116,7 @@ export default {
         });
     },
     mounted() {
-        const { $snotify, config, stateLayout, setConfig } = this;
+        const { $snotify, stateLayout, setConfig } = this;
         // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter
         $(document.body).on('click', '.resetsorting', () => {
             $('table').trigger('filterReset');
@@ -400,26 +400,6 @@ export default {
                 }
             });
 
-            const rootDir = config.rootDirs;
-            const rootDirIndex = config.selectedRootIndex;
-            if (rootDir) {
-                const backendDirs = rootDir.slice(1);
-                if (backendDirs.length >= 2) {
-                    $('#showRoot').show();
-                    const item = ['All Folders'];
-                    const rootDirOptions = item.concat(backendDirs);
-                    $.each(rootDirOptions, (i, item) => {
-                        $('#showRootDir').append($('<option>', {
-                            value: i - 1,
-                            text: item
-                        }));
-                    });
-                    $('select#showRootDir').prop('selectedIndex', rootDirIndex + 1);
-                } else {
-                    $('#showRoot').hide();
-                }
-            }
-
             $('#poster-container').sortable({
                 appendTo: document.body,
                 axis: 'y',
@@ -478,6 +458,34 @@ export default {
             });
         }; // END initializePage()
 
+        // Vue Stuff (prevent race condition issues)
+        const unwatch = this.$watch('config.rootDirs', () => {
+            unwatch();
+
+            const { config } = this;
+            const { rootDirs, selectedRootIndex } = config;
+
+            if (rootDirs) {
+                const backendDirs = rootDirs.slice(1);
+                if (backendDirs.length >= 2) {
+                    this.$nextTick(() => {
+                        $('#showRoot').show();
+                        const item = ['All Folders'];
+                        const rootDirOptions = item.concat(backendDirs);
+                        $.each(rootDirOptions, (i, item) => {
+                            $('#showRootDir').append($('<option>', {
+                                value: i - 1,
+                                text: item
+                            }));
+                        });
+                        $('select#showRootDir').prop('selectedIndex', selectedRootIndex + 1);
+                    });
+                } else {
+                    $('#showRoot').hide();
+                }
+            }
+        });
+
         window.addEventListener('load', initializePage, { once: true });
     }
 };
diff --git a/themes/dark/assets/js/medusa-runtime.js b/themes/dark/assets/js/medusa-runtime.js
index f35a44c07e..236261788c 100644
--- a/themes/dark/assets/js/medusa-runtime.js
+++ b/themes/dark/assets/js/medusa-runtime.js
@@ -380,7 +380,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(f
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'home',\n  template: '#home-template',\n  components: {\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_3__[\"AppLink\"]\n  },\n\n  data() {\n    return {\n      layoutOptions: [{\n        value: 'poster',\n        text: 'Poster'\n      }, {\n        value: 'small',\n        text: 'Small Poster'\n      }, {\n        value: 'banner',\n        text: 'Banner'\n      }, {\n        value: 'simple',\n        text: 'Simple'\n      }],\n      postSortDirOptions: [{\n        value: '0',\n        text: 'Descending'\n      }, {\n        value: '1',\n        text: 'Ascending'\n      }]\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config,\n      // Renamed because of the computed property 'layout'.\n      stateLayout: state => state.layout\n    }),\n    layout: {\n      get() {\n        const {\n          stateLayout\n        } = this;\n        return stateLayout.home;\n      },\n\n      set(layout) {\n        const {\n          setLayout\n        } = this;\n        const page = 'home';\n        setLayout({\n          page,\n          layout\n        });\n      }\n\n    }\n  },\n  methods: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapActions\"])({\n      setLayout: 'setLayout',\n      setConfig: 'setConfig'\n    }),\n\n    initializePosterSizeSlider() {\n      const resizePosters = newSize => {\n        let fontSize;\n        let logoWidth;\n        let borderRadius;\n        let borderWidth;\n\n        if (newSize < 125) {\n          // Small\n          borderRadius = 3;\n          borderWidth = 4;\n        } else if (newSize < 175) {\n          // Medium\n          fontSize = 9;\n          logoWidth = 40;\n          borderRadius = 4;\n          borderWidth = 5;\n        } else {\n          // Large\n          fontSize = 11;\n          logoWidth = 50;\n          borderRadius = 6;\n          borderWidth = 6;\n        } // If there's a poster popup, remove it before resizing\n\n\n        $('#posterPopup').remove();\n\n        if (fontSize === undefined) {\n          $('.show-details').hide();\n        } else {\n          $('.show-details').show();\n          $('.show-dlstats, .show-quality').css('fontSize', fontSize);\n          $('.show-network-image').css('width', logoWidth);\n        }\n\n        $('.show-container').css({\n          width: newSize,\n          borderWidth,\n          borderRadius\n        });\n      };\n\n      let posterSize;\n\n      if (typeof Storage !== 'undefined') {\n        posterSize = parseInt(localStorage.getItem('posterSize'), 10);\n      }\n\n      if (typeof posterSize !== 'number' || isNaN(posterSize)) {\n        posterSize = 188;\n      }\n\n      resizePosters(posterSize);\n      $('#posterSizeSlider').slider({\n        min: 75,\n        max: 250,\n        value: posterSize,\n\n        change(e, ui) {\n          if (typeof Storage !== 'undefined') {\n            localStorage.setItem('posterSize', ui.value);\n          }\n\n          resizePosters(ui.value);\n          $('.show-grid').isotope('layout');\n        }\n\n      });\n    }\n\n  },\n\n  beforeMount() {\n    // Wait for the next tick, so the component is rendered\n    this.$nextTick(() => {\n      $('#showTabs').tabs();\n    });\n  },\n\n  mounted() {\n    const {\n      $snotify,\n      config,\n      stateLayout,\n      setConfig\n    } = this; // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter\n\n    $(document.body).on('click', '.resetsorting', () => {\n      $('table').trigger('filterReset');\n    }); // Handle filtering in the poster layout\n\n    $(document.body).on('input', '#filterShowName', lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(() => {\n      $('.show-grid').isotope({\n        filter() {\n          const name = $(this).attr('data-name').toLowerCase();\n          return name.includes($('#filterShowName').val().toLowerCase());\n        }\n\n      });\n    }, 500));\n    $(document.body).on('change', '#postersort', function () {\n      $('.show-grid').isotope({\n        sortBy: $(this).val()\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#postersortdirection', function () {\n      $('.show-grid').isotope({\n        sortAscending: $(this).val() === '1'\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#showRootDir', function () {\n      _api__WEBPACK_IMPORTED_MODULE_2__[\"api\"].patch('config/main', {\n        selectedRootIndex: parseInt($(this).val(), 10)\n      }).then(response => {\n        console.info(response);\n        window.location.reload();\n      }).catch(error => {\n        console.info(error);\n      });\n    });\n    const imgLazyLoad = new LazyLoad({\n      // eslint-disable-line no-undef\n      // Example of options object -> see options section\n      threshold: 500\n    });\n\n    const initializePage = () => {\n      // Reset the layout for the activated tab (when using ui tabs)\n      $('#showTabs').tabs({\n        activate() {\n          $('.show-grid').isotope('layout');\n        }\n\n      }); // This needs to be refined to work a little faster.\n\n      $('.progressbar').each(function () {\n        const percentage = $(this).data('progress-percentage');\n        const classToAdd = percentage === 100 ? 100 : percentage > 80 ? 80 : percentage > 60 ? 60 : percentage > 40 ? 40 : 20;\n        $(this).progressbar({\n          value: percentage\n        });\n\n        if ($(this).data('progress-text')) {\n          $(this).append('<div class=\"progressbarText\" title=\"' + $(this).data('progress-tip') + '\">' + $(this).data('progress-text') + '</div>');\n        }\n\n        $(this).find('.ui-progressbar-value').addClass('progress-' + classToAdd);\n      });\n      $('img#network').on('error', function () {\n        $(this).parent().text($(this).attr('alt'));\n        $(this).remove();\n      });\n      $('#showListTableSeries:has(tbody tr), #showListTableAnime:has(tbody tr)').tablesorter({\n        debug: false,\n        sortList: [[7, 1], [2, 0]],\n        textExtraction: function () {\n          return {\n            0(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            1(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            3(node) {\n              return $(node).find('span').prop('title').toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            4(node) {\n              return $(node).find('a[data-indexer-name]').attr('data-indexer-name');\n            },\n\n            // eslint-disable-line brace-style\n            5(node) {\n              return $(node).find('span').text().toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            6(node) {\n              return $(node).find('span:first').text();\n            },\n\n            // eslint-disable-line brace-style\n            7(node) {\n              return $(node).data('show-size');\n            },\n\n            // eslint-disable-line brace-style\n            8(node) {\n              return $(node).find('img').attr('alt');\n            },\n\n            // eslint-disable-line brace-style\n            10(node) {\n              return $(node).find('img').attr('alt');\n            } // eslint-disable-line brace-style\n\n\n          };\n        }(),\n        widgets: ['saveSort', 'zebra', 'stickyHeaders', 'filter', 'columnSelector'],\n        headers: {\n          0: {\n            sorter: 'realISODate'\n          },\n          1: {\n            sorter: 'realISODate'\n          },\n          2: {\n            sorter: 'showNames'\n          },\n          4: {\n            sorter: 'text'\n          },\n          5: {\n            sorter: 'quality'\n          },\n          6: {\n            sorter: 'eps'\n          },\n          7: {\n            sorter: 'digit'\n          },\n          8: {\n            filter: 'parsed'\n          },\n          10: {\n            filter: 'parsed'\n          }\n        },\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          filter_functions: {\n            // eslint-disable-line camelcase\n            5(e, n, f) {\n              // eslint-disable-line complexity\n              let test = false;\n              const pct = Math.floor(n % 1 * 1000);\n\n              if (f === '') {\n                test = true;\n              } else {\n                let result = f.match(/(<|<=|>=|>)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[1] === '<') {\n                    if (pct < parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '<=') {\n                    if (pct <= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>=') {\n                    if (pct >= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>') {\n                    if (pct > parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(\\d+)\\s(-|to)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[2] === '-' || result[2] === 'to') {\n                    if (pct >= parseInt(result[1], 10) && pct <= parseInt(result[3], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(=)?\\s?(\\d+)\\s?(=)?/i);\n\n                if (result) {\n                  if (result[1] === '=' || result[3] === '=') {\n                    if (parseInt(result[2], 10) === pct) {\n                      test = true;\n                    }\n                  }\n                }\n\n                if (!isNaN(parseFloat(f)) && isFinite(f)) {\n                  if (parseInt(f, 10) === pct) {\n                    test = true;\n                  }\n                }\n              }\n\n              return test;\n            }\n\n          },\n          columnSelector_mediaquery: false // eslint-disable-line camelcase\n\n        },\n        sortStable: true,\n        sortAppend: [[2, 0]]\n      }).bind('sortEnd', () => {\n        imgLazyLoad.handleScroll();\n      }).bind('filterEnd', () => {\n        imgLazyLoad.handleScroll();\n      });\n      $('.show-grid').imagesLoaded(() => {\n        this.initializePosterSizeSlider();\n        $('.loading-spinner').hide();\n        $('.show-grid').show().isotope({\n          itemSelector: '.show-container',\n          sortBy: stateLayout.posterSortby,\n          sortAscending: stateLayout.posterSortdir,\n          layoutMode: 'masonry',\n          masonry: {\n            isFitWidth: true\n          },\n          getSortData: {\n            name(itemElem) {\n              const name = $(itemElem).attr('data-name') || '';\n              return (stateLayout.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n            },\n\n            network: '[data-network]',\n\n            date(itemElem) {\n              const date = $(itemElem).attr('data-date');\n              return date.length && parseInt(date, 10) || Number.POSITIVE_INFINITY;\n            },\n\n            progress(itemElem) {\n              const progress = $(itemElem).attr('data-progress');\n              return progress.length && parseInt(progress, 10) || Number.NEGATIVE_INFINITY;\n            },\n\n            indexer(itemElem) {\n              const indexer = $(itemElem).attr('data-indexer');\n\n              if (indexer === undefined) {\n                return Number.NEGATIVE_INFINITY;\n              }\n\n              return indexer.length && parseInt(indexer, 10) || Number.NEGATIVE_INFINITY;\n            }\n\n          }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n          imgLazyLoad.update();\n          imgLazyLoad.handleScroll();\n        }); // When posters are small enough to not display the .show-details\n        // table, display a larger poster when hovering.\n\n        let posterHoverTimer = null;\n        $('.show-container').on('mouseenter', function () {\n          const poster = $(this);\n\n          if (poster.find('.show-details').css('display') !== 'none') {\n            return;\n          }\n\n          posterHoverTimer = setTimeout(() => {\n            posterHoverTimer = null;\n            $('#posterPopup').remove();\n            const popup = poster.clone().attr({\n              id: 'posterPopup'\n            });\n            const origLeft = poster.offset().left;\n            const origTop = poster.offset().top;\n            popup.css({\n              position: 'absolute',\n              margin: 0,\n              top: origTop,\n              left: origLeft\n            });\n            popup.find('.show-details').show();\n            popup.on('mouseleave', function () {\n              $(this).remove();\n            });\n            popup.css({\n              zIndex: '9999'\n            });\n            popup.appendTo('body');\n            const height = 438;\n            const width = 250;\n            let newTop = origTop + poster.height() / 2 - height / 2;\n            let newLeft = origLeft + poster.width() / 2 - width / 2; // Make sure the popup isn't outside the viewport\n\n            const margin = 5;\n            const scrollTop = $(window).scrollTop();\n            const scrollLeft = $(window).scrollLeft();\n            const scrollBottom = scrollTop + $(window).innerHeight();\n            const scrollRight = scrollLeft + $(window).innerWidth();\n\n            if (newTop < scrollTop + margin) {\n              newTop = scrollTop + margin;\n            }\n\n            if (newLeft < scrollLeft + margin) {\n              newLeft = scrollLeft + margin;\n            }\n\n            if (newTop + height + margin > scrollBottom) {\n              newTop = scrollBottom - height - margin;\n            }\n\n            if (newLeft + width + margin > scrollRight) {\n              newLeft = scrollRight - width - margin;\n            }\n\n            popup.animate({\n              top: newTop,\n              left: newLeft,\n              width: 250,\n              height: 438\n            });\n          }, 300);\n        }).on('mouseleave', () => {\n          if (posterHoverTimer !== null) {\n            clearTimeout(posterHoverTimer);\n          }\n        });\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n      });\n      $('#popover').popover({\n        placement: 'bottom',\n        html: true,\n        // Required if content has HTML\n        content: '<div id=\"popover-target\"></div>'\n      }).on('shown.bs.popover', () => {\n        // Bootstrap popover event triggered when the popover opens\n        // call this function to copy the column selection code into the popover\n        $.tablesorter.columnSelector.attachTo($('#showListTableSeries'), '#popover-target');\n\n        if (stateLayout.animeSplitHome) {\n          $.tablesorter.columnSelector.attachTo($('#showListTableAnime'), '#popover-target');\n        }\n      });\n      const rootDir = config.rootDirs;\n      const rootDirIndex = config.selectedRootIndex;\n\n      if (rootDir) {\n        const backendDirs = rootDir.slice(1);\n\n        if (backendDirs.length >= 2) {\n          $('#showRoot').show();\n          const item = ['All Folders'];\n          const rootDirOptions = item.concat(backendDirs);\n          $.each(rootDirOptions, (i, item) => {\n            $('#showRootDir').append($('<option>', {\n              value: i - 1,\n              text: item\n            }));\n          });\n          $('select#showRootDir').prop('selectedIndex', rootDirIndex + 1);\n        } else {\n          $('#showRoot').hide();\n        }\n      }\n\n      $('#poster-container').sortable({\n        appendTo: document.body,\n        axis: 'y',\n        items: '> .show-grid',\n        scroll: false,\n        tolerance: 'pointer',\n        helper: 'clone',\n        handle: 'button.move-show-list',\n        cancel: '',\n\n        sort(event, ui) {\n          const draggedItem = $(ui.item);\n          const margin = 1.5;\n\n          if (ui.position.top !== ui.originalPosition.top) {\n            if (ui.position.top > ui.originalPosition.top * margin) {\n              // Move to bottom\n              setTimeout(() => {\n                $(draggedItem).appendTo('#poster-container');\n                return false;\n              }, 400);\n            }\n\n            if (ui.position.top < ui.originalPosition.top / margin) {\n              // Move to top\n              setTimeout(() => {\n                $(draggedItem).prependTo('#poster-container');\n                return false;\n              }, 400);\n            }\n          }\n        },\n\n        async update(event) {\n          const showListOrder = $(event.target.children).map((index, el) => {\n            return $(el).data('list');\n          });\n          const layout = {\n            show: {\n              showListOrder: showListOrder.toArray()\n            }\n          };\n\n          try {\n            await setConfig({\n              section: 'main',\n              config: {\n                layout\n              }\n            });\n            $snotify.success('Saved Home poster list type order', 'Saved', {\n              timeout: 5000\n            });\n          } catch (error) {\n            $snotify.error('Error while trying to save home poster list type order', 'Error');\n          }\n        }\n\n      });\n    }; // END initializePage()\n\n\n    window.addEventListener('load', initializePage, {\n      once: true\n    });\n  }\n\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/home.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'home',\n  template: '#home-template',\n  components: {\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_3__[\"AppLink\"]\n  },\n\n  data() {\n    return {\n      layoutOptions: [{\n        value: 'poster',\n        text: 'Poster'\n      }, {\n        value: 'small',\n        text: 'Small Poster'\n      }, {\n        value: 'banner',\n        text: 'Banner'\n      }, {\n        value: 'simple',\n        text: 'Simple'\n      }],\n      postSortDirOptions: [{\n        value: '0',\n        text: 'Descending'\n      }, {\n        value: '1',\n        text: 'Ascending'\n      }]\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config,\n      // Renamed because of the computed property 'layout'.\n      stateLayout: state => state.layout\n    }),\n    layout: {\n      get() {\n        const {\n          stateLayout\n        } = this;\n        return stateLayout.home;\n      },\n\n      set(layout) {\n        const {\n          setLayout\n        } = this;\n        const page = 'home';\n        setLayout({\n          page,\n          layout\n        });\n      }\n\n    }\n  },\n  methods: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapActions\"])({\n      setLayout: 'setLayout',\n      setConfig: 'setConfig'\n    }),\n\n    initializePosterSizeSlider() {\n      const resizePosters = newSize => {\n        let fontSize;\n        let logoWidth;\n        let borderRadius;\n        let borderWidth;\n\n        if (newSize < 125) {\n          // Small\n          borderRadius = 3;\n          borderWidth = 4;\n        } else if (newSize < 175) {\n          // Medium\n          fontSize = 9;\n          logoWidth = 40;\n          borderRadius = 4;\n          borderWidth = 5;\n        } else {\n          // Large\n          fontSize = 11;\n          logoWidth = 50;\n          borderRadius = 6;\n          borderWidth = 6;\n        } // If there's a poster popup, remove it before resizing\n\n\n        $('#posterPopup').remove();\n\n        if (fontSize === undefined) {\n          $('.show-details').hide();\n        } else {\n          $('.show-details').show();\n          $('.show-dlstats, .show-quality').css('fontSize', fontSize);\n          $('.show-network-image').css('width', logoWidth);\n        }\n\n        $('.show-container').css({\n          width: newSize,\n          borderWidth,\n          borderRadius\n        });\n      };\n\n      let posterSize;\n\n      if (typeof Storage !== 'undefined') {\n        posterSize = parseInt(localStorage.getItem('posterSize'), 10);\n      }\n\n      if (typeof posterSize !== 'number' || isNaN(posterSize)) {\n        posterSize = 188;\n      }\n\n      resizePosters(posterSize);\n      $('#posterSizeSlider').slider({\n        min: 75,\n        max: 250,\n        value: posterSize,\n\n        change(e, ui) {\n          if (typeof Storage !== 'undefined') {\n            localStorage.setItem('posterSize', ui.value);\n          }\n\n          resizePosters(ui.value);\n          $('.show-grid').isotope('layout');\n        }\n\n      });\n    }\n\n  },\n\n  beforeMount() {\n    // Wait for the next tick, so the component is rendered\n    this.$nextTick(() => {\n      $('#showTabs').tabs();\n    });\n  },\n\n  mounted() {\n    const {\n      $snotify,\n      stateLayout,\n      setConfig\n    } = this; // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter\n\n    $(document.body).on('click', '.resetsorting', () => {\n      $('table').trigger('filterReset');\n    }); // Handle filtering in the poster layout\n\n    $(document.body).on('input', '#filterShowName', lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(() => {\n      $('.show-grid').isotope({\n        filter() {\n          const name = $(this).attr('data-name').toLowerCase();\n          return name.includes($('#filterShowName').val().toLowerCase());\n        }\n\n      });\n    }, 500));\n    $(document.body).on('change', '#postersort', function () {\n      $('.show-grid').isotope({\n        sortBy: $(this).val()\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#postersortdirection', function () {\n      $('.show-grid').isotope({\n        sortAscending: $(this).val() === '1'\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#showRootDir', function () {\n      _api__WEBPACK_IMPORTED_MODULE_2__[\"api\"].patch('config/main', {\n        selectedRootIndex: parseInt($(this).val(), 10)\n      }).then(response => {\n        console.info(response);\n        window.location.reload();\n      }).catch(error => {\n        console.info(error);\n      });\n    });\n    const imgLazyLoad = new LazyLoad({\n      // eslint-disable-line no-undef\n      // Example of options object -> see options section\n      threshold: 500\n    });\n\n    const initializePage = () => {\n      // Reset the layout for the activated tab (when using ui tabs)\n      $('#showTabs').tabs({\n        activate() {\n          $('.show-grid').isotope('layout');\n        }\n\n      }); // This needs to be refined to work a little faster.\n\n      $('.progressbar').each(function () {\n        const percentage = $(this).data('progress-percentage');\n        const classToAdd = percentage === 100 ? 100 : percentage > 80 ? 80 : percentage > 60 ? 60 : percentage > 40 ? 40 : 20;\n        $(this).progressbar({\n          value: percentage\n        });\n\n        if ($(this).data('progress-text')) {\n          $(this).append('<div class=\"progressbarText\" title=\"' + $(this).data('progress-tip') + '\">' + $(this).data('progress-text') + '</div>');\n        }\n\n        $(this).find('.ui-progressbar-value').addClass('progress-' + classToAdd);\n      });\n      $('img#network').on('error', function () {\n        $(this).parent().text($(this).attr('alt'));\n        $(this).remove();\n      });\n      $('#showListTableSeries:has(tbody tr), #showListTableAnime:has(tbody tr)').tablesorter({\n        debug: false,\n        sortList: [[7, 1], [2, 0]],\n        textExtraction: function () {\n          return {\n            0(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            1(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            3(node) {\n              return $(node).find('span').prop('title').toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            4(node) {\n              return $(node).find('a[data-indexer-name]').attr('data-indexer-name');\n            },\n\n            // eslint-disable-line brace-style\n            5(node) {\n              return $(node).find('span').text().toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            6(node) {\n              return $(node).find('span:first').text();\n            },\n\n            // eslint-disable-line brace-style\n            7(node) {\n              return $(node).data('show-size');\n            },\n\n            // eslint-disable-line brace-style\n            8(node) {\n              return $(node).find('img').attr('alt');\n            },\n\n            // eslint-disable-line brace-style\n            10(node) {\n              return $(node).find('img').attr('alt');\n            } // eslint-disable-line brace-style\n\n\n          };\n        }(),\n        widgets: ['saveSort', 'zebra', 'stickyHeaders', 'filter', 'columnSelector'],\n        headers: {\n          0: {\n            sorter: 'realISODate'\n          },\n          1: {\n            sorter: 'realISODate'\n          },\n          2: {\n            sorter: 'showNames'\n          },\n          4: {\n            sorter: 'text'\n          },\n          5: {\n            sorter: 'quality'\n          },\n          6: {\n            sorter: 'eps'\n          },\n          7: {\n            sorter: 'digit'\n          },\n          8: {\n            filter: 'parsed'\n          },\n          10: {\n            filter: 'parsed'\n          }\n        },\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          filter_functions: {\n            // eslint-disable-line camelcase\n            5(e, n, f) {\n              // eslint-disable-line complexity\n              let test = false;\n              const pct = Math.floor(n % 1 * 1000);\n\n              if (f === '') {\n                test = true;\n              } else {\n                let result = f.match(/(<|<=|>=|>)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[1] === '<') {\n                    if (pct < parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '<=') {\n                    if (pct <= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>=') {\n                    if (pct >= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>') {\n                    if (pct > parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(\\d+)\\s(-|to)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[2] === '-' || result[2] === 'to') {\n                    if (pct >= parseInt(result[1], 10) && pct <= parseInt(result[3], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(=)?\\s?(\\d+)\\s?(=)?/i);\n\n                if (result) {\n                  if (result[1] === '=' || result[3] === '=') {\n                    if (parseInt(result[2], 10) === pct) {\n                      test = true;\n                    }\n                  }\n                }\n\n                if (!isNaN(parseFloat(f)) && isFinite(f)) {\n                  if (parseInt(f, 10) === pct) {\n                    test = true;\n                  }\n                }\n              }\n\n              return test;\n            }\n\n          },\n          columnSelector_mediaquery: false // eslint-disable-line camelcase\n\n        },\n        sortStable: true,\n        sortAppend: [[2, 0]]\n      }).bind('sortEnd', () => {\n        imgLazyLoad.handleScroll();\n      }).bind('filterEnd', () => {\n        imgLazyLoad.handleScroll();\n      });\n      $('.show-grid').imagesLoaded(() => {\n        this.initializePosterSizeSlider();\n        $('.loading-spinner').hide();\n        $('.show-grid').show().isotope({\n          itemSelector: '.show-container',\n          sortBy: stateLayout.posterSortby,\n          sortAscending: stateLayout.posterSortdir,\n          layoutMode: 'masonry',\n          masonry: {\n            isFitWidth: true\n          },\n          getSortData: {\n            name(itemElem) {\n              const name = $(itemElem).attr('data-name') || '';\n              return (stateLayout.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n            },\n\n            network: '[data-network]',\n\n            date(itemElem) {\n              const date = $(itemElem).attr('data-date');\n              return date.length && parseInt(date, 10) || Number.POSITIVE_INFINITY;\n            },\n\n            progress(itemElem) {\n              const progress = $(itemElem).attr('data-progress');\n              return progress.length && parseInt(progress, 10) || Number.NEGATIVE_INFINITY;\n            },\n\n            indexer(itemElem) {\n              const indexer = $(itemElem).attr('data-indexer');\n\n              if (indexer === undefined) {\n                return Number.NEGATIVE_INFINITY;\n              }\n\n              return indexer.length && parseInt(indexer, 10) || Number.NEGATIVE_INFINITY;\n            }\n\n          }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n          imgLazyLoad.update();\n          imgLazyLoad.handleScroll();\n        }); // When posters are small enough to not display the .show-details\n        // table, display a larger poster when hovering.\n\n        let posterHoverTimer = null;\n        $('.show-container').on('mouseenter', function () {\n          const poster = $(this);\n\n          if (poster.find('.show-details').css('display') !== 'none') {\n            return;\n          }\n\n          posterHoverTimer = setTimeout(() => {\n            posterHoverTimer = null;\n            $('#posterPopup').remove();\n            const popup = poster.clone().attr({\n              id: 'posterPopup'\n            });\n            const origLeft = poster.offset().left;\n            const origTop = poster.offset().top;\n            popup.css({\n              position: 'absolute',\n              margin: 0,\n              top: origTop,\n              left: origLeft\n            });\n            popup.find('.show-details').show();\n            popup.on('mouseleave', function () {\n              $(this).remove();\n            });\n            popup.css({\n              zIndex: '9999'\n            });\n            popup.appendTo('body');\n            const height = 438;\n            const width = 250;\n            let newTop = origTop + poster.height() / 2 - height / 2;\n            let newLeft = origLeft + poster.width() / 2 - width / 2; // Make sure the popup isn't outside the viewport\n\n            const margin = 5;\n            const scrollTop = $(window).scrollTop();\n            const scrollLeft = $(window).scrollLeft();\n            const scrollBottom = scrollTop + $(window).innerHeight();\n            const scrollRight = scrollLeft + $(window).innerWidth();\n\n            if (newTop < scrollTop + margin) {\n              newTop = scrollTop + margin;\n            }\n\n            if (newLeft < scrollLeft + margin) {\n              newLeft = scrollLeft + margin;\n            }\n\n            if (newTop + height + margin > scrollBottom) {\n              newTop = scrollBottom - height - margin;\n            }\n\n            if (newLeft + width + margin > scrollRight) {\n              newLeft = scrollRight - width - margin;\n            }\n\n            popup.animate({\n              top: newTop,\n              left: newLeft,\n              width: 250,\n              height: 438\n            });\n          }, 300);\n        }).on('mouseleave', () => {\n          if (posterHoverTimer !== null) {\n            clearTimeout(posterHoverTimer);\n          }\n        });\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n      });\n      $('#popover').popover({\n        placement: 'bottom',\n        html: true,\n        // Required if content has HTML\n        content: '<div id=\"popover-target\"></div>'\n      }).on('shown.bs.popover', () => {\n        // Bootstrap popover event triggered when the popover opens\n        // call this function to copy the column selection code into the popover\n        $.tablesorter.columnSelector.attachTo($('#showListTableSeries'), '#popover-target');\n\n        if (stateLayout.animeSplitHome) {\n          $.tablesorter.columnSelector.attachTo($('#showListTableAnime'), '#popover-target');\n        }\n      });\n      $('#poster-container').sortable({\n        appendTo: document.body,\n        axis: 'y',\n        items: '> .show-grid',\n        scroll: false,\n        tolerance: 'pointer',\n        helper: 'clone',\n        handle: 'button.move-show-list',\n        cancel: '',\n\n        sort(event, ui) {\n          const draggedItem = $(ui.item);\n          const margin = 1.5;\n\n          if (ui.position.top !== ui.originalPosition.top) {\n            if (ui.position.top > ui.originalPosition.top * margin) {\n              // Move to bottom\n              setTimeout(() => {\n                $(draggedItem).appendTo('#poster-container');\n                return false;\n              }, 400);\n            }\n\n            if (ui.position.top < ui.originalPosition.top / margin) {\n              // Move to top\n              setTimeout(() => {\n                $(draggedItem).prependTo('#poster-container');\n                return false;\n              }, 400);\n            }\n          }\n        },\n\n        async update(event) {\n          const showListOrder = $(event.target.children).map((index, el) => {\n            return $(el).data('list');\n          });\n          const layout = {\n            show: {\n              showListOrder: showListOrder.toArray()\n            }\n          };\n\n          try {\n            await setConfig({\n              section: 'main',\n              config: {\n                layout\n              }\n            });\n            $snotify.success('Saved Home poster list type order', 'Saved', {\n              timeout: 5000\n            });\n          } catch (error) {\n            $snotify.error('Error while trying to save home poster list type order', 'Error');\n          }\n        }\n\n      });\n    }; // END initializePage()\n    // Vue Stuff (prevent race condition issues)\n\n\n    const unwatch = this.$watch('config.rootDirs', () => {\n      unwatch();\n      const {\n        config\n      } = this;\n      const {\n        rootDirs,\n        selectedRootIndex\n      } = config;\n\n      if (rootDirs) {\n        const backendDirs = rootDirs.slice(1);\n\n        if (backendDirs.length >= 2) {\n          this.$nextTick(() => {\n            $('#showRoot').show();\n            const item = ['All Folders'];\n            const rootDirOptions = item.concat(backendDirs);\n            $.each(rootDirOptions, (i, item) => {\n              $('#showRootDir').append($('<option>', {\n                value: i - 1,\n                text: item\n              }));\n            });\n            $('select#showRootDir').prop('selectedIndex', selectedRootIndex + 1);\n          });\n        } else {\n          $('#showRoot').hide();\n        }\n      }\n    });\n    window.addEventListener('load', initializePage, {\n      once: true\n    });\n  }\n\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/home.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 f35a44c07e..236261788c 100644
--- a/themes/light/assets/js/medusa-runtime.js
+++ b/themes/light/assets/js/medusa-runtime.js
@@ -380,7 +380,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(f
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'home',\n  template: '#home-template',\n  components: {\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_3__[\"AppLink\"]\n  },\n\n  data() {\n    return {\n      layoutOptions: [{\n        value: 'poster',\n        text: 'Poster'\n      }, {\n        value: 'small',\n        text: 'Small Poster'\n      }, {\n        value: 'banner',\n        text: 'Banner'\n      }, {\n        value: 'simple',\n        text: 'Simple'\n      }],\n      postSortDirOptions: [{\n        value: '0',\n        text: 'Descending'\n      }, {\n        value: '1',\n        text: 'Ascending'\n      }]\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config,\n      // Renamed because of the computed property 'layout'.\n      stateLayout: state => state.layout\n    }),\n    layout: {\n      get() {\n        const {\n          stateLayout\n        } = this;\n        return stateLayout.home;\n      },\n\n      set(layout) {\n        const {\n          setLayout\n        } = this;\n        const page = 'home';\n        setLayout({\n          page,\n          layout\n        });\n      }\n\n    }\n  },\n  methods: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapActions\"])({\n      setLayout: 'setLayout',\n      setConfig: 'setConfig'\n    }),\n\n    initializePosterSizeSlider() {\n      const resizePosters = newSize => {\n        let fontSize;\n        let logoWidth;\n        let borderRadius;\n        let borderWidth;\n\n        if (newSize < 125) {\n          // Small\n          borderRadius = 3;\n          borderWidth = 4;\n        } else if (newSize < 175) {\n          // Medium\n          fontSize = 9;\n          logoWidth = 40;\n          borderRadius = 4;\n          borderWidth = 5;\n        } else {\n          // Large\n          fontSize = 11;\n          logoWidth = 50;\n          borderRadius = 6;\n          borderWidth = 6;\n        } // If there's a poster popup, remove it before resizing\n\n\n        $('#posterPopup').remove();\n\n        if (fontSize === undefined) {\n          $('.show-details').hide();\n        } else {\n          $('.show-details').show();\n          $('.show-dlstats, .show-quality').css('fontSize', fontSize);\n          $('.show-network-image').css('width', logoWidth);\n        }\n\n        $('.show-container').css({\n          width: newSize,\n          borderWidth,\n          borderRadius\n        });\n      };\n\n      let posterSize;\n\n      if (typeof Storage !== 'undefined') {\n        posterSize = parseInt(localStorage.getItem('posterSize'), 10);\n      }\n\n      if (typeof posterSize !== 'number' || isNaN(posterSize)) {\n        posterSize = 188;\n      }\n\n      resizePosters(posterSize);\n      $('#posterSizeSlider').slider({\n        min: 75,\n        max: 250,\n        value: posterSize,\n\n        change(e, ui) {\n          if (typeof Storage !== 'undefined') {\n            localStorage.setItem('posterSize', ui.value);\n          }\n\n          resizePosters(ui.value);\n          $('.show-grid').isotope('layout');\n        }\n\n      });\n    }\n\n  },\n\n  beforeMount() {\n    // Wait for the next tick, so the component is rendered\n    this.$nextTick(() => {\n      $('#showTabs').tabs();\n    });\n  },\n\n  mounted() {\n    const {\n      $snotify,\n      config,\n      stateLayout,\n      setConfig\n    } = this; // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter\n\n    $(document.body).on('click', '.resetsorting', () => {\n      $('table').trigger('filterReset');\n    }); // Handle filtering in the poster layout\n\n    $(document.body).on('input', '#filterShowName', lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(() => {\n      $('.show-grid').isotope({\n        filter() {\n          const name = $(this).attr('data-name').toLowerCase();\n          return name.includes($('#filterShowName').val().toLowerCase());\n        }\n\n      });\n    }, 500));\n    $(document.body).on('change', '#postersort', function () {\n      $('.show-grid').isotope({\n        sortBy: $(this).val()\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#postersortdirection', function () {\n      $('.show-grid').isotope({\n        sortAscending: $(this).val() === '1'\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#showRootDir', function () {\n      _api__WEBPACK_IMPORTED_MODULE_2__[\"api\"].patch('config/main', {\n        selectedRootIndex: parseInt($(this).val(), 10)\n      }).then(response => {\n        console.info(response);\n        window.location.reload();\n      }).catch(error => {\n        console.info(error);\n      });\n    });\n    const imgLazyLoad = new LazyLoad({\n      // eslint-disable-line no-undef\n      // Example of options object -> see options section\n      threshold: 500\n    });\n\n    const initializePage = () => {\n      // Reset the layout for the activated tab (when using ui tabs)\n      $('#showTabs').tabs({\n        activate() {\n          $('.show-grid').isotope('layout');\n        }\n\n      }); // This needs to be refined to work a little faster.\n\n      $('.progressbar').each(function () {\n        const percentage = $(this).data('progress-percentage');\n        const classToAdd = percentage === 100 ? 100 : percentage > 80 ? 80 : percentage > 60 ? 60 : percentage > 40 ? 40 : 20;\n        $(this).progressbar({\n          value: percentage\n        });\n\n        if ($(this).data('progress-text')) {\n          $(this).append('<div class=\"progressbarText\" title=\"' + $(this).data('progress-tip') + '\">' + $(this).data('progress-text') + '</div>');\n        }\n\n        $(this).find('.ui-progressbar-value').addClass('progress-' + classToAdd);\n      });\n      $('img#network').on('error', function () {\n        $(this).parent().text($(this).attr('alt'));\n        $(this).remove();\n      });\n      $('#showListTableSeries:has(tbody tr), #showListTableAnime:has(tbody tr)').tablesorter({\n        debug: false,\n        sortList: [[7, 1], [2, 0]],\n        textExtraction: function () {\n          return {\n            0(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            1(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            3(node) {\n              return $(node).find('span').prop('title').toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            4(node) {\n              return $(node).find('a[data-indexer-name]').attr('data-indexer-name');\n            },\n\n            // eslint-disable-line brace-style\n            5(node) {\n              return $(node).find('span').text().toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            6(node) {\n              return $(node).find('span:first').text();\n            },\n\n            // eslint-disable-line brace-style\n            7(node) {\n              return $(node).data('show-size');\n            },\n\n            // eslint-disable-line brace-style\n            8(node) {\n              return $(node).find('img').attr('alt');\n            },\n\n            // eslint-disable-line brace-style\n            10(node) {\n              return $(node).find('img').attr('alt');\n            } // eslint-disable-line brace-style\n\n\n          };\n        }(),\n        widgets: ['saveSort', 'zebra', 'stickyHeaders', 'filter', 'columnSelector'],\n        headers: {\n          0: {\n            sorter: 'realISODate'\n          },\n          1: {\n            sorter: 'realISODate'\n          },\n          2: {\n            sorter: 'showNames'\n          },\n          4: {\n            sorter: 'text'\n          },\n          5: {\n            sorter: 'quality'\n          },\n          6: {\n            sorter: 'eps'\n          },\n          7: {\n            sorter: 'digit'\n          },\n          8: {\n            filter: 'parsed'\n          },\n          10: {\n            filter: 'parsed'\n          }\n        },\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          filter_functions: {\n            // eslint-disable-line camelcase\n            5(e, n, f) {\n              // eslint-disable-line complexity\n              let test = false;\n              const pct = Math.floor(n % 1 * 1000);\n\n              if (f === '') {\n                test = true;\n              } else {\n                let result = f.match(/(<|<=|>=|>)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[1] === '<') {\n                    if (pct < parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '<=') {\n                    if (pct <= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>=') {\n                    if (pct >= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>') {\n                    if (pct > parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(\\d+)\\s(-|to)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[2] === '-' || result[2] === 'to') {\n                    if (pct >= parseInt(result[1], 10) && pct <= parseInt(result[3], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(=)?\\s?(\\d+)\\s?(=)?/i);\n\n                if (result) {\n                  if (result[1] === '=' || result[3] === '=') {\n                    if (parseInt(result[2], 10) === pct) {\n                      test = true;\n                    }\n                  }\n                }\n\n                if (!isNaN(parseFloat(f)) && isFinite(f)) {\n                  if (parseInt(f, 10) === pct) {\n                    test = true;\n                  }\n                }\n              }\n\n              return test;\n            }\n\n          },\n          columnSelector_mediaquery: false // eslint-disable-line camelcase\n\n        },\n        sortStable: true,\n        sortAppend: [[2, 0]]\n      }).bind('sortEnd', () => {\n        imgLazyLoad.handleScroll();\n      }).bind('filterEnd', () => {\n        imgLazyLoad.handleScroll();\n      });\n      $('.show-grid').imagesLoaded(() => {\n        this.initializePosterSizeSlider();\n        $('.loading-spinner').hide();\n        $('.show-grid').show().isotope({\n          itemSelector: '.show-container',\n          sortBy: stateLayout.posterSortby,\n          sortAscending: stateLayout.posterSortdir,\n          layoutMode: 'masonry',\n          masonry: {\n            isFitWidth: true\n          },\n          getSortData: {\n            name(itemElem) {\n              const name = $(itemElem).attr('data-name') || '';\n              return (stateLayout.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n            },\n\n            network: '[data-network]',\n\n            date(itemElem) {\n              const date = $(itemElem).attr('data-date');\n              return date.length && parseInt(date, 10) || Number.POSITIVE_INFINITY;\n            },\n\n            progress(itemElem) {\n              const progress = $(itemElem).attr('data-progress');\n              return progress.length && parseInt(progress, 10) || Number.NEGATIVE_INFINITY;\n            },\n\n            indexer(itemElem) {\n              const indexer = $(itemElem).attr('data-indexer');\n\n              if (indexer === undefined) {\n                return Number.NEGATIVE_INFINITY;\n              }\n\n              return indexer.length && parseInt(indexer, 10) || Number.NEGATIVE_INFINITY;\n            }\n\n          }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n          imgLazyLoad.update();\n          imgLazyLoad.handleScroll();\n        }); // When posters are small enough to not display the .show-details\n        // table, display a larger poster when hovering.\n\n        let posterHoverTimer = null;\n        $('.show-container').on('mouseenter', function () {\n          const poster = $(this);\n\n          if (poster.find('.show-details').css('display') !== 'none') {\n            return;\n          }\n\n          posterHoverTimer = setTimeout(() => {\n            posterHoverTimer = null;\n            $('#posterPopup').remove();\n            const popup = poster.clone().attr({\n              id: 'posterPopup'\n            });\n            const origLeft = poster.offset().left;\n            const origTop = poster.offset().top;\n            popup.css({\n              position: 'absolute',\n              margin: 0,\n              top: origTop,\n              left: origLeft\n            });\n            popup.find('.show-details').show();\n            popup.on('mouseleave', function () {\n              $(this).remove();\n            });\n            popup.css({\n              zIndex: '9999'\n            });\n            popup.appendTo('body');\n            const height = 438;\n            const width = 250;\n            let newTop = origTop + poster.height() / 2 - height / 2;\n            let newLeft = origLeft + poster.width() / 2 - width / 2; // Make sure the popup isn't outside the viewport\n\n            const margin = 5;\n            const scrollTop = $(window).scrollTop();\n            const scrollLeft = $(window).scrollLeft();\n            const scrollBottom = scrollTop + $(window).innerHeight();\n            const scrollRight = scrollLeft + $(window).innerWidth();\n\n            if (newTop < scrollTop + margin) {\n              newTop = scrollTop + margin;\n            }\n\n            if (newLeft < scrollLeft + margin) {\n              newLeft = scrollLeft + margin;\n            }\n\n            if (newTop + height + margin > scrollBottom) {\n              newTop = scrollBottom - height - margin;\n            }\n\n            if (newLeft + width + margin > scrollRight) {\n              newLeft = scrollRight - width - margin;\n            }\n\n            popup.animate({\n              top: newTop,\n              left: newLeft,\n              width: 250,\n              height: 438\n            });\n          }, 300);\n        }).on('mouseleave', () => {\n          if (posterHoverTimer !== null) {\n            clearTimeout(posterHoverTimer);\n          }\n        });\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n      });\n      $('#popover').popover({\n        placement: 'bottom',\n        html: true,\n        // Required if content has HTML\n        content: '<div id=\"popover-target\"></div>'\n      }).on('shown.bs.popover', () => {\n        // Bootstrap popover event triggered when the popover opens\n        // call this function to copy the column selection code into the popover\n        $.tablesorter.columnSelector.attachTo($('#showListTableSeries'), '#popover-target');\n\n        if (stateLayout.animeSplitHome) {\n          $.tablesorter.columnSelector.attachTo($('#showListTableAnime'), '#popover-target');\n        }\n      });\n      const rootDir = config.rootDirs;\n      const rootDirIndex = config.selectedRootIndex;\n\n      if (rootDir) {\n        const backendDirs = rootDir.slice(1);\n\n        if (backendDirs.length >= 2) {\n          $('#showRoot').show();\n          const item = ['All Folders'];\n          const rootDirOptions = item.concat(backendDirs);\n          $.each(rootDirOptions, (i, item) => {\n            $('#showRootDir').append($('<option>', {\n              value: i - 1,\n              text: item\n            }));\n          });\n          $('select#showRootDir').prop('selectedIndex', rootDirIndex + 1);\n        } else {\n          $('#showRoot').hide();\n        }\n      }\n\n      $('#poster-container').sortable({\n        appendTo: document.body,\n        axis: 'y',\n        items: '> .show-grid',\n        scroll: false,\n        tolerance: 'pointer',\n        helper: 'clone',\n        handle: 'button.move-show-list',\n        cancel: '',\n\n        sort(event, ui) {\n          const draggedItem = $(ui.item);\n          const margin = 1.5;\n\n          if (ui.position.top !== ui.originalPosition.top) {\n            if (ui.position.top > ui.originalPosition.top * margin) {\n              // Move to bottom\n              setTimeout(() => {\n                $(draggedItem).appendTo('#poster-container');\n                return false;\n              }, 400);\n            }\n\n            if (ui.position.top < ui.originalPosition.top / margin) {\n              // Move to top\n              setTimeout(() => {\n                $(draggedItem).prependTo('#poster-container');\n                return false;\n              }, 400);\n            }\n          }\n        },\n\n        async update(event) {\n          const showListOrder = $(event.target.children).map((index, el) => {\n            return $(el).data('list');\n          });\n          const layout = {\n            show: {\n              showListOrder: showListOrder.toArray()\n            }\n          };\n\n          try {\n            await setConfig({\n              section: 'main',\n              config: {\n                layout\n              }\n            });\n            $snotify.success('Saved Home poster list type order', 'Saved', {\n              timeout: 5000\n            });\n          } catch (error) {\n            $snotify.error('Error while trying to save home poster list type order', 'Error');\n          }\n        }\n\n      });\n    }; // END initializePage()\n\n\n    window.addEventListener('load', initializePage, {\n      once: true\n    });\n  }\n\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/home.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'home',\n  template: '#home-template',\n  components: {\n    AppLink: _helpers__WEBPACK_IMPORTED_MODULE_3__[\"AppLink\"]\n  },\n\n  data() {\n    return {\n      layoutOptions: [{\n        value: 'poster',\n        text: 'Poster'\n      }, {\n        value: 'small',\n        text: 'Small Poster'\n      }, {\n        value: 'banner',\n        text: 'Banner'\n      }, {\n        value: 'simple',\n        text: 'Simple'\n      }],\n      postSortDirOptions: [{\n        value: '0',\n        text: 'Descending'\n      }, {\n        value: '1',\n        text: 'Ascending'\n      }]\n    };\n  },\n\n  computed: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n      config: state => state.config,\n      // Renamed because of the computed property 'layout'.\n      stateLayout: state => state.layout\n    }),\n    layout: {\n      get() {\n        const {\n          stateLayout\n        } = this;\n        return stateLayout.home;\n      },\n\n      set(layout) {\n        const {\n          setLayout\n        } = this;\n        const page = 'home';\n        setLayout({\n          page,\n          layout\n        });\n      }\n\n    }\n  },\n  methods: { ...Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapActions\"])({\n      setLayout: 'setLayout',\n      setConfig: 'setConfig'\n    }),\n\n    initializePosterSizeSlider() {\n      const resizePosters = newSize => {\n        let fontSize;\n        let logoWidth;\n        let borderRadius;\n        let borderWidth;\n\n        if (newSize < 125) {\n          // Small\n          borderRadius = 3;\n          borderWidth = 4;\n        } else if (newSize < 175) {\n          // Medium\n          fontSize = 9;\n          logoWidth = 40;\n          borderRadius = 4;\n          borderWidth = 5;\n        } else {\n          // Large\n          fontSize = 11;\n          logoWidth = 50;\n          borderRadius = 6;\n          borderWidth = 6;\n        } // If there's a poster popup, remove it before resizing\n\n\n        $('#posterPopup').remove();\n\n        if (fontSize === undefined) {\n          $('.show-details').hide();\n        } else {\n          $('.show-details').show();\n          $('.show-dlstats, .show-quality').css('fontSize', fontSize);\n          $('.show-network-image').css('width', logoWidth);\n        }\n\n        $('.show-container').css({\n          width: newSize,\n          borderWidth,\n          borderRadius\n        });\n      };\n\n      let posterSize;\n\n      if (typeof Storage !== 'undefined') {\n        posterSize = parseInt(localStorage.getItem('posterSize'), 10);\n      }\n\n      if (typeof posterSize !== 'number' || isNaN(posterSize)) {\n        posterSize = 188;\n      }\n\n      resizePosters(posterSize);\n      $('#posterSizeSlider').slider({\n        min: 75,\n        max: 250,\n        value: posterSize,\n\n        change(e, ui) {\n          if (typeof Storage !== 'undefined') {\n            localStorage.setItem('posterSize', ui.value);\n          }\n\n          resizePosters(ui.value);\n          $('.show-grid').isotope('layout');\n        }\n\n      });\n    }\n\n  },\n\n  beforeMount() {\n    // Wait for the next tick, so the component is rendered\n    this.$nextTick(() => {\n      $('#showTabs').tabs();\n    });\n  },\n\n  mounted() {\n    const {\n      $snotify,\n      stateLayout,\n      setConfig\n    } = this; // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter\n\n    $(document.body).on('click', '.resetsorting', () => {\n      $('table').trigger('filterReset');\n    }); // Handle filtering in the poster layout\n\n    $(document.body).on('input', '#filterShowName', lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(() => {\n      $('.show-grid').isotope({\n        filter() {\n          const name = $(this).attr('data-name').toLowerCase();\n          return name.includes($('#filterShowName').val().toLowerCase());\n        }\n\n      });\n    }, 500));\n    $(document.body).on('change', '#postersort', function () {\n      $('.show-grid').isotope({\n        sortBy: $(this).val()\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#postersortdirection', function () {\n      $('.show-grid').isotope({\n        sortAscending: $(this).val() === '1'\n      });\n      $.get($(this).find('option[value=' + $(this).val() + ']').attr('data-sort'));\n    });\n    $(document.body).on('change', '#showRootDir', function () {\n      _api__WEBPACK_IMPORTED_MODULE_2__[\"api\"].patch('config/main', {\n        selectedRootIndex: parseInt($(this).val(), 10)\n      }).then(response => {\n        console.info(response);\n        window.location.reload();\n      }).catch(error => {\n        console.info(error);\n      });\n    });\n    const imgLazyLoad = new LazyLoad({\n      // eslint-disable-line no-undef\n      // Example of options object -> see options section\n      threshold: 500\n    });\n\n    const initializePage = () => {\n      // Reset the layout for the activated tab (when using ui tabs)\n      $('#showTabs').tabs({\n        activate() {\n          $('.show-grid').isotope('layout');\n        }\n\n      }); // This needs to be refined to work a little faster.\n\n      $('.progressbar').each(function () {\n        const percentage = $(this).data('progress-percentage');\n        const classToAdd = percentage === 100 ? 100 : percentage > 80 ? 80 : percentage > 60 ? 60 : percentage > 40 ? 40 : 20;\n        $(this).progressbar({\n          value: percentage\n        });\n\n        if ($(this).data('progress-text')) {\n          $(this).append('<div class=\"progressbarText\" title=\"' + $(this).data('progress-tip') + '\">' + $(this).data('progress-text') + '</div>');\n        }\n\n        $(this).find('.ui-progressbar-value').addClass('progress-' + classToAdd);\n      });\n      $('img#network').on('error', function () {\n        $(this).parent().text($(this).attr('alt'));\n        $(this).remove();\n      });\n      $('#showListTableSeries:has(tbody tr), #showListTableAnime:has(tbody tr)').tablesorter({\n        debug: false,\n        sortList: [[7, 1], [2, 0]],\n        textExtraction: function () {\n          return {\n            0(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            1(node) {\n              return $(node).find('time').attr('datetime');\n            },\n\n            // eslint-disable-line brace-style\n            3(node) {\n              return $(node).find('span').prop('title').toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            4(node) {\n              return $(node).find('a[data-indexer-name]').attr('data-indexer-name');\n            },\n\n            // eslint-disable-line brace-style\n            5(node) {\n              return $(node).find('span').text().toLowerCase();\n            },\n\n            // eslint-disable-line brace-style\n            6(node) {\n              return $(node).find('span:first').text();\n            },\n\n            // eslint-disable-line brace-style\n            7(node) {\n              return $(node).data('show-size');\n            },\n\n            // eslint-disable-line brace-style\n            8(node) {\n              return $(node).find('img').attr('alt');\n            },\n\n            // eslint-disable-line brace-style\n            10(node) {\n              return $(node).find('img').attr('alt');\n            } // eslint-disable-line brace-style\n\n\n          };\n        }(),\n        widgets: ['saveSort', 'zebra', 'stickyHeaders', 'filter', 'columnSelector'],\n        headers: {\n          0: {\n            sorter: 'realISODate'\n          },\n          1: {\n            sorter: 'realISODate'\n          },\n          2: {\n            sorter: 'showNames'\n          },\n          4: {\n            sorter: 'text'\n          },\n          5: {\n            sorter: 'quality'\n          },\n          6: {\n            sorter: 'eps'\n          },\n          7: {\n            sorter: 'digit'\n          },\n          8: {\n            filter: 'parsed'\n          },\n          10: {\n            filter: 'parsed'\n          }\n        },\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          filter_functions: {\n            // eslint-disable-line camelcase\n            5(e, n, f) {\n              // eslint-disable-line complexity\n              let test = false;\n              const pct = Math.floor(n % 1 * 1000);\n\n              if (f === '') {\n                test = true;\n              } else {\n                let result = f.match(/(<|<=|>=|>)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[1] === '<') {\n                    if (pct < parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '<=') {\n                    if (pct <= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>=') {\n                    if (pct >= parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  } else if (result[1] === '>') {\n                    if (pct > parseInt(result[2], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(\\d+)\\s(-|to)\\s+(\\d+)/i);\n\n                if (result) {\n                  if (result[2] === '-' || result[2] === 'to') {\n                    if (pct >= parseInt(result[1], 10) && pct <= parseInt(result[3], 10)) {\n                      test = true;\n                    }\n                  }\n                }\n\n                result = f.match(/(=)?\\s?(\\d+)\\s?(=)?/i);\n\n                if (result) {\n                  if (result[1] === '=' || result[3] === '=') {\n                    if (parseInt(result[2], 10) === pct) {\n                      test = true;\n                    }\n                  }\n                }\n\n                if (!isNaN(parseFloat(f)) && isFinite(f)) {\n                  if (parseInt(f, 10) === pct) {\n                    test = true;\n                  }\n                }\n              }\n\n              return test;\n            }\n\n          },\n          columnSelector_mediaquery: false // eslint-disable-line camelcase\n\n        },\n        sortStable: true,\n        sortAppend: [[2, 0]]\n      }).bind('sortEnd', () => {\n        imgLazyLoad.handleScroll();\n      }).bind('filterEnd', () => {\n        imgLazyLoad.handleScroll();\n      });\n      $('.show-grid').imagesLoaded(() => {\n        this.initializePosterSizeSlider();\n        $('.loading-spinner').hide();\n        $('.show-grid').show().isotope({\n          itemSelector: '.show-container',\n          sortBy: stateLayout.posterSortby,\n          sortAscending: stateLayout.posterSortdir,\n          layoutMode: 'masonry',\n          masonry: {\n            isFitWidth: true\n          },\n          getSortData: {\n            name(itemElem) {\n              const name = $(itemElem).attr('data-name') || '';\n              return (stateLayout.sortArticle ? name : name.replace(/^((?:The|A|An)\\s)/i, '')).toLowerCase();\n            },\n\n            network: '[data-network]',\n\n            date(itemElem) {\n              const date = $(itemElem).attr('data-date');\n              return date.length && parseInt(date, 10) || Number.POSITIVE_INFINITY;\n            },\n\n            progress(itemElem) {\n              const progress = $(itemElem).attr('data-progress');\n              return progress.length && parseInt(progress, 10) || Number.NEGATIVE_INFINITY;\n            },\n\n            indexer(itemElem) {\n              const indexer = $(itemElem).attr('data-indexer');\n\n              if (indexer === undefined) {\n                return Number.NEGATIVE_INFINITY;\n              }\n\n              return indexer.length && parseInt(indexer, 10) || Number.NEGATIVE_INFINITY;\n            }\n\n          }\n        }).on('layoutComplete arrangeComplete removeComplete', () => {\n          imgLazyLoad.update();\n          imgLazyLoad.handleScroll();\n        }); // When posters are small enough to not display the .show-details\n        // table, display a larger poster when hovering.\n\n        let posterHoverTimer = null;\n        $('.show-container').on('mouseenter', function () {\n          const poster = $(this);\n\n          if (poster.find('.show-details').css('display') !== 'none') {\n            return;\n          }\n\n          posterHoverTimer = setTimeout(() => {\n            posterHoverTimer = null;\n            $('#posterPopup').remove();\n            const popup = poster.clone().attr({\n              id: 'posterPopup'\n            });\n            const origLeft = poster.offset().left;\n            const origTop = poster.offset().top;\n            popup.css({\n              position: 'absolute',\n              margin: 0,\n              top: origTop,\n              left: origLeft\n            });\n            popup.find('.show-details').show();\n            popup.on('mouseleave', function () {\n              $(this).remove();\n            });\n            popup.css({\n              zIndex: '9999'\n            });\n            popup.appendTo('body');\n            const height = 438;\n            const width = 250;\n            let newTop = origTop + poster.height() / 2 - height / 2;\n            let newLeft = origLeft + poster.width() / 2 - width / 2; // Make sure the popup isn't outside the viewport\n\n            const margin = 5;\n            const scrollTop = $(window).scrollTop();\n            const scrollLeft = $(window).scrollLeft();\n            const scrollBottom = scrollTop + $(window).innerHeight();\n            const scrollRight = scrollLeft + $(window).innerWidth();\n\n            if (newTop < scrollTop + margin) {\n              newTop = scrollTop + margin;\n            }\n\n            if (newLeft < scrollLeft + margin) {\n              newLeft = scrollLeft + margin;\n            }\n\n            if (newTop + height + margin > scrollBottom) {\n              newTop = scrollBottom - height - margin;\n            }\n\n            if (newLeft + width + margin > scrollRight) {\n              newLeft = scrollRight - width - margin;\n            }\n\n            popup.animate({\n              top: newTop,\n              left: newLeft,\n              width: 250,\n              height: 438\n            });\n          }, 300);\n        }).on('mouseleave', () => {\n          if (posterHoverTimer !== null) {\n            clearTimeout(posterHoverTimer);\n          }\n        });\n        imgLazyLoad.update();\n        imgLazyLoad.handleScroll();\n      });\n      $('#popover').popover({\n        placement: 'bottom',\n        html: true,\n        // Required if content has HTML\n        content: '<div id=\"popover-target\"></div>'\n      }).on('shown.bs.popover', () => {\n        // Bootstrap popover event triggered when the popover opens\n        // call this function to copy the column selection code into the popover\n        $.tablesorter.columnSelector.attachTo($('#showListTableSeries'), '#popover-target');\n\n        if (stateLayout.animeSplitHome) {\n          $.tablesorter.columnSelector.attachTo($('#showListTableAnime'), '#popover-target');\n        }\n      });\n      $('#poster-container').sortable({\n        appendTo: document.body,\n        axis: 'y',\n        items: '> .show-grid',\n        scroll: false,\n        tolerance: 'pointer',\n        helper: 'clone',\n        handle: 'button.move-show-list',\n        cancel: '',\n\n        sort(event, ui) {\n          const draggedItem = $(ui.item);\n          const margin = 1.5;\n\n          if (ui.position.top !== ui.originalPosition.top) {\n            if (ui.position.top > ui.originalPosition.top * margin) {\n              // Move to bottom\n              setTimeout(() => {\n                $(draggedItem).appendTo('#poster-container');\n                return false;\n              }, 400);\n            }\n\n            if (ui.position.top < ui.originalPosition.top / margin) {\n              // Move to top\n              setTimeout(() => {\n                $(draggedItem).prependTo('#poster-container');\n                return false;\n              }, 400);\n            }\n          }\n        },\n\n        async update(event) {\n          const showListOrder = $(event.target.children).map((index, el) => {\n            return $(el).data('list');\n          });\n          const layout = {\n            show: {\n              showListOrder: showListOrder.toArray()\n            }\n          };\n\n          try {\n            await setConfig({\n              section: 'main',\n              config: {\n                layout\n              }\n            });\n            $snotify.success('Saved Home poster list type order', 'Saved', {\n              timeout: 5000\n            });\n          } catch (error) {\n            $snotify.error('Error while trying to save home poster list type order', 'Error');\n          }\n        }\n\n      });\n    }; // END initializePage()\n    // Vue Stuff (prevent race condition issues)\n\n\n    const unwatch = this.$watch('config.rootDirs', () => {\n      unwatch();\n      const {\n        config\n      } = this;\n      const {\n        rootDirs,\n        selectedRootIndex\n      } = config;\n\n      if (rootDirs) {\n        const backendDirs = rootDirs.slice(1);\n\n        if (backendDirs.length >= 2) {\n          this.$nextTick(() => {\n            $('#showRoot').show();\n            const item = ['All Folders'];\n            const rootDirOptions = item.concat(backendDirs);\n            $.each(rootDirOptions, (i, item) => {\n              $('#showRootDir').append($('<option>', {\n                value: i - 1,\n                text: item\n              }));\n            });\n            $('select#showRootDir').prop('selectedIndex', selectedRootIndex + 1);\n          });\n        } else {\n          $('#showRoot').hide();\n        }\n      }\n    });\n    window.addEventListener('load', initializePage, {\n      once: true\n    });\n  }\n\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/home.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),