Re-wrote all of the movie component. Prevented loading poster on mobile, loading placeholders for text, moved http calls to seasonedAPI util file and all functions have been re-implemented

src/components/Movie.vue

@@ -1,269 +1,228 @@
 <template>
   <section class="movie">
-    <div class="movie__container" v-if="movieLoaded">
+
-      <header class="movie__header" :class="{'movie__header--page': type=='page'}" :style="{ 'background-image': 'url(' + movieBackdropSrc + ')' }">
+    <!-- HEADER w/ POSTER -->
-        <div class="movie__wrap movie__wrap--header" :class="{'movie__wrap--page': type=='page'}">
+    <header class="movie__header" :style="{ 'background-image': movie && backdrop !== null ? 'url(' + ASSET_URL + ASSET_SIZES[1] + backdrop + ')' : '' }">
+      <div class="movie__wrap movie__wrap--header">
         <figure class="movie__poster">
-            <img v-if="moviePosterSrc" class="movie__img" src="~assets/placeholder.png" v-img="moviePosterSrc">
+          <img v-if="movie && poster === null"
-            <img v-if="!moviePosterSrc" class="movies-item__img is-loaded" src="~assets/no-image.png">
+            class="movies-item__img is-loaded"
+            alt="movie poster image"
+            src="~assets/no-image.png">
+          <img v-else-if="poster === undefined"
+            class="movies-item__img grey"
+            alt="movie poster image">
+            <!-- src="~assets/placeholder.png"> -->
+          <img v-else
+            class="movies-item__img is-loaded"
+            alt="movie poster image"
+            :src="ASSET_URL + ASSET_SIZES[0] + poster">
         </figure>
+
         <div class="movie__title">
-            <h1 class="movie__title-text">
+          <h1>{{ title }}</h1>
-              {{ movie.title }}
-              <!-- <span>{{ movie.type }}</span> -->
-            </h1>
-            <span>
-            </span>
         </div>
       </div>
     </header>
+
+    <!-- Siderbar and movie info -->
     <div class="movie__main">
-        <div class="movie__wrap movie__wrap--main" :class="{'movie__wrap--page': type=='page'}">
+      <div class="movie__wrap movie__wrap--main">
-          <!-- <div class="movie__ratings">
+
-            <p>here</p>
+        <!-- SIDEBAR ACTIONS -->
-          </div> -->
+        <div class="movie__actions" v-if="movie">
-          <!-- <div class="movie__actions" v-if="userLoggedIn && favoriteChecked"> -->
-          <div class="movie__actions">
 
           <a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
-              <svg class="movie__actions-icon">
+            <svg class="movie__actions-icon"><use xlink:href="#iconExsits"></use></svg>
-                <use xlink:href="#iconExsits"></use>
-              </svg>
             <span class="movie__actions-text"> Already in plex &nbsp;🎉</span>
           </a>
           <a class="movie__actions-link" v-else="matched">
-              <svg class="movie__actions-icon">
+            <svg class="movie__actions-icon"><use xlink:href="#iconNot_exsits"></use></svg>
-                <use xlink:href="#iconNot_exsits"></use>
-              </svg>
             <span class="movie__actions-text"> Not in plex yet</span>
           </a>
 
           <a class="movie__actions-link" :class="{'active' : requested}" v-if="this.requested">
-              <svg class="movie__actions-icon">
+            <svg class="movie__actions-icon"><use xlink:href="#iconSent"></use></svg>
-                <use xlink:href="#iconSent"></use>
-              </svg>
             <span class="movie__actions-text"> Requested to be downloaded</span>
           </a>
           <a class="movie__actions-link" v-else="this.requested"  @click.prevent="sendRequest">
-              <svg class="movie__actions-icon" :class="{'waiting' : requested}">
+            <svg class="movie__actions-icon" :class="{'waiting' : requested}"><use xlink:href="#iconUnmatched"></use></svg>
-                <use xlink:href="#iconUnmatched"></use>
-              </svg>
             <span class="movie__actions-text"> Request to be downloaded?</span>
           </a>
 
