Merge pull request #2 from KevinMidboe/release/v2

Release/v1

.babelrc

@@ -1,5 +1,8 @@
 {
   "presets": [
-    ["es2015", { "modules": false }]
+    ["@babel/preset-env", {
-  ]
+      "useBuiltIns": false
+    }]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

.gitignore

@@ -1,4 +1,12 @@
-.DS_Store
+# config file - copy config.json.example
+src/config.json
+
+# Build directory
+dist/
+
+# Node packages
 node_modules/
 npm-debug.log
-dist/
+
+# MacOS trash
+.DS_Store

README.md

@@ -8,6 +8,19 @@ A Vue.js project.
 
 [TMDB Vue App](https://tmdb-vue-app.herokuapp.com/)
 
+## Config setup
+Set seasonedShows api endpoint and/or elastic.   
+ - SeasonedShows [can be found here](https://github.com/kevinmidboe/seasonedshows) and is the matching backend to fetch tmdb search results, tmdb lists, request new content, check plex status and lets owner search and add torrents to download.
+ - Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb.
+
+```json
+{
+  "SEASONED_URL": "http://localhost:31459/api",
+  "ELASTIC_URL": "http://localhost:9200"
+}
+```
+*Set ELASTIC_URL to undefined or false to disable*
+
 ## Build Setup
 
 ``` bash
@@ -24,5 +37,9 @@ npm run build
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
 This app uses [history mode](https://router.vuejs.org/en/essentials/history-mode.html)
 
+## Documentation
+All api functions are documented in `/docs` and [found here](docs/api.md).  
+[html version also available](http://htmlpreview.github.io/?https://github.com/KevinMidboe/seasoned/blob/release/v2/docs/api/index.html)
+
 ## License
 [MIT](https://github.com/dmtrbrl/tmdb-app/blob/master/LICENSE)

docs/api.md

@@ -0,0 +1,154 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+-   [getMovie][1]
+    -   [Parameters][2]
+-   [getShow][3]
+    -   [Parameters][4]
+-   [getTmdbListByPath][5]
+    -   [Parameters][6]
+-   [searchTmdb][7]
+    -   [Parameters][8]
+-   [searchTorrents][9]
+    -   [Parameters][10]
+-   [addMagnet][11]
+    -   [Parameters][12]
+-   [request][13]
+    -   [Parameters][14]
+-   [elasticSearchMoviesAndShows][15]
+    -   [Parameters][16]
+
+## getMovie
+
+Fetches tmdb movie by id. Can optionally include cast credits in result object.
+
+### Parameters
+
+-   `id` **[number][17]** 
+-   `credits` **[boolean][18]** Include credits (optional, default `false`)
+
+Returns **[object][19]** Tmdb response
+
+## getShow
+
+Fetches tmdb show by id. Can optionally include cast credits in result object.
+
+### Parameters
+
+-   `id` **[number][17]** 
+-   `credits` **[boolean][18]** Include credits (optional, default `false`)
+
+Returns **[object][19]** Tmdb response
+
+## getTmdbListByPath
+
+Fetches tmdb list by path.
+
+### Parameters
+
+-   `listPath` **[string][20]** Path of list
+-   `page` **[number][17]**  (optional, default `1`)
+
+Returns **[object][19]** Tmdb list response
+
+## searchTmdb
+
+Fetches tmdb movies and shows by query.
+
+### Parameters
+
+-   `query` **[string][20]** 
+-   `page` **[number][17]**  (optional, default `1`)
+
+Returns **[object][19]** Tmdb response
+
+## searchTorrents
+
+Search for torrents by query
+
+### Parameters
+
+-   `query` **[string][20]** 
+-   `authorization_token`  
+-   `credits` **[boolean][18]** Include credits
+
+Returns **[object][19]** Torrent response
+
+## addMagnet
+
+Add magnet to download queue.
+
+### Parameters
+
+-   `magnet` **[string][20]** Magnet link
+-   `name` **[boolean][18]** Name of torrent
+-   `tmdb_id` **[boolean][18]** 
+
+Returns **[object][19]** Success/Failure response
+
+## request
+
+Request a movie or show from id. If authorization token is included the user will be linked
+to the requested item.
+
+### Parameters
+
+-   `id` **[number][17]** Movie or show id
+-   `type` **[string][20]** Movie or show type
+-   `authorization_token` **[string][20]?** To identify the requesting user (optional, default `undefined`)
+
+Returns **[object][19]** Success/Failure response
+
+## elasticSearchMoviesAndShows
+
+Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
+Tv Shows. See tmdb docs for more info: [https://developers.themoviedb.org/3/getting-started/daily-file-exports][21]
+
+### Parameters
+
+-   `query` **[string][20]** 
+
+Returns **[object][19]** List of movies and shows matching query
+
+[1]: #getmovie
+
+[2]: #parameters
+
+[3]: #getshow
+
+[4]: #parameters-1
+
+[5]: #gettmdblistbypath
+
+[6]: #parameters-2
+
+[7]: #searchtmdb
+
+[8]: #parameters-3
+
+[9]: #searchtorrents
+
+[10]: #parameters-4
+
+[11]: #addmagnet
+
+[12]: #parameters-5
+
+[13]: #request
+
+[14]: #parameters-6
+
+[15]: #elasticsearchmoviesandshows
+
+[16]: #parameters-7
+
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[21]: https://developers.themoviedb.org/3/getting-started/daily-file-exports

package.json

@@ -1,38 +1,43 @@
 {
-  "name": "tmdb-app",
+  "name": "seasoned-request",
-  "description": "The Movie Database app ",
+  "description": "seasoned request app",
-  "version": "1.1.0",
+  "version": "1.0.0",
-  "author": "Dmytro Barylo",
+  "author": "Kevin Midboe",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port=5000",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "start": "node server.js"
+    "start": "node server.js",
+    "docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md"
   },
   "dependencies": {
-    "ag-grid-vue": "^17.0.0",
+    "axios": "^0.18.1",
-    "axios": "^0.15.3",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "connect-history-api-fallback": "^1.3.0",
-    "debounce": "^1.0.0",
     "express": "^4.16.1",
-    "numeral": "^2.0.4",
+    "vue": "^2.5.2",
-    "vue": "^2.1.0",
     "vue-axios": "^1.2.2",
     "vue-data-tablee": "^0.12.1",
     "vue-js-modal": "^1.3.16",
-    "vue-router": "^2.2.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
+    "@babel/core": "^7.4.5",
-    "babel-loader": "^6.0.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
-    "babel-preset-es2015": "^6.0.0",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/runtime": "^7.4.5",
+    "babel-loader": "^8.0.6",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
+    "documentation": "^11.0.0",
     "file-loader": "^0.9.0",
     "node-sass": "^4.5.0",
     "sass-loader": "^5.0.1",
+    "schema-utils": "^2.4.1",
     "vue-loader": "^10.0.0",
-    "vue-template-compiler": "^2.1.0",
+    "vue-svg-inline-loader": "^1.3.1",
+    "vue-template-compiler": "2.6.10",
     "webpack": "^2.2.0",
     "webpack-dev-server": "^2.2.0"
   }

server.js

@@ -1,9 +1,11 @@
 var express = require('express');
 var path = require('path');
+const compression = require('compression')
 var history = require('connect-history-api-fallback');
 
 app = express();
 
+app.use(compression())
 app.use('/dist', express.static(path.join(__dirname + "/dist")));
 app.use('/dist', express.static(path.join(__dirname + "/dist/")));
 app.use('/favicons', express.static(path.join(__dirname + "/favicons")));

src/App.vue

@@ -1,156 +1,115 @@
 <template>
   <div id="app">
+
+    <!-- Header and hamburger navigation -->
     <navigation></navigation>
+
+    <!-- Header with search field -->
+
+    <!-- TODO move this to the navigation component -->
     <header class="header">
-      <div class="header__search">
+      <search-input v-model="query"></search-input>
-        <input class="header__search-input" type="text" v-model.trim="searchQuery" @keyup.enter="search" placeholder="Search for a movie or show...">
-        <svg class="header__search-icon">
-          <use xlink:href="#iconSearch"></use>
-        </svg>
-      </div>
     </header>
 
-      <movie-popup v-if="moviePopupIsVisible" @close="closeMoviePopup" :id="moviePopupId" :type="moviePopupType"></movie-popup>
+    <!-- Movie popup that will show above existing rendered content -->
+    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
+
+
+    <darkmode-toggle />
+
+    <!-- Display the component assigned to the given route (default: home) -->
+    <router-view class="content" :key="$route.fullPath"></router-view>
 
-    <section class="main">
-      <transition name="fade" @after-leave="afterLeave">
-        <router-view name="list-router-view" :type="'page'" :mode="'collection'" :key="$route.params.category"></router-view>
-        <router-view name="search-router-view" :type="'page'" :mode="'search'" :key="$route.params.query"></router-view>
-        <router-view name="user-requests-router-view" :type="'page'" :mode="'user-requests'"></router-view>
-        <router-view name="page-router-view"></router-view>
-      </transition>
-    </section>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
+import Vue from 'vue'
-import storage from './storage.js'
+import Navigation from '@/components/Navigation'
-import Navigation from './components/Navigation.vue'
+import MoviePopup from '@/components/MoviePopup'
-import MoviePopup from './components/MoviePopup.vue'
+import SearchInput from '@/components/SearchInput'
+import DarkmodeToggle from '@/components/ui/darkmodeToggle'
 
 export default {
   name: 'app',
-  components: { Navigation, MoviePopup},
+  components: {
-  data(){
+    Navigation,
-    return{
+    MoviePopup,
+    SearchInput,
+    DarkmodeToggle
+  },
+  data() {
+    return {
+      query: '',
       moviePopupIsVisible: false,
-      moviePopupHistoryVisible: false,
+      popupID: 0,
-      moviePopupId: 0,
+      popupType: 'movie'
-      moviePopupType: 'movie',
-      searchQuery: ''
-    }
-  },
-  computed: {
-    queryForRouter(){
-      return encodeURI(this.searchQuery.replace(/ /g, "+"));
-    }
-  },
-  methods: {
-    // User Session Methods
-    requestToken(){
-      storage.sessionId = null;
-      axios.get(`https://api.themoviedb.org/3/authentication/token/new?api_key=${storage.apiKey}`)
-      .then(function(resp){
-          if(typeof resp.data == 'string') {
-             resp.data = JSON.parse(resp.data);
-          }
-          let data = resp.data;
-          window.location.href = `https://www.themoviedb.org/authenticate/${data.request_token}?redirect_to=${location.protocol}//${location.host}/profile`
-      }.bind(this));
-    },
-    setUserStatus(){
-      storage.token = localStorage.getItem('token') || null;
-      storage.username = localStorage.getItem('username') || null;
-      storage.admin = localStorage.getItem('admin') || null;
-    },
-    // Movie Popup Methods
-    openMoviePopup(id, type, newMoviePopup){
-      console.log('app openMoviePopup:', type)
-      if(newMoviePopup){
-        storage.backTitle = document.title;
-      }
-      storage.createMoviePopup = newMoviePopup;
-      this.moviePopupIsVisible = true;
-      this.moviePopupId = id;
-      this.moviePopupType = type;
-      document.querySelector('body').classList.add('hidden');
-    },
-    closeMoviePopup(){
-      storage.createMoviePopup = false;
-      this.moviePopupIsVisible = false;
-      document.querySelector('body').classList.remove('hidden');
-      window.history.back();
-    },
-    onHistoryState(e){
-      storage.moviePopupOnHistory = e.state ? e.state.hasOwnProperty('popup') : false;
-      if(!storage.moviePopupOnHistory){
-        this.moviePopupIsVisible = false;
-        document.title = storage.backTitle;
-      }
-    },
-    changeHistoryState(){
-      if(history.state && history.state.popup){
-        let newState = {
-          popup: false
-        };
-        history.replaceState(newState , null, storage.moviePath);
-      }
-    },
-    // Search Methods
-    search(){
-      if(!this.searchQuery.length) return;
-      this.$router.push({ name: 'search', params: { query: this.queryForRouter }});
-    },
-    setSearchQuery(clear){
-      if(clear){
-        this.searchQuery = '';
-      } else {
-        let query = decodeURIComponent(this.$route.params.query);
-        this.searchQuery =  query ? query.replace(/\+/g, " ") : '';
-      }
-    },
-    // Router After Leave
-    afterLeave(){
-      document.querySelector('body').scrollTop = 0;
-    },
-    // Detect if touch device
-    isTouchDevice() {
-      return 'ontouchstart' in document.documentElement;
     }
   },
   created(){
-    window.addEventListener('popstate', this.onHistoryState);
+    let that = this
-    window.addEventListener('pagehide', this.changeHistoryState);
+    Vue.prototype.$popup = {
-    eventHub.$on('openMoviePopup', this.openMoviePopup);
+      get isOpen() {
-    eventHub.$on('setSearchQuery', this.setSearchQuery);
+        return that.moviePopupIsVisible
-    eventHub.$on('requestToken', this.requestToken);
+      },
-    eventHub.$on('setUserStatus', this.setUserStatus);
+      open: (id, type) => {
-    if (this.isTouchDevice()) {
+        this.popupID = id || this.popupID
-      document.querySelector('body').classList.add('touch');
+        this.popupType = type || this.popupType
+        this.moviePopupIsVisible = true
+        console.log('opened')
+      },
+      close: () => {
+        this.moviePopupIsVisible = false
+        console.log('closed')
       }
     }
+    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
+  }
 }
 </script>
 
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+@import "./src/scss/variables";
+.content {
+    @include tablet-min{
+    width: calc(100% - 95px);
+    margin-top: $header-size;
+    margin-left: 95px;
+    position: relative;
+  }
+}
+</style>
+
 <style lang="scss">
+// @import "./src/scss/main";
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 *{
   box-sizing: border-box;
 }
-html, body{
+html {
   height: 100%;
 }
 body{
+  margin: 0;
+  padding: 0;
   font-family: 'Roboto', sans-serif;
   line-height: 1.6;
-  background: $c-light;
+  background: $background-color;
-  color: $c-dark;
+  color: $text-color;
+  transition: background-color .5s ease, color .5s ease;
   &.hidden{
     overflow: hidden;
   }
 }
+h1,h2,h3 {
+  transition: color .5s ease;
+}
+a:any-link {
+  color: inherit;
+}
 input, textarea, button{
   font-family: 'Roboto', sans-serif;
 }
@@ -160,154 +119,27 @@ figure{
 }
 img{
   display: block;
-  max-width: 100%;
+  // max-width: 100%;
   height: auto;
 }
-.loader{
+
-  animation: load 1s linear infinite;
-  border: 2px solid $c-white;
-  border-radius: 50%;
-  display: block;
-  height: 30px;
-  left: 50%;
-  margin: -1.5em;
-  position: absolute;
-  top: 50%;
-  width: 30px;
-  &:after {
-    border: 5px solid $c-green;
-    border-radius: 50%;
-    content: '';
-    left: 10px;
-    position: absolute;
-    top: 16px;
-  }
-}
-@keyframes load {
-  100% { transform: rotate(360deg); }
-}
 .wrapper{
   position: relative;
 }
 .header{
   position: fixed;
-  background: $c-white;
   z-index: 15;
   display: flex;
+  flex-direction: column;
+
   @include tablet-min{
     width: calc(100% - 170px);
-    height: 75px;
     margin-left: 95px;
     border-top: 0;
     border-bottom: 0;
     top: 0;
   }
-  &__search{
-    height: 50px;
-    display: flex;
-    position: relative;
-    z-index: 5;
-    width: calc(100% - 110px);
-    position: fixed;
-    top: 0;
-    right: 55px;
-    @include tablet-min{
-      position: relative;
-      height: 75px;
-      right: 0;
-    }
-    &-input{
-      display: block;
-      width: 100%;
-      padding: 15px 20px 15px 45px;
-      outline: none;
-      border: 0;
-      background-color: transparent;
-      color: $c-dark;
-      font-weight: 300;
-      font-size: 16px;
-      @include tablet-min{
-        padding: 15px 30px 15px 60px;
-      }
-      @include tablet-landscape-min{
-        padding: 15px 30px 15px 80px;
-      }
-      @include desktop-min{
-        padding: 15px 30px 15px 90px;
-      }
-    }
-    &-icon{
-      width: 19px;
-      height: 19px;
-      fill: rgba($c-dark, 0.5);
-      transition: fill 0.5s ease;
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      margin-top: -7px;
-      left: 20px;
-      @include tablet-min{
-        width: 18px;
-        height: 18px;
-        margin-top: -9px;
-        left: 30px;
-      }
-      @include tablet-landscape-min{
-        left: 50px;
-      }
-      @include desktop-min{
-        left: 60px;
-      }
-    }
-    &-input:focus + &-icon{
-      fill: $c-dark;
-    }
-  }
 }
-.main{
-  position: relative;
-  padding: 50px 0 0;
-  @include tablet-min{
-    width: calc(100% - 95px);
-    padding: 75px 0 0;
-    margin-left: 95px;
-    position: relative;
-  }
-}
-.button{
-  display: inline-block;
-  border: 1px solid $c-dark;
-  text-transform: uppercase;
-  background: $c-dark;
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 2;
-  letter-spacing: 0.5px;
-  padding: 5px 20px 4px 20px;
-  cursor: pointer;
-  color: $c-dark;
-  background: transparent;
-  outline: none;
-  transition: background 0.5s ease, color 0.5s ease;
-  @include tablet-min{
-    font-size: 12px;
-    padding: 6px 20px 5px 20px;
-  }
-  &:active, &:hover{
-    background: $c-dark;
-    color: $c-white;
-  }
-  body:not(.touch) &:hover, &:focus{
-    background: $c-dark;
-    color: $c-white;
-  }
-  &__active {
-    @extend .button;
-    background: $c-dark;
-    color: $c-white;
-  }
-}
-
 
 // router view transition
 .fade-enter-active, .fade-leave-active {

src/api.js

@@ -0,0 +1,309 @@
+import axios from 'axios'
+import storage from '@/storage'
+import config from '@/config.json'
+import path from 'path'
+
+const SEASONED_URL = config.SEASONED_URL
+const ELASTIC_URL = config.ELASTIC_URL
+const ELASTIC_INDEX = config.ELASTIC_INDEX
+
+// TODO
+//  - Move autorization token and errors here?
+
+// - - - TMDB - - - 
+
+/**
+ * Fetches tmdb movie by id. Can optionally include cast credits in result object.
+ * @param {number} id
+ * @param {boolean} [credits=false] Include credits
+ * @returns {object} Tmdb response
+ */
+const getMovie = (id, credits=false) => {
+  const url = new URL('v2/movie', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  if (credits) {
+    url.searchParams.append('credits', true)
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error getting movie: ${id}`); throw error })
+}
+
+/**
+ * Fetches tmdb show by id. Can optionally include cast credits in result object.
+ * @param {number} id
+ * @param {boolean} [credits=false] Include credits
+ * @returns {object} Tmdb response
+ */
+const getShow = (id, credits=false) => {
+  const url = new URL('v2/show', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  if (credits) {
+    url.searchParams.append('credits', true)
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error getting show: ${id}`); throw error })
+}
+
+/**
+ * Fetches tmdb list by name.
+ * @param {string} name List the fetch
+ * @param {number} [page=1]
+ * @returns {object} Tmdb list response
+ */
+const getTmdbMovieListByName = (name, page=1) => {
+  const url = new URL('v2/movie/' + name, SEASONED_URL)
+  url.searchParams.append('page', page)
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
+}
+
+/**
+ * Fetches requested items.
+ * @param {number} [page=1]
+ * @returns {object} Request response
+ */
+const getRequests = (page=1) => {
+  const url = new URL('v2/request', SEASONED_URL)
+  url.searchParams.append('page', page)
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
+}
+
+
+const getUserRequests = (page=1) => {
+  const url = new URL('v1/user/requests', SEASONED_URL)
+  url.searchParams.append('page', page)
+
+  const headers = { authorization: localStorage.getItem('token') }
+
+  return fetch(url.href, { headers })
+    .then(resp => resp.json())
+}
+
+/**
+ * Fetches tmdb movies and shows by query.
+ * @param {string} query
+ * @param {number} [page=1]
+ * @returns {object} Tmdb response
+ */
+const searchTmdb = (query, page=1) => {
+  const url = new URL('v2/search', SEASONED_URL)
+  url.searchParams.append('query', query)
+  url.searchParams.append('page', page)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error searching: ${query}, page: ${page}`); throw error })
+}
+
+// - - - Torrents - - - 
+
+/**
+ * Search for torrents by query
+ * @param {string} query
+ * @param {boolean} credits Include credits
+ * @returns {object} Torrent response
+ */
+const searchTorrents = (query, authorization_token) => {
+  const url = new URL('/api/v1/pirate/search', SEASONED_URL)
+  url.searchParams.append('query', query)
+
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error searching torrents: ${query}`); throw error })
+}
+
+/**
+ * Add magnet to download queue.
+ * @param {string} magnet Magnet link
+ * @param {boolean} name Name of torrent
+ * @param {boolean} tmdb_id
+ * @returns {object} Success/Failure response
+ */
+const addMagnet = (magnet, name, tmdb_id) => {
+  const url = new URL('v1/pirate/add', SEASONED_URL)
+
+  const body = {
+    magnet: magnet,
+    name: name,
+    tmdb_id: tmdb_id
+  }
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { method: 'POST', headers, body })
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error adding magnet: ${name} ${error}`); throw error })
+}
+
+// - - - Plex/Request - - - 
+
+/**
+ * Request a movie or show from id. If authorization token is included the user will be linked
+ * to the requested item.
+ * @param {number} id Movie or show id
+ * @param {string} type Movie or show type
+ * @param {string} [authorization_token] To identify the requesting user
+ * @returns {object} Success/Failure response
+ */
+const request = (id, type, authorization_token=undefined) => {
+  const url = new URL('v2/request', SEASONED_URL)
+//  url.pathname = path.join(url.pathname, id.toString())
+//  url.searchParams.append('type', type)
+
+  const headers = {
+    'Authorization': authorization_token,
+    'Content-Type': 'application/json'
+  }
+  const body = {
+    id: id,
+    type: type
+  }
+
+  return fetch(url.href, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(body)
+  })
+  .then(resp => resp.json())
+  .catch(error => { console.error(`api error requesting: ${id}, type: ${type}`); throw error })
+}
+
+/**
+ * Check request status by tmdb id and type
+ * @param {number} tmdb id
+ * @param {string} type
+ * @returns {object} Success/Failure response
+ */
+const getRequestStatus = (id, type, authorization_token=undefined) => {
+  const url = new URL('v2/request', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  url.searchParams.append('type', type)
+
+  return fetch(url.href)
+    .then(resp => {
+      const status = resp.status;
+      if (status === 200) { return true }
+      else if (status === 404) { return false }
+      else {
+        console.error(`api error getting request status for id ${id} and type ${type}`)
+      }
+    })
+    .catch(err => Promise.reject(err))
+}
+
+// - - - Authenticate with plex - - -
+
+const plexAuthenticate = (username, password) => {
+  const url = new URL('https://plex.tv/api/v2/users/signin')
+
+  const headers = {
+    'Content-Type': 'application/json',
+    'X-Plex-Platform': 'Linux',
+    'X-Plex-Version': 'v2.0.24',
+    'X-Plex-Platform-Version': '4.13.0-36-generic',
+    'X-Plex-Device-Name': 'Tautulli',
+    'X-Plex-Client-Identifier': '123'
+  }
+
+  let formData = new FormData()
+  formData.set('login', username)
+  formData.set('password', password)
+  formData.set('rememberMe', false)
+
+  return axios({
+      method: 'POST',
+      url: url.href,
+      headers: headers,
+      data: formData
+    })
+    .catch(error => { console.error(`api error authentication plex: ${username}`); throw error })
+}
+
+
+// - - - Random emoji - - -
+
+const getEmoji = () => {
+  const url = new URL('v1/emoji', SEASONED_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.log('api error getting emoji'); throw error })
+}
+
+
+// - - - ELASTIC SEARCH - - -
+// This elastic index contains titles mapped to ids. Lightning search
+// used for autocomplete
+
+/**
+ * Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
+ * Tv Shows. See tmdb docs for more info: https://developers.themoviedb.org/3/getting-started/daily-file-exports
+ * @param {string} query
+ * @returns {object} List of movies and shows matching query
+ */
+const elasticSearchMoviesAndShows = (query) => {
+  const url = new URL(path.join(ELASTIC_INDEX, '/_search'), ELASTIC_URL)
+  const headers = {
+    'Content-Type': 'application/json'
+  }
+
+  const body = {
+    "sort" : [
+      { "popularity" : {"order" : "desc"}},
+      "_score"
+    ],
+    "query": {
+      "bool": {
+        "should": [{
+          "match_phrase_prefix": {
+            "original_name": query
+          }
+        },
+        {
+          "match_phrase_prefix": {
+            "original_title": query
+          }
+        }]
+      }
+    },
+    "size": 6
+  }
+
+  return fetch(url.href, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(body)
+  })
+    .then(resp => resp.json())
+    .catch(error => { console.log(`api error searching elasticsearch: ${query}`); throw error })
+}
+
+
+
+export {
+  getMovie,
+  getShow,
+  getTmdbMovieListByName,
+  searchTmdb,
+  getUserRequests,
+  getRequests,
+  searchTorrents,
+  addMagnet,
+  request,
+  getRequestStatus,
+  plexAuthenticate,
+  getEmoji,
+  elasticSearchMoviesAndShows
+}

src/components/404.vue

@@ -1,72 +1,39 @@
 <template>
   <section class="not-found">
-    <div class="not-found__content">
+    <h1 class="not-found__title">Page Not Found</h1>
-      <h2 class="not-found__title">Page Not Found</h2>
-    </div>
   </section>
 </template>
 
-<script>
+<style lang="scss" scoped>
-import storage from '../storage.js'
-export default {
-  created(){
-    document.title = 'Page Not Found' + storage.pageTitlePostfix;
-  }
-}
-</script>
-
-<style lang="scss">
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.not-found{
+
+.not-found {
+  display: flex;
+  height: calc(100vh - var(--header-size));
   width: 100%;
-  height: calc(100vh - 100px);
   background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
   background-size: cover;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  @include tablet-min{
-    height: calc(100vh - 75px);
-  }
-  &:before{
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba($c-light, 0.7);
-  }
-  &-shortList{
-    width: 100%;
-  }
-  &__content{
-    width: 100%;
-    padding: 0 20px;
-    text-align: center;
-    @include tablet-min{
-      padding: 20px 0 0 0;
-    }
-    &-shortList {
-      width: 100%;
 
+  &:before {
+    content: "";
+    position: absolute;
+    height: calc(100vh - var(--header-size));
+    width: 100%;
+    background: $background-40;
   }
-  }
+  &__title {
-    &__title{
+   padding-top: 40vh;
-      font-size: 24px;
+    font-size: 2rem;
     font-weight: 500;
-      color: $c-dark;
+    color: $text-color;
     position: relative;
     margin: 0;
-      @include tablet-min{
+
-        font-size: 28px;
+    @include tablet-min {
+      font-size: 2.3rem;
     }
   }
-    &__button{
-      position: relative;
-      margin-top: 20px;
-    }
 }
 </style>

src/components/Home.vue

@@ -1,122 +1,85 @@
 <template>
-  <section class="home">
+  <section>
-    <header class="home__header" v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+    <LandingBanner />
-      <div class="home__header-wrap">
+
-        <h1 class="home__header-title">Request new movies or tv shows for plex</h1>
+    <div v-for="list in lists">
-        <strong class="home__header-subtitle">Made with Vue.js</strong>
+      <list-header :title="list.title" :link="'/list/' + list.route" />
+
+      <results-list :results="list.data" :shortList="true" />
+      <loader v-if="!list.data.length" />
     </div>
-    </header>
-    <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
   </section>
 </template>
 
 <script>
-import axios from 'axios'
+import LandingBanner from '@/components/LandingBanner'
-import storage from '../storage.js'
+import ListHeader from '@/components/ListHeader'
-import MoviesList from './MoviesList.vue'
+import ResultsList from '@/components/ResultsList'
+import Loader from '@/components/ui/Loader'
+
+import { getTmdbMovieListByName, getRequests } from '@/api'
 
 export default {
-  components: { MoviesList },
+  name: 'home',
+  components: { LandingBanner, ResultsList, ListHeader, Loader },
   data(){
     return {
-      listTypes: storage.listTypes,
+      imageFile: 'dist/pulp-fiction.jpg',
-      imageFile: 'dist/pulp-fiction.jpg'
+      requests: [],
+      nowplaying: [],
+      upcoming: [],
+      popular: []
+    }
+  },
+  computed: {
+    lists() {
+      return [
+        {
+          title: 'Requests',
+          route: 'request',
+          data: this.requests
+        },
+        {
+          title: 'Now playing',
+          route: 'now_playing',
+          data: this.nowplaying
+        },
+        {
+          title: 'Upcoming',
+          route: 'upcoming',
+          data: this.upcoming
+        },
+        {
+          title: 'Popular',
+          route: 'popular',
+          data: this.popular
+        }
+      ]
+    }
+  },
+  methods: {
+    fetchRequests() {
+      getRequests()
+        .then(results => this.requests = results.results)
+    },
+    fetchNowPlaying() {
+      getTmdbMovieListByName('now_playing')
+        .then(results => this.nowplaying = results.results)
+    },
+    fetchUpcoming() {
+      getTmdbMovieListByName('upcoming')
+        .then(results => this.upcoming = results.results)
+    },
+    fetchPopular() {
+      getTmdbMovieListByName('popular')
+        .then(results => this.popular = results.results)
     }
   },
   created(){
-    document.title = 'TMDb';
+    this.fetchRequests()
-    storage.backTitle = document.title;
+    this.fetchNowPlaying()
+    this.fetchUpcoming()
+    this.fetchPopular()
   }
 }
 </script>
-
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-.home{
-  &__header{
-    width: 100%;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    position: relative;
-    background-color: $c-dark;
-    background-image: url('~assets/arrival.jpg');
-    @include tablet-min{
-      height: 284px;
-    }
-    &:before{
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba($c-light, 0.7);
-    }
-    &-wrap{
-      text-align: center;
-      position: relative;
-    }
-    &-title{
-      font-weight: 500;
-      font-size: 22px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: $c-dark;
-      margin: 0;
-      @include tablet-min{
-        font-size: 28px;
-      }
-    }
-    &-subtitle{
-      display: block;
-      font-size: 14px;
-      font-weight: 300;
-      color: $c-dark;
-      margin: 5px 0;
-      @include tablet-min{
-        font-size: 16px;
-      }
-    }
-    &-link{
-      text-decoration: none;
-      color: $c-dark;
-      font-size: 13px;
-      font-weight: 300;
-      opacity: 0.7;
-      transition: opacity 0.5s ease;
-      &:hover{
-        opacity: 1;
-      }
-      span{
-        display: inline-block;
-        vertical-align: middle;
-      }
-      &-icon{
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 2px;
-        width: 16px;
-        height: 15px;
-        fill: $c-dark;
-      }
-    }
-  }
-  .wrapper{
-    min-height: 0;
-  }
-  .movies__list{
-    .movies__item:last-child{
-      display: none;
-      @include desktop-min{
-        display: block;
-      }
-    }
-  }
-}
-</style>

src/components/LandingBanner.vue

@@ -0,0 +1,92 @@
+<template>
+  <header v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+    <div class="container">
+      <h1 class="title">Request new movies or tv shows for plex</h1>
+      <strong class="subtitle">Made with Vue.js</strong>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      imageFile: 'dist/pulp-fiction.jpg'
+    }
+  },
+  beforeMount() {
+    if (this.image && this.image.length > 0) {
+      this.imageFile = this.image
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+header {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  position: relative;
+
+  @include tablet-min {
+    height: 284px;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $background-70;
+    transition: background-color .5s ease;
+  }
+  
+  .container {
+    text-align: center;
+    position: relative;
+    transition: color .5s ease;
+  }
+  
+  .title {
+    font-weight: 500;
+    font-size: 22px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $text-color;
+    margin: 0;
+
+    @include tablet-min{
+      font-size: 28px;
+    }
+  }
+
+  .subtitle {
+    display: block;
+    font-size: 14px;
+    font-weight: 300;
+    color: $text-color-70;
+    margin: 5px 0;
+
+    @include tablet-min{
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/components/ListHeader.vue

@@ -0,0 +1,101 @@
+<template>
+  <header :class="{ 'sticky': sticky }">
+    <h2>{{ title }}</h2>
+
+    <span v-if="info" class="result-count">{{ info }}</span>
+    <router-link v-else-if="link" :to="link" class='view-more'>
+      View All
+    </router-link>
+  </header>  
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    sticky: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    info: {
+      type: String,
+      required: false
+    },
+    link: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import './src/scss/variables';
+@import './src/scss/media-queries';
+
+header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.8rem 12px;
+
+  &.sticky {
+    background-color: $background-color;
+
+    position: sticky;
+    position: -webkit-sticky;
+    top: $header-size;
+    z-index: 4;
+
+    padding-bottom: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 300;
+    text-transform: capitalize;
+    line-height: 18px;
+    margin: 0;
+    color: $text-color;
+  }
+
+  .view-more {
+    font-size: 13px;
+    font-weight: 300;
+    letter-spacing: .5px;
+    color: $text-color-70;
+    text-decoration: none;
+    transition: color .5s ease;
+    cursor: pointer;
+
+    &:after{
+      content: " →";
+    }
+    &:hover{
+      color: $text-color;
+    }
+  }
+
+  .result-count {
+    font-size: 13px;
+    font-weight: 300;
+    letter-spacing: .5px;
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  @include tablet-min {
+    padding-left: 1.25rem;;
+  }
+  @include desktop-lg-min {
+    padding-left: 1.75rem;
+  }
+}
+
+</style>

src/components/ListPage.vue

@@ -0,0 +1,104 @@
+
+<template>
+  <div>
+    <list-header :title="listTitle" :info="resultCount" :sticky="true" />
+
+    <results-list :results="results" v-if="results" />
+
+    <loader v-if="!results.length" />
+
+    <div v-if="page < totalPages" class="fullwidth-button">
+      <seasoned-button @click="loadMore">load more</seasoned-button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import Loader from '@/components/ui/Loader'
+import { getTmdbMovieListByName, getRequests } from '@/api'
+import store from '@/store'
+
+export default {
+  components: { ListHeader, ResultsList, SeasonedButton, Loader },
+  data() {
+    return {
+      legalTmdbLists: [ 'now_playing', 'upcoming', 'popular' ],
+      results: [],
+      page: 1,
+      totalPages: 0,
+      totalResults: 0
+    }
+  },
+  computed: {
+    listTitle() {
+      if (this.results.length === 0)
+        return ''
+
+      const routeListName = this.$route.params.name
+      console.log('routelistname', routeListName)
+      return routeListName.includes('_') ? routeListName.split('_').join(' ') : routeListName
+    },
+    resultCount() {
+      if (this.results.length === 0)
+        return ''
+
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
+    }
+  },
+  methods: {
+    loadMore() {
+      console.log(this.$route)
+      this.page++
+
+      window.history.replaceState({}, 'search', `/#/${this.$route.fullPath}?page=${this.page}`)
+      this.init()
+    },
+    init() {
+      const routeListName = this.$route.params.name
+
+      if (routeListName === 'request') {
+        getRequests(this.page)
+          .then(results => {
+            this.results = this.results.concat(...results.results)
+            this.page = results.page
+            this.totalPages = results.total_pages
+            this.totalResults = results.total_results
+          })
+      } else if (this.legalTmdbLists.includes(routeListName)) {
+        getTmdbMovieListByName(routeListName, this.page)
+          .then(results => {
+            this.results = this.results.concat(...results.results)
+            this.page = results.page
+            this.totalPages = results.total_pages
+            this.totalResults = results.total_results
+          })
+      } else {
+        // TODO handle if list is not found
+        console.log('404 this is not a tmdb list')
+      }
+    }
+  },
+  created() {
+    if (this.results.length === 0)
+      this.init()
+
+    store.dispatch('documentTitle/updateTitle', `${this.$router.history.current.name} ${this.$route.params.name}`)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fullwidth-button {
+  width: 100%;
+  margin: 1rem 0;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/components/Movie.vue

@@ -1,296 +1,262 @@
 <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 + ')' : '' }" :class="compact ? 'compact' : ''" @click="compact=!compact">
+      <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 v-if="movie">{{ movie.title }}</h1>
-              {{ movie.title }}
+          <loading-placeholder v-else :count="1" />
-              <!-- <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>
-          </div> -->
-          <!-- <div class="movie__actions" v-if="userLoggedIn && favoriteChecked"> -->
-          <div class="movie__actions">
 
-            <a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
+        <!-- SIDEBAR ACTIONS -->
-              <svg class="movie__actions-icon">
+        <div class="movie__actions" v-if="movie">
-                <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">
-                <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">
+          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched"
-              <svg class="movie__actions-icon">
+            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'">
-                <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}">
-                <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}">
+            Not yet in plex
-              <svg class="movie__actions-icon">
+          </sidebar-list-element>
-                <use xlink:href="#icon_torrents"></use>
+          <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
-              </svg>
+            :active="requested" :textActive="'Requested to be downloaded'">
-              <span class="movie__actions-text"> Search for torrents</span>
-            </a>
 
