vueify start of showheader

themes-default/slim/package.json

@@ -57,6 +57,7 @@
     "gulp-changed": "3.2.0",
     "gulp-imagemin": "4.1.0",
     "imagemin-pngquant": "6.0.0",
+    "is-visible": "2.2.0",
     "jquery": "3.3.1",
     "lodash": "4.17.10",
     "mini-css-extract-plugin": "0.4.2",
@@ -74,6 +75,7 @@
     "vue-meta": "1.5.3",
     "vue-native-websocket": "2.0.9",
     "vue-router": "3.0.1",
+    "vue-scrollto": "2.11.0",
     "vue-snotify": "3.2.1",
     "vue-template-compiler": "2.5.17",
     "vue-truncate-collapsed": "2.1.0",

themes-default/slim/src/api.js

@@ -8,7 +8,7 @@ const apiKey = document.body.getAttribute('api-key');
  */
 const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
@@ -20,7 +20,7 @@ const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
  */
 const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/api/v1/' + apiKey + '/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
@@ -32,7 +32,7 @@ const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
  */
 const api = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/api/v2/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',

themes-default/slim/src/components/display-show.vue

@@ -1,4 +1,6 @@
 <script>
+import { isVisible } from 'is-visible';
+import { scrollTo } from 'vue-scrollto';
 import { mapState, mapGetters } from 'vuex';
 import { api, apiRoute } from '../api';
 import AppLink from './app-link.vue';
@@ -23,6 +25,25 @@ export default {
             titleTemplate: '%s | Medusa'
         };
     },