-            <a class="movie__actions-link" @click="showTorrents=true" v-if="admin==='true'" :class="{'active' : showTorrents}">
+          <a class="movie__actions-link" @click="showTorrents=!showTorrents" v-if="admin==='true'" :class="{'active' : showTorrents}">
-              <svg class="movie__actions-icon">
+            <svg class="movie__actions-icon"><use xlink:href="#icon_torrents"></use></svg>
-                <use xlink:href="#icon_torrents"></use>
-              </svg>
             <span class="movie__actions-text"> Search for torrents</span>
           </a>
 
           <a class="movie__actions-link" @click.prevent="openTmdb">
-              <svg class="movie__actions-icon">
+            <svg class="movie__actions-icon"><use xlink:href="#icon_info"></use></svg>
-                <use xlink:href="#icon_info"></use>
-              </svg>
             <span class="movie__actions-text"> See more info</span>
           </a>
         </div>
+
+        <!-- Loading placeholder -->
+        <div class="movie__actions text-input__loading" v-else>
+          <div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)">
+            <div class="movie__actions-text text-input__loading--line" style="margin:4.4px; margin-left: -3px;"></div>
+          </div>
+        </div>
+
+
+        <!-- MOVIE INFO -->
         <div class="movie__info">
-            <div v-if="movie.summary" class="movie__description">
+          <div class="movie__description" v-if="movie"> {{ movie.overview }}</div>
-              {{ movie.summary }}
+
+          <!-- Loading placeholder -->
+          <div v-else class="movie__description">
+            <loading-placeholder :count="12" />
           </div>
-            <div class="movie__details">
+
-             <!--  <div v-if="movie.genres.length" class="movie__details-block">
+          <div class="movie__details" v-if="movie">
-                <h2 class="movie__details-title">
-                  Genres
-                </h2>
-                <div class="movie__details-text">
-                  {{ nestedDataToString(movie.genres) }}
-                </div>
-              </div> -->
             <div v-if="movie.year" class="movie__details-block">
               <h2 class="movie__details-title">Release Date</h2>
               <div class="movie__details-text">{{ movie.year }}</div>
             </div>
 
-               <!-- <div v-if="movie.score" class="movie__details-block">
+             <div v-if="movie.rank" class="movie__details-block">
               <h2 class="movie__details-title">Rating</h2>
-                <div class="movie__details-text">{{ rating }}</div>
+              <div class="movie__details-text">{{ movie.rank }}</div>
-              </div> -->
+            </div>
 
             <div v-if="movie.type == 'show'" class="movie__details-block">
               <h2 class="movie__details-title">Seasons</h2>
               <div class="movie__details-text">{{ movie.seasons }}</div>
             </div>
+
+            <div v-if="movie.genres" class="movie__details-block">
+              <h2 class="movie__details-title">Genres</h2>
+              <div class="movie__details-text">{{ nestedDataToString(movie.genres) }}</div>
             </div>
           </div>
 
-          <!-- <TableDemo class="movie__admin">This is it</TableDemo> -->
+        </div>
 
-          <div class="movie__admin" v-if="admin == 'true' && showTorrents">
+        <!-- TODO: change this classname, this is general  -->
-              <h2 class="movie__admin-title">torrents: {{ movie.title }}</h2>
+
-              <TorrentList :query="movie.title" :tmdb_id="movie.id"></TorrentList>
+        <div class="movie__admin" v-if="movie && movie.credits">
+          <h2 class="movie__details-title">Cast</h2>
+          <div style="display: flex; flex-wrap: wrap;">
+            <person v-for="cast in movie.credits.cast" :info="cast"
+              style="flex-basis: 0;"></person>
             </div>
         </div>
+
       </div>
+
+      <!-- TORRENT LIST -->
+      <TorrentList v-if="movie" :show="showTorrents" :query="title" :tmdb_id="id"
+                   :admin="admin"></TorrentList>
     </div>
   </section>
 </template>
 
 <script>
-import axios from 'axios'
 import storage from '../storage.js'
 import img from '../directives/v-image.js'
-import formatDate from '../directives/v-formatDate.js'
 import TorrentList from './TorrentList.vue'