-            <a class="movie__actions-link" @click.prevent="openTmdb">
+            Request to be downloaded?
-              <svg class="movie__actions-icon">
+          </sidebar-list-element>
-                <use xlink:href="#icon_info"></use>
+          <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
-              </svg>
+            :iconRef="'#icon_torrents'" :active="showTorrents"
-              <span class="movie__actions-text"> See more info</span>
+            :supplementaryText="numberOfTorrentResults">
-            </a>
+
+            Search for torrents
+          </sidebar-list-element>
+          <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
+            See more info
+          </sidebar-list-element>
         </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:9px; 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'
-import storage from '../storage.js'
+import img from '@/directives/v-image'
-import img from '../directives/v-image.js'
+import TorrentList from './TorrentList'
-import formatDate from '../directives/v-formatDate.js'
+import Person from './Person'
-import TorrentList from './TorrentList.vue'
+import SidebarListElement from './ui/sidebarListElem'
+import store from '@/store'
+import LoadingPlaceholder from './ui/LoadingPlaceholder'
+
+import { getMovie, getShow, request, getRequestStatus } from '@/api'
 
 export default {
-  props: ['id', 'type', 'mediaType'],
+  props: ['id', 'type'],
-  components: { TorrentList },
+  components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
-  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,
-    }
+      compact: false
-  },
-  computed: {
-    loaded(){
-      return this.movieLoaded ? true : false;
     }
   },
   methods: {
-    fetchMovie(id){
+    parseResponse(movie) {
-      this.id = id;
+      this.movie = { ...movie }
-      (this.mediaType == 'show') ? this.tmdbType = 'show' : this.tmdbType = 'movie'
+      this.title = movie.title
-      axios.get(`https://api.kevinmidboe.com/api/v1/plex/request/${id}?type=${this.mediaType}`)
+      this.poster = movie.poster
-      .then(function(resp){
+      this.backdrop = movie.backdrop
-          let movie = resp.data;
+      this.matched = movie.existsInPlex
-          this.movie = movie;
+      this.checkIfRequested(movie)
-          this.poster();
+        .then(status => this.requested = status)
-          this.backdrop();
+
-          this.matched = this.movie.matchedInPlex;
+      store.dispatch('documentTitle/updateTitle', movie.title)
-          this.requested = this.movie.requested;
-          if(this.userLoggedIn){
-            this.checkIfInFavorites(movie.id);
-            this.movieLoaded = true;
-          } else {
-            this.movieLoaded = true;
-          }
-          // 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() {
+    async checkIfRequested(movie) {
-      // Change the poster resolution
+      return await getRequestStatus(movie.id, movie.type)
-      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
+          if (resp.success) {
-        url: `https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`,
+            this.requested = true
-        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;
-        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)
+      }
     }
   },
+  computed: {
+    numberOfTorrentResults: () => {
+      let numTorrents = store.getters['torrentModule/resultCount']
+      return numTorrents !== null ? numTorrents + ' results' : null
+    }
+  },
+  beforeDestroy() {
+    store.dispatch('documentTitle/updateTitle', this.prevDocumentTitle)
+  },
   created(){
-    this.fetchMovie(this.id);
+    this.prevDocumentTitle = store.getters['documentTitle/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{
+.movie {
-  &__wrap{
+  &__wrap {
     display: flex;
-    &--page{
+    &--header {
-      max-width: 768px;
-      position: relative;
-      margin: 0 auto;
-    }
-    &--header{
       align-items: center;
       height: 100%;
     }
-    &--main{
+    &--main {
       display: flex;
       flex-wrap: wrap;
       flex-direction: column;
       @include tablet-min{
         flex-direction: row;
       }
+
+      background-color: $background-color;
+      color: $text-color;
     }
   }
-  &__header{
+  &__header {
+    $duration: 0.2s;
     height: 250px;
+    transform: scaleY(1);
+    transition: height $duration ease;
+    transform-origin: top;
     position: relative;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    background-color: $c-dark;
+    background-color: $background-color;
-    @include tablet-min{
+    @include tablet-min {
       height: 350px;
-      &--page{
-        height: 384px;
     }
-    }
+    &:before {
-    &:before{
       content: "";
       display: block;
       position: absolute;
@@ -299,195 +265,153 @@ export default {
       z-index: 0;
       width: 100%;
       height: 100%;
-      background: rgba($c-dark, 0.85);
+      background: $background-dark-85;
+    }
+    &.compact {
+      height: 100px;
     }
   }
-    &__poster{
+
+  &__poster {
     display: none;
-      @include tablet-min{
+    @include tablet-min {
-        background: $c-dark;
+      background: $background-color;
+      height: 0;
       display: block;
       position: absolute;
       width: calc(45% - 40px);
       top: 40px;
       left: 40px;
+
     }
   }
-      &__img{
+
+  &__img {
     display: block;
     width: 100%;
     opacity: 0;
     transform: scale(0.97) translateZ(0);
     transition: opacity 0.5s ease, transform 0.5s ease;
-        &.is-loaded{
+
+    &.is-loaded {
       opacity: 1;
       transform: scale(1);
     }
   }
-    &__title{
+
+  &__title {
     position: relative;
     padding: 20px;
-      color: $c-green;
+    color: $green;
     text-align: center;
     width: 100%;
-      @include tablet-min{
+    @include tablet-min {
       width: 55%;
       text-align: left;
       margin-left: 45%;
       padding: 30px 30px 30px 40px;
     }
-      &-text{
+    h1 {
       font-weight: 500;
       line-height: 1.4;
       font-size: 24px;
-        @include tablet-min{
+      @include tablet-min {
         font-size: 30px;
       }
-        span{
-          display: block;
-          font-size: 14px;
-          font-weight: 300;
-          color: rgba($c-white, 0.7);
-          margin-top: 10px;
     }
   }
-    }
+  &__main {
-  &__main{
-    background: $c-light;
     min-height: calc(100vh - 250px);
-    @include tablet-min{
+    @include tablet-min {
       min-height: 0;
     }
+
+    height: 100%;
   }
-    &__actions{
+    &__actions {
       text-align: center;
       width: 100%;
       order: 2;
       padding: 20px;
-      border-top: 1px solid rgba($c-dark, 0.05);
+      border-top: 1px solid $text-color-5;
-      @include tablet-min{
+      @include tablet-min {
         order: 1;
         width: 45%;
         padding: 185px 0 40px 40px;
         border-top: 0;
       }
-      &-link{
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        text-transform: uppercase;
-        color: rgba($c-dark, 0.5);
-        transition: color 0.5s ease;
-        font-size: 11px;
-        padding: 10px 0;
-        border-bottom: 1px solid rgba($c-dark, 0.05);
-        &:hover{
-          color: rgba($c-dark, 0.75);
     }
-        &.active{
+    &__info {
-          color: $c-dark;
-        }
-        &.pending{
-          color: #f8bd2d;
-        }
-      }
-      &-icon{
-        width: 18px;
-        height: 18px;
-        margin: 0 10px 0 0;
-        fill: rgba($c-dark, 0.5);
-        transition: fill 0.5s ease, transform 0.5s ease;
-        &.waiting{
-          transform: scale(0.8, 0.8);
-        }
-        &.pending{
-          fill: #f8bd2d;
-        }
-      }
-      &-link:hover &-icon{
-        fill: rgba($c-dark, 0.75);
-        cursor: pointer;
-      }
-      &-link.active &-icon{
-        fill: $c-green;
-      }
-      &-text{
-        display: block;
-        padding-top: 2px;
-        cursor: pointer;
-      }
-    }
-    &__info{
       width: 100%;
       padding: 20px;
       order: 1;
-      @include tablet-min{
+      @include tablet-min {
         order: 2;
         padding: 40px;
         width: 55%;
         margin-left: 45%;
       }
     }
-    &__actions + &__info{
+    &__info {
       margin-left: 0;
     }
-      &__description{
+    &__description {
       font-weight: 300;
       font-size: 13px;
       line-height: 1.8;
       margin-bottom: 20px;
-        @include tablet-min{
+      @include tablet-min {
         margin-bottom: 30px;
         font-size: 14px;
       }
     }
-      &__details{
+    &__details {
-        &-block{
+      &-block {
         float: left;
       }
-        &-block:not(:last-child){
+      &-block:not(:last-child) {
         margin-bottom: 20px;
         margin-right: 20px;
-          @include tablet-min{
+        @include tablet-min {
           margin-bottom: 30px;
           margin-right: 30px;
         }
       }
-        &-title{
+      &-title {
         margin: 0;
         font-weight: 400;
         text-transform: uppercase;
         font-size: 14px;
-          color: $c-green;
+        color: $green;
-          @include tablet-min{
+        @include tablet-min {
           font-size: 16px;
         }
       }
-        &-text{
+      &-text {
         font-weight: 300;
         font-size: 14px;
         margin-top: 5px;
       }
     }
-    &__admin{
+    &__admin {
       width: 100%;
       padding: 20px;
       order: 2;
-      @include tablet-min{
+      @include tablet-min {
         order: 3;
         padding: 40px;
         padding-top: 0px;
         width: 100%;
       }
-      &-title{
+      &-title {
           margin: 0;
           font-weight: 400;
           text-transform: uppercase;
           text-align: center;
           font-size: 14px;
-          color: $c-green;
+          color: $green;
           padding-bottom: 20px;
-          @include tablet-min{
+          @include tablet-min {
             font-size: 16px;
           }
         }

src/components/MoviePage.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Movie from './Movie.vue';
+import Movie from './Movie';
 export default {
   components: { Movie }
 }

src/components/MoviePopup.vue

@@ -1,26 +1,42 @@
 <template>
-  <div class="movie-popup" @click="$emit('close')">
+  <div class="movie-popup" @click="$popup.close()">
     <div class="movie-popup__box" @click.stop>
-      <movie :id="id" :mediaType="type"></movie>
+      <movie :id="id" :type="type"></movie>
-      <button class="movie-popup__close" @click="$emit('close')"></button>
+      <button class="movie-popup__close" @click="$popup.close()"></button>
     </div>
     <i class="loader"></i>
   </div>
 </template>
 
 <script>
-import Movie from './Movie.vue';
+import Movie from './Movie';
 
 export default {
-  props: ['id', 'type'],
+  props: {
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  },
   components: { Movie },
+  methods: {
+    checkEventForEscapeKey(event) {
+      if (event.keyCode == 27) {
+        this.$popup.close()
+      }
+    }
+  },
   created(){
-    window.addEventListener('keyup', function(e){
+    window.addEventListener('keyup', this.checkEventForEscapeKey)
-      if (e.keyCode == 27) {
+  },
-        this.$emit('close');
+  beforeDestroy() {
-      }
+    window.removeEventListener('keyup', this.checkEventForEscapeKey)
-    }.bind(this));
   }
+
 }
 </script>
 
@@ -35,7 +51,7 @@ export default {
   z-index: 20;
   width: 100%;
   height: 100vh;
-  background: rgba($c-dark, 0.98);
+  background: rgba($dark, 0.93);
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   &__box{
@@ -43,7 +59,7 @@ export default {
     max-width: 768px;
     position: relative;
     z-index: 5;
-    background: $c-dark;
+    background: $background-color-secondary;
     padding-bottom: 50px;
     @include tablet-min{
       padding-bottom: 0;
@@ -70,7 +86,7 @@ export default {
       left: 10px;
       width: 20px;
       height: 2px;
-      background: $c-white;
+      background: $white;
     }
     &:before{
       transform: rotate(45deg);
@@ -79,7 +95,7 @@ export default {
       transform: rotate(-45deg);
     }
     &:hover{
-      background: $c-green;
+      background: $green;
     }
   }
 }

src/components/MoviesList.vue

@@ -1,378 +0,0 @@
-<template>
-  <div class="wrapper" v-if="listLoaded">
-    <div class="movies" v-if="movies.length">
-      <header class="movies__header">
-        <h2 class="movies__title">{{ listTitle }}</h2>
-        <span class="movies__results" v-if="!shortList">{{ countResults }}</span>
-
-        <router-link v-if="shortList && mode != 'user-requests'" class="movies__link" :to="{name: 'home-category', params: {category: category}}">
-          View All
-        </router-link>
-         <router-link v-if="shortList && mode == 'user-requests'" class="movies__link" :to="{name: 'user-requests'}">
-          View All
-        </router-link>
-
-        <span v-if="!shortList && (this.$route.params.category === 'requests' || mode == 'user-requests')" class="movies__filters">
-          <button type="button" class="button" @click="toggleFilter">Filter</button>
-          <span class="movies__filters__button-spacing"></span>
-          <!-- <button type="button" class="button" @click="sort">Sort</button>  -->
-          <span class="movies__filters__button-spacing"></span>
-          <div class="form__group">
-             <input v-model="filter_query" class="form__group-input" placeholder="Filter by search"/>
-          </div>
-        </span>
-      </header>
-
-      <ul v-if="showFilter" class="movies__filters-list">
-        <li v-for="(item, index) in filters.status.elms" @click="applyFilter(item, index)" :class="{'active': index === filters.status.selected}">{{ item }}</li>
-      </ul>
-
-      <ul class="movies__list">
-        <movies-list-item class="movies__item" v-for="(movie, index) in movies" :movie="movie"></movies-list-item>
-      </ul>
-      <div class="movies__nav" v-if="!shortList" :class="{'is-hidden' : currentPage == pages}">
-        <button @click="loadMore" class="button">Load Mores</button>
-      </div>
-    </div>
-    <i v-if="!listLoaded" class="loader"></i>
-    <section v-if="!movies.length && !shortList" class="not-found">
-      <div class="not-found__content">
-        <h2 class="not-found__title" v-if="mode == 'search'">Nothing Found</h2>
-        <h2 class="not-found__title" v-if="mode == 'favorite'">You haven't added any favorite movies</h2>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import numeral from 'numeral'
-import storage from '../storage.js'
-import MoviesListItem from './MoviesListItem.vue'
-
-// Storage for removed favorite item
-let removed;
-
-export default {
-  props: ['type', 'mode', 'category', 'shortList'],
-  components: { MoviesListItem },
-  // beforeRouteLeave (to, from, next) {
-  //   if(from.name == 'search'){
-  //     eventHub.$emit('setSearchQuery', true);
-  //   }
-  //   next();
-  // },
-  data() {
-    return {
-      listTitle: '',
-      movies: [],
-      unfiltered_movies: [],
-      pages: '',
-      filter: '',
-      filter_query: '',
-      results: '',
-      currentPage: 1,
-      listLoaded: false,
-      showFilter: false,
-      filters: {
-        status: {
-          elms: ['all', 'requested', 'downloading', 'downloaded'],
-          selected: 0,
-        }
-      }
-    }
-  },
-  computed: {
-    pageTitle(){
-      return this.listTitle + storage.pageTitlePostfix;
-    },
-    query(){
-      return this.$route.params.query || '';
-    },
-    request(){
-      console.log('todays mode is: ', this.mode);
-      if(this.mode == 'search'){
-        return `https://api.kevinmidboe.com/api/v1/plex/request?query=${this.query}&page=${this.currentPage}`;
-      } else if(this.mode == 'requests' || this.$route.params.category == 'requests') {
-        return `https://api.kevinmidboe.com/api/v1/plex/requests/all?page=${this.currentPage}&status=${this.filter}`;
-      } else if(this.mode == 'collection') {
-        let category = this.$route.params.category || this.category;
-        return `https://api.kevinmidboe.com/api/v1/tmdb/list/${category}?page=${this.currentPage}`;
-      } else if(this.mode == 'history') {
-        return 'https://api.kevinmidboe.com/api/v1/user/history';
-      } else if(this.mode == 'user-requests') {
-        return 'https://api.kevinmidboe.com/api/v1/user/requests';
-      }
-    },
-    countResults(){
-      if(this.results > 1){
-        return numeral(this.results).format('0,0') + ' results';
-      } else {
-        return numeral(this.results).format('0,0') + ' result';
-      }
-    }
-  },
-  methods: {
-    fetchCategory(){
-      axios.get(this.request, {
-        headers: {authorization: storage.token},
-      })
-      .then(function(resp){
-          let data = resp.data;
-          console.log('data: ', data)
-
-          if(this.shortList){
-            this.movies = data.results.slice(0, 5);
-            this.pages = 1;
-            this.results = 5;
-          } else {
-            this.movies = data.results;
-            this.pages = data.total_pages;
-            this.results = data.total_results;
-          }
-          this.unfiltered_movies = this.movies;
-          this.listLoaded = true;
-          // Change Page title
-          if(this.type == 'page'){
-            document.title = this.pageTitle;
-          }
-      }.bind(this))
-      .catch(function(error) {
-        this.$router.push({ name: '404' });
-      }.bind(this));
-    },
-    loadMore(){
-      this.currentPage++;
-      axios.get(this.request)
-      .then(function(resp){
-          let data = resp.data;
-          let newData = this.movies.concat(data.results);
-          this.movies = newData;
-      }.bind(this));
-    },
-    // sort() {
-    //   console.log(this.showFilters)
-    // },
-    toggleFilter(item, index){
-      this.showFilter = this.showFilter ? false : true;
-      // this.results = this.results.filter(result => result.status != 'downloaded')
-    },
-    applyFilter(item, index) {
-      this.filter = item;
-      this.filters.status.selected = index;
-      console.log('applied query filter: ', item, index)
-      this.fetchCategory()
-    }
-  },
-  watch: {
-    filter_query: function(val, oldVal) {
-      let movies = this.unfiltered_movies;
-      val = val.toLowerCase()
-      if (val.length > 0)
-        movies = movies.filter(movie => movie.title.toLowerCase().startsWith(val))
-
-      if (movies.length > 0)
-        this.movies = movies;
-    }
-  },
-  created(){
-    // Set List Title
-    if(this.mode == 'search'){
-      this.listTitle = storage.categories['search'];
-      eventHub.$emit('setSearchQuery');
-    } else if(this.mode == 'requests') {
-      this.listTitle = storage.categories['requests'];
-    } else if(this.mode == 'collection') {
-      let category = this.$route.params.category || this.category;
-      this.listTitle = storage.categories[category]; // <-- this
-    } else if(this.mode == 'favorite') {
-      this.listTitle = storage.categories['favorite'];
-    } else if(this.mode == 'user-requests') {
-      this.listTitle = storage.categories['user-requests'];
-    }
-    this.fetchCategory();
-    eventHub.$on('updateFavorite', this.updateFavorite);
-  }
-}
-</script>
-<style lang="scss" scoped>
-  @import "./src/scss/media-queries";
-  .form__group-input {
-    padding: 10px 5px 10px 15px;
-    margin-left: 0;
-    height: 38px;
-    width: 150px;
-    font-size: 15px;
-    @include desktop-min {
-      width: 200px;
-      font-size: 17px;
-    }
-  }
-
-</style>
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-.movies{
-  padding: 10px;
-  @include tablet-min{
-    padding: 15px;
-  }
-  @include tablet-landscape-min{
-    padding: 25px;
-  }
-  @include desktop-min{
-    padding: 30px;
-  }
-  &__header{
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 10px;
-
-    @include tablet-min{
-      padding: 23px 15px;
-    }
-    @include tablet-landscape-min{
-      padding: 16px 25px;
-    }
-    @include desktop-min{
-      padding: 8px 30px;
-    }
-  }
-    &__title{
-      margin: 0;
-      font-size: 16px;
-      line-height: 16px;
-      color: $c-dark;
-      font-weight: 300;
-
-      flex-basis: 50%;
-      @include tablet-min{
-        font-size: 18px;
-        line-height: 18px;
-      }
-    }
-    &__results{
-      font-size: 12px;
-      font-weight: 300;
-      letter-spacing: 0.5px;
-      color: rgba($c-dark, 0.5);
-      
-      text-align: right;
-      flex-basis: 50%;
-      @include mobile-only {
-        display: none;
-      }
-    }
-    &__link{
-      font-size: 12px;
-      font-weight: 300;
-      letter-spacing: 0.5px;
-      color: rgba($c-dark, 0.5);
-      text-decoration: none;
-      transition: color 0.5s ease;
-      &:after{
-        content: " →";
-      }
-      &:hover{
-        color: $c-dark;
-      }
-    }
-  &__filters{
-    margin-top: 10px;
-    line-height: 22px;
-    color: $c-dark;
-    font-size: 18px;
-    display: flex;
-    justify-content: flex-end;
-    transition: opacity 1s ease;
-
-    &__button-spacing {
-      @include tablet-min {
-        width: 15px;
-      }
-      @include mobile-only {
-        width: 10px;
-      }
-    }
-    &-list {
-      margin: 0px 10px;
-      padding: 0;
-      list-style: none;
-      border: solid 1px;
-      border-radius: 2px;
-      overflow: hidden;
-      display: flex;
-      transition: color 0.2s ease;
-
-      justify-content: space-evenly;
-
-      @include tablet-min{
-        margin: 0px 15px;
-      }
-      @include tablet-landscape-min {
-        margin: 0px 25px;
-      }
-      @include desktop-min{
-        margin: 0px 30px;
-      }
-      li {
-        padding: 6px 14px;
-        background-color: $c-white;
-        transition: color 0.2s ease;
-        font-size: 13px;
-        font-weight: 200;
-        text-transform: capitalize;
-        text-align: center;
-        width: 100%;
-        &:nth-child(n+2) {
-          border-left: solid 1px;
-        }
-        &.active, &:hover {
-          border-color: transparent;
-          background-color: #091c24;
-          color: $c-white;
-          cursor: pointer;
-        }
-        @include tablet-min {
-          font-size: 16px;
-        }
-      }
-    }
-    &-toggle {
-      margin-left: 15px;
-    }
-  }
-  &__list{
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-  }
-    &__item{
-      padding: 10px;
-      width: 50%;
-      @include tablet-min{
-        padding: 15px;
-      }
-      @include tablet-landscape-min{
-        padding: 20px;
-        width: 25%;
-      }
-      @include desktop-min{
-        padding: 30px;
-        width: 20%;
-      }
-    }
-    &__nav{
-      padding: 25px 0;
-      text-align: center;
-      &.is-hidden{
-        display: none;
-      }
-    }
-}
-</style>

src/components/MoviesListItem.vue

@@ -1,6 +1,8 @@
 <template>
-  <li class="movies-item">
+  <li class="movies-item" :class="{'shortList': shortList}">
-    <a class="movies-item__link" :class="{'no-image': noImage}" href="#" @click.prevent="openMoviePopup(movie.id, movie.type, true)">
+    <a class="movies-item__link" :class="{'no-image': noImage}" @click.prevent="openMoviePopup(movie.id, movie.type)">
+
+      <!-- TODO change to picture element -->
       <figure class="movies-item__poster">
         <img v-if="!noImage" class="movies-item__img" src="~assets/placeholder.png" v-img="poster()" alt="">
         <img v-if="noImage" class="movies-item__img is-loaded" src="~assets/no-image.png" alt="">
@@ -14,29 +16,29 @@
 </template>
 
 <script>
-import img from '../directives/v-image.js'
+import img from '../directives/v-image'
 
 export default {
-  props: ['movie'],
+  props: ['movie', 'shortList'],
   directives: {
     img: img
   },
   data(){
-    return{
+    return {
       noImage: false
     }
   },
   methods: {
+    // TODO handle missing images better and load diff sizes based on screen size
     poster() {
-      if(this.movie.poster_path){
+      if (this.movie.poster) {
-        return 'https://image.tmdb.org/t/p/w300' + this.movie.poster_path;
+        return 'https://image.tmdb.org/t/p/w500' + this.movie.poster
       } else {
-        this.noImage = true;
+        this.noImage = true
       }
     },
-    openMoviePopup(id, type, event){
+    openMoviePopup(id, type) {
-      console.log('open:', id, type, event)
+      this.$popup.open(id, type)
-      eventHub.$emit('openMoviePopup', id, type, event);
     }
   }
 }
@@ -45,19 +47,41 @@ export default {
 <style lang="scss">
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.movies-item{
+
+.movies-item {
+  padding: 10px;
+  width: 50%;
+  background-color: $background-color;
+  transition: background-color 0.5s ease;
+
+  @include tablet-min{
+    padding: 15px;
+  }
+  @include tablet-landscape-min{
+    padding: 15px;
+    width: 25%;
+  }
+  @include desktop-min{
+    padding: 15px;
+    width: 20%;
+  }
+
+  @include desktop-lg-min{
+    padding: 20px;
+    width: 12.5%;
+  }
+
   &__link{
     text-decoration: none;
-    color: rgba($c-dark, 0.5);
+    color: $text-color-70;
     font-weight: 300;
   }
   &__content{
     padding-top: 15px;
   }
   &__poster{
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    transition: transform 0.5s ease, box-shadow 0.3s ease;
     transform: translateZ(0);
-    background: $c-white;
   }
   &__img{
     width: 100%;
@@ -71,13 +95,14 @@ export default {
   }
   &__link:not(.no-image):hover &__poster{
     transform: scale(1.03);
-    box-shadow: 0 0 10px rgba($c-dark, 0.1);
+    box-shadow: 0 0 10px rgba($dark, 0.1);
   }
   &__title{
     margin: 0;
     font-size: 11px;
     letter-spacing: 0.5px;
     transition: color 0.5s ease;
+    cursor: pointer;
     @include mobile-ls-min{
       font-size: 12px;
     }
@@ -86,7 +111,7 @@ export default {
     }
   }
   &__link:hover &__title{
-    color: $c-dark;
+    color: $text-color;
   }
 }
 </style>

src/components/Navigation.vue

@@ -1,35 +1,29 @@
 <template>
+  <div>
     <nav class="nav">
       <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
         <svg class="nav__logo-image">
           <use xlink:href="#svgLogo"></use>
         </svg>
       </router-link>
+
       <div class="nav__hamburger" @click="toggleNav">
-      <div class="bar"></div>
+        <div v-for="_ in 3" class="bar"></div>
-      <div class="bar"></div>
-      <div class="bar"></div>
       </div>
+
       <ul class="nav__list">
-      <li class="nav__item" v-for="item in listTypes" v-if="item.isCategory">
+        <li class="nav__item" v-for="item in listTypes">
-        <router-link class="nav__link" :to="{name: item.name, params: {mode: item.type, category: item.query}}">
+          <router-link class="nav__link" :to="'/list/' + item.route">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
-              <use :xlink:href="'#icon_' + item.query"></use>
+                <use :xlink:href="'#icon_' + item.route"></use>
               </svg>
-            <span class="nav__link-title">{{ item.shortTitle }}</span>
+              <span class="nav__link-title">{{ item.title }}</span>
             </div>
           </router-link>
         </li>
+
         <li class="nav__item nav__item--profile">
-<!--         <div  class="nav__link nav__link--profile"  @click="requestToken" v-if="!userLoggedIn">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use xlink:href="#iconLogin"></use>
-            </svg>
-            <span class="nav__link-title">Log In</span>
-          </div>
-        </div> -->
           <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
@@ -38,6 +32,7 @@
               <span class="nav__link-title">Sign in</span>
             </div>
           </router-link>
+
           <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
@@ -49,15 +44,18 @@
         </li>
       </ul>
     </nav>
+
+    <div class="spacer"></div>
+  </div>
 </template>
 
 <script>
-import storage from '../storage.js'
+import storage from '@/storage'
 
 export default {
   data(){
     return {
-      listTypes: storage.listTypes,
+      listTypes: storage.homepageLists,
       userLoggedIn: localStorage.getItem('token') ? true : false
     }
   },
@@ -65,64 +63,74 @@ export default {
     setUserStatus(){
       this.userLoggedIn = localStorage.getItem('token') ? true : false;
     },
-    requestToken(){
-      eventHub.$emit('requestToken');
-    },
     toggleNav(){
       document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
       document.querySelector('.nav__list').classList.toggle('nav__list--active');
     }
   },
   created(){
+    // TODO move this to state manager
     eventHub.$on('setUserStatus', this.setUserStatus);
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.nav{
+
+.icon {
+  width: 30px;
+}
+
+.spacer {
+  @include mobile-only {
+    width: 100%;
+    height: $header-size;
+  }
+}
+
+.nav {
+  transition: background .5s ease;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
-  background: $c-white;
-  display: flex;
   z-index: 10;
-  @include tablet-min{
   display: block;
+  color: $text-color;
+  background-color: $background-color-secondary;
+
+  @include tablet-min{
     width: 95px;
     height: 100vh;
   }
-  &__logo{
+  &__logo {
-    display: block;
     width: 55px;
-    height: 50px;
+    height: $header-size;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $c-dark;
+    background: $background-nav-logo;
     @include tablet-min{
       width: 95px;
-      height: 75px;
     }
     &-image{
       width: 35px;
       height: 31px;
-      fill: $c-green;
+      fill: $green;
       transition: transform 0.5s ease;
       @include tablet-min{
         width: 45px;
         height: 40px;
       }
     }
-    &:hover &-image{
+    &:hover &-image {
       transform: scale(1.04);
     }
   }
-  &__hamburger{
+  &__hamburger {
     display: block;
     position: fixed;
     width: 55px;
@@ -130,23 +138,22 @@ export default {
     top: 0;
     right: 0;
     cursor: pointer;
-    background: $c-white;
     z-index: 10;
-    border-left: 1px solid $c-light;
+    border-left: 1px solid $background-color;
     @include tablet-min{
       display: none;
     }
-    .bar{
+    .bar {
       position: absolute;
       width: 23px;
       height: 1px;
-      background: rgba($c-dark, 0.5);
+      background-color: $text-color-70;
       transition: all 300ms ease;
-      &:nth-child(1){
+      &:nth-child(1) {
         left: 16px;
         top: 17px;
       }
-      &:nth-child(2){
+      &:nth-child(2) {
         left: 16px;
         top: 25px;
         &:after {
@@ -156,16 +163,15 @@ export default {
           top: 0px;
           width: 23px;
           height: 1px;
-          background: transparent;
           transition: all 300ms ease;
         }
       }
-      &:nth-child(3){
+      &:nth-child(3) {
         right: 15px;
         top: 33px;
       }
     }
-    &--active{
+    &--active {
       .bar{
         &:nth-child(1),
         &:nth-child(3){
@@ -176,12 +182,13 @@ export default {
         }
         &:nth-child(2):after {
           transform: rotate(-90deg);
-          background: rgba($c-dark, 0.5);
+          // background: rgba($c-dark, 0.5);
+          background-color: $text-color-70;
         }
       }
     }
   }
-  &__list{
+  &__list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -190,23 +197,22 @@ export default {
     position: fixed;
     left: 0;
     top: 50px;
-    background: rgba($c-white, 0.98);
+    border-top: 1px solid $background-color;
-    border-top: 1px solid $c-light;
+    @include mobile-only {
-    @include mobile-only{
+      display: flex;
+      flex-wrap: wrap;
       font-size: 0;
       opacity: 0;
       visibility: hidden;
-      height: calc(100vh - 50px);
+      background-color: $background-95;
-      transition: all 0.5s ease;
       text-align: left;
       &--active{
         opacity: 1;
         visibility: visible;
       }
     }
-    @include tablet-min{
+    @include tablet-min {
       display: flex;
-      background: transparent;
       position: relative;
       display: block;
       width: 100%;
@@ -214,31 +220,44 @@ export default {
       top: 0;
     }
   }
-  &__item{
+  &__item {
-    @include mobile-only{
+    transition: background .5s ease, color .5s ease, border .5s ease;
-      display: inline-block;
+    background-color: $background-color-secondary;
+    color: $text-color-70;
+
+    @include mobile-only {
+      flex: 0 0 50%;
       text-align: center;
-      width: 50%;
+      border-bottom: 1px solid $background-color;
-      border-bottom: 1px solid $c-light;
       &:nth-child(odd){
-        border-right: 1px solid $c-light;
+        border-right: 1px solid $background-color;
+
+        &:last-child {
+          // flex: 0 0 100%;
         }
       }
-    @include tablet-min{
+    }
+    @include tablet-min {
       width: 100%;
-      border-bottom: 1px solid $c-light;
+      border-bottom: 1px solid $text-color-5;
-      &--profile{
+
+      &--profile {
         position: fixed;
         right: 0;
         top: 0;
-        width: 75px;
+        width: $header-size;
-        height: 75px;
+        height: $header-size;
         border-bottom: 0;
-        border-left: 1px solid $c-light;
+        border-left: 1px solid $background-color;
       }
     }
+    &:hover, .is-active {
+      color: $text-color;
+      background-color: $background-color;
     }
-  &__link{
+  }
+  &__link {
+    background-color: inherit; // a elements have a transparent background
     width: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -249,52 +268,46 @@ export default {
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: rgba($c-dark, 0.7);
-    transition: color 0.5s ease, background 0.5s ease;
     position: relative;
     cursor: pointer;
-    @include mobile-only{
+    &-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @include mobile-only {
       font-size: 10px;
       padding: 20px 0;
     }
-    @include tablet-min{
+    @include tablet-min {
       width: 95px;
       height: 95px;
       font-size: 9px;
-      &--profile{
+      &--profile {
         width: 75px;
         height: 75px;
-        background: $c-white;
+        background-color: $background-color-secondary;
       }
     }
-    &-icon{
+    &-icon {
       width: 20px;
       height: 20px;
-      margin-bottom: 3px;
+      fill: $text-color-70;
-      fill: rgba($c-dark, 0.7);
+      @include tablet-min {
-      transition: fill 0.5s ease;
-      @include tablet-min{
         width: 20px;
         height: 20px;
         margin-bottom: 5px;
       }
+
     }
-    &-title{
+    &-title {
+      margin-top: 5px;
       display: block;
       width: 100%;
     }
-    &:hover{
+    &:hover &-icon, &.is-active &-icon {
-      color: $c-dark;
+      fill: $text-color;
-    }
-    &:hover &-icon{
-      fill: $c-dark;
-    }
-    &.is-active{
-      color: $c-dark;
-      background: $c-light;
-    }
-    &.is-active &-icon{
-      fill: $c-dark;
     }
   }
 }

src/components/Person.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="persons">
+    <div class="persons--image" :style="{ 
+      'background-image': 'url(' + getPicture(info) + ')' }"></div>
+    <span>{{ info.name }}</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Person',
+  components: {
+
+  },
+  props: {
+    info: Object
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  computed: {
+    
+  },
+  methods: {
+getPicture: (person) => {
+  if (person)
+      return 'https://image.tmdb.org/t/p/w185' + person.profile_path;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.persons {
+  display: flex;
+  // border: 1px solid black;
+  flex-direction: column;
+
+  margin: 0 0.5rem;
+
+  span {
+    font-size: 0.6rem;
+  }
+
+  &--image {
+    border-radius: 50%;
+    height: 70px;
+    width: 70px;
+    // height: auto;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+  }
+
+  &--name {
+  }
+}
+</style>

src/components/Profile.vue

@@ -4,20 +4,19 @@
       <header class="profile__header">
         <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
 
-        <div>
+        <div class="button--group">
-           <router-link class="" :to="{name: 'settings'}">
+          <seasoned-button @click="showSettings = !showSettings">{{ showSettings ? 'hide settings' : 'show settings' }}</seasoned-button>
-          </router-link>
+
-            <button v-if="showSettings" class="button__active" @click="toggleSettings" style="margin-right: 2em;">Hide settings</button>
+          <seasoned-button @click="logOut">Log out</seasoned-button>
-            <button v-else class="button" @click="toggleSettings" style="margin-right: 2em;">Show settings</button>
-          <button class="button" @click="logOut">Log Out</button>
         </div>
       </header>
+
       <settings v-if="showSettings"></settings>
 
-      <movies-list v-for="item in listTypes" v-if="!showSettings && item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
+      <list-header title="User requests" :info="resultCount"/>
-      <!-- <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :shortList="true"></movies-list> -->
+      <results-list v-if="results" :results="results" />
-      <!-- <created-lists></created-lists> -->
     </div>
+
     <section class="not-found" v-if="!userLoggedIn">
       <div class="not-found__content">
         <h2 class="not-found__title">Authentication Request Failed</h2>
@@ -30,21 +29,35 @@
 </template>
 
 <script>
-import axios from 'axios'
+import storage from '@/storage'
-import storage from '../storage.js'
+import store from '@/store'
-import MoviesList from './MoviesList.vue'
+import ListHeader from '@/components/ListHeader'
-import Settings from './Settings.vue'
+import ResultsList from '@/components/ResultsList'
-// import CreatedLists from './CreatedLists.vue'
+import Settings from '@/components/Settings'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+
+import { getEmoji, getUserRequests } from '@/api'
 
 export default {
-  components: { MoviesList, Settings },
+  components: { ListHeader, ResultsList, Settings, SeasonedButton },
   data(){
     return{
       userLoggedIn: '',
       userName: '',
       emoji: '',
-      showSettings: false,
+      results: undefined,
-      listTypes: storage.listTypes
+      totalResults: undefined,
+      showSettings: false
+    }
+  },
+  computed: {
+    resultCount() {
+      if (this.results === undefined)
+        return
+
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
     }
   },
   methods: {
@@ -61,18 +74,9 @@ export default {
           }
       }.bind(this));
     },
-    getNewEmoji(){
-      axios.get(`https://api.kevinmidboe.com/api/v1/emoji`)
-      .then(function(resp){
-          this.emoji = resp.data.emoji;
-      }.bind(this))
-    },
     getUserInfo(){
       this.userName = localStorage.getItem('username'); 
     },
-    requestToken(){
-      eventHub.$emit('requestToken');
-    },
     toggleSettings() {
       this.showSettings = this.showSettings ? false : true;
     },
@@ -83,29 +87,55 @@ export default {
     }
   },
   created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
     if(!localStorage.getItem('token')){
       this.userLoggedIn = false;
     } else {
       this.userLoggedIn = true;
       this.getUserInfo();
-      this.getNewEmoji();
+
+      getUserRequests()
+        .then(results => {
+          this.results = results.results
+          this.totalResults = results.total_results
+        })
+
+      getEmoji()
+        .then(resp => {
+          const { emoji } = resp
+          this.emoji = emoji
+          store.dispatch('documentTitle/updateEmoji', emoji)
+        })
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
+.button--group {
+  display: flex;
+}
+
+// DUPLICATE CODE
 .profile{
   &__header{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
-    border-bottom: 1px solid rgba($c-dark, 0.05);
+    border-bottom: 1px solid $text-color-5;
+
+    @include mobile-only {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .button--group {
+        padding-top: 2rem;
+      }
+    }
+
     @include tablet-min{
       padding: 29px 30px;
     }
@@ -120,7 +150,7 @@ export default {
     margin: 0;
     font-size: 16px;
     line-height: 16px;
-      color: $c-dark;
+    color: $text-color;
     font-weight: 300;
     @include tablet-min{
       font-size: 18px;

src/components/Register.vue

@@ -1,97 +1,52 @@
 <template>
-  <section class="profile">
+  <section>
-    <div class="profile__content">
+    <h1>Register new user</h1>
-      <header class="profile__header">
-        <h2 class="profile__title">Register new user</h2>
-      </header>
 
-      <form class="form">
+    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />
-        <div class="form__buffer"></div>
 
-        <div class="center">
+    <seasoned-input placeholder="password" icon="Keyhole" type="password"
-          <div class="form__group">
+      :value.sync="password" @enter="requestNewUser"/>
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconEmail"></use>
-            </svg>
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password">
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat password">
-          </div>
 
-          <transition name="message-fade">
+    <seasoned-input placeholder="repeat password" icon="Keyhole" type="password"
-            <div class="message" :class="messageClass" v-if="showMessage">
+      :value.sync="passwordRepeat" @enter="requestNewUser"/>
-              <span class="message-text">{{ messageText }}</span>
-              <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-            </div>
-          </transition>
 
-          <div class="form__group">
+    <seasoned-button @click="requestNewUser">Register</seasoned-button>
-            <button type="button" class="button" v-on:click="requestNewUser">Register</button>
-          </div>
-        </div>
-      </form>
 
-      <div class="form__group">
+    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
-        <router-link class="form__group-link" :to="{name: 'signin'}" exact title="Sign in here">
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-          <span class="form__group-signin">Sign in here</span>
-        </router-link>
-      </div>
-
-      <!-- <created-lists></created-lists> -->
-    </div>
-    <section class="not-found" v-if="userLoggedIn === false">
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <button class="not-found__button button" @click="requestToken">Log In</button>
-      </div>
-    </section>
   </section>
 </template>
 
 <script>
 import axios from 'axios'
-import storage from '../storage.js'
+import SeasonedButton from '@/components/ui/SeasonedButton'
-import MoviesList from './MoviesList.vue'
+import SeasonedInput from '@/components/ui/SeasonedInput'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'
 
 export default {
-  components: { MoviesList },
+  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
-  data(){
+  data() {
-    return{
+    return {
-      userLoggedIn: '',
+      messages: [],
-      userName: '',
+      username: null,
-      showMessage: false,
+      password: null,
-      messageClass: 'message-success',
+      passwordRepeat: null
-      messageText: 'hello world'
     }
   },
   methods: {
     requestNewUser(){
-      let username = this.$refs.username.value;
+      let { username, password, passwordRepeat } = this
-      let password = this.$refs.password.value;
-      let password_re = this.$refs.password_re.value;
 
-      let verifyCredentials = this.checkCredentials(username, password, password_re);
+      let verifyCredentials = this.checkCredentials(username, password, passwordRepeat);
 
       if (verifyCredentials.verified) {
         axios.post(`https://api.kevinmidboe.com/api/v1/user`, {
           username: username,
           password: password
         })
-        .then(function(resp) {
+        .then(resp => {
           let data = resp.data;
           if (data.success){
-            this.msg(data.message, 'success');
             localStorage.setItem('token', data.token);
             localStorage.setItem('username', username);
             localStorage.setItem('admin', data.admin)
@@ -99,28 +54,34 @@ export default {
             eventHub.$emit('setUserStatus');
             this.$router.push({ name: 'profile' })
           }
-        }.bind(this))
+        })
-        .catch(function(error){
+        .catch(error => {
-          this.msg(error.response.data.error, 'warning')
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
-        }.bind(this));
+        });
       } 
       else {
-        this.msg(verifyCredentials.reason, 'warning');
+        this.messages.push({ type: 'warning', title: 'Parse error', message: verifyCredentials.reason })
       }
     },
-    checkCredentials(username, password, password_re) {
+    checkCredentials(username, password, passwordRepeat) {
-      if (password !== password_re) {
+      if (!username || username.length === 0) {
+        return {
+          verified: false,
+          reason: 'Fill inn username'
+        }
+      } 
+      else if (!password || !passwordRepeat) {
+        return {
+          verified: false,
+          reason: "Fill inn both password fields"
+        }
+      }
+      else if (password !== passwordRepeat) {
         return {
           verified: false,
           reason: 'Passwords do not match'
         }
       } 
-      else if (username === undefined) {
-        return {
-          verified: false,
-          reason: 'Please insert username'
-        }
-      } 
       else {
         return {
           verified: true,
@@ -128,142 +89,38 @@ export default {
         }
       }
     },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    dismissMessage(){
-      this.showMessage = false;
-    },
     logOut(){
       localStorage.clear();
       eventHub.$emit('setUserStatus');
       this.$router.push({ name: 'home' });
     }
-  },
-  created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
-  },
-  mounted(){
-    // this.$refs.email.focus();
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
-@import "./src/scss/media-queries";
+
-.message-enter-active {
+section {
-  transition: all .3s ease;
+  padding: 1.3rem;
-}
+
-.message-fade-leave-active {
+  @include tablet-min {
-  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+    padding: 4rem;
-}
+  }
-.message-fade-enter, .message-fade-leave-to {
+
-  opacity: 0;
+  h1 {
-}
+    margin: 0;
-.message{
+    line-height: 16px;
-  width: 75%;
+    color: $text-color;
-  max-width: 35rem;
-  margin: 0 auto;
-  margin-bottom: 1rem;
-  padding: 12px 15px 12px 15px;
-  position: relative;
-  &-text{
     font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
   }
-  &-dismiss{
-    position: absolute;
-    font-size: 17px;
-    font-weight: 100;
-    top: 0;
-    right: 0;
-    margin-top: 2px;
-    margin-right: 5px;
-    cursor: pointer;
-  }
-}
 
-.message-warning{
+  .link {
-  background-color: #f2dede;
+    display: block;
-  border: 1px solid #b75b91;
+    width: max-content;
-  color: #b75b91;
-}
-.message-success{
-  background-color: #dff0d9;
-  border: 1px solid #3e7549;
-  color: #3e7549;
-}
-
-.center {
-  justify-content: center;
-}
-.form{
-  z-index: 15;
-  background-color: $c-light;
-  display: flex;
-  flex-direction: column;
-  @include tablet-min{
-  }
-  &__buffer{
-    width: 100%;
-    height: 4rem;
-  }
-  &__group{
-    display: flex;
-    justify-content: center;
-    @include tablet-min{
-    }
-    &-input{
-      width: 75%;
-      max-width: 35rem;
-      padding: 15px 10px 15px 45px;
-      outline: none;
-      background-color: $c-white;
-      color: $c-dark;
-      font-weight: 100;
-      font-size: 20px;
-      border: 1px solid $c-dark;
-      margin-left: -2.2rem;
-      z-index: 3;
-      &:focus, &:hover {
-        border-color: $c-dark;
-      }
-    }
-    &-input[type="username"] {
-      margin-bottom: 3rem;
-    }
-    &__input-icon{
-      width: 24px;
-      height: 24px;
-      fill: rgba($c-dark, 0.5);
-      transition: fill 0.5s ease;
-      pointer-events: none;
-      margin-top: 15px;
-      margin-left: 15px;
-      z-index: 8;
-    }
-    &-link{
-      text-decoration: none;
-      color: black;
     margin-top: 1rem;
   }
-    &-signin{
-      text-transform: uppercase;
-      font-weight: 300;
-      font-size: 11px;
-      line-height: 2;
-      letter-spacing: 0.5px;
-    }
-  }
 }
-
 </style>

src/components/ResultsList.vue

@@ -0,0 +1,68 @@
+<template> 
+  <ul class="results" :class="{'shortList': shortList}">
+    <movies-list-item v-for='movie in results' :movie="movie" />
+  </ul>
+</template>
+
+
+<script>
+import MoviesListItem from '@/components/MoviesListItem'
+
+export default {
+  components: { MoviesListItem },
+  props: {
+    results: {
+      type: Array,
+      required: true
+    },
+    shortList: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}  
+</script>
+
+
+<style lang="scss" scoped>
+@import './src/scss/media-queries';
+
+.results {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &.shortList > li {
+    display: none;
+
+    &:nth-child(-n+4) {
+      display: block;
+    }
+  }
+}
+
+@include tablet-min {
+  .results.shortList > li:nth-child(-n+6) {
+    display: block;
+  }
+}
+@include tablet-landscape-min {
+  .results.shortList > li:nth-child(-n+8) {
+    display: block;
+  }
+}
+@include desktop-min {
+  .results.shortList > li:nth-child(-n+10) {
+    display: block;
+  }
+}
+@include desktop-lg-min {
+  .results.shortList > li:nth-child(-n+16) {
+    display: block;
+  }
+}
+
+</style>

src/components/Search.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <list-header :title="title" :info="resultCount" :sticky="true" />
+
+    <results-list :results="results" />
+    
+    <div v-if="page < totalPages" class="fullwidth-button">
+      <seasoned-button @click="loadMore">load more</seasoned-button>
+    </div>
+
+    <loader v-if="!results.length" />
+  </div>
+</template>
+
+<script>
+import { searchTmdb } from '@/api'
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import Loader from '@/components/ui/Loader'
+
+export default {
+  components: { ListHeader, ResultsList, SeasonedButton, Loader },
+  props: {
+    propQuery: {
+      type: String,
+      required: false
+    },
+    propPage: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      query: String,
+      title: String,
+      page: Number,
+      totalPages: 0,
+      results: [],
+      totalResults: []
+    }
+  },
+  computed: {
+    resultCount() {
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
+    }
+  },
+  methods: {
+    search(query=this.query, page=this.page) {
+      searchTmdb(query, page)
+        .then(this.parseResponse)
+    },
+    parseResponse(data) {
+      if (this.results.length > 0) {
+        this.results.push(...data.results)
+      } else {
+        this.results = data.results
+      }
+
+      this.totalPages = data.total_pages
+      this.totalResults = data.total_results || data.results.length
+
+      this.loading = false
+    },
+    loadMore() {
+      this.page++
+
+      window.history.replaceState({}, 'search', `/#/search?query=${this.query}&page=${this.page}`)
+      this.search()
+    }
+  },
+  created() {
+    const { query, page } = this.$route.query
+
+    if (!query) {
+      // abort
+      console.error('abort, no query')
+    }
+    this.query = decodeURIComponent(query)
+    this.page = page ? page : 1
+    this.title = `Search results: ${this.query}`
+
+    this.search()
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.fullwidth-button {
+  width: 100%;
+  margin: 1rem 0;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+}
+
+</style>

src/components/SearchInput.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    
+    <div class="search">
+      <input
+        type="text"
+        placeholder="Search for a movie or show"
+        autocorrect="off"
+        autocapitalize="off"
+        v-model="query" 
+        @input="handleInput" 
+        @click="focus = true"
+        @keydown.escape="handleEscape"
+        @keyup.enter="handleSubmit"
+        @keydown.up="navigateUp"
+        @keydown.down="navigateDown" />
+
+      <svg class="search--icon" fill="currentColor"><use xlink:href="#iconSearch"></use></svg>
+    </div> 
+
+    <transition name="fade">
+      <div class="dropdown" v-if="!disabled && focus && query.length > 0">
+        <div class="dropdown--results">
+
+          <ul v-for="(item, index) in elasticSearchResults"
+              @click="$popup.open(item.id, item.type)"
+              :class="{ active: index + 1 === selectedResult}">
+                
+              {{ item.name }}
+          </ul>
+
+        </div>
+
+        <seasoned-button class="end-section" fullWidth="true" 
+          @click="focus = false" :active="elasticSearchResults.length + 1 === selectedResult">
+          close
+        </seasoned-button>
+      </div>
+    </transition>
+</div>
+
+
+</template>
+
+<script>
+import SeasonedButton from '@/components/ui/SeasonedButton'
+
+import { elasticSearchMoviesAndShows } from '@/api'
+import config from '@/config.json'
+
+export default {
+  name: 'SearchInput',
+  components: {
+    SeasonedButton
+  },
+  props: ['value'],
+  data() {
+    return {
+      query: this.value,
+      focus: false,
+      disabled: false,
+      scrollListener: undefined,
+      scrollDistance: 0,
+      elasticSearchResults: '',
+      selectedResult: 0
+    }
+  },
+  watch: {
+    focus: function(val) {
+      if (val === true) {
+        window.addEventListener('scroll', this.disableFocus)
+      } else {
+        window.removeEventListener('scroll', this.disableFocus)
+        this.scrollDistance = 0
+      }
+    }
+  },
+  beforeMount() {
+    const elasticUrl = config.ELASTIC_URL
+    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === '') {
+      this.disabled = true
+    }
+  },
+  beforeDestroy() {
+    console.log('scroll eventlistener not removed, destroying!')
+    window.removeEventListener('scroll', this.disableFocus)
+  },
+  methods: {
+    navigateDown() {
+      this.focus = true
+      this.selectedResult++
+    },
+    navigateUp() {
+      this.focus = true
+      this.selectedResult--
+    },
+    handleInput(e){
+      this.selectedResult = 0
+      this.$emit('input', this.query);
+
+      if (! this.focus) {
+        this.focus = true;
+      }
+
+      elasticSearchMoviesAndShows(this.query)
+      .then(resp => {
+        const data = resp.hits.hits
+
+        this.elasticSearchResults = data.map(item => {
+          const index = item._index.slice(0, -1)
+          if (index === 'movie' || item._source.original_title) {
+            return {
+              name: item._source.original_title,
+              id: item._source.id,
+              type: 'movie'
+            }
+          } else if (index === 'show' || item._source.original_name) {
+            return {
+              name: item._source.original_name,
+              id: item._source.id,
+              type: 'show'
+            }
+          }
+        })
+        console.log(this.elasticSearchResults)
+      })
+    },
+    handleSubmit() {
+      let searchResults = this.elasticSearchResults
+
+      if (this.selectedResult > searchResults.length) {
+        this.focus = false
+        this.selectedResult = 0
+      } else if (this.selectedResult > 0) {
+        const resultItem = searchResults[this.selectedResult - 1]
+        this.$popup.open(resultItem.id, resultItem.type)
+      } else {
+        const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'))
+        this.$router.push({ name: 'search', query: { query: encodedQuery }});
+        this.focus = false
+        this.selectedResult = 0
+      }
+    },
+    handleEscape() {
+      if (this.$popup.isOpen) {
+        console.log('THIS WAS FUCKOING OPEN!')
+      } else {
+        this.focus = false
+      }
+    },
+    disableFocus(_) {
+      this.focus = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+@import './src/scss/main';
+
+
+.fade-enter-active {
+  transition: opacity .2s;
+}
+.fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.dropdown {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  z-index: 5;
+  min-height: $header-size;
+  right: 0px;
+  background-color: $background-color-secondary;
+
+  @include mobile-only {
+    position: fixed;
+    top: 50px;
+    padding-top: 20px;
+    width: calc(100%);
+  }
+
+  &--results {
+    padding-left: 60px;
+    width: 100%;
+
+    @include mobile-only {
+      padding-left: 45px;
+    }
+
+    > ul {
+      font-size: 1.3rem;
+      padding: 0;
+      margin: 0.2rem 0;
+      width: calc(100% - 25px);
+      max-width: fit-content;
+
+      list-style: none;      
+      color: rgba(0, 0, 0, 0.5);
+      text-transform: capitalize;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: $text-color-50;
+
+      &.active, &:hover, &:active {
+        color: $text-color;
+        border-bottom: 2px solid $text-color;
+      }
+    }
+  }
+}
+
+.search {
+  height: $header-size;
+  display: flex;
+  position: fixed;
+  flex-wrap: wrap;
+  z-index: 5;
+  border: 0;
+  background-color: $background-color-secondary;
+
+  // TODO check if this is for mobile
+  width: calc(100% - 110px);
+  top: 0;
+  right: 55px;
+
+  @include tablet-min{
+    position: relative;
+    width: 100%;
+    right: 0px;
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 13px 20px 13px 45px;
+    outline: none;
+    margin: 0;
+    border: 0;
+    background-color: $background-color-secondary;
+    font-weight: 300;
+    font-size: 19px;
+    color: $text-color;
+    transition: background-color .5s ease, color .5s ease;
+
+    @include tablet-min {
+      padding: 13px 30px 13px 60px;
+    }
+  }
+
+  &--icon{
+    width: 20px;
+    height: 20px;
+    fill: $text-color-50;
+    transition: fill 0.5s ease;
+    pointer-events: none;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+
+    @include tablet-min{
+      top: 27px;
+      left: 25px;
+    }
+  }
+}
+</style>

src/components/Settings.vue

@@ -1,45 +1,38 @@
 <template>
   <section class="profile">
-   <demo-login-modal/>
     <div class="profile__content" v-if="userLoggedIn">
       <section class='settings'>
         <h3 class='settings__header'>Plex account</h3>
         <span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>
 
         <form class="form">
-            <div class="form__group">
+          <seasoned-input placeholder="plex username" icon="Email" :value.sync="plexUsername"/>
-               <svg class="form__group__input-icon"><use xlink:href="#iconEmail"></use></svg>
+          <seasoned-input placeholder="plex password" icon="Keyhole" type="password"
-               <input class="form__group-input" type="text" ref="plex_username" placeholder="Plex username"/>
+            :value.sync="plexPassword" @submit="authenticatePlex" />
-            </div>
+
-            <div class="form__group">
+          <seasoned-button @click="authenticatePlex">link plex account</seasoned-button>
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+
-               <input class="form__group-input" type="password" ref="plex_password" placeholder="Repeat new password">
+          <seasoned-messages :messages.sync="messages" />
-            </div>
         </form>
-         <div class="plex">
-            <button type="button" class="button" @click="authenticatePlex">Link plex account</button>
-         </div>
 
         <hr class='setting__divider'>
 
         <h3 class='settings__header'>Change password</h3>
         <form class="form">
-            <div class="form__group">
+          <seasoned-input placeholder="new password" icon="Keyhole" type="password"
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+            :value.sync="newPassword" />
-               <input class="form__group-input" type="password" ref="password" placeholder="New password"/>
+
-            </div>
+          <seasoned-input placeholder="repeat new password" icon="Keyhole" type="password"
-            <div class="form__group">
+            :value.sync="newPasswordRepeat" />
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+
-               <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat new password">
+          <seasoned-button @click="changePassword">change password</seasoned-button>
-            </div>
-            <div class="form__group">
-               <button type="button" class="button" @click="$modal.show('demo-login')">Change password</button>
-            </div>
         </form>
+
         <hr class='setting__divider'>
       </section>
     </div>
-    <section class="not-found" v-if="!userLoggedIn">
+
+    <section class="not-found" v-else>
       <div class="not-found__content">
         <h2 class="not-found__title">Authentication Request Failed</h2>
         <router-link :to="{name: 'signin'}" exact title="Sign in here">
@@ -51,52 +44,53 @@
 </template>
 
 <script>
-import axios from 'axios'
+import storage from '@/storage'
-import storage from '../storage.js'
+import SeasonedInput from '@/components/ui/SeasonedInput'
-import DemoLoginModal from './demo.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'
+
+import { plexAuthenticate } from '@/api'
 
 export default {
-  components: { DemoLoginModal },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
   data(){
     return{
       userLoggedIn: '',
+      messages: [],
+      plexUsername: null,
+      plexPassword: null,
+      newPassword: null,
+      newPasswordRepeat: null
     }
   },
   methods: {
-   authenticatePlex() {
+    setValue(l, t) {
-      let username = this.$refs.plex_username.value;
+      this[l] = t
-      let password = this.$refs.plex_password.value;
-      console.log(username, password)
-
-      axios({
-         method: 'POST',
-         url: `https://plex.tv/users/sign_in.json?user[login]=${username}&user[password]=${password}`,
-         headers: {
-            'Content-Type': 'application/json',
-            'X-Plex-Platform': 'Linux',
-            'X-Plex-Version': 'v2.0.24',
-            'X-Plex-Platform-Version': '4.13.0-36-generic',
-            'X-Plex-Device-Name': 'Tautulli',
-            'X-Plex-Client-Identifier': 'f9e0748ec84440dd8d0e759ab598326c'
     },
+    changePassword() {
+      return
+    },
+    authenticatePlex() {
+      let username = this.plexUsername
+      let password = this.plexPassword
+
+      plexAuthenticate(username, password)
+      .then(resp => {
+        const data = resp.data
+        this.messages.push({ type: 'success', title: 'Authenticated with plex', message: 'Successfully linked plex account with seasoned request' })
+
+        console.log('response from plex:', data.username)
       })
-      .then((resp) => {
+      .catch(error => {
-         let data = resp.data;
+        console.error(error);
-         console.log('response from plex:', data.user)
+
-      })
+        this.messages.push({ type: 'error', title: 'Something went wrong', message: error.message })
-      .catch((error) => {
-         console.log('error: ', error)
       })
     }
   },
   created(){
-    document.title = 'Settings' + storage.pageTitlePostfix;
+    if (localStorage.getItem('token')){
-    storage.backTitle = document.title;
+      this.userLoggedIn = true
-    if(!localStorage.getItem('token')){
-      this.userLoggedIn = false;
-    } else {
-      this.userLoggedIn = true;
     }
   }
 }
@@ -105,13 +99,18 @@ export default {
 <style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 a {
    text-decoration: none;
 }
-.plex {
+
-   margin-top: 20px;
+// DUPLICATE CODE
-}
+.form {
-.form__group{
+  > div:last-child {
+    margin-top: 1rem;
+  }
+
+  &__group{
      justify-content: unset;
      &__input-icon {
         margin-top: 8px;
@@ -127,6 +126,7 @@ a {
            width: 400px;
         }
      }
+  }
 }
 .settings {
    padding: 35px;
@@ -134,7 +134,7 @@ a {
    &__header {
       margin: 0;
       line-height: 16px;
-      color: $c-dark;
+      color: $text-color;
       font-weight: 300;
       margin-bottom: 20px;
       text-transform: uppercase;

src/components/Signin.vue

@@ -1,122 +1,99 @@
 <template>
-  <section class="profile">
+  <section>
-    <div class="profile__content">
+    <h1>Sign in</h1>
-      <header class="profile__header">
-        <h2 class="profile__title">Register new user</h2>
-      </header>
 
-      <form class="form">
+    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />
-        <div class="form__buffer"></div>
+    <seasoned-input placeholder="password" icon="Keyhole" type="password" :value.sync="password" @enter="signin"/>
-        <div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconEmail"></use>
-            </svg>
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password" v-on:keyup.enter="signin">
-          </div>
 
-          <transition name="message-fade">
+    <seasoned-button @click="signin">sign in</seasoned-button>
-              <div class="message" :class="messageClass" v-if="showMessage">
-                <span class="message-text">{{ messageText }}</span>
-                <span class="message-dismiss" @click="showMessage=false">X</span>
-              </div>
-            </transition>
 
-          <div class="form__group">
+    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
-            <button type="button" class="button" v-on:click="signin">Sign in</button>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-          </div>
-        </div>
-      </form>
 
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'register'}" exact title="Sign in here">
-          <span class="form__group-signin">Don't have a user? Register here</span>
-        </router-link>
-      </div>
-
-      <!-- <created-lists></created-lists> -->
-    </div>
   </section>
 </template>
 
+
+
 <script>
 import axios from 'axios'
-import storage from '../storage.js'
+import storage from '../storage'
-import MoviesList from './MoviesList.vue'
+import SeasonedInput from '@/components/ui/SeasonedInput'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'
 
 export default {
-  components: { MoviesList },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
   data(){
     return{
-      userLoggedIn: '',
+      messages: [],
-      userName: '',
+      username: null,
-      showMessage: false,
+      password: null
-      messageClass: 'message-success',
-      messageText: 'hello world'
     }
   },
   methods: {
+    setValue(l, t) {
+      this[l] = t
+    },
     signin(){
-      let username = this.$refs.username.value;
+      let username = this.username;
-      let password = this.$refs.password.value;
+      let password = this.password;
 
       axios.post(`https://api.kevinmidboe.com/api/v1/user/login`, {
         username: username,
         password: password
       })
-      .then(function (resp){
+      .then(resp => {
         let data = resp.data;
         if (data.success){
           localStorage.setItem('token', data.token);
           localStorage.setItem('username', username);
           localStorage.setItem('admin', data.admin);
-          this.userLoggedIn = true;
           
           eventHub.$emit('setUserStatus');
           this.$router.push({ name: 'profile' })
         }
-      }.bind(this))
+      })
-      .catch(function (error){
+      .catch(error => {
-        if (error.message.endsWith('401'))
+        if (error.message.endsWith('401')) {
-          this.msg('Incorrect username or password ', 'warning')
+          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
-        else
+        }
-          this.msg(error.message, 'warning')
+        else {
-      }.bind(this));
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
-    },
+        }
-    msg(text, status){
+      });
-      if (status === 'warning')
+    }
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    toggleView(){
-      this.register = false;
-    },
   },
   created(){
     document.title = 'Sign in' + storage.pageTitlePostfix;
     storage.backTitle = document.title;
-    if (this.userLoggedIn == true) {
-      this.$router.push({ name: 'profile' })
-    }
-  },
-  mounted(){
-    // this.$refs.email.focus();
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+section {
+  padding: 1.3rem;
+
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
+    margin: 0;
+    line-height: 16px;
+    color: $text-color;
+    font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+  }
+
+  .link {
+    display: block;
+    width: max-content;
+    margin-top: 1rem;
+  }
+}
 </style>

src/components/TorrentList.vue

@@ -1,146 +1,503 @@
 <template>
-  <section>
+  <div v-if="show" class="container">
-    <div v-if="listLoaded">
+    <h2 class="torrentHeader-text">Searching for: {{ editedSearchQuery || query }}</h2>
-      <div v-if="torrents.length">
+<!--     <div class="torrentHeader">
-        <data-tablee
+      <span class="torrentHeader-text">Searching for:&nbsp;</span>
-      :rows="torrents"
-      :cols="cols"
-      empty="-"
-    >
-      <span
-        class="data-tablee-icon"
-        slot="sort-icon"
-        slot-scope="{ sortment, sorted, arrow }"
-      >
-        {{ sorted ? arrow + ' ' + (sortment === 'ascending' ? 'ASC' : 'DESC') : '' }}
-      </span>
 
-      <template
+
-        slot="row"
+      <span id="search" :contenteditable="editSearchQuery ? true : false" class="torrentHeader-text editable">{{ editedSearchQuery || query }}</span>
-        slot-scope="{ row, index }"
+
-      >
+
-        <td class="data-tablee-cell -content data-tablee-text" v-bind:title="row.name" v-if="!renderName">{{ row.name.slice(0, 50) }}</td>
+      <svg v-if="!editSearchQuery" class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
-        <td class="data-tablee-cell -content data-tablee-text" v-on:click="showInfo(row.name)">{{ row.seed }}</td>
+        <use xlink:href="#icon_radar"></use>
-        <td class="data-tablee-cell -content data-tablee-text" v-on:click="showInfo(row.name)">{{ row.size }}</td>
+      </svg>
-        <td class="data-tablee-cell -content data-tablee-text magnet">
+
-          <button type='button' class="button" @click="sendTorrent(row.magnet, row.name)">Add</button>
+      <svg v-else class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
+        <use xlink:href="#icon_check"></use>
+      </svg>
+
+    </div> -->
+
+    <div v-if="listLoaded">
+      <div v-if="torrents.length > 0">
+        <ul class="filter">
+          <li class="filter-item" v-for="(item, index) in release_types" @click="applyFilter(item, index)" :class="{'active': item === selectedRelaseType}">{{ item }}</li>
+        </ul>
+
+
+        <table>
+          <tr class="table__header noselect">
+            <th @click="sortTable('name')" :class="selectedSortableClass('name')">
+              <span>Name</span>
+              <span v-if="prevCol === 'name' && direction">↑</span>
+              <span v-if="prevCol === 'name' && !direction">↓</span>
+            </th>
+            <th @click="sortTable('seed')" :class="selectedSortableClass('seed')">
+              <span>Seed</span>
+              <span v-if="prevCol === 'seed' && direction">↑</span>
+              <span v-if="prevCol === 'seed' && !direction">↓</span>
+            </th>
+            <th @click="sortTable('size')" :class="selectedSortableClass('size')">
+              <span>Size</span>
+              <span v-if="prevCol === 'size' && direction">↑</span>
+              <span v-if="prevCol === 'size' && !direction">↓</span>
+            <th>
+              <span>Magnet</span>
+            </th>
+          </tr>
+          <tr v-for="torrent in torrents" class="table__content">
+            <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
+            <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
+            <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
+            <td @click="sendTorrent(torrent.magnet, torrent.name, $event)" class="download">
+              <svg class="download__icon"><use xlink:href="#iconUnmatched"></use></svg>
             </td>
-      </template>
+          </tr>
-    </data-tablee>
+        </table>
+
+        <div style="
+          display: flex;
+          justify-content: center;
+          padding: 1rem;
+        ">
+          <seasonedButton @click="resetTorrentsAndToggleEditSearchQuery">Edit search query</seasonedButton>
         </div>
-      <section v-if="!torrents.length" class="">
-        <div class="not-found__content">
-          <h2 class="not-found__title">{{ errorMessage }}</h2>
       </div>
-      </section>
+
+    <div v-else style="display: flex;
+                       padding-bottom: 2rem;
+                       justify-content: center;
+                       flex-direction: column;
+                       width: 100%;
+                       align-items: center;">
+      <h2>No results found</h2>
+      <br />
+
+      <div class="editQuery" v-if="editSearchQuery">
+
+        <seasonedInput placeholder="Torrent query" icon="_torrents" :value.sync="editedSearchQuery" @enter="fetchTorrents(editedSearchQuery)" />
+
+        <div style="height: 45px; width: 5px;"></div>
+
+        <seasonedButton @click="fetchTorrents(editedSearchQuery)">Search</seasonedButton>
+      </div>
+
+      <seasonedButton @click="toggleEditSearchQuery" :active="editSearchQuery ? true : false">Edit search query</seasonedButton>
+    </div>
+    </div>
+    <div v-else class="torrentloader"><i></i></div>
   </div>
-    <i v-if="!listLoaded" class="torrentloader"></i>
-  </section>
 </template>
 
 <script>
-import axios from 'axios'
+import storage from '@/storage'
-import numeral from 'numeral'
+import store from '@/store'
-import storage from '../storage.js'
+import { sortableSize } from '@/utils'
+import { searchTorrents, addMagnet } from '@/api'
 
-// import testTorrents from './torrents.json';
+import SeasonedButton from '@/components/ui/SeasonedButton'
-
+import SeasonedInput from '@/components/ui/SeasonedInput'
-let tablet = window.innerWidth < 768 ? true : false;
 
 export default {
-  props: ['query', 'tmdb_id', 'tmdb_type'],
+  components: { SeasonedButton, SeasonedInput },
-  beforeRouteLeave (to, from, next) {
+  props: {
-    if(from.name == 'search'){
+    query: {
-      eventHub.$emit('setSearchQuery', true);
+      type: String,
-    }
+      require: true
-    next();
+    },
+    tmdb_id: {
+      type: Number,
+      require: true
+    },
+    tmdb_type: String,
+    admin: String,
+    show: Boolean
   },
   data() {
     return {
-      torrents: [],
       listLoaded: false,
-      errorMessage: '',
+      torrents: [],
-      renderName: tablet,
+      torrentResponse: undefined,
-      cols: [
+      currentPage: 0,
-        { label: 'Name', field: 'name', sort: true, hidden: tablet },
+      prevCol: '',
-        { label: 'Seeders', field: 'seed', sort: (a, b) => parseInt(a) - parseInt(b) },
+      direction: false,
-        { label: 'Size', field: 'size', sort: (a, b) => this.sortableSize(a) - this.sortableSize(b) },
+      release_types: ['all'],
-        { label: 'Add', align: 'center' }
+      selectedRelaseType: 'all',
-      ],
+      editSearchQuery: false,
+      editedSearchQuery: ''
     }
   },
+  beforeMount() {
+    if (localStorage.getItem('admin')) {
+      this.fetchTorrents()
+    }
+    store.dispatch('torrentModule/reset')
+  },
   methods: {
-    fetchTorrents(){
+    selectedSortableClass(headerName) {
-      axios.get(`https://api.kevinmidboe.com/api/v1/pirate/search?query=${this.query}&filter=all&page=${this.currentPage}`, {
+      return headerName === this.prevCol ? 'active' : ''
-        headers: {authorization: storage.token},
+    },
+    resetTorrentsAndToggleEditSearchQuery() {
+      this.torrents = []
+      this.toggleEditSearchQuery()
+    },
+    toggleEditSearchQuery() {
+      this.editSearchQuery = !this.editSearchQuery;
+    },
+    expand(event, name) {
+      const existingExpandedElement = document.getElementsByClassName('expanded')[0]
+
+      if (existingExpandedElement) {
+        console.log('exists')
+        const expandedSibling = event.target.parentNode.nextSibling.className === 'expanded'
+
+        existingExpandedElement.remove()
+
+        if (expandedSibling) {
+          console.log('sibling is here')
+          return
+        }
+      }
+
+      console.log('expand event', event)
+      const nameRow = document.createElement('tr')
+      const nameCol = document.createElement('td')
+      nameRow.className = 'expanded'
+      nameCol.innerText = name
+
+      nameRow.appendChild(nameCol)
+
+      event.target.parentNode.insertAdjacentElement('afterend', nameRow)
+    },
+    sendTorrent(magnet, name, event){
+      this.$notifications.info({
+        title: 'Adding torrent 🦜',
+        description: this.query,
+        timeout: 3000
       })
-      .then(resp => {
+
-          let data = resp.data;
+      event.target.parentNode.classList.add('active')
+
+      addMagnet(magnet, name, this.tmdb_id)
+      .catch((resp) => { console.log('error:', resp.data) })
+      .then((resp) => {
+        console.log('addTorrent resp: ', resp)
+        this.$notifications.success({
+          title: 'Torrent added 🎉',
+          description: this.query,
+          timeout: 3000
+        })
+      })
+    },
+    sortTable(col, sameDirection=false) {
+      if (this.prevCol === col && sameDirection === false) {
+        this.direction = !this.direction
+      }
+      console.log('col and more', col, sameDirection)
+
+      switch (col) {
+        case 'name':
+          this.sortName()
+          break
+        case 'seed':
+          this.sortSeed()
+          break
+        case 'size':
+          this.sortSize()
+          break
+      }
+      this.prevCol = col
+    },
+    sortName() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => (a.name < b.name) ? 1 : -1)
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => (a.name > b.name) ? 1 : -1)
+      }
+    },
+    sortSeed() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(a.seed) - parseInt(b.seed));
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(b.seed) - parseInt(a.seed));
+      }
+    },
+    sortSize() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(a.size)) - parseInt(sortableSize(b.size)));
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(b.size)) - parseInt(sortableSize(a.size)));
+      }
+    },
+    findRelaseTypes() {
+      this.torrents.forEach(item => this.release_types.push(...item.release_type))
+      this.release_types = [...new Set(this.release_types)]
+    },
+    applyFilter(item, index) {
+      this.selectedRelaseType = item;
+      const torrents = [...this.torrentResponse]
+
+      if (item === 'all') {
+        this.torrents = torrents
+        this.sortTable(this.prevCol, true)
+        return
+      }
+
+      this.torrents = torrents.filter(torrent => torrent.release_type.includes(item))
+      this.sortTable(this.prevCol, true)
+    },
+    updateResultCountInStore() {
+      store.dispatch('torrentModule/setResults', this.torrents)
+      store.dispatch('torrentModule/setResultCount', this.torrentResponse.length)
+    },
+    fetchTorrents(query=undefined){
+      this.listLoaded = false;
+      this.editSearchQuery = false;
+
+      searchTorrents(query || this.query, 'all', this.currentPage, storage.token)
+        .then(data => {
+            this.torrentResponse = [...data.results];
             this.torrents = data.results;
             this.listLoaded = true;
         })
+        .then(this.updateResultCountInStore)
+        .then(this.findRelaseTypes)
         .catch(e => {
           const error = e.toString()
           this.errorMessage = error.indexOf('401') != -1 ? 'Permission denied' : 'Nothing found';
           this.listLoaded = true;
         });
     },
-    sendTorrent(magnet, name){
+  }
-      axios.post(`https://api.kevinmidboe.com/api/v1/pirate/add`, {
-        magnet: magnet, name: name, tmdb_id: this.tmdb_id }, { headers: {authorization: storage.token}
-      })
-      .catch((resp) => { console.log('error:', resp.data) })
-      .then((resp) => { console.log('addTorrent resp: ', resp) })
-    },
-    showInfo(text){
-      alert(text)
-    },
-    sortableSize(string) {
-       const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-       const [numStr, unit] = string.split(' ');
-       if (UNITS.indexOf(unit) === -1)
-          return string
-       const exponent = UNITS.indexOf(unit) * 3
-       return numStr * (Math.pow(10, exponent))
-    },
-  },
-  created(){
-    this.fetchTorrents();
-  },
 }
 </script>
 
-<style src="../scss/vue-data-tablee.css"></style>
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.expanded {
+  display: flex;
+  margin: 0 1rem;
+  max-width: 100%;
+  border-left: 1px solid $text-color;
+  border-right: 1px solid $text-color;
+  border-bottom: 1px solid $text-color;
+
+  td {
+    // border-left: 1px solid $c-dark;
+    word-break: break-all;
+    padding: 0.5rem 0.15rem;
+    width: 100%;
+  }
+}
+</style>
 <style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.magnet{
+@import "./src/scss/elements";
-  text-align: center;
+
+.container {
+  background-color: $background-color;
 }
-.add{
+
-  padding: 3px 15px 3px 15px;
+.torrentHeader {
-  &:hover, &:active{
+  display: flex;
-    background: $c-dark;
+  align-items: center;
-    color: $c-white;
+  justify-content: center;
+  padding-bottom: 20px;
+
+
+  &-text {
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: 14px;
+    color: $green;
+    text-align: center;
+    margin: 0;
+
+    @include tablet-min {
+      font-size: 16px
+    }
+
+    &.editable {
+      cursor: pointer;
+    }
+  }
+
+  &-editIcon {
+    margin-left: 10px;
+    margin-top: -3px;
+    width: 22px;
+    height: 22px;
+
+    &:hover {
+      fill: $green;
+      cursor: pointer;
+    }
   }
 }
-.torrentloader{
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.table__content, .table__header {
+  display: flex;
+  padding: 0;
+  margin: 0 1rem;
+  border-left: 1px solid $text-color;
+  border-right: 1px solid $text-color;
+  border-bottom: 1px solid $text-color;
+
+  th, td {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+
+    padding: 0.4rem;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    min-width: 75px;
+  }
+
+  th:first-child, td:first-child {
+    flex: 1;
+  }
+
+  th:not(:first-child), td:not(:first-child) {
+    flex: 0.2;
+  }
+
+  th:nth-child(2), td:nth-child(2) {
+    flex: 0.1;
+  }
+
+  @include mobile-only {
+    th:first-child, td:first-child {
+      display: none;
+
+      &.show {
+        display: block;
+        align: flex-end;
+      }
+    }
+
+    th:not(:first-child), td:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+}
+
+.table__content {
+  td:not(:last-child) {
+    border-right: 1px solid $text-color;
+  }
+}
+
+.table__content:last-child {
+  margin-bottom: 1rem;
+
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.table__header {
+  color: $text-color;
+  text-transform: uppercase;
+  cursor: pointer;
+  background-color: $background-color-secondary;
+
+  border-top: 1px solid $text-color;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  th {
+    display: flex;
+    flex-direction: row;
+    font-weight: 400;
+    letter-spacing: 0.7px;
+    // font-size: 1.08rem;
+    font-size: 15px;
+
+    &::before {
+      content: '';
+      min-width: 0.2rem;
+    }
+
+    span:first-child {
+      margin-right: 0.6rem;
+    }
+    span:nth-child(2) {
+      margin-right: 0.1rem;
+    }
+  }
+
+  th:not(:last-child) {
+    border-right: 1px solid $text-color;
+  }
+
+}
+
+
+
+.editQuery {
+  display: flex;
+  width: 70%;
+  justify-content: center;
+
+  @include mobile-only {
+    width: 90%;
+  }
+}
+
+
+.download {
+
+  &__icon {
+    fill: $text-color-70;
+    height: 1.2rem;
+
+    &:hover {
+      fill: $text-color;
+      cursor: pointer;
+    }
+  }
+
+  &.active &__icon {
+    fill: $green;
+  }
+}
+
+.torrentloader {
+  width: 100%;
+  padding: 2rem 0;
+
+  i {
     animation: load 1s linear infinite;
-  border: 2px solid $c-dark;
+    border: 2px solid $text-color;
     border-radius: 50%;
     display: block;
     height: 30px;
     left: 50%;
     margin: 0 auto;
     width: 30px;
+
     &:after {
-    border: 5px solid $c-green;
+      border: 5px solid $green;
       border-radius: 50%;
       content: '';
       left: 10px;
       position: absolute;
       top: 16px;
     }
+  }
 }
 @keyframes load {
   100% { transform: rotate(360deg); }

src/components/demo.vue

@@ -1,221 +0,0 @@
-<template>
-<modal name="demo-login" transition="pop-out" :width="modalWidth" :height="400">
-  <div class="box">
-      <div class="partition" id="partition-register">
-        <div class="partition-title">CREATE ACCOUNT</div>
-        <div class="partition-form">
-          <form autocomplete="false">
-
-            <div class="autocomplete-fix">
-              <input type="password">
-            </div>
-
-            <input id="n-username" type="text" placeholder="Username">
-            <input id="n-password1" type="password" placeholder="Password">
-            <input id="n-password2" type="password" placeholder="Retype password">
-          </form>
-
-          <div style="margin-top: 42px">
-          </div>
-
-          <div class="button-set">
-            <button id="goto-signin-btn">Sign In</button>
-            <button id="register-btn">Register</button>
-          </div>
-
-          <button class="large-btn github-btn">connect with <span>github</span></button>
-          <button class="large-btn facebook-btn">connect with <span>facebook</span></button>
-        </div>
-      </div>
-  </div>
-</modal>
-</template>
-<script>
-const MODAL_WIDTH = 370
-
-export default {
-  name: 'DemoLoginModal',
-  data () {
-    return {
-      modalWidth: MODAL_WIDTH
-    }
-  },
-  created () {
-    this.modalWidth = window.innerWidth < MODAL_WIDTH
-      ? MODAL_WIDTH / 2
-      : MODAL_WIDTH
-  }
-}
-</script>
-<style lang="scss">
-$background_color: #404142;
-$github_color: #DBA226;
-$facebook_color: #3880FF;
-
-.box {
-  background: white;
-  overflow: hidden;
-  width: 100%;
-  height: 400px;
-  border-radius: 2px;
-  box-sizing: border-box;
-  box-shadow: 0 0 40px black;
-  color: #8b8c8d;
-  font-size: 0;
-
-  .box-part {
-    display: inline-block;
-    position: relative;
-    vertical-align: top;
-    box-sizing: border-box;
-    height: 100%;
-
-    &#bp-right {
-      background: url("/static/panorama.jpg") no-repeat top left;
-      border-left: 1px solid #eee;
-    }
-  }
-
-  .box-messages {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-
-  .box-error-message {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    height: 0;
-    line-height: 32px;
-    padding: 0 12px;
-    text-align: center;
-    width: 100%;
-    font-size: 11px;
-    color: white;
-    background: #F38181;
-  }
-
-  .partition {
-    width: 100%;
-    height: 100%;
-
-    .partition-title {
-      box-sizing: border-box;
-      padding: 30px;
-      width: 100%;
-      text-align: center;
-      letter-spacing: 1px;
-      font-size: 20px;
-      font-weight: 300;
-    }
-
-    .partition-form {
-      padding: 0 20px;
-      box-sizing: border-box;
-    }
-  }
-
-  input[type=password],
-  input[type=text] {
-    display: block;
-    box-sizing: border-box;
-    margin-bottom: 4px;
-    width: 100%;
-    font-size: 12px;
-    line-height: 2;
-    border: 0;
-    border-bottom: 1px solid #DDDEDF;
-    padding: 4px 8px;
-    font-family: inherit;
-    transition: 0.5s all;
-    outline: none;
-  }
-
-  button {
-    background: white;
-    border-radius: 4px;
-    box-sizing: border-box;
-    padding: 10px;
-    letter-spacing: 1px;
-    font-family: "Open Sans", sans-serif;
-    font-weight: 400;
-    min-width: 140px;
-    margin-top: 8px;
-    color: #8b8c8d;
-    cursor: pointer;
-    border: 1px solid #DDDEDF;
-    text-transform: uppercase;
-    transition: 0.1s all;
-    font-size: 10px;
-    outline: none;
-    &:hover {
-      border-color: mix(#DDDEDF, black, 90%);
-      color: mix(#8b8c8d, black, 80%);
-    }
-  }
-
-  .large-btn {
-    width: 100%;
-    background: white;
-
-    span {
-      font-weight: 600;
-    }
-    &:hover {
-      color: white !important;
-    }
-  }
-
-  .button-set {
-    margin-bottom: 8px;
-  }
-
-  #register-btn,
-  #signin-btn {
-    margin-left: 8px;
-  }
-
-  .facebook-btn {
-    border-color: $facebook_color;
-    color: $facebook_color;
-    &:hover {
-      border-color: $facebook_color;
-      background: $facebook_color;
-    }
-  }
-
-  .github-btn {
-    border-color: $github_color;
-    color: $github_color;
-    &:hover {
-      border-color: $github_color;
-      background: $github_color;
-    }
-  }
-
-  .autocomplete-fix {
-    position: absolute;
-    visibility: hidden;
-    overflow: hidden;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    left: 0;
-    top: 0;
-  }
-}
-
-.pop-out-enter-active,
-.pop-out-leave-active {
-  transition: all 0.5s;
-}
-
-.pop-out-enter,
-.pop-out-leave-active {
-  opacity: 0;
-  transform: translateY(24px);
-}
-</style>

src/components/ui/Loader.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="loader">
+    <i class="loader--icon">
+      <i class="loader--icon-spinner" />
+    </i>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+.loader {
+  display: flex;
+  width: 100%;
+  height: 30vh;
+  justify-content: center;
+  align-items: center;
+
+  &--icon{
+    border: 2px solid $text-color-70;
+    border-radius: 50%;
+    display: block;
+    height: 40px;
+    position: absolute;
+    width: 40px;
+
+    &-spinner {
+      display: block;
+      animation: load 1s linear infinite;
+      height: 35px;
+      width: 35px;
+      &:after {
+        border: 7px solid $green-90;
+        border-radius: 50%;
+        content: '';
+        left: 8px;
+        position: absolute;
+        top: 22px;
+      }
+    }
+  }
+  @keyframes load {
+    100% { transform: rotate(360deg); }
+  }
+}
+</style>

src/components/ui/LoadingPlaceholder.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="text-input__loading">
+      <div class="text-input__loading--line" :class="lineClass" v-for="_ in Array(count)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      require: true
+    },
+    lineClass: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/loading-placeholder";
+
+</style>

src/components/ui/SeasonedButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="seasoned-button">
+    <button type="button" class="button" @click="emit('click')" :class="{ active: active }"><slot></slot></button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'seasonedButton',
+  props: {
+    active: Boolean
+  },
+  methods: {
+    emit() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.button{
+  display: inline-block;
+  border: 1px solid $text-color;
+  text-transform: uppercase;
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 2;
+  height: 45px;
+  letter-spacing: 0.5px;
+  padding: 5px 20px 4px 20px;
+  margin: 0;
+  margin-right: 0.3rem;
+  cursor: pointer;
+  color: $text-color;
+  background: $background-color-secondary;
+  outline: none;
+  transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
+
+  @include tablet-min{
+    font-size: 12px;
+    padding: 6px 20px 5px 20px;
+  }
+
+  body:not(.touch) &:hover, &:focus, &:active, &.active {
+    background: $text-color;
+    color: $background-color;
+  }
+}
+</style>

src/components/ui/SeasonedInput.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="group" :class="{ completed: value }">
+    <svg class="group__input-icon"><use v-bind="{'xlink:href':'#icon' + icon}"></use></svg>
+    <input class="group__input" :type="tempType || type" @input="handleInput" v-model="inputValue"
+          :placeholder="placeholder" @keyup.enter="submit" />
+    
+    <i v-if="value && type === 'password'" @click="toggleShowPassword" class="group__input-show noselect">show</i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: { type: String },
+    icon: { type: String },
+    type: { type: String, default: 'text' },
+    value: { type: String, default: undefined }
+  },
+  data() {
+    return {
+      inputValue: this.value || undefined,
+      tempType: undefined
+    }
+  },
+  methods: {
+    submit(event) {
+      this.$emit('enter')
+    },
+    handleInput(event) {
+      if (this.value !== undefined) {
+        this.$emit('update:value', this.inputValue)
+      } else {
+        this.$emit('change', this.inputValue, event)
+      }
+    },
+    toggleShowPassword() {
+      if (this.tempType === 'text') {
+        this.tempType = 'password'
+      } else {
+        this.tempType = 'text'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.group{
+  display: flex;
+  margin-bottom: 1rem;
+  width: 100%;
+
+  &:hover, &:focus {
+    .group__input {
+      border-color: $text-color;
+
+      &-icon {
+        fill: $text-color;
+      }      
+    }
+  }
+
+  &.completed {
+    .group__input {
+      border-color: $text-color;
+
+      &-icon {
+        fill: $text-color;
+      }      
+    }
+  }
+
+  &__input {
+    width: 100%;
+    max-width: 35rem;
+    padding: 10px 10px 10px 45px;
+    outline: none;
+    background-color: $background-color-secondary;
+    color: $text-color;
+    font-weight: 100;
+    font-size: 1.2rem;
+    border: 1px solid $text-color-50;
+    margin: 0;
+    margin-left: -2.2rem !important;
+    z-index: 3;
+    transition: color .5s ease, background-color .5s ease, border .5s ease;
+
+    border-radius: 0;
+    -webkit-appearance: none;
+
+    &-show {
+      position: relative;
+      left: -50px;
+      z-index: 11;
+      margin: auto 0;
+      height: 100%;
+      font-size: 0.9rem;
+      cursor: pointer;
+      color: $text-color-50;
+    }
+  }
+
+  &__input-icon {
+    width: 24px;
+    height: 24px;
+    fill: $text-color-50;
+    transition: fill 0.5s ease;
+    pointer-events: none;
+    margin-top: 10px;
+    margin-left: 10px;
+    z-index: 8;
+  }
+}
+</style>

src/components/ui/SeasonedMessages.vue

@@ -0,0 +1,153 @@
+<template>
+  <transition-group name="fade">
+    <div class="message" v-for="(message, index) in reversedMessages" :class="message.type || 'warning'" :key="index">
+      <span class="pinstripe"></span>
+      <div>
+        <h2>{{ message.title || defaultTitles[message.type] }}</h2>
+        <span>{{ message.message }}</span>
+      </div>
+
+      <button class="dismiss" @click="clicked(message)">X</button>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+
+export default {
+  props: {
+    messages: {
+      required: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+      defaultTitles: {
+        error: 'Unexpected error',
+        warning: 'Something went wrong',
+        undefined: 'Something went wrong'
+      },
+      localMessages: [...this.messages]
+    }
+  },
+  computed: {
+    reversedMessages() {
+      return [...this.messages].reverse()
+    }
+  },
+  methods: {
+    clicked(e) {
+      const removedMessage = [...this.messages].filter(mes => mes !== e)
+      this.$emit('update:messages', removedMessage)
+    }
+  },
+  // watch: {
+  //   messages(propState, oldState) {
+  //     const newMessage = propState.filter(msg => !this.localMessages.includes(msg))
+  //     console.log('newMessage', newMessage)
+  //     this.localMessages = this.localMessages.concat(newMessage)
+  //   }
+  // }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.fade-enter-active {
+  transition: opacity .4s;
+}
+.fade-leave-active {
+  transition: opacity .1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.message {
+  width: 100%;
+  max-width: 35rem;
+  height: 75px;
+
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: $text-color-70;
+
+  > div {
+    margin: 6px 24px;
+    width: 100%;
+
+  }
+
+  h2 {
+    font-weight: 300;
+    letter-spacing: 0.25px;
+    margin: 0;
+    font-size: 1.3rem;
+    color: $text-color;
+    transition: color .5s ease;
+  }
+  span {
+    font-weight: 300;
+    color: $text-color-70;
+    transition: color .5s ease;
+  }
+
+  .pinstripe {
+    height: 100%;
+    width: 0.5rem;
+    // background-color: $color-error-highlight;
+  }
+
+  .dismiss {
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: transparent;
+    border: unset;
+    font-size: 18px;
+    cursor: pointer;
+
+    top: 0;
+    float: right;
+    height: 1.5rem;
+    width: 1.5rem;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    color: $text-color-70;
+    transition: color .5s ease;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+
+  &.success {
+    background-color: $color-success;
+
+    .pinstripe {
+      background-color: $color-success-highlight;
+    }
+  }
+  
+  &.error {
+    background-color: $color-error;
+
+    .pinstripe {
+      background-color: $color-error-highlight;
+    }
+  }
+
+  &.warning {
+    background-color: $color-warning;
+    
+    .pinstripe {
+      background-color: $color-warning-highlight;
+    }
+  }
+}
+
+</style>

src/components/ui/SvgIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <div v-html="require(`@/assets/icons/${ icon }.svg`)"></div>
+</template>
+
+<script>
+  export default {
+    props: ['icon']
+  }
+</script>

src/components/ui/darkmodeToggle.vue

@@ -0,0 +1,51 @@
+<template>
+
+  <div class="darkToggle">
+    <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
+  </div>
+
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      darkmode: window.getComputedStyle(document.body).colorScheme.includes('dark')
+    }
+  },
+  methods: {
+    toggleDarkmode() {
+      this.darkmode = !this.darkmode;
+      document.body.className = this.darkmode ? 'dark' : 'light'
+    }
+  },
+  computed: {
+    darkmodeToggleIcon() {
+      return this.darkmode ? '🌝' : '🌚'
+    }
+  }
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.darkToggle {
+  height: 25px;
+  width: 25px;
+  cursor: pointer;
+  // background-color: red;
+  position: fixed;
+  margin-bottom: 10px;
+  margin-right: 2px;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/components/ui/sidebarListElem.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <a @click="$emit('click')"><li>
+      <figure :class="activeClassIfActive">
+        <svg><use :xlink:href="iconRefNameIfActive"/></svg>
+      </figure>
+
+      <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
+
+      <span v-if="supplementaryText" class="supplementary-text">
+        {{ supplementaryText }}
+      </span>
+    </li></a>
+  </div>
+</template>
+
+<script>
+  // TODO if a image is hovered and we can't set the hover color we want to
+  // go into it and change the fill
+export default {
+  props: {
+    iconRef: {
+      type: String,
+      required: true
+    },
+    iconRefActive: {
+      type: String,
+      required: false
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    textActive: {
+      type: String,
+      required: false
+    },
+    supplementaryText: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    iconRefNameIfActive() {
+      const { iconRefActive, iconRef, active } = this
+
+      if ((iconRefActive && iconRef) & active) {
+        return iconRefActive
+      }
+      return iconRef
+    },
+    contentTextToDisplay() {
+      const { textActive, active, $slots } = this
+
+      if (textActive && active)
+        return textActive
+
+      if ($slots.default && $slots.default.length > 0)
+        return $slots.default[0].text
+
+      return ''
+    },
+    activeClassIfActive() {
+      return this.active ? 'active' : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+li {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: $text-color-50;
+  transition: color 0.5s ease;
+  font-size: 11px;
+  padding: 10px 0;
+  border-bottom: 1px solid $text-color-5;
+
+  &:hover {
+    color: $text-color-70;
+    cursor: pointer;
+  }
+  .active {
+    color: $text-color;
+  }
+  .pending {
+    color: #f8bd2d;
+  }
+
+  .supplementary-text {
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  figure, figure > svg {
+    width: 18px;
+    height: 18px;
+    margin: 0 7px 0 0;
+    fill: $text-color-50;
+    transition: fill 0.5s ease, transform 0.5s ease;
+    &.waiting {
+      transform: scale(0.8, 0.8);
+    }
+    &.pending {
+      fill: #f8bd2d;
+    }
+    &:hover &-icon {
+      fill: $text-color-70;
+      cursor: pointer;
+    }
+    &.active > svg {
+      fill: $green;
+    }
+  }
+}
+</style>

src/config.json.example

@@ -0,0 +1,5 @@
+{
+    "SEASONED_URL": "http://localhost:31459/api/",
+    "ELASTIC_URL": "http://localhost:9200",
+    "ELASTIC_INDEX": "shows,movies"
+}

src/main.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import axios from 'axios'
 import router from './routes'
+import store from './store'
 
+import Toast from './plugins/Toast'
 import DataTablee from 'vue-data-tablee'
 import VModal from 'vue-js-modal'
 
@@ -10,12 +12,17 @@ import App from './App.vue'
 
 window.eventHub = new Vue();
 
-Vue.use(VueRouter, axios)
+Vue.use(VueRouter)
+Vue.use(Toast)
 Vue.use(DataTablee)
 Vue.use(VModal, { dialog: true })
 
+store.dispatch('darkmodeModule/findAndSetDarkmodeSupported')
+
 new Vue({
   el: '#app',
   router,
-  render: h => h(App)
+  store,
+  components: { App },
+  template: '<App />'
 })

src/modules/darkmodeModule.js

@@ -0,0 +1,23 @@
+export default {
+  namespaced: true,
+  state: {
+    darkmodeSupported: undefined,
+    userChoice: undefined
+  },
+  getters: {
+    darkmodeSupported: (state) => {
+      return state.darkmodeSupported
+    }
+  },
+  mutations: {
+    SET_DARKMODE_SUPPORT: (state, browserSupported) => {
+      state.darkmodeSupported = browserSupported
+    }
+  },
+  actions: {
+    findAndSetDarkmodeSupported({ commit }) {
+      const browserSupported = window.matchMedia('(prefers-color-scheme)').media !== 'not all'
+      commit('SET_DARKMODE_SUPPORT', browserSupported)
+    }
+  }
+}

src/modules/documentTitle.js

@@ -0,0 +1,41 @@
+const capitalize = (string) => {
+  return string.includes(' ') ? 
+    string.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).replace('_', ' ')).join(' ')
+    : string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const setDocumentTitle = (state) => {
+  document.title = `${state.emoji} ${state.titlePrefix} | ${capitalize(state.title)}`
+}
+
+export default {
+  namespaced: true,
+  state: {
+    emoji: '🍕',
+    titlePrefix: 'request',
+    title: undefined
+  },
+  getters: {
+    title: (state) => {
+      return state.title
+    }
+  },
+  mutations: {
+    SET_EMOJI: (state, emoji) => {
+      state.emoji = emoji
+      setDocumentTitle(state)
+    },
+    SET_TITLE: (state, title) => {
+      state.title = title
+      setDocumentTitle(state)
+    }
+  },
+  actions: {
+    updateEmoji({ commit }, emoji) {
+      commit('SET_EMOJI', emoji)
+    },
+    updateTitle({ commit }, title) {
+      commit('SET_TITLE', title)
+    }
+  }
+}

src/modules/torrentModule.js

@@ -0,0 +1,40 @@
+
+export default {
+  namespaced: true,
+  state: {
+    results: [],
+    resultCount: null
+  },
+  getters: {
+    results: (state) => {
+      return state.results
+    },
+    resultCount: (state) => {
+      return state.resultCount
+    }
+  },
+
+  mutations: {
+    SET_RESULTS: (state, results) => {
+      state.results = results;
+    },
+    SET_RESULT_COUNT: (state, count) => {
+      state.resultCount = count;
+    },
+    RESET: (state) => {
+      state.results = []
+      state.resultCount = null
+    }
+  },
+  actions: {
+    setResults({ commit }, results) {
+      commit('SET_RESULTS', results)
+    },
+    setResultCount({ commit }, count) {
+      commit('SET_RESULT_COUNT', count)
+    },
+    reset({ commit }) {
+      commit('RESET')
+    }
+  }
+}

src/plugins/Toast/ToastComponent.vue

@@ -0,0 +1,189 @@
+<template>
+  <transition name="slide">
+      <div
+          v-if="show"
+          @click="clicked"
+          class="toast"
+          :class="type">
+
+          <div class="toast--content">
+              <div class=" toast--icon">
+                  <i v-if="image"><img class="toast--icon-image" :src="image" /></i>
+              </div>
+              <div class="toast--text" v-if="description">
+                <span class="toast--text__title">{{title}}</span>
+                <br /><span class="toast--text__description" v-html="description"></span>
+              </div>
+              <div class="toast--text" v-else>
+                <span class="toast--text__title-large">{{title}}</span>
+              </div>
+              <div class="toast--dismiss" @click="dismiss">
+                  <i class="fas fa-times"></i>
+              </div>
+          </div>
+      </div>
+  </transition>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: this.$root.type || 'info',
+      title: this.$root.title || undefined,
+      description: this.$root.description || undefined,
+      image: this.$root.image || undefined,
+      link: this.$root.link || undefined,
+      timeout: this.$root.timeout || 2000,
+      show: false
+    }
+  },
+  mounted() {
+    // Here we set show when mounted in-order to get the transition animation to be displayed correctly
+    this.show = true;
+
+    setTimeout(() => {
+      console.log('Your time is up 👋')
+      this.show = false;
+    }, this.timeout);
+  },
+  methods: {
+    clicked() {      
+      if (this.link) {
+        let resolved = this.$root.router.resolve(this.link);
+        
+        if (resolved && resolved.route.name !== '404') {
+          this.$root.router.push(this.link);
+        } else {
+          console.error('Found a link but it resolved to 404. Link:', this.link)
+        }
+      } else {
+        this.show = false;
+      }
+    },
+    dismiss() {
+      this.show = false;
+    },
+    move(e) {
+      console.log('moving', e)
+      let target = e.target;
+
+      console.log('target', target)
+
+      var div = document.getElementById('target');
+      div.style.position = 'absolute';
+      div.style.top = e.clientY + 'px';
+      div.style.left = e.clientX + 'px';
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// @import '@/scss/variables.scss';
+
+
+.slide-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-enter, .slide-leave-to {
+  transform: translateY(100vh);
+  opacity: 0;
+}
+.slide-leave-active {
+  transition: all 2s ease;
+}
+
+.toast--icon-image {
+  height: 100%;
+  width: 100%;
+  max-height: 45px;
+  max-width: 45px;
+}
+
+.toast {
+  position: fixed;
+  bottom: 0.5rem;
+  cursor: pointer;
+  z-index: 100;
+
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.17), 0 2px 4px 0 rgba(0,0,0,0.08);
+  padding: 0.5rem;
+  margin: 1rem 2rem 1rem 0.71rem;
+  // max-width: calc(100% - 3rem);
+  min-width: 320px;
+
+
+  // If small screen we have a min-width that is related to the screen size.
+  // else large screens we want a max-width that only uses the space in bottom right
+
+  right: 0;
+  line-height: 22.5px;
+  
+  &--content {
+    display: flex;
+    align-items: center;
+
+  }
+
+  &--icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &--text {
+    margin-left: 0.5rem;
+    // color: $bt-brown;
+    color: black;
+    word-wrap: break-word;
+
+    &__title {
+      text-transform: capitalize;
+      font-weight: 400;
+
+      &-large {
+        font-size: 2rem;
+      }
+    }
+
+    &__description {
+      font-weight: 300;
+    }
+  }
+
+  &--dismiss {
+    align-self: flex-end;
+
+    img {
+      width: 2.5rem;
+    }
+  }
+
+
+  &.success {
+    border-left: 6px solid #38c172;
+  }
+
+  &.info {
+    border-left: 6px solid #FFD300;
+  }
+
+  &.warning {
+    border-left: 6px solid #f6993f;
+  }
+
+  &.error {
+    border-left: 6px solid #e3342f;
+  }
+
+  &.simple {
+    border-left: unset;
+  }
+
+} 
+</style>

src/plugins/Toast/index.js

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import ToastComponent from './ToastComponent.vue'
+
+const optionsDefaults = {
+  data: {
+    type: 'info',
+    show: true,
+    timeout: 3000,
+
+    onCreate(created = null) {
+    },
+    onEdit(editted = null) {
+    },
+    onRemove(removed = null) {
+    }
+  }
+}
+
+function toast(options, router) {
+  // merge the default options with the passed options.
+  const root = new Vue({
+    data: {
+      ...optionsDefaults.data,
+      ...options,
+      router
+    },
+    render: createElement => createElement(ToastComponent)
+  })
+
+  root.$mount(document.body.appendChild(document.createElement('div')))
+}
+
+
+export default {
+  install(vue, opts) {
+    console.log('installing toast plugin!')
+    console.log('plugin options', opts)
+
+    Vue.prototype.$notifications = {
+        info(options) {
+          toast({ type: 'info', ...options })
+        },
+        success(options) {
+          toast({ type: 'success', ...options })
+        },
+        warning(options) {
+          toast({ type: 'warning', ...options })
+        },
+        error(options) {
+          toast({ type: 'error', ...options })
+        },
+        simple(options) {
+          toast({ type: 'simple', ...options})
+        }
+    }
+  }
+}

src/routes.js

@@ -1,103 +1,64 @@
+import Vue from 'vue'
 import VueRouter from 'vue-router';
+import store from '@/store'
+
+Vue.use(VueRouter)
+
 
 let routes = [
   {
     name: 'home',
     path: '/',
-    components: {
+    component: (resolve) => require(['./components/Home.vue'], resolve)
-      'list-router-view': require('./components/Home.vue')
-    }
   },
   {
-    name: 'home-category',
+    name: 'profile',
-    path: '/list/:category',
+    path: '/profile',
-    components: {
+    component: (resolve) => require(['./components/Profile.vue'], resolve)
-      'list-router-view': require('./components/MoviesList.vue')
+  },
-    }
+  {
+    name: 'list',
+    path: '/list/:name',
+    component: (resolve) => require(['./components/ListPage.vue'], resolve)
   },
   {
     name: 'request',
     path: '/request/all',
     components: {
-      'request-router-view': require('./components/MoviesList.vue')
+      'request-router-view': require('./components/ListPage.vue')
     }
   },
   {
     name: 'search',
-    path: '/search/:query',
+    path: '/search',
-    components: {
+    component: (resolve) => require(['./components/Search.vue'], resolve)
-      'search-router-view': require('./components/MoviesList.vue')
-    }
-  },
-  {
-    name: 'user-requests',
-    path: '/profile/requests',
-    components: {
-      'user-requests-router-view': require('./components/MoviesList.vue')
-    }
-  },
-  {
-    name: 'movie',
-    path: '/movie/:id',
-    components: {
-      'page-router-view': require('./components/MoviePage.vue')
-    },
-    beforeEnter: (to, from, next) => {
-      if(history.state && history.state.popup && from.name){
-        eventHub.$emit('openMoviePopup', to.params.id, 'movie', false);
-        return;
-      }
-      next();
-    }
-  },
-  {
-    name: 'show',
-    path: '/show/:id',
-    components: {
-      'page-router-view': require('./components/MoviePage.vue')
-    },
-    beforeEnter: (to, from, next) => {
-      if(history.state && history.state.popup && from.name){
-        eventHub.$emit('openMoviePopup', to.params.id, 'show', false);
-        return;
-      }
-      next();
-    }
   },
   {
     name: 'register',
     path: '/register',
-    components: {
+    component: (resolve) => require(['./components/Register.vue'], resolve)
-      'search-router-view': require('./components/Register.vue')
+  },
-    }
+  {
+    name: 'settings',
+    path: '/settings',
+    component: (resolve) => require(['./components/Settings.vue'], resolve)
   },
   {
     name: 'signin',
     path: '/signin',
-    components: {
+    component: (resolve) => require(['./components/Signin.vue'], resolve)
-      'search-router-view': require('./components/Signin.vue')
-    }
-  },
-  {
-    name: 'profile',
-    path: '/profile',
-    components: {
-      'search-router-view': require('./components/Profile.vue')
-    }
-  },
-  {
-    name: 'settings',
-    path: '/profile/settings',
-    components: {
-      'search-router-view': require('./components/Settings.vue')
-    }
   },
+  // {
+  //   name: 'user-requests',
+  //   path: '/profile/requests',
+  //   components: {
+  //     'user-requests-router-view': require('./components/MoviesList.vue')
+  //   }
+  // },
   {
     name: '404',
     path: '/404',
-    components: {
+    component: (resolve) => require(['./components/404.vue'], resolve)
-      'page-router-view': require('./components/404.vue')
-    }
   },
   {
     path: '*',
@@ -110,13 +71,15 @@ let routes = [
 ];
 
 const router =  new VueRouter({
-  // mode: 'history',
+  mode: 'hash',
   base: '/',
   routes,
   linkActiveClass: 'is-active'
 });
 
 router.beforeEach((to, from, next) => {
+  store.dispatch('documentTitle/updateTitle', to.name)
+
   // Toggle mobile nav
   if(document.querySelector('.nav__hamburger--active')){
     document.querySelector('.nav__hamburger').classList.remove('nav__hamburger--active');

src/scss/elements.scss

@@ -0,0 +1,42 @@
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.filter {
+  margin: 1rem;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  border: 1px solid;
+  border-radius: 2px;
+  display: flex;
+  transition: color .2s ease;
+
+  &-item {
+    padding: 6px 15px;
+    background-color: $background-color-secondary;
+    transition: color 0.2s ease;
+    font-size: 13px;
+    font-weight: 200;
+    text-transform: capitalize;
+    text-align: center;
+    width: 100%;
+    white-space:nowrap;
+
+    &:nth-child(n+2) {
+      border-left: solid 1px;
+    }
+    &.active, &:hover {
+      border-color: transparent;
+      background-color: $teal;
+      color: $green;
+      cursor: pointer;
+    }
+
+    @include tablet-min {
+      font-size: 16px;
+    }
+  }
+}
+
+// TODO 
+//  - add buttons

src/scss/loading-placeholder.scss

@@ -0,0 +1,55 @@
+@import "./src/scss/variables";
+
+// Loading placeholder styling
+@mixin nth-children($points...) {
+  @each $point in $points {
+    &:nth-child(#{$point}) {
+      @content;
+    }
+  }
+}
+
+.text-input__loading {
+  width: 100%;
+
+   &--line {
+    height: 10px;
+    margin: 10px;
+    animation: pulse 1s infinite ease-in-out;
+
+    &.short {
+      width: 60px !important;
+    }
+
+    &.nomargin {
+      margin: 0;
+    }
+  }
+
+  div {
+    @include nth-children(1, 5, 9) {
+      width: 150px;
+    }
+    @include nth-children(2, 6, 10) {
+      width: 250px;
+    }
+    @include nth-children(3, 7) {
+      width: 120px;
+    }
+    @include nth-children(4, 8) {
+      width: 100px;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+    50% {
+      background-color: rgba(165, 165, 165, 0.3);
+    }
+    100% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+  }
+}

src/scss/main.scss

@@ -0,0 +1,24 @@
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Safari */
+  -khtml-user-select: none;    /* Konqueror HTML */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently */
+}
+
+.end-section {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.button--group {
+  display: flex;
+
+  > div:not(:first-child) {
+    margin-left: 1rem;
+  }
+}

src/scss/media-queries.scss

@@ -4,6 +4,7 @@ $phone-xs-width: 480px;
 $tablet-p-width: 768px;
 $tablet-l-width: 1024px;
 $desktop-width:  1200px;
+$desktop-l-width: 1600px;
 
 // Media
 @mixin mobile-only{
@@ -41,6 +42,11 @@ $desktop-width:  1200px;
 		@content;
 	}
 }
+@mixin desktop-lg-min{
+	@media (min-width: #{$desktop-l-width}){
+		@content;
+	}
+}
 @mixin retina{
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
     @content;

src/scss/variables.scss

@@ -1,9 +1,123 @@
 // Colors
-$c-green: #01d277;
+// @import "./media-queries";
-$c-dark: #081c24;
+@import "./src/scss/media-queries";
-$c-white: #ffffff;
+
-$c-light: #f8f8f8;
+:root {
-$c-green-light: #dff0d9;
+  color-scheme: light;
-$c-green-dark: #3e7549;
+  --text-color: #081c24;
-$c-red-light: #f2dede;
+  --text-color-70: rgba(8, 28, 36, 0.7);
-$c-red-dark: #b75b91;
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-40: rgba(255, 255, 255, 0.4);
+  --background-nav-logo: #081c24;
+  
+  --color-green: #01d277;
+  --color-green-90: rgba(1, 210, 119, .9);
+  --color-teal: #091c24;
+  --color-black: #081c24;
+  --white: #fff;
+  --white-70: rgba(255,255,255,0.7);
+
+  --color-warning: rgba(241, 188, 53, 0.7);
+  --color-warning-highlight: #f1bc35;
+  --color-success: rgba(0, 100, 66, 0.8);
+  --color-success-text: #fff;
+  --color-success-highlight: rgb(0, 100, 66);
+  --color-error: rgba(220, 48, 35, 0.8);
+  --color-error-highlight: #DC3023;
+
+  --header-size: 75px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: light dark;
+    --text-color: #fff;
+    --text-color-70: rgba(255, 255, 255, 0.7);
+    --text-color-50: rgba(255, 255, 255, 0.5);
+    --text-color-5: rgba(255, 255, 255, 0.05);
+    --text-color-secondary: orange;
+    --background-color: #1e1f22;
+    --background-color-secondary: #111111;
+    --background-95: rgba(30, 31, 34, 0.95);
+    --background-70: rgba(30, 31, 34, 0.8);
+    --background-40: rgba(30, 31, 34, 0.4);
+  }
+}
+
+@include mobile-only {
+  :root {
+    --header-size: 50px;
+  }
+}
+
+$header-size: var(--header-size);
+
+$dark: rgb(30, 31, 34);
+$green: var(--color-green);
+$green-90: var(--color-green-90);
+$teal: #091c24;
+$black: #081c24;
+$black-80: rgba(0,0,0,0.8);
+$white: #fff;
+$white-80: rgba(255,255,255,0.8);
+
+$text-color: var(--text-color) !default;
+$text-color-70: var(--text-color-70) !default;
+$text-color-50: var(--text-color-50) !default;
+$text-color-5: var(--text-color-5) !default;
+$text-color-secondary: var(--text-color-secondary) !default;
+$background-color: var(--background-color) !default;
+$background-color-secondary: var(--background-color-secondary) !default;
+$background-95: var(--background-95) !default;
+$background-70: var(--background-70) !default;
+$background-40: var(--background-40) !default;
+$background-dark-85: rgba($dark, 0.85) !default;
+$background-nav-logo: var(--background-nav-logo) !default;
+$color-warning: var(--color-warning) !default;
+$color-warning-highlight: var(--color-warning-highlight) !default;
+$color-success: var(--color-success) !default;
+$color-success-highlight: var(--color-success-highlight) !default;
+$color-error: var(--color-error) !default;
+$color-error-highlight: var(--color-error-highlight) !default;
+
+.halloween {
+  --text-color: #6a318c;
+  --text-color-secondary: #fb5a33;
+  --background-color: #80c350;
+  --background-color-secondary: #ff9234;
+}
+
+.dark {
+  --text-color: #fff;
+  --text-color-70: rgba(255, 255, 255, 0.7);
+  --text-color-50: rgba(255, 255, 255, 0.5);
+  --text-color-5: rgba(255, 255, 255, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #1e1f22;
+  --background-color-secondary: #111111;
+  --background-95: rgba(30, 31, 34, 0.95);
+  --background-70: rgba(30, 31, 34, 0.7);
+  --color-teal: #091c24;
+}
+
+.light {
+  --text-color: #081c24;
+  --text-color-70: rgba(8, 28, 36, 0.7);
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-inverted: #fff;
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-nav-logo: #081c24;
+  --color-green: #01d277;
+  --color-teal: #091c24;
+}

src/storage.js

@@ -4,6 +4,43 @@ let storage = {
   username: localStorage.getItem('username') || null,
   admin: localStorage.getItem('admin') || null,
   pageTitlePostfix: ' — ' + document.title,
+  homepageLists: [
+    {
+      title: 'Requests',
+      route: 'request',
+      // icon: require('@/assets/icons/request.svg'),
+      path: 'v2/request'
+    },
+    {
+      title: 'Now Playing',
+      route: 'now_playing',
+      // icon: require('@/assets/icons/now_playing.svg'),
+      path: 'v2/movie/now_playing'
+    },
+    {
+      title: 'Popular',
+      route: 'popular',
+      // icon: require('@/assets/icons/popular.svg'),
+      path: 'v2/movie/popular'
+    },
+    {
+      title: 'Upcoming',
+      route: 'upcoming',
+      // icon: require('@/assets/icons/upcoming.svg'),
+      path: 'v2/movie/upcoming'
+    },
+  ],
+  user_requestsList: {
+    title: 'user requests',
+    route: 'profile/requests',
+    // icon: require('@/assets/icons/upcoming.svg'),
+    path: 'v1/user/requests'
+  },
+  assets: {
+    icons: {
+      // upcoming: require('@/assets/icons/upcoming.svg')
+    }
+  },
   listTypes: [
     {
       title: 'Your Requests',

src/store.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import torrentModule from './modules/torrentModule'
+import darkmodeModule from './modules/darkmodeModule'
+import documentTitle from './modules/documentTitle'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    torrentModule,
+    darkmodeModule,
+    documentTitle
+  }
+})
+
+export default store

src/utils.js

@@ -0,0 +1,13 @@
+const sortableSize = (string) => {
+	const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const [numStr, unit] = string.split(' ');
+
+  if (UNITS.indexOf(unit) === -1)
+	  return string
+
+  const exponent = UNITS.indexOf(unit) * 3
+	return numStr * (Math.pow(10, exponent))
+}
+
+
+export { sortableSize }

webpack.config.js

@@ -12,6 +12,8 @@ module.exports = {
     rules: [
       {
         test: /\.vue$/,
+        use: [
+          {
             loader: 'vue-loader',
             options: {
               loaders: {
@@ -20,9 +22,17 @@ module.exports = {
               }
             }
           },
+          {
+            loader: 'vue-svg-inline-loader'
+          }
+        ]
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env']
+        },
         exclude: /node_modules/
       },
       {
@@ -36,8 +46,10 @@ module.exports = {
     ]
   },
   resolve: {
+    extensions: ['.js', '.vue', '.json', 'scss'],
     alias: {
       'vue$': 'vue/dist/vue.common.js',
+      '@': path.resolve(__dirname, './src'),
       'src': path.resolve(__dirname, './src'),
       'assets': path.resolve(__dirname, './src/assets'),
       'components': path.resolve(__dirname, './src/components')
@@ -45,12 +57,13 @@ module.exports = {
   },
   devServer: {
     historyApiFallback: true,
+    inline: true,
     noInfo: true
   },
   performance: {
     hints: false
   },
-  // devtool: '#eval-source-map'
+  devtool: 'inline-source-map'
 }
 
 if (process.env.NODE_ENV === 'production') {