+    props: {
+        /**
+         * Show id
+         */
+        showId: {
+            type: Number
+        },
+        /**
+         * Show indexer
+         */
+        showIndexer: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            jumpToSeason: 'jump'
+        };
+    },
     computed: {
         ...mapState({
             shows: state => state.shows.shows
@@ -31,10 +52,10 @@ export default {
             'getShowById'
         ]),
         indexer() {
-            return this.$route.query.indexername;
+            return this.showIndexer || this.$route.query.indexername;
         },
         id() {
-            return this.$route.query.seriesid;
+            return this.showId || this.$route.query.seriesid;
         },
         show() {
             const { indexer, id, getShowById, shows, $store } = this;
@@ -49,6 +70,12 @@ export default {
                 return defaults.show;
             }
 
+            // Not detailed
+            if (!show.seasons) {
+                $store.dispatch('getShow', { id, indexer, detailed: true });
+                return getShowById({ indexer, id });
+            }
+
             return show;
         }
     },
@@ -62,13 +89,17 @@ export default {
             showHideRows
         } = this;
 
-        $(window).on('resize', () => {
-            this.reflowLayout();
+        this.$watch('show', () => {
+            this.$nextTick(() => this.reflowLayout());
         });
 
-        window.addEventListener('load', () => {
-            this.reflowLayout();
+        ['load', 'resize'].map(event => {
+            return window.addEventListener(event, () => {
+                this.reflowLayout();
+            });
+        });
 
+        window.addEventListener('load', () => {
             $.ajaxEpSearch({
                 colorRow: true
             });
@@ -78,17 +109,6 @@ export default {
             $.ajaxEpRedownloadSubtitle();
         });
 
-        $(document.body).on('change', '#seasonJump', event => {
-            const id = $('#seasonJump option:selected').val();
-            if (id && id !== 'jump') {
-                const season = $('#seasonJump option:selected').data('season');
-                $('html,body').animate({ scrollTop: $('[name="' + id.substring(1) + '"]').offset().top - 100 }, 'slow');
-                $('#collapseSeason-' + season).collapse('show');
-                location.hash = id;
-            }
-            $(event.currentTarget).val('jump');
-        });
-
         $(document.body).on('click', '#changeStatus', () => {
             const epArr = [];
             const status = $('#statusSelect').val();
@@ -158,24 +178,22 @@ export default {
             });
         });
 
-        // Selects all visible episode checkboxes.
-        $(document.body).on('click', '.seriesCheck', () => {
-            $('.epCheck:visible').each((index, element) => {
-                element.checked = true;
-            });
-            $('.seasonCheck:visible').each((index, element) => {
-                element.checked = true;
-            });
+        // Selects all visible episode checkboxes
+        document.addEventListener('click', event => {
+            if (event.target && event.target.className.includes('seriesCheck')) {
+                [...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => {
+                    element.checked = true;
+                });
+            }
         });
 
         // Clears all visible episode checkboxes and the season selectors
-        $(document.body).on('click', '.clearAll', () => {
-            $('.epCheck:visible').each((index, element) => {
-                element.checked = false;
-            });
-            $('.seasonCheck:visible').each((index, element) => {
-                element.checked = false;
-            });
+        document.addEventListener('click', event => {
+            if (event.target && event.target.className.includes('clearAll')) {
+                [...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => {
+                    element.checked = false;
+                });
+            }
         });
 
         // Show/hide different types of rows when the checkboxes are changed
@@ -265,26 +283,23 @@ export default {
             $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');
         });
 
-        // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the
-        // Season to Show Episodes or Hide Episodes.
-        $('.collapse.toggle').on('hide.bs.collapse', function() {
-            const reg = /collapseSeason-(\d+)/g;
-            const result = reg.exec(this.id);
-            $('#showseason-' + result[1]).text('Show Episodes');
-            $('#season-' + result[1] + '-cols').addClass('shadow');
-        });
-        $('.collapse.toggle').on('show.bs.collapse', function() {
-            const reg = /collapseSeason-(\d+)/g;
-            const result = reg.exec(this.id);
-            $('#showseason-' + result[1]).text('Hide Episodes');
-            $('#season-' + result[1] + '-cols').removeClass('shadow');
-        });
-
-        // Generate IMDB stars
-        $('.imdbstars').each((index, element) => {
-            $(element).html($('<span/>').width($(element).text() * 12));
+        // Changes the button when clicked for collapsing/expanding the season to show/hide episodes
+        document.querySelectorAll('.collapse.toggle').forEach(element => {
+            element.addEventListener('hide.bs.collapse', () => {
+                // On hide
+                const reg = /collapseSeason-(\d+)/g;
+                const result = reg.exec(this.id);
+                $('#showseason-' + result[1]).text('Show Episodes');
+                $('#season-' + result[1] + '-cols').addClass('shadow');
+            });
+            element.addEventListener('show.bs.collapse', () => {
+                // On show
+                const reg = /collapseSeason-(\d+)/g;
+                const result = reg.exec(this.id);
+                $('#showseason-' + result[1]).text('Hide Episodes');
+                $('#season-' + result[1] + '-cols').removeClass('shadow');
+            });
         });
-        attachImdbTooltip(); // eslint-disable-line no-undef
 
         // Get the season exceptions and the xem season mappings.
         getSeasonSceneExceptions();
@@ -306,13 +321,18 @@ export default {
     },
     methods: {
         /**
-         * Moves summary background and checkbox controls
+         * Attaches imdb tool tip,
+         * moves summary background and checkbox controls
          */
         reflowLayout() {
+            console.debug('Reflowing layout');
+
             this.$nextTick(() => {
                 this.moveSummaryBackground();
                 this.movecheckboxControlsBackground();
             });
+
+            attachImdbTooltip(); // eslint-disable-line no-undef
         },
         /**
          * Adjust the summary background position and size on page load and resize
@@ -427,17 +447,17 @@ export default {
         // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.
         // Get the season exceptions and the xem season mappings.
         getSeasonSceneExceptions() {
-            const indexerName = document.querySelector('#indexer-name').value;
-            const seriesId = document.querySelector('#series-id').value;
-            if (!indexerName || !seriesId) {
+            const { indexer, id } = this;
+
+            if (!indexer || !id) {
                 console.warn('Unable to get season scene exceptions: Unknown series identifier');
                 return;
             }
-            const params = {
-                indexername: indexerName,
-                seriesid: seriesId
-            };
-            apiRoute.get('home/getSeasonSceneExceptions', { params }).then(response => {
+
+            apiRoute.get('home/getSeasonSceneExceptions', {
+                indexername: indexer,
+                seriesid: id
+            }).then(response => {
                 this.setSeasonSceneExceptions(response.data);
             }).catch(error => {
                 console.error('Error getting season scene exceptions', error);
@@ -504,6 +524,41 @@ export default {
                     $('#' + seasonNo + '-cols').show();
                 }
             });
+        },
+        toggleSpecials() {
+            this.$store.dispatch('setConfig', {
+                layout: {
+                    show: {
+                        specials: !this.config.layout.show.specials
+                    }
+                }
+            });
+        },
+        reverse(array) {
+            return array ? array.slice().reverse() : [];
+        },
+        dedupeGenres(genres) {
+            return genres ? [...new Set(genres.slice(0).map(genre => genre.replace('-', ' ')))] : [];
+        }
+    },
+    watch: {
+        jumpToSeason(season) {
+            // Don't jump until an option is selected
+            if (season !== 'jump') {
+                console.debug(`Jumping to ${season}`);
+
+                scrollTo(season, 100, {
+                    container: 'body',
+                    easing: 'ease-in',
+                    offset: -100
+                });
+
+                // Update URL hash
+                location.hash = season;
+
+                // Reset jump
+                this.jumpToSeason = 'jump';
+            }
         }
     }
 };

themes-default/slim/src/components/snatch-selection.vue

@@ -75,6 +75,12 @@ export default {
             $('#summaryBackground').height(height);
             $('#summaryBackground').offset({ top, left: 0 });
             $('#summaryBackground').show();
+        },
+        reverse(array) {
+            return array ? array.slice().reverse() : [];
+        },
+        dedupeGenres(genres) {
+            return genres ? [...new Set(genres.slice(0).map(genre => genre.replace('-', ' ')))] : [];
         }
     },
     mounted() {

themes-default/slim/src/store/modules/defaults.js

@@ -42,7 +42,7 @@ const state = {
         status: null,
         title: null,
         type: null,
-        year: null
+        year: {}
     }
 };