From 986394a80195394b49f1ff62ecc8cccaad573076 Mon Sep 17 00:00:00 2001
From: P0psicles <rogier@headshots.nl>
Date: Mon, 16 Dec 2019 11:29:37 +0100
Subject: [PATCH 1/2] Fixed dragging and saving Anime / Series list handles in
 Home - Poster layout * Also shows notify now.

---
 CHANGELOG.md                                |  1 +
 themes-default/slim/src/components/home.vue | 26 +++++++++++++--------
 themes-default/slim/views/home.mako         |  1 +
 themes/dark/assets/js/medusa-runtime.js     |  2 +-
 themes/dark/templates/home.mako             |  1 +
 themes/light/assets/js/medusa-runtime.js    |  2 +-
 themes/light/templates/home.mako            |  1 +
 7 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6107cb0a1b..6913b120b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 #### Fixes
 - Fixed season pack downloads occurring even if not needed ([#7472](https://github.com/pymedusa/Medusa/pull/7472))
 - Fixed changing default indexer language and initial indexer in config-general ([#7478](https://github.com/pymedusa/Medusa/pull/7478))
+- Fixed dragging and saving Anime / Series list handles in Home - Poster layout ([#????](https://github.com/pymedusa/Medusa/pull/????))
 
 -----
 
diff --git a/themes-default/slim/src/components/home.vue b/themes-default/slim/src/components/home.vue
index 2c0f47738f..93525d4801 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 { config, stateLayout, setConfig } = this;
+        const { $snotify, config, 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');
@@ -450,7 +450,7 @@ export default {
                         }
                     }
                 },
-                update(event) {
+                async update(event) {
                     const showListOrder = $(event.target.children).map((index, el) => {
                         return $(el).data('list');
                     });
@@ -460,14 +460,20 @@ export default {
                             showListOrder: showListOrder.toArray()
                         }
                     };
-                    const section = 'layout';
-                    setConfig({ section, config: { layout } })
-                        .then(response => {
-                            console.info(response);
-                        })
-                        .catch(error => {
-                            console.error(error);
-                        });
+
+                    try {
+                        await setConfig({ section: 'main', config: { layout } });
+                        $snotify.success(
+                            'Saved Home poster list type order',
+                            'Saved',
+                            { timeout: 5000 }
+                        );
+                    } catch (error) {
+                        $snotify.error(
+                            'Error while trying to save home poster list type order',
+                            'Error'
+                        );
+                    }
                 }
             });
         }; // END initializePage()
diff --git a/themes-default/slim/views/home.mako b/themes-default/slim/views/home.mako
index 441969b491..6ca73eb77a 100644
--- a/themes-default/slim/views/home.mako
+++ b/themes-default/slim/views/home.mako
@@ -14,6 +14,7 @@
 <script type="text/x-template" id="home-template">
 <div>
     <backstretch :slug="config.randomShowSlug"></backstretch>
+    <vue-snotify></vue-snotify>
 
     <div class="row" v-if="layout === 'poster'">
         <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 pull-right">
diff --git a/themes/dark/assets/js/medusa-runtime.js b/themes/dark/assets/js/medusa-runtime.js
index 8ac4e0dd81..e10a15adc2 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 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\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_4__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"mapActions\"])({\n    setLayout: 'setLayout',\n    setConfig: 'setConfig'\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      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_2___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_3__[\"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        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          const section = 'layout';\n          setConfig({\n            section,\n            config: {\n              layout\n            }\n          }).then(response => {\n            console.info(response);\n          }).catch(error => {\n            console.error(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!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\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_4__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"mapActions\"])({\n    setLayout: 'setLayout',\n    setConfig: 'setConfig'\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_2___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_3__[\"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!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
diff --git a/themes/dark/templates/home.mako b/themes/dark/templates/home.mako
index 441969b491..6ca73eb77a 100644
--- a/themes/dark/templates/home.mako
+++ b/themes/dark/templates/home.mako
@@ -14,6 +14,7 @@
 <script type="text/x-template" id="home-template">
 <div>
     <backstretch :slug="config.randomShowSlug"></backstretch>
+    <vue-snotify></vue-snotify>
 
     <div class="row" v-if="layout === 'poster'">
         <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 pull-right">
diff --git a/themes/light/assets/js/medusa-runtime.js b/themes/light/assets/js/medusa-runtime.js
index 8ac4e0dd81..e10a15adc2 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 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\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_4__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"mapActions\"])({\n    setLayout: 'setLayout',\n    setConfig: 'setConfig'\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      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_2___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_3__[\"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        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          const section = 'layout';\n          setConfig({\n            section,\n            config: {\n              layout\n            }\n          }).then(response => {\n            console.info(response);\n          }).catch(error => {\n            console.error(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!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ \"./src/components/helpers/index.js\");\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\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_4__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"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: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__[\"mapActions\"])({\n    setLayout: 'setLayout',\n    setConfig: 'setConfig'\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_2___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_3__[\"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!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
diff --git a/themes/light/templates/home.mako b/themes/light/templates/home.mako
index 441969b491..6ca73eb77a 100644
--- a/themes/light/templates/home.mako
+++ b/themes/light/templates/home.mako
@@ -14,6 +14,7 @@
 <script type="text/x-template" id="home-template">
 <div>
     <backstretch :slug="config.randomShowSlug"></backstretch>
+    <vue-snotify></vue-snotify>
 
     <div class="row" v-if="layout === 'poster'">
         <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 pull-right">

From 022027c739c72477df39d85b183f9258a1630b64 Mon Sep 17 00:00:00 2001
From: p0ps <p0psicles@users.noreply.github.com>
Date: Mon, 16 Dec 2019 11:36:36 +0100
Subject: [PATCH 2/2] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6913b120b3..1de6b74122 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Fix Emby notifier error on Python 3 ([#7497](https://github.com/pymedusa/Medusa/pull/7497))
 - Fix more qBittorrent authentication bugs ([#7501](https://github.com/pymedusa/Medusa/pull/7501))
 - Fix `torrents.verifyCert` config patch ignored warning ([#7501](https://github.com/pymedusa/Medusa/pull/7501))
+- Fix dragging and saving Anime / Series list handles in Home - Poster layout ([#7502](https://github.com/pymedusa/Medusa/pull/7502))
 
 -----
 
@@ -21,7 +22,6 @@
 #### Fixes
 - Fixed season pack downloads occurring even if not needed ([#7472](https://github.com/pymedusa/Medusa/pull/7472))
 - Fixed changing default indexer language and initial indexer in config-general ([#7478](https://github.com/pymedusa/Medusa/pull/7478))
-- Fixed dragging and saving Anime / Series list handles in Home - Poster layout ([#????](https://github.com/pymedusa/Medusa/pull/????))
 
 -----