vueify start of showheader #5087

OmgImAlexis · 2018-08-30T03:41:51Z

This converts a majority of the showheader.mako to Vue.

The two props are used to render the component dynamically without needing to worry about the query params for example when testing or when the "show selector" changes.

Signed-off-by: Alexis Tyler <[email protected]>

themes-default/slim/yarn.lock

Signed-off-by: Alexis Tyler <[email protected]>

OmgImAlexis · 2018-08-30T14:10:14Z

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

            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() {
+        document.addEventListener('show.bs.collapse', function() {


There's a good chance this is broken.

I suggest:

document.querySelectorAll('.collapse.toggle').forEach(element => { element.addEventListener('hide.bs.collapse', function() { // on hide }); element.addEventListener('show.bs.collapse', function() { // on show }); ));

And to test this you need to disable Show all seasons in General Config -> Interface.

sharkykh

I'm not done, but you can start with these...

sharkykh · 2018-08-30T15:10:28Z

themes-default/slim/views/partials/showheader.mako

-                            % endif
+                            <template v-if="config.subtitles.enabled">
+                                <tr><td class="showLegend">Subtitles: </td><td><img :src="'images/' + (show.config.subtitlesEnabled ? 'yes' : 'no') + '16.png'" :alt="show.config.subtitlesEnabled ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            </template>
                            <tr><td class="showLegend">Season Folders: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" alt="${("N", "Y")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" width="16" height="16" /></td></tr>


<tr><td class="showLegend">Season Folders: </td><td><img :src="'images/' + ((show.config.seasonFolders || config.namingForceFolders) ? 'yes' : 'no') + '16.png'" :alt="(show.config.seasonFolders || config.namingForceFolders) ? 'Y' : 'N'" width="16" height="16" /></td></tr>

Couldn't remember where namingForceFolders was.

I generally just do a search for app.VAR_NAME in the codebase and look for medusa/server/api/v2/config.py or open up that file and look for the variable.

Btw an || doesn't need () around it in a ternary statement.

((show.config.seasonFolders || config.namingForceFolders) ? 'yes' : 'no')

vs

(show.config.seasonFolders || config.namingForceFolders ? 'yes' : 'no')

sharkykh · 2018-08-30T15:12:43Z

themes-default/slim/views/partials/showheader.mako

@@ -152,7 +136,7 @@
            <div class="row">
                <!-- Show Summary -->
                <div id="summary" class="col-md-12">
-                    <div id="show-summary" class="${'summaryFanArt' if app.FANART_BACKGROUND else ''} col-lg-9 col-md-8 col-sm-8 col-xs-12">
+                    <div id="show-summary" :class="[{ summaryFanArt: config.fanArtBackground }, 'col-lg-9', 'col-md-8', 'col-sm-8', 'col-xs-12']">


config.fanartBackground
Lowercase a.

sharkykh · 2018-08-30T15:14:46Z

themes-default/slim/views/partials/showheader.mako

                 % if xem_numbering or xem_absolute_numbering:
                     <app-link href="http://thexem.de/search?q=${show.name | h}" title="http://thexem.de/search?q-${show.name | h}">
                         <img alt="[xem]" height="16" width="16" src="images/xem.png" style="margin-top: -1px; vertical-align:middle;"/>
                     </app-link>
                 % endif
-                     <app-link href="https://fanart.tv/series/${show.indexerid}" title="https://fanart.tv/series/${show.name | h}"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
+                    ##  @TODO: Is this meant to use show.title for title but show.id[show.indexer] for href?
+                    <app-link :href="'https://fanart.tv/series/' + show.id[show.indexer]" :title="'https://fanart.tv/series/' + show.title"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>


show.id[show.indexer] for both.

I think fanart.tv only supports TVDB ids so it should only be shown for shows that have a TVDB id

The id could possibly be in show.externals for non-TVDB shows, but that's not available through the API right now...

sharkykh · 2018-08-30T15:21:12Z

themes-default/slim/views/partials/showheader.mako

-                 <app-link href="${indexerApi(show.indexer).config['show_url']}${show.indexerid}" title="${indexerApi(show.indexer).config["show_url"] + str(show.indexerid)}">
-                     <img alt="${indexerApi(show.indexer).name | h}" height="16" width="16" src="images/${indexerApi(show.indexer).config["icon"]}" style="margin-top: -1px; vertical-align:middle;"/>
-                 </app-link>
+                    ## @TODO: What is this?


The link to the show on the indexer website.

sharkykh · 2018-08-30T15:23:00Z

themes-default/slim/views/partials/showheader.mako

@@ -10,64 +10,47 @@
 <%namespace file="/inc_defs.mako" import="renderQualityPill"/>

 <div class="row">
-    <div id="showtitle" class="col-lg-12" data-showname="${show.name | h}">
+    <div id="showtitle" class="col-lg-12" :data-showname="show.title">


Can't find any usage for data-showname (or data('showname')) in the code.
Can probably be removed.
Scratch that:
https://github.com/pymedusa/Medusa/blob/feature/vueify-showheader/themes-default/slim/views/vue-components/sub-menu.mako#L78
Maybe we can use something else.

Shall I skip this for now? I could add a @TODO comment.

Sure, go ahead with a @TODO.

sharkykh · 2018-08-30T15:29:51Z

themes-default/slim/views/partials/showheader.mako

        <div>
-            <h1 class="title" data-indexer-name="${show.indexer_name}" data-series-id="${show.indexerid}" id="scene_exception_${show.indexerid}">
-                <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.indexerid}" class="snatchTitle">${show.name | h}</app-link>
+            <h1 class="title" :data-indexer-name="show.indexer" :data-series-id="show.id[show.indexer]" :id="'scene_exception_' + show.id[show.indexer]">


:data-indexer-name="show.indexer" :data-series-id="show.id[show.indexer]" :id="'scene_exception_' + show.id[show.indexer]"

As far as I can tell, you can remove these three props.
The first two are used in scene-exceptions-tooltip.js, however the file isn't imported anywhere ATM.
That file is used to put a 'qtip' tooltip on the show title, that lists the show's scene names.
If we want that, we should convert that to Vue in a separate PR.

If we want that, we should convert that to Vue in a separate PR.

Sounds good.

sharkykh · 2018-08-30T15:35:10Z

themes-default/slim/views/partials/showheader.mako

-            % if not app.DISPLAY_SHOW_SPECIALS and season_special:
-                <% lastSeason = season_results.pop(-1) %>
-            % endif
+        <template v-if="$route.name !== 'snatchSelection' && show.seasons && show.seasons.length >= 1">


Unless I'm reading this wrong,
you can do without the <template> wrapper, and just put the v-if on the next element?

sharkykh · 2018-08-30T15:36:01Z

themes-default/slim/views/partials/showheader.mako

-                            % endif
-                        % endfor
-                    % endif
+                        <template v-if="show.seasons && show.seasons.length >= 13">


You already checked for show.seasons above, so you know it's not undefined / null.
Plus, same note as above, no need for the <template> wrapper, put it on the <select> element,
or better yet, the <span> element it's currently in.
As long as you don't use <element v-for="..." v-if="..."> you should be good to go.

I could be misreading that, but to me it looks like you changed the logic here:

len(season_results) > 14

is not the same as

show.seasons.length >= 13

14 > 14 : false 14 >= 13 : true

So it should be >= 15. Will change.

sharkykh · 2018-08-30T15:38:23Z

themes-default/slim/views/partials/showheader.mako

+                                </option>
+                            </select>
+                        </template>
+                        <template v-else-if="show.seasons && show.seasons.length >= 1">


You already checked for show.seasons above, so you know it's not undefined / null.
If you use my previous suggestion to use <span>, then you can also drop the <template> wrapper, and just put the if on the <span> element.

Even if you have to add another empty <span v-else></span> element, I still feel like it's much more readable.

sharkykh · 2018-08-30T16:40:51Z

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

            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() {
+        document.addEventListener('show.bs.collapse', function() {


I suggest:

document.querySelectorAll('.collapse.toggle').forEach(element => { element.addEventListener('hide.bs.collapse', function() { // on hide }); element.addEventListener('show.bs.collapse', function() { // on show }); ));

And to test this you need to disable Show all seasons in General Config -> Interface.

themes-default/slim/views/partials/showheader.mako

sharkykh · 2018-08-30T16:52:30Z

themes-default/slim/views/partials/showheader.mako

+                    >
+                        <span :style="{ width: (Number(show.rating.imdb.rating) * 12) + '%' }"></span>
+                    </span>
+                    <template v-if="!show.rating.imdb">


<template v-if="!show.rating.imdb">

is not the same as

% if not show.imdb_id:

I think you thought it was

% if not show.imdb_info:

It should probably be something like:

<template v-if="!show.id.imdb">

sharkykh · 2018-08-30T17:00:09Z

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

-            });
+        // Selects all visible episode checkboxes
+        document.addEventListener('click', event => {
+            if (event.target && event.target.className.includes('clearAll')) {


That class is incorrect, should be seriesCheck.

sharkykh · 2018-08-30T17:01:27Z

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

+                });
+                [...document.getElementsByClassName('seasonCheck')].filter(isVisible).forEach(element => {
+                    element.checked = true;
+                });


You could use this instead of the two loops, but it's probably going to be replaced later..

[...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => { element.checked = true; });

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

sharkykh · 2018-08-30T17:08:46Z

themes-default/slim/views/partials/showheader.mako

-                            % endif
-                        % endfor
-                    % endif
+                        <template v-if="show.seasons && show.seasons.length >= 13">


I could be misreading that, but to me it looks like you changed the logic here:

len(season_results) > 14

is not the same as

show.seasons.length >= 13

14 > 14 : false 14 >= 13 : true

…wheader

OmgImAlexis · 2018-09-06T00:52:54Z

@sharkykh I ran git merge origin/develop and then it said I had to update the vendors so I re-ran yarn dev. Hope that's right.

sharkykh · 2018-09-06T04:41:10Z

Yes that is correct.
You had to do that because I edited snatch-selection.vue on #5107, and it had a conflict.

yarn install ; yarn dev after a merge or rebase is my go-to action.

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

sharkykh · 2018-09-06T05:50:45Z

themes-default/slim/views/partials/showheader.mako

@@ -24,7 +24,10 @@
        <div v-if="$route.name === 'snatchSelection'" id="show-specials-and-seasons" class="pull-right">
            <span class="h2footer display-specials">
                Manual search for:<br>
-                <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}" class="snatchTitle">{{ show.title }}</app-link> / Season {{ season }}<template v-if="episode"> Episode {{ episode }}</template>
+                <app-link
+                    href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}"


The href is still using Python values, change to:
:href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]"

sharkykh · 2018-09-06T05:50:46Z

themes-default/slim/views/partials/showheader.mako

+                <app-link
+                    href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}"
+                    class="snatchTitle"
+                    >{{ show.title }}</app-link> / Season {{ season }}<template v-if="episode && !$route.query.manual_search_type"> Episode {{ episode }}</template>


Probably should move $route.query.manual_search_type into a computed property, right?

In another PR. Should be fine for now.

Signed-off-by: Alexis Tyler <[email protected]>

- IMDB tooltip - Remove unused IMDB stars jQuery function - reflowLayout after `show` changes - Update load/resize event handlers

OmgImAlexis · 2018-09-08T06:10:52Z

@sharkykh would you mind a last review and then merge?

OmgImAlexis · 2018-09-08T10:53:26Z

Should we add show_message to show.message in the show python dict?

sharkykh · 2018-09-08T13:50:57Z

Still a small bug. I think I may have created it.

2018-09-08 16:45:00 WARNING  TORNADO :: [6354111] 404 GET /images/null (127.0.0.1) 8.00ms

Looking into it now.

Should we add show_message to show.message in the show python dict?

👍 (in another PR since you want to merge this)

sharkykh · 2018-09-08T14:02:48Z

@OmgImAlexis No :) You're confusing the two PRs you have.
Already found and fixed it, it was my indexer icon code. Forgot a condition.
Will push in a minute..

OmgImAlexis added In progress Needs review Needs testing Requires testing to make sure it's working as intended Frontend labels Aug 30, 2018

OmgImAlexis added this to the 0.2.9 milestone Aug 30, 2018

OmgImAlexis requested a review from sharkykh August 30, 2018 03:41

vueify start of showheader

10f1e44

Signed-off-by: Alexis Tyler <[email protected]>

OmgImAlexis force-pushed the feature/vueify-showheader branch from 96fc2fc to 10f1e44 Compare August 30, 2018 03:46

lint

2235194

This comment has been minimized.

Sign in to view

sharkykh reviewed Aug 30, 2018

View reviewed changes

themes-default/slim/yarn.lock Outdated Show resolved Hide resolved

OmgImAlexis added 3 commits August 30, 2018 22:35

rebuild themes

8d717d5

moved seasonEpisode to showheader and vueify

c96981b

vueify showheader summary

8e7af4b

Signed-off-by: Alexis Tyler <[email protected]>

OmgImAlexis mentioned this pull request Aug 30, 2018

Vueify #4058

Open

OmgImAlexis added 2 commits August 30, 2018 23:23

reflow page on show change and vueify hiding div

9d82908

lint

498b8ac

Signed-off-by: Alexis Tyler <[email protected]>

OmgImAlexis commented Aug 30, 2018

View reviewed changes

OmgImAlexis added Concluded and removed In progress labels Aug 30, 2018

This comment has been minimized.

Sign in to view

Fix subtitles in show-header

e3e9f2c

This comment has been minimized.

Sign in to view

sharkykh suggested changes Aug 30, 2018

View reviewed changes

OmgImAlexis added In progress and removed Concluded labels Aug 30, 2018

sharkykh suggested changes Aug 30, 2018

View reviewed changes

review

5fdafcf

OmgImAlexis added the Squash / Rebase label Sep 6, 2018

OmgImAlexis added 2 commits September 6, 2018 10:13

convert Default EP Status and fix snatch selection reverse/dedupeGenres

515d375

Merge remote-tracking branch 'origin/develop' into feature/vueify-sho…

72a629b

…wheader

fix season pack search showing episode

0db433e

sharkykh reviewed Sep 6, 2018

View reviewed changes

themes-default/slim/src/components/display-show.vue Show resolved Hide resolved

sharkykh reviewed Sep 6, 2018

View reviewed changes

review

9674927

Signed-off-by: Alexis Tyler <[email protected]>

OmgImAlexis added Concluded and removed Squash / Rebase In progress labels Sep 6, 2018

Rebuild

ffea063

sharkykh mentioned this pull request Sep 6, 2018

API: Change show.seasons structure #5121

Closed

sharkykh added 3 commits September 6, 2018 11:41

Fix snatch selection:

e6eb779

- IMDB tooltip - Remove unused IMDB stars jQuery function - reflowLayout after `show` changes - Update load/resize event handlers

vueify link to show on indexer

ae5b7db

Fix Display Specials not showing up

106497d

Merge branch 'develop' into feature/vueify-showheader

6354111

This comment has been minimized.

Sign in to view

Fix images/null warning

ba08733

Update changelog

3cbe2f0

sharkykh approved these changes Sep 8, 2018

View reviewed changes

OmgImAlexis merged commit 4ff8f90 into develop Sep 8, 2018

OmgImAlexis deleted the feature/vueify-showheader branch September 8, 2018 14:13

sharkykh mentioned this pull request Sep 9, 2018

[WIP] Change Series JSON data structure #5178

Closed

3 tasks

vueify start of showheader #5087

vueify start of showheader #5087

Conversation

OmgImAlexis commented Aug 30, 2018 • edited Loading

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

sharkykh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sharkykh Aug 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sharkykh Aug 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OmgImAlexis Aug 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OmgImAlexis commented Sep 6, 2018

sharkykh commented Sep 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OmgImAlexis commented Sep 8, 2018

OmgImAlexis commented Sep 8, 2018

sharkykh commented Sep 8, 2018 • edited Loading

This comment has been minimized.

sharkykh commented Sep 8, 2018

OmgImAlexis commented Aug 30, 2018 •

edited

Loading

sharkykh Aug 30, 2018 •

edited

Loading

sharkykh Aug 30, 2018 •

edited

Loading

OmgImAlexis Aug 30, 2018 •

edited

Loading

sharkykh commented Sep 6, 2018 •

edited

Loading

sharkykh commented Sep 8, 2018 •

edited

Loading