+import Person from './Person.vue'
+
+import LoadingPlaceholder from './ui/LoadingPlaceholder.vue'
+
+import { getMovie, getShow, request } from '../seasonedAPI.js'
 
 export default {
-  props: ['id', 'type', 'mediaType'],
+  props: ['id', 'type'],
-  components: { TorrentList },
+  components: { TorrentList, Person, LoadingPlaceholder },
-  directives: {
+  directives: { img: img }, // TODO decide to remove or use
-    img: img,
-    formatDate: formatDate
-  },
   data(){
     return{
-      movie: {},
+      ASSET_URL: 'https://image.tmdb.org/t/p/',
-      movieLoaded: false,
+      ASSET_SIZES: ['w500', 'w780', 'original'],
-      moviePosterSrc: '',
+      movie: undefined,
-      movieBackdropSrc: '',
+      title: undefined,
+      poster: undefined,
+      backdrop: undefined,
+      matched: false,
       userLoggedIn: storage.sessionId ? true : false,
-      favoriteChecked: false,
       requested: false,
       admin: localStorage.getItem('admin'),
-      showTorrents: false
+      showTorrents: false,
-    }
-  },
-  computed: {
-    loaded(){
-      return this.movieLoaded ? true : false;
     }
   },
   methods: {
-    fetchMovie(id){
+    parseResponse(resp) {
-      this.id = id;
-      (this.mediaType == 'show') ? this.tmdbType = 'show' : this.tmdbType = 'movie'
-      axios.get(`https://api.kevinmidboe.com/api/v1/plex/request/${id}?type=${this.mediaType}`)
-      .then(function(resp){
       let movie = resp.data;
-          this.movie = movie;
+      this.movie = { ...movie }
-          this.poster();
+      this.title = movie.title
-          this.backdrop();
+      this.poster = movie.poster
-          this.matched = this.movie.matchedInPlex;
+      this.backdrop = movie.backdrop
-          this.requested = this.movie.requested;
+      this.matched = movie.existsInPlex;
-          if(this.userLoggedIn){
+      // TODO should get a request response, used /plex/:id before
-            this.checkIfInFavorites(movie.id);
+      // this.requested = movie.requested;
-            this.movieLoaded = true;
+      this.requested = true
-          } else {
+
-            this.movieLoaded = true;
+      document.title = movie.title + storage.pageTitlePostfix;
-          }
-          // Push state
-          if(storage.createMoviePopup){
-            storage.moviePath = this.mediaType + '/' + id;
-            history.pushState({ popup: true }, null, storage.moviePath);
-            storage.createMoviePopup = false;
-          }
-          // Change Page title
-          document.title = this.movie.title + storage.pageTitlePostfix;
-      }.bind(this))
-      .catch(function(error) {
-        console.log(error.response)
-        this.$router.push({ name: '404' });
-      }.bind(this));
-    },
-    poster() {
-      // Change the poster resolution
-      if(this.movie.poster_path){
-        this.moviePosterSrc = 'https://image.tmdb.org/t/p/w300' + this.movie.poster_path;
-      }
-    },
-    backdrop(){
-      if(this.movie.background_path){
-        this.movieBackdropSrc = 'https://image.tmdb.org/t/p/w500' + this.movie.background_path;
-      }
     },
     nestedDataToString(data) {
-      let nestedArray = [], resultString;
+      let nestedArray = []
-      data.forEach((item) => nestedArray.push(item.name));
+      data.forEach(item => nestedArray.push(item));
-      resultString = nestedArray.join(', ');
+      return nestedArray.join(', ');
-      return resultString;
     },
-    checkIfInFavorites(id){
-      // Change to check in plex
-      axios.get(`https://api.themoviedb.org/3/${this.tmdbType}/${id}/account_states?api_key=${storage.apiKey}&session_id=${storage.sessionId}`)
-      .then(function(resp){
-          this.favorite = resp.data.favorite;
-          this.favoriteChecked = true;
-          this.movieLoaded = true;
-      }.bind(this))
-    },
-    // Toggle the downloading status if admin
-    toggleFavorite(){
-      let favoriteInvert = !this.favorite;
-      this.favorite = '';
-      axios.post(`https://api.themoviedb.org/3/account/${storage.userId}/favorite?api_key=${storage.apiKey}&session_id=${storage.sessionId}`, {
-        'media_type': 'movie',
-        'media_id': this.id,
-        'favorite': favoriteInvert
-      })
-      .then(function(resp){
-        this.favorite = favoriteInvert;
-        eventHub.$emit('updateFavorite');
-      }.bind(this));
-    },
-    // Send a request for a specific movie
     sendRequest(){
-      this.requested = ''
+      request(this.id, this.type, storage.token)
-      axios({
+        .then(resp => {
-        method: 'post', //you can set what request you want to be
-        url: `https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`,
-        headers: {
-          authorization: storage.token
-        }
-      })
-      // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`, {}, {
-      //   authorization: storage.token
-      // })
-      // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?api_key=${storage.apiKey}&session_id=${storage.sessionId}`, {
-      .then(function(resp){
           if (resp.data.success)
-          this.requested = true;
+            this.requested = true
-        else
+        })
-          this.requested = false;
-      }.bind(this));
     },
     openTmdb(){
-      window.location.replace('https://www.themoviedb.org/' + this.tmdbType + '/' + this.id)
+      const tmdbType = this.type === 'show' ? 'tv' : this.type
+      window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
     },
-    // Search torrents by query
-    // searchForTorrents() {
-    //   axios.get(`https://apollo.kevinmidboe.com/api/v1/plex/request/${id}?type=${'movie'}&api_key=${storage.apiKey}&language=en-US`)
-    // },
   },
   watch: {
     id: function(val){
+      if (this.type === 'movie') {
         this.fetchMovie(val);
+      } else {
+        this.fetchShow(val)
+      }
     }
   },
+  beforeDestroy() {
+    document.title = this.prevDocumentTitle
+  },
   created(){
-    this.fetchMovie(this.id);
+    this.prevDocumentTitle = document.title
+
+    if (this.type === 'movie') {
+      getMovie(this.id)
+        .then(this.parseResponse)
+        .catch(error => {
+          this.$router.push({ name: '404' });
+        })
+    } else {
+      getShow(this.id)
+        .then(this.parseResponse)
+        .catch(error => {
+          this.$router.push({ name: '404' });
+        })
+    }
+
     console.log('admin: ', this.admin)
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "./src/scss/loading-placeholder";
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 
 .movie{
   &__wrap{
     display: flex;
-    &--page{
-      max-width: 768px;
-      position: relative;
-      margin: 0 auto;
-    }
     &--header{
       align-items: center;
       height: 100%;
@@ -286,9 +245,6 @@ export default {
     background-color: $c-dark;
     @include tablet-min {
       height: 350px;
-      &--page{
-        height: 384px;
-      }
     }
     &:before {
       content: "";
@@ -302,28 +258,34 @@ export default {
       background: rgba($c-dark, 0.85);
     }
   }
+
   &__poster{
     display: none;
     @include tablet-min{
-        background: $c-dark;
+      background: $c-white;
+      height: 0;
       display: block;
       position: absolute;
       width: calc(45% - 40px);
       top: 40px;
       left: 40px;
+
     }
   }
+
   &__img {
     display: block;
     width: 100%;
     opacity: 0;
     transform: scale(0.97) translateZ(0);
     transition: opacity 0.5s ease, transform 0.5s ease;
+
     &.is-loaded{
       opacity: 1;
       transform: scale(1);
     }
   }
+
   &__title {
     position: relative;
     padding: 20px;
@@ -336,13 +298,14 @@ export default {
       margin-left: 45%;
       padding: 30px 30px 30px 40px;
     }
-      &-text{
+    h1 {
       font-weight: 500;
       line-height: 1.4;
       font-size: 24px;
       @include tablet-min {
         font-size: 30px;
       }
+    }
     span {
       display: block;
       font-size: 14px;
@@ -351,16 +314,18 @@ export default {
       margin-top: 10px;
     }
   }
-    }
   &__main{
     background: $c-light;
     min-height: calc(100vh - 250px);
     @include tablet-min {
       min-height: 0;
     }
+
+    height: 100%;
   }
     &__actions{
       text-align: center;
+      // min-height: 394px;
       width: 100%;
       order: 2;
       padding: 20px;