├── static
    ├── .gitkeep
    ├── static
    │   └── .gitkeep
    ├── js
    │   ├── manifest.e9656611da0204f20377.js
    │   ├── manifest.e9656611da0204f20377.js.map
    │   ├── app.94b45bfc6e3df881a13d.js
    │   └── app.94b45bfc6e3df881a13d.js.map
    └── css
    │   ├── app.b145e86a8596e0b4d48b7e493ef46e0c.css
    │   └── app.b145e86a8596e0b4d48b7e493ef46e0c.css.map
├── .eslintignore
├── config
    ├── prod.env.js
    ├── test.env.js
    ├── dev.env.js
    └── index.js
├── screenshot.png
├── database.rules.json
├── .babelrc
├── .gitignore
├── .editorconfig
├── firebase.json
├── src
    ├── firebaseAPI
    │   └── getMovies.js
    ├── firebaseConfig.js
    ├── helpers
    │   ├── getPopularMovies.js
    │   ├── movieSearch.js
    │   └── getMovieInfo.js
    ├── store.js
    ├── main.js
    ├── components
    │   ├── Hello.vue
    │   ├── MovieList.vue
    │   ├── Search.vue
    │   ├── Home.vue
    │   ├── MovieCard.vue
    │   ├── Header.vue
    │   └── MovieDetails.vue
    ├── router.js
    └── App.vue
├── index.html
├── README.md
├── .eslintrc.js
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xDae/vue-fireMovie/HEAD/screenshot.png


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "auth != null",
4 |     ".write": "auth != null"
5 |   }
6 | }


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/**/*
 4 | npm-debug.log
 5 | selenium-debug.log
 6 | test/unit/coverage
 7 | test/e2e/reports
 8 | 
 9 | .firebaserc
10 | 


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 | 
4 | module.exports = merge(devEnv, {
5 |   NODE_ENV: '"testing"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "dist",
 7 |     "rewrites": [
 8 |       {
 9 |         "source": "**",
10 |         "destination": "/index.html"
11 |       }
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/firebaseAPI/getMovies.js:
--------------------------------------------------------------------------------
 1 | import firebasedb from '../firebaseConfig';
 2 | import _ from 'lodash';
 3 | 
 4 | const getMovies = () => (
 5 |   new Promise(resolve => (
 6 |     firebasedb.ref('movies')
 7 |       .on('value', (snapshot) => resolve(_.toArray(snapshot.val())))
 8 |   ))
 9 | );
10 | 
11 | export default getMovies;
12 | 


--------------------------------------------------------------------------------
/src/firebaseConfig.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase';
 2 | 
 3 | const firebaseApp = firebase.initializeApp({
 4 |   apiKey: 'AIzaSyDJDFqevrnRTu4G9fMi4ISIQ9x8vsKd84E',
 5 |   authDomain: 'vue-firemoviex.firebaseapp.com',
 6 |   databaseURL: 'https://vue-firemoviex.firebaseio.com',
 7 |   storageBucket: 'vue-firemoviex.appspot.com'
 8 | });
 9 | 
10 | const firebasedb = firebaseApp.database();
11 | 
12 | export default firebasedb;
13 | 


--------------------------------------------------------------------------------
/src/helpers/getPopularMovies.js:
--------------------------------------------------------------------------------
 1 | function getPopularMovies () {
 2 |   var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';
 3 | 
 4 |   return fetch(`https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}`)
 5 |     .then(response => response.json())
 6 |     .then(({results}) => {
 7 |       return results;
 8 |     })
 9 |     .catch(err => console.log('parsing failed', err));
10 | }
11 | 
12 | export default getPopularMovies;
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset=utf-8><title>vue-firemovie</title><link href=./static/css/app.b145e86a8596e0b4d48b7e493ef46e0c.css rel=stylesheet></head><body><app></app><script type=text/javascript src=./static/js/manifest.e9656611da0204f20377.js></script><script type=text/javascript src=./static/js/vendor.aa6b56b104246839d123.js></script><script type=text/javascript src=./static/js/app.94b45bfc6e3df881a13d.js></script></body></html>


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | // Make vue aware of Vuex
 5 | Vue.use(Vuex);
 6 | 
 7 | const state = {
 8 |   movies: []
 9 | };
10 | 
11 | // Create an object storing various mutations. We will write the mutation
12 | const mutations = {
13 |   // TODO: set up our mutations
14 | };
15 | 
16 | // Combine the initial state and the mutations to create a Vuex store.
17 | // This store can be linked to our app.
18 | export default new Vuex.Store({
19 |   state,
20 |   mutations
21 | });
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import VueFire from 'vuefire';
 4 | import { sync } from 'vuex-router-sync';
 5 | import store from './store';
 6 | import router from './router';
 7 | 
 8 | import App from './App';
 9 | 
10 | Vue.use(VueFire);
11 | 
12 | sync(store, router);
13 | 
14 | // /* eslint-disable no-new */
15 | // new Vue({
16 | //   store,
17 | //   el: 'body',
18 | //   components: { App },
19 | // });
20 | 
21 | Vue.extend({
22 |   store,
23 |   components: { App }
24 | });
25 | 
26 | router.start(App, 'app');
27 | 


--------------------------------------------------------------------------------
/src/helpers/movieSearch.js:
--------------------------------------------------------------------------------
 1 | function movieSearch (query, lang = 'en') {
 2 |   let apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';
 3 | 
 4 |   return fetch(`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}&language=${lang}&include_adult=false`)
 5 |     .then(response => response.json())
 6 |     .then(({results}) => {
 7 |       return results.filter(function (film) {
 8 |         return film.vote_count > 0;
 9 |       });
10 |     })
11 |     .catch(err => console.log('parsing failed', err));
12 | }
13 | 
14 | export default movieSearch;
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue firemovie
 2 | 
 3 | > A Movie Search App made with Vuejs and Firebase
 4 | 
 5 | [![alt text](screenshot.png "Logo Title Text 1")](https://vue-firemoviex.firebaseapp.com/)
 6 | 
 7 | ## Build Setup
 8 | 
 9 | ``` bash
10 | # install dependencies
11 | npm install
12 | 
13 | # serve with hot reload at localhost:8080
14 | npm run dev
15 | 
16 | # build for production with minification
17 | npm run build
18 | ```
19 | 
20 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
21 | 


--------------------------------------------------------------------------------
/src/components/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       // note: changing this line won't causes changes
12 |       // with hot-reload because the reloaded component
13 |       // preserves its current state and we are modifying
14 |       // its initial state.
15 |       msg: 'Hello World!'
16 |     };
17 |   }
18 | };
19 | </script>
20 | 
21 | <!-- Add "scoped" attribute to limit CSS to this component only -->
22 | <style scoped>
23 | h1 {
24 |   color: #42b983;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | 
 4 | import Home from './components/Home';
 5 | import Search from './components/Search';
 6 | import MovieDetails from './components/MovieDetails';
 7 | 
 8 | Vue.use(VueRouter);
 9 | 
10 | const router = new VueRouter({
11 |   hashbang: false,
12 |   history: true,
13 |   transitionOnLoad: true
14 | });
15 | 
16 | router.map({
17 |   '/': {
18 |     name: 'home',
19 |     component: Home
20 |   },
21 |   '/movie/:id/:name/': {
22 |     name: 'movie',
23 |     component: MovieDetails
24 |   },
25 |   '/search/:name/': {
26 |     name: 'search',
27 |     component: Search
28 |   }
29 | });
30 | 
31 | export default router;
32 | 


--------------------------------------------------------------------------------
/src/helpers/getMovieInfo.js:
--------------------------------------------------------------------------------
 1 | function getMovieDetails (movieId, lang = 'en') {
 2 |   var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';
 3 | 
 4 |   return fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}&language=${lang}`)
 5 |     .then(response => response.json())
 6 |     .catch(err => console.log('parsing failed', err));
 7 | }
 8 | 
 9 | function getMovieImages (movieId) {
10 |   let apiKey = 'eb3b624d1526d41441b1cd8b608415d0';
11 | 
12 |   return fetch(`https://webservice.fanart.tv/v3/movies/${movieId}?api_key=${apiKey}`)
13 |     .then(response => response.json())
14 |     .catch(err => console.log('parsing failed', err));
15 | }
16 | 
17 | export {getMovieDetails, getMovieImages};
18 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   parserOptions: {
 5 |     sourceType: 'module'
 6 |   },
 7 |   'globals': {
 8 |       'fetch': true
 9 |   },
10 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
11 |   extends: 'semistandard',
12 |   // required to lint *.vue files
13 |   plugins: [
14 |     'html'
15 |   ],
16 |   // add your custom rules here
17 |   'rules': {
18 |     // allow paren-less arrow functions
19 |     'arrow-parens': 0,
20 |     // allow async-await
21 |     'generator-star-spacing': 0,
22 |     // allow debugger during development
23 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/MovieList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section  class="movies">
 3 |     <div v-if="$loadingRouteData">Loading...</div>
 4 | 
 5 |     <movie-card v-for="movie of movies" track-by="tmdbID" :id="movie.tmdbID" :title="movie.title"></movie-card>
 6 |   </section>
 7 | </template>
 8 | 
 9 | <script>
10 | import getMovies from '../firebaseAPI/getMovies';
11 | import MovieCard from './MovieCard';
12 | 
13 | export default {
14 |   name: 'MovieList',
15 |   route: {
16 |     data: () => ({
17 |       movies: getMovies()
18 |     })
19 |   },
20 |   data () {
21 |     return {
22 |       movies: []
23 |     };
24 |   },
25 |   components: {
26 |     MovieCard
27 |   },
28 |   methods: {
29 |     getMovies
30 |   }
31 | };
32 | </script>
33 | 
34 | <style></style>
35 | 


--------------------------------------------------------------------------------
/static/js/manifest.e9656611da0204f20377.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(n){if(a[n])return a[n].exports;var r=a[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,c){for(var p,s,l=0,i=[];l<o.length;l++)s=o[l],r[s]&&i.push.apply(i,r[s]),r[s]=0;for(p in c)e[p]=c[p];for(n&&n(o,c);i.length;)i.shift().call(null,t);if(c[0])return a[0]=0,t(0)};var a={},r={0:0};t.e=function(e,n){if(0===r[e])return n.call(null,t);if(void 0!==r[e])r[e].push(n);else{r[e]=[n];var a=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+"static/js/"+e+"."+{1:"aa6b56b104246839d123",2:"94b45bfc6e3df881a13d"}[e]+".js",a.appendChild(o)}},t.m=e,t.c=a,t.p="./"}([]);
2 | //# sourceMappingURL=manifest.e9656611da0204f20377.js.map


--------------------------------------------------------------------------------
/src/components/Search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <app-header></app-header>
 3 | 
 4 |   <h2>Most Popular Movies</h2>
 5 | 
 6 |   <section  class="movies">
 7 |     <ul>
 8 |       <li v-for="movie of movies">
 9 |         {{movie.title}}
10 |         <img :src="postertUrl" alt="" />
11 |       </li>
12 |     </ul>
13 |   </section>
14 | </template>
15 | 
16 | <script>
17 | import movieSearch from '../helpers/movieSearch';
18 | 
19 | import Header from './Header';
20 | 
21 | export default {
22 |   name: 'Search',
23 |   route: {
24 |     data: (transition) => ({
25 |       movies: movieSearch(transition.to.params.name)
26 |     })
27 |   },
28 |   data () {
29 |     return {
30 |       movies: []
31 |     };
32 |   },
33 |   components: {
34 |     AppHeader: Header
35 |     // MovieCard
36 |   },
37 |   methods: {
38 |     movieSearch
39 |   }
40 | };
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | .movies {
45 |   display: flex;
46 |   flex-wrap: wrap;
47 |   overflow: scroll;
48 |   height: 70vh;
49 |   padding: 8px 18px;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <app-header></app-header>
 3 | 
 4 |   <h2>Most Popular Movies</h2>
 5 | 
 6 |   <router-view></router-view>
 7 | 
 8 |   <section  class="movies">
 9 |     <div v-if="$loadingRouteData">Loading...</div>
10 | 
11 |     <movie-card v-for="movie of movies" track-by="id" :id="movie.id" :title="movie.title" :poster="movie.poster_path"></movie-card>
12 |   </section>
13 | </template>
14 | 
15 | <script>
16 | import getPopularMovies from './../helpers/getPopularMovies';
17 | 
18 | import MovieCard from './MovieCard';
19 | import Header from './Header';
20 | 
21 | export default {
22 |   name: 'Home',
23 |   route: {
24 |     data: () => ({
25 |       movies: getPopularMovies()
26 |     })
27 |   },
28 |   data () {
29 |     return {
30 |       movies: []
31 |     };
32 |   },
33 |   components: {
34 |     AppHeader: Header,
35 |     MovieCard
36 |   },
37 |   methods: {
38 |     getPopularMovies
39 |   }
40 | };
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | .movies {
45 |   display: flex;
46 |   flex-wrap: wrap;
47 |   overflow: scroll;
48 |   height: 70vh;
49 |   padding: 8px 18px;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: './',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css']
18 |   },
19 |   dev: {
20 |     env: require('./dev.env'),
21 |     port: 8080,
22 |     assetsSubDirectory: 'static',
23 |     assetsPublicPath: '/',
24 |     proxyTable: {},
25 |     // CSS Sourcemaps off by default because relative paths are "buggy"
26 |     // with this option, according to the CSS-Loader README
27 |     // (https://github.com/webpack/css-loader#sourcemaps)
28 |     // In our experience, they generally work as expected,
29 |     // just be aware of this issue when enabling this option.
30 |     cssSourceMap: false
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   components: {
10 |     // MovieList,
11 |   }
12 | };
13 | </script>
14 | 
15 | <style lang="scss">
16 | 
17 | @mixin center {
18 |   position: relative;
19 |   top: 50%;
20 |   left: 50%;
21 |   transform: translate(-50%, -50%);
22 | }
23 | 
24 | @import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);
25 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300,100|Open+Sans+Condensed:300);
26 | @import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
27 | 
28 | *,
29 | *::before,
30 | *::after {
31 |   box-sizing: border-box;
32 | }
33 | 
34 | body {
35 |   height: 100vh;
36 |   justify-content: center;
37 |   display: flex;
38 |   align-items: center;
39 |   margin: 0;
40 |   background: radial-gradient(ellipse farthest-corner at center top, #41B883, #35495E);
41 |   color: #8b9095;
42 |   font-size: 14px;
43 |   font-family: 'Roboto', sans-serif;
44 | }
45 | 
46 | .app {
47 |   position: relative;
48 |   width: 640px;
49 |   background: #fff;
50 |   border-radius: 15px;
51 |   box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
52 | 
53 |   h2 {
54 |     color: #525661;
55 |     font-size: 17px;
56 |     box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
57 |     padding: 20px 28px 0;
58 |     margin: -6px 0 0 0;
59 |   }
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/MovieCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-link="{ name: 'movie', params: { id: this.id, name: this.kebabTitle }}" class="movie">
 3 |     <img :src="posterUrl" alt="" class="poster" />
 4 |     <div class="title">{{title}}</div>
 5 |     <div class="info">
 6 |       <span class="length">117 min</span>
 7 |       <span class="year">2015</span>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import _ from 'lodash';
14 | 
15 | export default {
16 |   name: 'MovieCard',
17 |   props: {
18 |     id: {
19 |       type: Number,
20 |       required: true
21 |     },
22 |     title: {
23 |       type: String,
24 |       required: true,
25 |       default: ''
26 |     },
27 |     poster: {
28 |       type: String,
29 |       default: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/backdrop_ggwxvq_1.jpg'
30 |     }
31 |   },
32 |   computed: {
33 |     kebabTitle () {
34 |       return _.kebabCase(this.title);
35 |     },
36 |     posterUrl () {
37 |       return `http://image.tmdb.org/t/p/w185//${this.poster}`;
38 |     }
39 |   },
40 |   data () {
41 |     return {
42 |     };
43 |   }
44 | };
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | .movie {
49 |   padding: 10px;
50 |   cursor: pointer;
51 |   width: calc(100% * (1/4));
52 |   transition: all .5s ease;
53 | 
54 |   .poster {
55 |     width: 100%;
56 |     margin-bottom: 6px;
57 |     border-radius: 4px;
58 | 
59 |     &.active {
60 |       opacity: 0;
61 |     }
62 |   }
63 | 
64 |   .title {
65 |     color: #525661;
66 |     margin-bottom: 4px;
67 |     font-size: 16px;
68 |     white-space: nowrap;
69 |     overflow: hidden;
70 |     text-overflow: ellipsis;
71 |   }
72 | 
73 |   .info {
74 |     font-size: 11px;
75 |     opacity: .8;
76 |   }
77 | 
78 |   .desc {
79 |     display: none;
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-firemovie",
 3 |   "version": "1.0.0",
 4 |   "description": "A simple Vue.js/Firebase Movie App",
 5 |   "author": "Jose Miguel Bejarano <yo@josemiguel.org>",
 6 |   "homepage": " http://josemiguel.org/vue-fireMovie/",
 7 |   "private": true,
 8 |   "scripts": {
 9 |     "dev": "node build/dev-server.js",
10 |     "build": "node build/build.js",
11 |     "test": "",
12 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
13 |   },
14 |   "dependencies": {
15 |     "babel-runtime": "^6.0.0",
16 |     "vue": "^1.0.21",
17 |     "vue-router": "^0.7.13",
18 |     "vuefire": "^1.2.0",
19 |     "vuex": "^1.0.0-rc.2",
20 |     "vuex-router-sync": "^2.1.0",
21 |     "whatwg-fetch": "^1.0.0"
22 |   },
23 |   "devDependencies": {
24 |     "babel-core": "^6.0.0",
25 |     "babel-eslint": "^6.1.2",
26 |     "babel-loader": "^6.0.0",
27 |     "babel-plugin-transform-runtime": "^6.15.0",
28 |     "babel-preset-es2015": "^6.0.0",
29 |     "babel-preset-stage-2": "^6.0.0",
30 |     "babel-register": "^6.0.0",
31 |     "connect-history-api-fallback": "^1.1.0",
32 |     "css-loader": "^0.24.0",
33 |     "eslint": "^3.4.0",
34 |     "eslint-config-standard": "^6.0.0",
35 |     "eslint-friendly-formatter": "^2.0.5",
36 |     "eslint-loader": "^1.3.0",
37 |     "eslint-plugin-html": "^1.3.0",
38 |     "eslint-plugin-promise": "^2.0.1",
39 |     "eslint-plugin-standard": "^2.0.0",
40 |     "eventsource-polyfill": "^0.9.6",
41 |     "express": "^4.13.3",
42 |     "extract-text-webpack-plugin": "^1.0.1",
43 |     "file-loader": "^0.9.0",
44 |     "function-bind": "^1.0.2",
45 |     "html-webpack-plugin": "^2.8.1",
46 |     "http-proxy-middleware": "^0.17.1",
47 |     "json-loader": "^0.5.4",
48 |     "node-sass": "^3.8.0",
49 |     "ora": "^0.3.0",
50 |     "sass-loader": "^4.0.1",
51 |     "semistandard": "^9.0.0",
52 |     "shelljs": "^0.7.4",
53 |     "url-loader": "^0.5.7",
54 |     "vue-hot-reload-api": "^1.2.0",
55 |     "vue-html-loader": "^1.0.0",
56 |     "vue-loader": "^8.3.0",
57 |     "vue-style-loader": "^1.0.0",
58 |     "webpack": "^1.12.2",
59 |     "webpack-dev-middleware": "^1.4.0",
60 |     "webpack-hot-middleware": "^2.6.0",
61 |     "webpack-merge": "^0.14.1"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header>
  3 |     <nav></nav>
  4 |     <h1>Vue<strong>movieFire</strong></h1>
  5 |     <!-- <form class="header-form" method="post">
  6 |       <input class="header-form-input" type="text" name="name" value="" placeholder="Search film">
  7 |     </form> -->
  8 |     <div class="search">
  9 |       <svg>
 10 |         <use xlink:href="#ico-search"></use>
 11 |       </svg>
 12 |     </div>
 13 |   </header>
 14 | 
 15 |   <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
 16 |     <symbol id="close" viewBox="0 0 212.982 212.982">
 17 |       <g>
 18 |         <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill="#525661"/>
 19 |       </g>
 20 |     </symbol>
 21 |     <symbol id="ico-search">
 22 |       <path fill-rule="evenodd" clip-rule="evenodd" fill="#363a47" d="M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756
 23 |       c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981
 24 |       l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0
 25 |       c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z"/>
 26 |     </symbol>
 27 |   </svg>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   data () {
 33 |     return {};
 34 |   }
 35 | };
 36 | </script>
 37 | 
 38 | <style lang="scss" scoped>
 39 | header {
 40 |   position: relative;
 41 |   display: flex;
 42 |   align-items: center;
 43 |   justify-content: space-between;
 44 |   height: 70px;
 45 |   padding: 0 30px;
 46 | 
 47 |   h1 {
 48 |     font-size: 20px;
 49 |     text-align: center;
 50 |     color: #1c222b;
 51 | 
 52 |     strong {
 53 |       background: #41B883;
 54 |       color: #fff;
 55 |       display: inline-block;
 56 |       border-radius: 30px;
 57 |       padding: 6px;
 58 |       font-size: 83%;
 59 |       line-height: 1;
 60 |       position: relative;
 61 |       top: -1px;
 62 |       left: 2px;
 63 |     }
 64 |   }
 65 | 
 66 |   nav {
 67 |     position: relative;
 68 |     cursor: pointer;
 69 |     width: 18px;
 70 |     height: 18px;
 71 | 
 72 |     &::before {
 73 |       content: '';
 74 |       position: absolute;
 75 |       top: 0;
 76 |       left: 0;
 77 |       width: 100%;
 78 |       height: 2px;
 79 |       background: #363a47;
 80 |       border-radius: 2px;
 81 |       box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
 82 |     }
 83 |   }
 84 | 
 85 |   .search {
 86 |     cursor: pointer;
 87 | 
 88 |     svg {
 89 |       width: 20px;
 90 |       height: 20px;
 91 |     }
 92 |   }
 93 | 
 94 |   .header-form {
 95 |     flex-grow: 1;
 96 |     padding: 0 40px;
 97 |   }
 98 | 
 99 |   .header-form-input {
100 |     width: 100%;
101 |     border: 0;
102 |     outline: 0;
103 |     font-size: 20px;
104 |   }
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/static/css/app.b145e86a8596e0b4d48b7e493ef46e0c.css:
--------------------------------------------------------------------------------
1 | @import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300,100|Open+Sans+Condensed:300);@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);.movies[_v-df5ffea6]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:scroll;height:70vh;padding:8px 18px}.movie[_v-2147ba02]{padding:10px;cursor:pointer;width:25%;-webkit-transition:all .5s ease;transition:all .5s ease}.movie .poster[_v-2147ba02]{width:100%;margin-bottom:6px;border-radius:4px}.movie .poster.active[_v-2147ba02]{opacity:0}.movie .title[_v-2147ba02]{color:#525661;margin-bottom:4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.movie .info[_v-2147ba02]{font-size:11px;opacity:.8}.movie .desc[_v-2147ba02]{display:none}header[_v-3bb411db]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:70px;padding:0 30px}header h1[_v-3bb411db]{font-size:20px;text-align:center;color:#1c222b}header h1 strong[_v-3bb411db]{background:#41b883;color:#fff;display:inline-block;border-radius:30px;padding:6px;font-size:83%;line-height:1;position:relative;top:-1px;left:2px}header nav[_v-3bb411db]{position:relative;cursor:pointer;width:18px;height:18px}header nav[_v-3bb411db]:before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:#363a47;border-radius:2px;box-shadow:0 5px 0 #363a47,0 10px 0 #363a47}header .search[_v-3bb411db]{cursor:pointer}header .search svg[_v-3bb411db]{width:20px;height:20px}header .header-form[_v-3bb411db]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 40px}header .header-form-input[_v-3bb411db]{width:100%;border:0;outline:0;font-size:20px}.movies[_v-c906e114]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:scroll;height:70vh;padding:8px 18px}.detail[_v-50a28940]{min-height:390px;z-index:10;padding:37px 30px 30px 255px}.detail[_v-50a28940]:before{content:'';background:#fff;position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;border-radius:15px;opacity:0;-webkit-transition:all .4s cubic-bezier(.67,.13,.1,.81);transition:all .4s cubic-bezier(.67,.13,.1,.81)}.detail .close[_v-50a28940]{position:absolute;top:21px;right:22px;width:12px;height:12px;cursor:pointer;border:6px solid #fff;box-sizing:content-box;z-index:10}.detail .poster[_v-50a28940]{position:absolute;top:-10%;left:-6%;width:266px;height:400px;z-index:2;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,.2);opacity:0;-webkit-transition:all .5s cubic-bezier(.67,.13,.1,.81);transition:all .5s cubic-bezier(.67,.13,.1,.81)}.detail .close[_v-50a28940],.detail .desc[_v-50a28940],.detail .info[_v-50a28940],.detail .play[_v-50a28940],.detail .title[_v-50a28940]{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0;-webkit-transition:all .4s cubic-bezier(.67,.13,.1,.81);transition:all .4s cubic-bezier(.67,.13,.1,.81)}.detail .close[_v-50a28940]{-webkit-transform:translateX(10px);transform:translateX(10px)}.detail .title[_v-50a28940]{font-size:35px;font-weight:300;color:#525661;margin-bottom:5px}.detail .info[_v-50a28940]{font-size:11px;opacity:0;margin-left:2px}.detail .desc[_v-50a28940]{margin-top:30px;font-size:14px;line-height:1.6}.detail .play[_v-50a28940]{background:-webkit-linear-gradient(left,#e4761f,#ff8b32);background:linear-gradient(90deg,#e4761f,#ff8b32);border:none;border-radius:20px;color:#fff;font-size:12px;line-height:1.5;padding:8px 17px;margin:30px 0 0 -2px;text-transform:uppercase;z-index:10;outline:none!important;cursor:pointer;opacity:0}.detail .play svg[_v-50a28940]{vertical-align:middle;position:relative;top:-2px;margin-right:3px}.detail.ready[_v-50a28940]:before{opacity:1}.detail.ready .info[_v-50a28940]{opacity:.8}.detail.ready .poster[_v-50a28940]{opacity:1;-webkit-transition-duration:.5s;transition-duration:.5s}.detail.ready .close[_v-50a28940],.detail.ready .desc[_v-50a28940],.detail.ready .info[_v-50a28940],.detail.ready .play[_v-50a28940],.detail.ready .title[_v-50a28940]{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:.5s;transition-duration:.5s}.detail.ready .title[_v-50a28940]{-webkit-transition-delay:.2s;transition-delay:.2s}.detail.ready .info[_v-50a28940]{-webkit-transition-delay:.3s;transition-delay:.3s}.detail.ready .desc[_v-50a28940]{-webkit-transition-delay:.4s;transition-delay:.4s}.detail.ready .play[_v-50a28940]{-webkit-transition-delay:.5s;transition-delay:.5s}*,:after,:before{box-sizing:border-box}body{height:100vh;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;background:-webkit-radial-gradient(ellipse farthest-corner at center top,#41b883,#35495e);background:radial-gradient(ellipse farthest-corner at center top,#41b883,#35495e);color:#8b9095;font-size:14px;font-family:Roboto,sans-serif}.app{position:relative;width:640px;background:#fff;border-radius:15px;box-shadow:0 5px 30px rgba(0,0,0,.2)}.app h2{color:#525661;font-size:17px;box-shadow:inset 0 1px 0 rgba(0,0,0,.1);padding:20px 28px 0;margin:-6px 0 0}
2 | /*# sourceMappingURL=app.b145e86a8596e0b4d48b7e493ef46e0c.css.map*/


--------------------------------------------------------------------------------
/src/components/MovieDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="detail" :class="{ 'ready': !$loadingRouteData}">
  3 |     <svg v-link="{name: 'home'}" class="close">
  4 |       <use xlink:href="#close"></use>
  5 |     </svg>
  6 | 
  7 |     <div class="movie">
  8 |       <img :src="poster" class="poster" />
  9 |       <div class="title">{{title}}</div>
 10 |       <div class="info">
 11 |         <span class="length">{{runtime}} min</span>
 12 |         <span class="year">{{release_date}}</span>
 13 |       </div>
 14 |       <div class="desc">{{overview}}</div>
 15 | 
 16 |       <button class="play">
 17 |         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 232.153 232.153" style="enable-background:new 0 0 232.153 232.153;" xml:space="preserve" width="10px" height="10px">
 18 |           <g id="Play">
 19 |             <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z" fill="#FFFFFF"/>
 20 |           </g>
 21 |         </svg> play movie
 22 |       </button>
 23 |     </div>
 24 |   </div>
 25 | 
 26 |   <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
 27 |     <symbol id="close" viewBox="0 0 212.982 212.982">
 28 |       <g>
 29 |         <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill="#525661"/>
 30 |       </g>
 31 |     </symbol>
 32 |     <symbol id="ico-search">
 33 |       <path fill-rule="evenodd" clip-rule="evenodd" fill="#363a47" d="M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756
 34 |       c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981
 35 |       l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0
 36 |       c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z"/>
 37 |     </symbol>
 38 |   </svg>
 39 | </template>
 40 | 
 41 | <script>
 42 | import {getMovieDetails, getMovieImages} from './../helpers/getMovieInfo';
 43 | 
 44 | export default {
 45 |   name: 'MovieDetails',
 46 |   route: {
 47 |     data ({to: {params: { id }}}) {
 48 |       return Promise.all([
 49 |         getMovieDetails(id)
 50 |         // getMovieImages(id)
 51 |       ])
 52 |         .then(data => {
 53 |           return {
 54 |             title: data[0].title,
 55 |             tagline: data[0].tagline,
 56 |             overview: data[0].overview,
 57 |             runtime: data[0].runtime,
 58 |             vote_average: data[0].vote_average,
 59 |             release_date: data[0].release_date,
 60 |             // background: data[1].background,
 61 |             poster_path: data[0].poster_path
 62 |           };
 63 |         });
 64 |     }
 65 |   },
 66 |   ready () {
 67 |   },
 68 |   computed: {
 69 |     poster () {
 70 |       return `http://image.tmdb.org/t/p/w300/${this.poster_path}`;
 71 |     }
 72 |   },
 73 |   data () {
 74 |     return {
 75 |       title: '',
 76 |       tagline: '',
 77 |       overview: '',
 78 |       runtime: '',
 79 |       vote_average: '',
 80 |       release_date: '',
 81 |       background: '',
 82 |       poster_path: ''
 83 |     };
 84 |   },
 85 |   methods: {
 86 |     getMovieDetails,
 87 |     getMovieImages
 88 |   }
 89 | };
 90 | </script>
 91 | 
 92 | <style lang="scss" scoped>
 93 | .detail {
 94 |   min-height: 390px;
 95 |   z-index: 10;
 96 |   padding: 37px 30px 30px 255px;
 97 | 
 98 |   &::before {
 99 |     content: '';
100 |     background: #fff;
101 |     position: absolute;
102 |     z-index: -1;
103 |     top: 0;
104 |     left: 0;
105 |     width: 100%;
106 |     height: 100%;
107 |     border-radius: 15px;
108 |     opacity: 0;
109 |     transition: all .4s cubic-bezier(.67,.13,.1,.81);
110 |   }
111 | 
112 |   .close {
113 |     position: absolute;
114 |     top: 21px;
115 |     right: 22px;
116 |     width: 12px;
117 |     height: 12px;
118 |     cursor: pointer;
119 |     border: 6px solid #FFF;
120 |     box-sizing: content-box;
121 |     z-index: 10;
122 |   }
123 | 
124 |   .poster {
125 |     position: absolute;
126 |     top: -10%;
127 |     left: -6%;
128 |     width: 266px;
129 |     height: 400px;
130 |     z-index: 2;
131 |     border-radius: 5px;
132 |     box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
133 |     opacity: 0;
134 |     transition: all .5s cubic-bezier(.67,.13,.1,.81);
135 |   }
136 | 
137 | 
138 |   .title,
139 |   .info,
140 |   .desc,
141 |   .play,
142 |   .close {
143 |     transform: translateX(-50px);
144 |     opacity: 0;
145 |     transition: all .4s cubic-bezier(.67,.13,.1,.81);
146 |   }
147 | 
148 |   .close {
149 |     transform: translateX(10px);;
150 |   }
151 | 
152 |   .title {
153 |     font-size: 35px;
154 |     font-weight: 300;
155 |     color: #525661;
156 |     margin-bottom: 5px;
157 | 
158 |   }
159 | 
160 |   .info {
161 |     font-size: 11px;
162 |     opacity: 0;
163 |     margin-left: 2px;
164 |   }
165 | 
166 |   .desc {
167 |     margin-top: 30px;
168 |     font-size: 14px;
169 |     line-height: 1.6;
170 |   }
171 | 
172 |   .play {
173 |     background: linear-gradient(90deg, #E4761F, #FF8B32);
174 |     border: none;
175 |     border-radius: 20px;
176 |     color: #fff;
177 |     font-size: 12px;
178 |     line-height: 1.5;
179 |     padding: 8px 17px;
180 |     margin: 30px 0 0 -2px;
181 |     text-transform: uppercase;
182 |     z-index: 10;
183 |     outline: none !important;
184 |     cursor: pointer;
185 |     opacity: 0;
186 | 
187 |     svg {
188 |       vertical-align: middle;
189 |       position: relative;
190 |       top: -2px;
191 |       margin-right: 3px;
192 |     }
193 |   }
194 | }
195 | 
196 | .detail.ready {
197 | 
198 |   &::before {
199 |     opacity: 1;
200 |   }
201 | 
202 |   .info {
203 |     opacity: .8;
204 |   }
205 | 
206 |   .poster {
207 |     opacity: 1;
208 |     transition-duration: .5s;
209 |   }
210 | 
211 |   .title,
212 |   .info,
213 |   .desc,
214 |   .play,
215 |   .close {
216 |     transform: translateX(0);
217 |     opacity: 1;
218 |     transition-delay: 0s;
219 |     transition-duration: .5s;
220 |   }
221 | 
222 |   .title {
223 |     transition-delay: .2s;
224 |   }
225 | 
226 |   .info {
227 |     transition-delay: .3s;
228 |   }
229 | 
230 |   .desc {
231 |     transition-delay: .4s;
232 |   }
233 | 
234 |   .play {
235 |     transition-delay: .5s;
236 |   }
237 | }
238 | </style>
239 | 


--------------------------------------------------------------------------------
/static/css/app.b145e86a8596e0b4d48b7e493ef46e0c.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack:///src/components/Home.vue","webpack:///webpack:///src/components/MovieCard.vue","webpack:///webpack:///src/components/Header.vue","webpack:///webpack:///src/components/Search.vue","webpack:///webpack:///src/components/MovieDetails.vue","webpack:///webpack:///src/App.vue"],"names":[],"mappings":"0QAAA,qBAAqB,oBAAoB,oBAAoB,aAAa,mBAAmB,eAAe,gBAAgB,YAAY,gBAAgB,CCAxJ,oBAAoB,aAAa,eAAe,UAAyB,gCAAgC,uBAAuB,CAAC,4BAA4B,WAAW,kBAAkB,iBAAiB,CAAC,mCAAmC,SAAS,CAAC,2BAA2B,cAAc,kBAAkB,eAAe,mBAAmB,gBAAgB,sBAAsB,CAAC,0BAA0B,eAAe,UAAU,CAAC,0BAA0B,YAAY,CCAvd,oBAAoB,kBAAkB,oBAAoB,oBAAoB,aAAa,yBAAyB,sBAAsB,mBAAmB,yBAAyB,sBAAsB,8BAA8B,YAAY,cAAc,CAAC,uBAAuB,eAAe,kBAAkB,aAAa,CAAC,8BAA8B,mBAAmB,WAAW,qBAAqB,mBAAmB,YAAY,cAAc,cAAc,kBAAkB,SAAS,QAAQ,CAAC,wBAAwB,kBAAkB,eAAe,WAAW,WAAW,CAAC,+BAAgC,WAAW,kBAAkB,MAAM,OAAO,WAAW,WAAW,mBAAmB,kBAAkB,2CAA4C,CAAC,4BAA4B,cAAc,CAAC,gCAAgC,WAAW,WAAW,CAAC,iCAAiC,mBAAmB,oBAAoB,YAAY,cAAc,CAAC,uCAAuC,WAAW,SAAS,UAAU,cAAc,CCArhC,qBAAqB,oBAAoB,oBAAoB,aAAa,mBAAmB,eAAe,gBAAgB,YAAY,gBAAgB,CCAxJ,qBAAqB,iBAAiB,WAAW,4BAA4B,CAAC,4BAA6B,WAAW,gBAAgB,kBAAkB,WAAW,MAAM,OAAO,WAAW,YAAY,mBAAmB,UAAU,wDAAgE,+CAAuD,CAAC,4BAA4B,kBAAkB,SAAS,WAAW,WAAW,YAAY,eAAe,sBAAsB,uBAAuB,UAAU,CAAC,6BAA6B,kBAAkB,SAAS,SAAS,YAAY,aAAa,UAAU,kBAAkB,qCAAsC,UAAU,wDAAgE,+CAAuD,CAAC,yIAAyI,oCAAoC,4BAA4B,UAAU,wDAAgE,+CAAuD,CAAC,4BAA4B,mCAAmC,0BAA0B,CAAC,4BAA4B,eAAe,gBAAgB,cAAc,iBAAiB,CAAC,2BAA2B,eAAe,UAAU,eAAe,CAAC,2BAA2B,gBAAgB,eAAe,eAAe,CAAC,2BAA2B,yDAA2D,kDAAoD,YAAY,mBAAmB,WAAW,eAAe,gBAAgB,iBAAiB,qBAAqB,yBAAyB,WAAW,uBAAwB,eAAe,SAAS,CAAC,+BAA+B,sBAAsB,kBAAkB,SAAS,gBAAgB,CAAC,kCAAmC,SAAS,CAAC,iCAAiC,UAAU,CAAC,mCAAmC,UAAU,gCAAgC,uBAAuB,CAAC,uKAAuK,gCAAgC,wBAAwB,UAAU,4BAA4B,oBAAoB,gCAAgC,uBAAuB,CAAC,kCAAkC,6BAA6B,oBAAoB,CAAC,iCAAiC,6BAA6B,oBAAoB,CAAC,iCAAiC,6BAA6B,oBAAoB,CAAC,iCAAiC,6BAA6B,oBAAoB,CCAx6E,iBAAqB,qBAAqB,CAAC,KAAK,aAAa,wBAAwB,qBAAqB,uBAAuB,oBAAoB,oBAAoB,aAAa,yBAAyB,sBAAsB,mBAAmB,SAAS,0FAA4F,kFAAoF,cAAc,eAAe,6BAAgC,CAAC,KAAK,kBAAkB,YAAY,gBAAgB,mBAAmB,oCAAqC,CAAC,QAAQ,cAAc,eAAe,wCAA2C,oBAAoB,eAAiB","file":"static/css/app.b145e86a8596e0b4d48b7e493ef46e0c.css","sourcesContent":[".movies[_v-df5ffea6]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:scroll;height:70vh;padding:8px 18px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Home.vue\n **/",".movie[_v-2147ba02]{padding:10px;cursor:pointer;width:calc(100% * (1/4));-webkit-transition:all .5s ease;transition:all .5s ease}.movie .poster[_v-2147ba02]{width:100%;margin-bottom:6px;border-radius:4px}.movie .poster.active[_v-2147ba02]{opacity:0}.movie .title[_v-2147ba02]{color:#525661;margin-bottom:4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.movie .info[_v-2147ba02]{font-size:11px;opacity:.8}.movie .desc[_v-2147ba02]{display:none}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/MovieCard.vue\n **/","header[_v-3bb411db]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:70px;padding:0 30px}header h1[_v-3bb411db]{font-size:20px;text-align:center;color:#1c222b}header h1 strong[_v-3bb411db]{background:#41B883;color:#fff;display:inline-block;border-radius:30px;padding:6px;font-size:83%;line-height:1;position:relative;top:-1px;left:2px}header nav[_v-3bb411db]{position:relative;cursor:pointer;width:18px;height:18px}header nav[_v-3bb411db]::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:#363a47;border-radius:2px;box-shadow:0 5px 0 #363a47, 0 10px 0 #363a47}header .search[_v-3bb411db]{cursor:pointer}header .search svg[_v-3bb411db]{width:20px;height:20px}header .header-form[_v-3bb411db]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 40px}header .header-form-input[_v-3bb411db]{width:100%;border:0;outline:0;font-size:20px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Header.vue\n **/",".movies[_v-c906e114]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:scroll;height:70vh;padding:8px 18px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Search.vue\n **/",".detail[_v-50a28940]{min-height:390px;z-index:10;padding:37px 30px 30px 255px}.detail[_v-50a28940]::before{content:'';background:#fff;position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;border-radius:15px;opacity:0;-webkit-transition:all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);transition:all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81)}.detail .close[_v-50a28940]{position:absolute;top:21px;right:22px;width:12px;height:12px;cursor:pointer;border:6px solid #FFF;box-sizing:content-box;z-index:10}.detail .poster[_v-50a28940]{position:absolute;top:-10%;left:-6%;width:266px;height:400px;z-index:2;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,0.2);opacity:0;-webkit-transition:all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);transition:all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81)}.detail .title[_v-50a28940],.detail .info[_v-50a28940],.detail .desc[_v-50a28940],.detail .play[_v-50a28940],.detail .close[_v-50a28940]{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0;-webkit-transition:all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);transition:all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81)}.detail .close[_v-50a28940]{-webkit-transform:translateX(10px);transform:translateX(10px)}.detail .title[_v-50a28940]{font-size:35px;font-weight:300;color:#525661;margin-bottom:5px}.detail .info[_v-50a28940]{font-size:11px;opacity:0;margin-left:2px}.detail .desc[_v-50a28940]{margin-top:30px;font-size:14px;line-height:1.6}.detail .play[_v-50a28940]{background:-webkit-linear-gradient(left, #E4761F, #FF8B32);background:linear-gradient(90deg, #E4761F, #FF8B32);border:none;border-radius:20px;color:#fff;font-size:12px;line-height:1.5;padding:8px 17px;margin:30px 0 0 -2px;text-transform:uppercase;z-index:10;outline:none !important;cursor:pointer;opacity:0}.detail .play svg[_v-50a28940]{vertical-align:middle;position:relative;top:-2px;margin-right:3px}.detail.ready[_v-50a28940]::before{opacity:1}.detail.ready .info[_v-50a28940]{opacity:.8}.detail.ready .poster[_v-50a28940]{opacity:1;-webkit-transition-duration:.5s;transition-duration:.5s}.detail.ready .title[_v-50a28940],.detail.ready .info[_v-50a28940],.detail.ready .desc[_v-50a28940],.detail.ready .play[_v-50a28940],.detail.ready .close[_v-50a28940]{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:.5s;transition-duration:.5s}.detail.ready .title[_v-50a28940]{-webkit-transition-delay:.2s;transition-delay:.2s}.detail.ready .info[_v-50a28940]{-webkit-transition-delay:.3s;transition-delay:.3s}.detail.ready .desc[_v-50a28940]{-webkit-transition-delay:.4s;transition-delay:.4s}.detail.ready .play[_v-50a28940]{-webkit-transition-delay:.5s;transition-delay:.5s}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/MovieDetails.vue\n **/","@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300,100|Open+Sans+Condensed:300);@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);*,*::before,*::after{box-sizing:border-box}body{height:100vh;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;background:-webkit-radial-gradient(ellipse farthest-corner at center top, #41B883, #35495E);background:radial-gradient(ellipse farthest-corner at center top, #41B883, #35495E);color:#8b9095;font-size:14px;font-family:'Roboto', sans-serif}.app{position:relative;width:640px;background:#fff;border-radius:15px;box-shadow:0 5px 30px rgba(0,0,0,0.2)}.app h2{color:#525661;font-size:17px;box-shadow:inset 0 1px 0px rgba(0,0,0,0.1);padding:20px 28px 0;margin:-6px 0 0 0}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/App.vue\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------
/static/js/manifest.e9656611da0204f20377.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///static/js/manifest.e9656611da0204f20377.js","webpack:///webpack/bootstrap e7646ae02e65d17f1bb6"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","parentJsonpFunction","window","chunkIds","moreModules","chunkId","i","callbacks","length","installedChunks","push","apply","shift","0","e","callback","undefined","head","document","getElementsByTagName","script","createElement","type","charset","async","src","p","1","2","appendChild","m","c"],"mappings":"CAAS,SAAUA,GCmCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAtDA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,GAIA,IADA,GAAAV,GAAAW,EAAAC,EAAA,EAAAC,KACQD,EAAAH,EAAAK,OAAoBF,IAC5BD,EAAAF,EAAAG,GACAG,EAAAJ,IACAE,EAAAG,KAAAC,MAAAJ,EAAAE,EAAAJ,IACAI,EAAAJ,GAAA,CAEA,KAAAX,IAAAU,GACAZ,EAAAE,GAAAU,EAAAV,EAGA,KADAO,KAAAE,EAAAC,GACAG,EAAAC,QACAD,EAAAK,QAAAZ,KAAA,KAAAP,EACA,IAAAW,EAAA,GAEA,MADAT,GAAA,KACAF,EAAA,GAKA,IAAAE,MAKAc,GACAI,EAAA,EA6BApB,GAAAqB,EAAA,SAAAT,EAAAU,GAEA,OAAAN,EAAAJ,GACA,MAAAU,GAAAf,KAAA,KAAAP,EAGA,IAAAuB,SAAAP,EAAAJ,GACAI,EAAAJ,GAAAK,KAAAK,OACI,CAEJN,EAAAJ,IAAAU,EACA,IAAAE,GAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,SACAD,GAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EAEAJ,EAAAK,IAAAhC,EAAAiC,EAAA,aAAArB,EAAA,KAAyEsB,EAAA,uBAAAC,EAAA,wBAAsDvB,GAAA,MAC/HY,EAAAY,YAAAT,KAKA3B,EAAAqC,EAAAtC,EAGAC,EAAAsC,EAAApC,EAGAF,EAAAiC,EAAA","file":"static/js/manifest.e9656611da0204f20377.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId])\n/******/ \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n/******/ \t\twhile(callbacks.length)\n/******/ \t\t\tcallbacks.shift().call(null, __webpack_require__);\n/******/ \t\tif(moreModules[0]) {\n/******/ \t\t\tinstalledModules[0] = 0;\n/******/ \t\t\treturn __webpack_require__(0);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// object to store loaded and loading chunks\n/******/ \t// \"0\" means \"already loaded\"\n/******/ \t// Array means \"loading\", array contains callbacks\n/******/ \tvar installedChunks = {\n/******/ \t\t0:0\n/******/ \t};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n/******/ \t\t// \"0\" is the signal for \"already loaded\"\n/******/ \t\tif(installedChunks[chunkId] === 0)\n/******/ \t\t\treturn callback.call(null, __webpack_require__);\n/******/\n/******/ \t\t// an array means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId] !== undefined) {\n/******/ \t\t\tinstalledChunks[chunkId].push(callback);\n/******/ \t\t} else {\n/******/ \t\t\t// start chunk loading\n/******/ \t\t\tinstalledChunks[chunkId] = [callback];\n/******/ \t\t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\t\tvar script = document.createElement('script');\n/******/ \t\t\tscript.type = 'text/javascript';\n/******/ \t\t\tscript.charset = 'utf-8';\n/******/ \t\t\tscript.async = true;\n/******/\n/******/ \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"1\":\"aa6b56b104246839d123\",\"2\":\"94b45bfc6e3df881a13d\"}[chunkId] + \".js\";\n/******/ \t\t\thead.appendChild(script);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"./\";\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n/** WEBPACK FOOTER **\n ** static/js/manifest.e9656611da0204f20377.js\n **/"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t0:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"1\":\"aa6b56b104246839d123\",\"2\":\"94b45bfc6e3df881a13d\"}[chunkId] + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap e7646ae02e65d17f1bb6\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------
/static/js/app.94b45bfc6e3df881a13d.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([2,0],[function(e,t,o){o(103),e.exports=o(37)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,o){var n,a;o(82),n=o(41),a=o(89),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)},function(e,t){"use strict";function o(e){var t=arguments.length<=1||void 0===arguments[1]?"en":arguments[1],o="fcc3e3e91b7cc38185ef902ca797ee11";return fetch("https://api.themoviedb.org/3/movie/"+e+"?api_key="+o+"&language="+t).then(function(e){return e.json()})["catch"](function(e){return console.log("parsing failed",e)})}function n(e){var t="eb3b624d1526d41441b1cd8b608415d0";return fetch("https://webservice.fanart.tv/v3/movies/"+e+"?api_key="+t).then(function(e){return e.json()})["catch"](function(e){return console.log("parsing failed",e)})}Object.defineProperty(t,"__esModule",{value:!0}),t.getMovieDetails=o,t.getMovieImages=n},function(e,t){"use strict";function o(){var e="fcc3e3e91b7cc38185ef902ca797ee11";return fetch("https://api.themoviedb.org/3/movie/now_playing?api_key="+e).then(function(e){return e.json()}).then(function(e){var t=e.results;return t})["catch"](function(e){return console.log("parsing failed",e)})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o},function(e,t){"use strict";function o(e){var t=arguments.length<=1||void 0===arguments[1]?"en":arguments[1],o="fcc3e3e91b7cc38185ef902ca797ee11";return fetch("https://api.themoviedb.org/3/search/movie?api_key="+o+"&query="+e+"&language="+t+"&include_adult=false").then(function(e){return e.json()}).then(function(e){var t=e.results;return t.filter(function(e){return e.vote_count>0})})["catch"](function(e){return console.log("parsing failed",e)})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var a=o(20),s=n(a),r=o(99),i=n(r),l=o(100),u=o(39),c=n(u),d=o(38),p=n(d),v=o(93),f=n(v);s["default"].use(i["default"]),(0,l.sync)(c["default"],p["default"]),s["default"].extend({store:c["default"],components:{App:f["default"]}}),p["default"].start(f["default"],"app")},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(20),s=n(a),r=o(98),i=n(r),l=o(94),u=n(l),c=o(97),d=n(c),p=o(96),v=n(p);s["default"].use(i["default"]);var f=new i["default"]({hashbang:!1,history:!0,transitionOnLoad:!0});f.map({"/":{name:"home",component:u["default"]},"/movie/:id/:name/":{name:"movie",component:v["default"]},"/search/:name/":{name:"search",component:d["default"]}}),t["default"]=f},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(20),s=n(a),r=o(101),i=n(r);s["default"].use(i["default"]);var l={movies:[]},u={};t["default"]=new i["default"].Store({state:l,mutations:u})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={components:{}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={data:function(){return{}}}},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(35),s=n(a),r=o(95),i=n(r),l=o(33),u=n(l);t["default"]={name:"Home",route:{data:function(){return{movies:(0,s["default"])()}}},data:function(){return{movies:[]}},components:{AppHeader:u["default"],MovieCard:i["default"]},methods:{getPopularMovies:s["default"]}}},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(86),s=n(a);t["default"]={name:"MovieCard",props:{id:{type:Number,required:!0},title:{type:String,required:!0,"default":""},poster:{type:String,"default":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/backdrop_ggwxvq_1.jpg"}},computed:{kebabTitle:function(){return s["default"].kebabCase(this.title)},posterUrl:function(){return"http://image.tmdb.org/t/p/w185//"+this.poster}},data:function(){return{}}}},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(46),s=n(a),r=o(34);t["default"]={name:"MovieDetails",route:{data:function(e){var t=e.to.params.id;return s["default"].all([(0,r.getMovieDetails)(t)]).then(function(e){return{title:e[0].title,tagline:e[0].tagline,overview:e[0].overview,runtime:e[0].runtime,vote_average:e[0].vote_average,release_date:e[0].release_date,poster_path:e[0].poster_path}})}},ready:function(){},computed:{poster:function(){return"http://image.tmdb.org/t/p/w300/"+this.poster_path}},data:function(){return{title:"",tagline:"",overview:"",runtime:"",vote_average:"",release_date:"",background:"",poster_path:""}},methods:{getMovieDetails:r.getMovieDetails,getMovieImages:r.getMovieImages}}},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(36),s=n(a),r=o(33),i=n(r);t["default"]={name:"Search",route:{data:function(e){return{movies:(0,s["default"])(e.to.params.name)}}},data:function(){return{movies:[]}},components:{AppHeader:i["default"]},methods:{movieSearch:s["default"]}}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},,function(e,t){e.exports=" <div class=app> <router-view></router-view> </div> "},function(e,t){e.exports=' <div v-link="{ name: \'movie\', params: { id: this.id, name: this.kebabTitle }}" class=movie _v-2147ba02=""> <img :src=posterUrl alt="" class=poster _v-2147ba02=""> <div class=title _v-2147ba02="">{{title}}</div> <div class=info _v-2147ba02=""> <span class=length _v-2147ba02="">117 min</span> <span class=year _v-2147ba02="">2015</span> </div> </div> '},function(e,t){e.exports=' <header _v-3bb411db=""> <nav _v-3bb411db=""></nav> <h1 _v-3bb411db="">Vue<strong _v-3bb411db="">movieFire</strong></h1> <div class=search _v-3bb411db=""> <svg _v-3bb411db=""> <use xlink:href=#ico-search _v-3bb411db=""></use> </svg> </div> </header> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-3bb411db=""> <symbol id=close viewBox="0 0 212.982 212.982" _v-3bb411db=""> <g _v-3bb411db=""> <path style=fill-rule:evenodd;clip-rule:evenodd d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill=#525661 _v-3bb411db=""></path> </g> </symbol> <symbol id=ico-search _v-3bb411db=""> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d="M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z" _v-3bb411db=""></path> </symbol> </svg> '},function(e,t){e.exports=' <div class=detail :class="{ \'ready\': !$loadingRouteData}" _v-50a28940=""> <svg v-link="{name: \'home\'}" class=close _v-50a28940=""> <use xlink:href=#close _v-50a28940=""></use> </svg> <div class=movie _v-50a28940=""> <img :src=poster class=poster _v-50a28940=""> <div class=title _v-50a28940="">{{title}}</div> <div class=info _v-50a28940=""> <span class=length _v-50a28940="">{{runtime}} min</span> <span class=year _v-50a28940="">{{release_date}}</span> </div> <div class=desc _v-50a28940="">{{overview}}</div> <button class=play _v-50a28940=""> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink version=1.1 id=Capa_1 x=0px y=0px viewBox="0 0 232.153 232.153" style="enable-background:new 0 0 232.153 232.153" xml:space=preserve width=10px height=10px _v-50a28940=""> <g id=Play _v-50a28940=""> <path style=fill-rule:evenodd;clip-rule:evenodd d="M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z" fill=#FFFFFF _v-50a28940=""></path> </g> </svg> play movie </button> </div> </div> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-50a28940=""> <symbol id=close viewBox="0 0 212.982 212.982" _v-50a28940=""> <g _v-50a28940=""> <path style=fill-rule:evenodd;clip-rule:evenodd d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill=#525661 _v-50a28940=""></path> </g> </symbol> <symbol id=ico-search _v-50a28940=""> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d="M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z" _v-50a28940=""></path> </symbol> </svg> '},function(e,t){e.exports=' <app-header _v-c906e114=""></app-header> <h2 _v-c906e114="">Most Popular Movies</h2> <section class=movies _v-c906e114=""> <ul _v-c906e114=""> <li v-for="movie of movies" _v-c906e114=""> {{movie.title}} <img :src=postertUrl alt="" _v-c906e114=""> </li> </ul> </section> '},function(e,t){e.exports=' <app-header _v-df5ffea6=""></app-header> <h2 _v-df5ffea6="">Most Popular Movies</h2> <router-view _v-df5ffea6=""></router-view> <section class=movies _v-df5ffea6=""> <div v-if=$loadingRouteData _v-df5ffea6="">Loading...</div> <movie-card v-for="movie of movies" track-by=id :id=movie.id :title=movie.title :poster=movie.poster_path _v-df5ffea6=""></movie-card> </section> '},function(e,t,o){var n,a;o(80),n=o(40),a=o(87),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)},function(e,t,o){var n,a;o(85),n=o(42),a=o(92),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)},function(e,t,o){var n,a;o(81),n=o(43),a=o(88),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)},function(e,t,o){var n,a;o(83),n=o(44),a=o(90),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)},function(e,t,o){var n,a;o(84),n=o(45),a=o(91),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),a&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=a)}]);
2 | //# sourceMappingURL=app.94b45bfc6e3df881a13d.js.map


--------------------------------------------------------------------------------
/static/js/app.94b45bfc6e3df881a13d.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///static/js/app.94b45bfc6e3df881a13d.js","webpack:///./src/components/Header.vue","webpack:///./src/helpers/getMovieInfo.js","webpack:///./src/helpers/getPopularMovies.js","webpack:///./src/helpers/movieSearch.js","webpack:///./src/main.js","webpack:///./src/router.js","webpack:///./src/store.js","webpack:///Home.vue","webpack:///MovieCard.vue","webpack:///MovieDetails.vue","webpack:///Search.vue","webpack:///./src/App.vue?d818","webpack:///./src/components/MovieCard.vue?a78c","webpack:///./src/components/Header.vue?643e","webpack:///./src/components/MovieDetails.vue?2d61","webpack:///./src/components/Search.vue?db89","webpack:///./src/components/Home.vue?545f","webpack:///./src/App.vue","webpack:///./src/components/Home.vue","webpack:///./src/components/MovieCard.vue","webpack:///./src/components/MovieDetails.vue","webpack:///./src/components/Search.vue"],"names":["webpackJsonp","module","exports","__webpack_require__","__vue_script__","__vue_template__","__esModule","options","template","getMovieDetails","movieId","lang","arguments","length","undefined","apiKey","fetch","then","response","json","err","console","log","getMovieImages","Object","defineProperty","value","getPopularMovies","_ref","results","movieSearch","query","filter","film","vote_count","_interopRequireDefault","obj","default","_vue","_vue2","_vuefire","_vuefire2","_vuexRouterSync","_store","_store2","_router","_router2","_App","_App2","use","sync","extend","store","components","App","start","_vueRouter","_vueRouter2","_Home","_Home2","_Search","_Search2","_MovieDetails","_MovieDetails2","router","hashbang","history","transitionOnLoad","map","/","name","component","/movie/:id/:name/","/search/:name/","_vuex","_vuex2","state","movies","mutations","Store","data","_getPopularMovies","_getPopularMovies2","_MovieCard","_MovieCard2","_Header","_Header2","route","AppHeader","MovieCard","methods","_lodash","_lodash2","props","id","type","Number","required","title","String","poster","computed","kebabTitle","kebabCase","this","posterUrl","_promise","_promise2","_getMovieInfo","to","params","all","tagline","overview","runtime","vote_average","release_date","poster_path","ready","background","_movieSearch","_movieSearch2","transition"],"mappings":"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","file":"static/js/app.94b45bfc6e3df881a13d.js","sourcesContent":["webpackJsonp([2,0],[\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t__webpack_require__(103);\n\tmodule.exports = __webpack_require__(37);\n\n\n/***/ },\n/* 1 */,\n/* 2 */,\n/* 3 */,\n/* 4 */,\n/* 5 */,\n/* 6 */,\n/* 7 */,\n/* 8 */,\n/* 9 */,\n/* 10 */,\n/* 11 */,\n/* 12 */,\n/* 13 */,\n/* 14 */,\n/* 15 */,\n/* 16 */,\n/* 17 */,\n/* 18 */,\n/* 19 */,\n/* 20 */,\n/* 21 */,\n/* 22 */,\n/* 23 */,\n/* 24 */,\n/* 25 */,\n/* 26 */,\n/* 27 */,\n/* 28 */,\n/* 29 */,\n/* 30 */,\n/* 31 */,\n/* 32 */,\n/* 33 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(82)\n\t__vue_script__ = __webpack_require__(41)\n\t__vue_template__ = __webpack_require__(89)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ },\n/* 34 */\n/***/ function(module, exports) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\tfunction getMovieDetails(movieId) {\n\t  var lang = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];\n\t\n\t  var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\t\n\t  return fetch('https://api.themoviedb.org/3/movie/' + movieId + '?api_key=' + apiKey + '&language=' + lang).then(function (response) {\n\t    return response.json();\n\t  }).catch(function (err) {\n\t    return console.log('parsing failed', err);\n\t  });\n\t}\n\t\n\tfunction getMovieImages(movieId) {\n\t  var apiKey = 'eb3b624d1526d41441b1cd8b608415d0';\n\t\n\t  return fetch('https://webservice.fanart.tv/v3/movies/' + movieId + '?api_key=' + apiKey).then(function (response) {\n\t    return response.json();\n\t  }).catch(function (err) {\n\t    return console.log('parsing failed', err);\n\t  });\n\t}\n\t\n\texports.getMovieDetails = getMovieDetails;\n\texports.getMovieImages = getMovieImages;\n\n/***/ },\n/* 35 */\n/***/ function(module, exports) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\tfunction getPopularMovies() {\n\t  var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\t\n\t  return fetch('https://api.themoviedb.org/3/movie/now_playing?api_key=' + apiKey).then(function (response) {\n\t    return response.json();\n\t  }).then(function (_ref) {\n\t    var results = _ref.results;\n\t\n\t    return results;\n\t  }).catch(function (err) {\n\t    return console.log('parsing failed', err);\n\t  });\n\t}\n\t\n\texports.default = getPopularMovies;\n\n/***/ },\n/* 36 */\n/***/ function(module, exports) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\tfunction movieSearch(query) {\n\t  var lang = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];\n\t\n\t  var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\t\n\t  return fetch('https://api.themoviedb.org/3/search/movie?api_key=' + apiKey + '&query=' + query + '&language=' + lang + '&include_adult=false').then(function (response) {\n\t    return response.json();\n\t  }).then(function (_ref) {\n\t    var results = _ref.results;\n\t\n\t    return results.filter(function (film) {\n\t      return film.vote_count > 0;\n\t    });\n\t  }).catch(function (err) {\n\t    return console.log('parsing failed', err);\n\t  });\n\t}\n\t\n\texports.default = movieSearch;\n\n/***/ },\n/* 37 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tvar _vue = __webpack_require__(20);\n\t\n\tvar _vue2 = _interopRequireDefault(_vue);\n\t\n\tvar _vuefire = __webpack_require__(99);\n\t\n\tvar _vuefire2 = _interopRequireDefault(_vuefire);\n\t\n\tvar _vuexRouterSync = __webpack_require__(100);\n\t\n\tvar _store = __webpack_require__(39);\n\t\n\tvar _store2 = _interopRequireDefault(_store);\n\t\n\tvar _router = __webpack_require__(38);\n\t\n\tvar _router2 = _interopRequireDefault(_router);\n\t\n\tvar _App = __webpack_require__(93);\n\t\n\tvar _App2 = _interopRequireDefault(_App);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\t_vue2.default.use(_vuefire2.default);\n\t\n\t(0, _vuexRouterSync.sync)(_store2.default, _router2.default);\n\t\n\t_vue2.default.extend({\n\t  store: _store2.default,\n\t  components: { App: _App2.default }\n\t});\n\t\n\t_router2.default.start(_App2.default, 'app');\n\n/***/ },\n/* 38 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _vue = __webpack_require__(20);\n\t\n\tvar _vue2 = _interopRequireDefault(_vue);\n\t\n\tvar _vueRouter = __webpack_require__(98);\n\t\n\tvar _vueRouter2 = _interopRequireDefault(_vueRouter);\n\t\n\tvar _Home = __webpack_require__(94);\n\t\n\tvar _Home2 = _interopRequireDefault(_Home);\n\t\n\tvar _Search = __webpack_require__(97);\n\t\n\tvar _Search2 = _interopRequireDefault(_Search);\n\t\n\tvar _MovieDetails = __webpack_require__(96);\n\t\n\tvar _MovieDetails2 = _interopRequireDefault(_MovieDetails);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\t_vue2.default.use(_vueRouter2.default);\n\t\n\tvar router = new _vueRouter2.default({\n\t  hashbang: false,\n\t  history: true,\n\t  transitionOnLoad: true\n\t});\n\t\n\trouter.map({\n\t  '/': {\n\t    name: 'home',\n\t    component: _Home2.default\n\t  },\n\t  '/movie/:id/:name/': {\n\t    name: 'movie',\n\t    component: _MovieDetails2.default\n\t  },\n\t  '/search/:name/': {\n\t    name: 'search',\n\t    component: _Search2.default\n\t  }\n\t});\n\t\n\texports.default = router;\n\n/***/ },\n/* 39 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _vue = __webpack_require__(20);\n\t\n\tvar _vue2 = _interopRequireDefault(_vue);\n\t\n\tvar _vuex = __webpack_require__(101);\n\t\n\tvar _vuex2 = _interopRequireDefault(_vuex);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\t_vue2.default.use(_vuex2.default);\n\t\n\tvar state = {\n\t  movies: []\n\t};\n\t\n\tvar mutations = {};\n\t\n\texports.default = new _vuex2.default.Store({\n\t  state: state,\n\t  mutations: mutations\n\t});\n\n/***/ },\n/* 40 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\texports.default = {\n\t  components: {}\n\t};\n\n/***/ },\n/* 41 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\texports.default = {\n\t  data: function data() {\n\t    return {};\n\t  }\n\t};\n\n/***/ },\n/* 42 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _getPopularMovies = __webpack_require__(35);\n\t\n\tvar _getPopularMovies2 = _interopRequireDefault(_getPopularMovies);\n\t\n\tvar _MovieCard = __webpack_require__(95);\n\t\n\tvar _MovieCard2 = _interopRequireDefault(_MovieCard);\n\t\n\tvar _Header = __webpack_require__(33);\n\t\n\tvar _Header2 = _interopRequireDefault(_Header);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\texports.default = {\n\t  name: 'Home',\n\t  route: {\n\t    data: function data() {\n\t      return {\n\t        movies: (0, _getPopularMovies2.default)()\n\t      };\n\t    }\n\t  },\n\t  data: function data() {\n\t    return {\n\t      movies: []\n\t    };\n\t  },\n\t\n\t  components: {\n\t    AppHeader: _Header2.default,\n\t    MovieCard: _MovieCard2.default\n\t  },\n\t  methods: {\n\t    getPopularMovies: _getPopularMovies2.default\n\t  }\n\t};\n\n/***/ },\n/* 43 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _lodash = __webpack_require__(86);\n\t\n\tvar _lodash2 = _interopRequireDefault(_lodash);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\texports.default = {\n\t  name: 'MovieCard',\n\t  props: {\n\t    id: {\n\t      type: Number,\n\t      required: true\n\t    },\n\t    title: {\n\t      type: String,\n\t      required: true,\n\t      default: ''\n\t    },\n\t    poster: {\n\t      type: String,\n\t      default: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/backdrop_ggwxvq_1.jpg'\n\t    }\n\t  },\n\t  computed: {\n\t    kebabTitle: function kebabTitle() {\n\t      return _lodash2.default.kebabCase(this.title);\n\t    },\n\t    posterUrl: function posterUrl() {\n\t      return 'http://image.tmdb.org/t/p/w185//' + this.poster;\n\t    }\n\t  },\n\t  data: function data() {\n\t    return {};\n\t  }\n\t};\n\n/***/ },\n/* 44 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _promise = __webpack_require__(46);\n\t\n\tvar _promise2 = _interopRequireDefault(_promise);\n\t\n\tvar _getMovieInfo = __webpack_require__(34);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\texports.default = {\n\t  name: 'MovieDetails',\n\t  route: {\n\t    data: function data(_ref) {\n\t      var id = _ref.to.params.id;\n\t\n\t      return _promise2.default.all([(0, _getMovieInfo.getMovieDetails)(id)]).then(function (data) {\n\t        return {\n\t          title: data[0].title,\n\t          tagline: data[0].tagline,\n\t          overview: data[0].overview,\n\t          runtime: data[0].runtime,\n\t          vote_average: data[0].vote_average,\n\t          release_date: data[0].release_date,\n\t\n\t          poster_path: data[0].poster_path\n\t        };\n\t      });\n\t    }\n\t  },\n\t  ready: function ready() {},\n\t\n\t  computed: {\n\t    poster: function poster() {\n\t      return 'http://image.tmdb.org/t/p/w300/' + this.poster_path;\n\t    }\n\t  },\n\t  data: function data() {\n\t    return {\n\t      title: '',\n\t      tagline: '',\n\t      overview: '',\n\t      runtime: '',\n\t      vote_average: '',\n\t      release_date: '',\n\t      background: '',\n\t      poster_path: ''\n\t    };\n\t  },\n\t\n\t  methods: {\n\t    getMovieDetails: _getMovieInfo.getMovieDetails,\n\t    getMovieImages: _getMovieInfo.getMovieImages\n\t  }\n\t};\n\n/***/ },\n/* 45 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\t\n\tvar _movieSearch = __webpack_require__(36);\n\t\n\tvar _movieSearch2 = _interopRequireDefault(_movieSearch);\n\t\n\tvar _Header = __webpack_require__(33);\n\t\n\tvar _Header2 = _interopRequireDefault(_Header);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\texports.default = {\n\t  name: 'Search',\n\t  route: {\n\t    data: function data(transition) {\n\t      return {\n\t        movies: (0, _movieSearch2.default)(transition.to.params.name)\n\t      };\n\t    }\n\t  },\n\t  data: function data() {\n\t    return {\n\t      movies: []\n\t    };\n\t  },\n\t\n\t  components: {\n\t    AppHeader: _Header2.default\n\t  },\n\t  methods: {\n\t    movieSearch: _movieSearch2.default\n\t  }\n\t};\n\n/***/ },\n/* 46 */,\n/* 47 */,\n/* 48 */,\n/* 49 */,\n/* 50 */,\n/* 51 */,\n/* 52 */,\n/* 53 */,\n/* 54 */,\n/* 55 */,\n/* 56 */,\n/* 57 */,\n/* 58 */,\n/* 59 */,\n/* 60 */,\n/* 61 */,\n/* 62 */,\n/* 63 */,\n/* 64 */,\n/* 65 */,\n/* 66 */,\n/* 67 */,\n/* 68 */,\n/* 69 */,\n/* 70 */,\n/* 71 */,\n/* 72 */,\n/* 73 */,\n/* 74 */,\n/* 75 */,\n/* 76 */,\n/* 77 */,\n/* 78 */,\n/* 79 */,\n/* 80 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 81 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 82 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 83 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 84 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 85 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 86 */,\n/* 87 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <div class=app> <router-view></router-view> </div> \";\n\n/***/ },\n/* 88 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <div v-link=\\\"{ name: 'movie', params: { id: this.id, name: this.kebabTitle }}\\\" class=movie _v-2147ba02=\\\"\\\"> <img :src=posterUrl alt=\\\"\\\" class=poster _v-2147ba02=\\\"\\\"> <div class=title _v-2147ba02=\\\"\\\">{{title}}</div> <div class=info _v-2147ba02=\\\"\\\"> <span class=length _v-2147ba02=\\\"\\\">117 min</span> <span class=year _v-2147ba02=\\\"\\\">2015</span> </div> </div> \";\n\n/***/ },\n/* 89 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <header _v-3bb411db=\\\"\\\"> <nav _v-3bb411db=\\\"\\\"></nav> <h1 _v-3bb411db=\\\"\\\">Vue<strong _v-3bb411db=\\\"\\\">movieFire</strong></h1> <div class=search _v-3bb411db=\\\"\\\"> <svg _v-3bb411db=\\\"\\\"> <use xlink:href=#ico-search _v-3bb411db=\\\"\\\"></use> </svg> </div> </header> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-3bb411db=\\\"\\\"> <symbol id=close viewBox=\\\"0 0 212.982 212.982\\\" _v-3bb411db=\\\"\\\"> <g _v-3bb411db=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z\\\" fill=#525661 _v-3bb411db=\\\"\\\"></path> </g> </symbol> <symbol id=ico-search _v-3bb411db=\\\"\\\"> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d=\\\"M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z\\\" _v-3bb411db=\\\"\\\"></path> </symbol> </svg> \";\n\n/***/ },\n/* 90 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <div class=detail :class=\\\"{ 'ready': !$loadingRouteData}\\\" _v-50a28940=\\\"\\\"> <svg v-link=\\\"{name: 'home'}\\\" class=close _v-50a28940=\\\"\\\"> <use xlink:href=#close _v-50a28940=\\\"\\\"></use> </svg> <div class=movie _v-50a28940=\\\"\\\"> <img :src=poster class=poster _v-50a28940=\\\"\\\"> <div class=title _v-50a28940=\\\"\\\">{{title}}</div> <div class=info _v-50a28940=\\\"\\\"> <span class=length _v-50a28940=\\\"\\\">{{runtime}} min</span> <span class=year _v-50a28940=\\\"\\\">{{release_date}}</span> </div> <div class=desc _v-50a28940=\\\"\\\">{{overview}}</div> <button class=play _v-50a28940=\\\"\\\"> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink version=1.1 id=Capa_1 x=0px y=0px viewBox=\\\"0 0 232.153 232.153\\\" style=\\\"enable-background:new 0 0 232.153 232.153\\\" xml:space=preserve width=10px height=10px _v-50a28940=\\\"\\\"> <g id=Play _v-50a28940=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z\\\" fill=#FFFFFF _v-50a28940=\\\"\\\"></path> </g> </svg> play movie </button> </div> </div> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-50a28940=\\\"\\\"> <symbol id=close viewBox=\\\"0 0 212.982 212.982\\\" _v-50a28940=\\\"\\\"> <g _v-50a28940=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z\\\" fill=#525661 _v-50a28940=\\\"\\\"></path> </g> </symbol> <symbol id=ico-search _v-50a28940=\\\"\\\"> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d=\\\"M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z\\\" _v-50a28940=\\\"\\\"></path> </symbol> </svg> \";\n\n/***/ },\n/* 91 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <app-header _v-c906e114=\\\"\\\"></app-header> <h2 _v-c906e114=\\\"\\\">Most Popular Movies</h2> <section class=movies _v-c906e114=\\\"\\\"> <ul _v-c906e114=\\\"\\\"> <li v-for=\\\"movie of movies\\\" _v-c906e114=\\\"\\\"> {{movie.title}} <img :src=postertUrl alt=\\\"\\\" _v-c906e114=\\\"\\\"> </li> </ul> </section> \";\n\n/***/ },\n/* 92 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \" <app-header _v-df5ffea6=\\\"\\\"></app-header> <h2 _v-df5ffea6=\\\"\\\">Most Popular Movies</h2> <router-view _v-df5ffea6=\\\"\\\"></router-view> <section class=movies _v-df5ffea6=\\\"\\\"> <div v-if=$loadingRouteData _v-df5ffea6=\\\"\\\">Loading...</div> <movie-card v-for=\\\"movie of movies\\\" track-by=id :id=movie.id :title=movie.title :poster=movie.poster_path _v-df5ffea6=\\\"\\\"></movie-card> </section> \";\n\n/***/ },\n/* 93 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(80)\n\t__vue_script__ = __webpack_require__(40)\n\t__vue_template__ = __webpack_require__(87)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ },\n/* 94 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(85)\n\t__vue_script__ = __webpack_require__(42)\n\t__vue_template__ = __webpack_require__(92)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ },\n/* 95 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(81)\n\t__vue_script__ = __webpack_require__(43)\n\t__vue_template__ = __webpack_require__(88)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ },\n/* 96 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(83)\n\t__vue_script__ = __webpack_require__(44)\n\t__vue_template__ = __webpack_require__(90)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ },\n/* 97 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __vue_script__, __vue_template__\n\t__webpack_require__(84)\n\t__vue_script__ = __webpack_require__(45)\n\t__vue_template__ = __webpack_require__(91)\n\tmodule.exports = __vue_script__ || {}\n\tif (module.exports.__esModule) module.exports = module.exports.default\n\tif (__vue_template__) {\n\t(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n\t}\n\n\n/***/ }\n]);\n\n\n/** WEBPACK FOOTER **\n ** static/js/app.94b45bfc6e3df881a13d.js\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-3bb411db&scoped=true!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./Header.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./Header.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../../node_modules/vue-loader/lib/template-rewriter.js?id=_v-3bb411db!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./Header.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/components/Header.vue\n ** module id = 33\n ** module chunks = 2\n **/","function getMovieDetails (movieId, lang = 'en') {\n  var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\n  return fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}&language=${lang}`)\n    .then(response => response.json())\n    .catch(err => console.log('parsing failed', err));\n}\n\nfunction getMovieImages (movieId) {\n  let apiKey = 'eb3b624d1526d41441b1cd8b608415d0';\n\n  return fetch(`https://webservice.fanart.tv/v3/movies/${movieId}?api_key=${apiKey}`)\n    .then(response => response.json())\n    .catch(err => console.log('parsing failed', err));\n}\n\nexport {getMovieDetails, getMovieImages};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/helpers/getMovieInfo.js\n **/","function getPopularMovies () {\n  var apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\n  return fetch(`https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}`)\n    .then(response => response.json())\n    .then(({results}) => {\n      return results;\n    })\n    .catch(err => console.log('parsing failed', err));\n}\n\nexport default getPopularMovies;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/helpers/getPopularMovies.js\n **/","function movieSearch (query, lang = 'en') {\n  let apiKey = 'fcc3e3e91b7cc38185ef902ca797ee11';\n\n  return fetch(`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}&language=${lang}&include_adult=false`)\n    .then(response => response.json())\n    .then(({results}) => {\n      return results.filter(function (film) {\n        return film.vote_count > 0;\n      });\n    })\n    .catch(err => console.log('parsing failed', err));\n}\n\nexport default movieSearch;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/helpers/movieSearch.js\n **/","import Vue from 'vue';\n\nimport VueFire from 'vuefire';\nimport { sync } from 'vuex-router-sync';\nimport store from './store';\nimport router from './router';\n\nimport App from './App';\n\nVue.use(VueFire);\n\nsync(store, router);\n\n// /* eslint-disable no-new */\n// new Vue({\n//   store,\n//   el: 'body',\n//   components: { App },\n// });\n\nVue.extend({\n  store,\n  components: { App }\n});\n\nrouter.start(App, 'app');\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/main.js\n **/","import Vue from 'vue';\nimport VueRouter from 'vue-router';\n\nimport Home from './components/Home';\nimport Search from './components/Search';\nimport MovieDetails from './components/MovieDetails';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n  hashbang: false,\n  history: true,\n  transitionOnLoad: true\n});\n\nrouter.map({\n  '/': {\n    name: 'home',\n    component: Home\n  },\n  '/movie/:id/:name/': {\n    name: 'movie',\n    component: MovieDetails\n  },\n  '/search/:name/': {\n    name: 'search',\n    component: Search\n  }\n});\n\nexport default router;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/router.js\n **/","import Vue from 'vue';\nimport Vuex from 'vuex';\n\n// Make vue aware of Vuex\nVue.use(Vuex);\n\nconst state = {\n  movies: []\n};\n\n// Create an object storing various mutations. We will write the mutation\nconst mutations = {\n  // TODO: set up our mutations\n};\n\n// Combine the initial state and the mutations to create a Vuex store.\n// This store can be linked to our app.\nexport default new Vuex.Store({\n  state,\n  mutations\n});\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/store.js\n **/","<template>\n  <app-header></app-header>\n\n  <h2>Most Popular Movies</h2>\n\n  <router-view></router-view>\n\n  <section  class=\"movies\">\n    <div v-if=\"$loadingRouteData\">Loading...</div>\n\n    <movie-card v-for=\"movie of movies\" track-by=\"id\" :id=\"movie.id\" :title=\"movie.title\" :poster=\"movie.poster_path\"></movie-card>\n  </section>\n</template>\n\n<script>\nimport getPopularMovies from './../helpers/getPopularMovies';\n\nimport MovieCard from './MovieCard';\nimport Header from './Header';\n\nexport default {\n  name: 'Home',\n  route: {\n    data: () => ({\n      movies: getPopularMovies()\n    })\n  },\n  data () {\n    return {\n      movies: []\n    };\n  },\n  components: {\n    AppHeader: Header,\n    MovieCard\n  },\n  methods: {\n    getPopularMovies\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.movies {\n  display: flex;\n  flex-wrap: wrap;\n  overflow: scroll;\n  height: 70vh;\n  padding: 8px 18px;\n}\n</style>\n\n\n\n/** WEBPACK FOOTER **\n ** Home.vue?5432d5ed\n **/","<template>\n  <div v-link=\"{ name: 'movie', params: { id: this.id, name: this.kebabTitle }}\" class=\"movie\">\n    <img :src=\"posterUrl\" alt=\"\" class=\"poster\" />\n    <div class=\"title\">{{title}}</div>\n    <div class=\"info\">\n      <span class=\"length\">117 min</span>\n      <span class=\"year\">2015</span>\n    </div>\n  </div>\n</template>\n\n<script>\nimport _ from 'lodash';\n\nexport default {\n  name: 'MovieCard',\n  props: {\n    id: {\n      type: Number,\n      required: true\n    },\n    title: {\n      type: String,\n      required: true,\n      default: ''\n    },\n    poster: {\n      type: String,\n      default: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/backdrop_ggwxvq_1.jpg'\n    }\n  },\n  computed: {\n    kebabTitle () {\n      return _.kebabCase(this.title);\n    },\n    posterUrl () {\n      return `http://image.tmdb.org/t/p/w185//${this.poster}`;\n    }\n  },\n  data () {\n    return {\n    };\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.movie {\n  padding: 10px;\n  cursor: pointer;\n  width: calc(100% * (1/4));\n  transition: all .5s ease;\n\n  .poster {\n    width: 100%;\n    margin-bottom: 6px;\n    border-radius: 4px;\n\n    &.active {\n      opacity: 0;\n    }\n  }\n\n  .title {\n    color: #525661;\n    margin-bottom: 4px;\n    font-size: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .info {\n    font-size: 11px;\n    opacity: .8;\n  }\n\n  .desc {\n    display: none;\n  }\n}\n</style>\n\n\n\n/** WEBPACK FOOTER **\n ** MovieCard.vue?57d1205d\n **/","<template>\n  <div class=\"detail\" :class=\"{ 'ready': !$loadingRouteData}\">\n    <svg v-link=\"{name: 'home'}\" class=\"close\">\n      <use xlink:href=\"#close\"></use>\n    </svg>\n\n    <div class=\"movie\">\n      <img :src=\"poster\" class=\"poster\" />\n      <div class=\"title\">{{title}}</div>\n      <div class=\"info\">\n        <span class=\"length\">{{runtime}} min</span>\n        <span class=\"year\">{{release_date}}</span>\n      </div>\n      <div class=\"desc\">{{overview}}</div>\n\n      <button class=\"play\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 232.153 232.153\" style=\"enable-background:new 0 0 232.153 232.153;\" xml:space=\"preserve\" width=\"10px\" height=\"10px\">\n          <g id=\"Play\">\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" d=\"M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z\" fill=\"#FFFFFF\"/>\n          </g>\n        </svg> play movie\n      </button>\n    </div>\n  </div>\n\n  <svg  xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"display:none;\">\n    <symbol id=\"close\" viewBox=\"0 0 212.982 212.982\">\n      <g>\n        <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" d=\"M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z\" fill=\"#525661\"/>\n      </g>\n    </symbol>\n    <symbol id=\"ico-search\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#363a47\" d=\"M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\n      c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\n      l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\n      c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z\"/>\n    </symbol>\n  </svg>\n</template>\n\n<script>\nimport {getMovieDetails, getMovieImages} from './../helpers/getMovieInfo';\n\nexport default {\n  name: 'MovieDetails',\n  route: {\n    data ({to: {params: { id }}}) {\n      return Promise.all([\n        getMovieDetails(id)\n        // getMovieImages(id)\n      ])\n        .then(data => {\n          return {\n            title: data[0].title,\n            tagline: data[0].tagline,\n            overview: data[0].overview,\n            runtime: data[0].runtime,\n            vote_average: data[0].vote_average,\n            release_date: data[0].release_date,\n            // background: data[1].background,\n            poster_path: data[0].poster_path\n          };\n        });\n    }\n  },\n  ready () {\n  },\n  computed: {\n    poster () {\n      return `http://image.tmdb.org/t/p/w300/${this.poster_path}`;\n    }\n  },\n  data () {\n    return {\n      title: '',\n      tagline: '',\n      overview: '',\n      runtime: '',\n      vote_average: '',\n      release_date: '',\n      background: '',\n      poster_path: ''\n    };\n  },\n  methods: {\n    getMovieDetails,\n    getMovieImages\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.detail {\n  min-height: 390px;\n  z-index: 10;\n  padding: 37px 30px 30px 255px;\n\n  &::before {\n    content: '';\n    background: #fff;\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 15px;\n    opacity: 0;\n    transition: all .4s cubic-bezier(.67,.13,.1,.81);\n  }\n\n  .close {\n    position: absolute;\n    top: 21px;\n    right: 22px;\n    width: 12px;\n    height: 12px;\n    cursor: pointer;\n    border: 6px solid #FFF;\n    box-sizing: content-box;\n    z-index: 10;\n  }\n\n  .poster {\n    position: absolute;\n    top: -10%;\n    left: -6%;\n    width: 266px;\n    height: 400px;\n    z-index: 2;\n    border-radius: 5px;\n    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);\n    opacity: 0;\n    transition: all .5s cubic-bezier(.67,.13,.1,.81);\n  }\n\n\n  .title,\n  .info,\n  .desc,\n  .play,\n  .close {\n    transform: translateX(-50px);\n    opacity: 0;\n    transition: all .4s cubic-bezier(.67,.13,.1,.81);\n  }\n\n  .close {\n    transform: translateX(10px);;\n  }\n\n  .title {\n    font-size: 35px;\n    font-weight: 300;\n    color: #525661;\n    margin-bottom: 5px;\n\n  }\n\n  .info {\n    font-size: 11px;\n    opacity: 0;\n    margin-left: 2px;\n  }\n\n  .desc {\n    margin-top: 30px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n\n  .play {\n    background: linear-gradient(90deg, #E4761F, #FF8B32);\n    border: none;\n    border-radius: 20px;\n    color: #fff;\n    font-size: 12px;\n    line-height: 1.5;\n    padding: 8px 17px;\n    margin: 30px 0 0 -2px;\n    text-transform: uppercase;\n    z-index: 10;\n    outline: none !important;\n    cursor: pointer;\n    opacity: 0;\n\n    svg {\n      vertical-align: middle;\n      position: relative;\n      top: -2px;\n      margin-right: 3px;\n    }\n  }\n}\n\n.detail.ready {\n\n  &::before {\n    opacity: 1;\n  }\n\n  .info {\n    opacity: .8;\n  }\n\n  .poster {\n    opacity: 1;\n    transition-duration: .5s;\n  }\n\n  .title,\n  .info,\n  .desc,\n  .play,\n  .close {\n    transform: translateX(0);\n    opacity: 1;\n    transition-delay: 0s;\n    transition-duration: .5s;\n  }\n\n  .title {\n    transition-delay: .2s;\n  }\n\n  .info {\n    transition-delay: .3s;\n  }\n\n  .desc {\n    transition-delay: .4s;\n  }\n\n  .play {\n    transition-delay: .5s;\n  }\n}\n</style>\n\n\n\n/** WEBPACK FOOTER **\n ** MovieDetails.vue?d35c02fc\n **/","<template>\n  <app-header></app-header>\n\n  <h2>Most Popular Movies</h2>\n\n  <section  class=\"movies\">\n    <ul>\n      <li v-for=\"movie of movies\">\n        {{movie.title}}\n        <img :src=\"postertUrl\" alt=\"\" />\n      </li>\n    </ul>\n  </section>\n</template>\n\n<script>\nimport movieSearch from '../helpers/movieSearch';\n\nimport Header from './Header';\n\nexport default {\n  name: 'Search',\n  route: {\n    data: (transition) => ({\n      movies: movieSearch(transition.to.params.name)\n    })\n  },\n  data () {\n    return {\n      movies: []\n    };\n  },\n  components: {\n    AppHeader: Header\n    // MovieCard\n  },\n  methods: {\n    movieSearch\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.movies {\n  display: flex;\n  flex-wrap: wrap;\n  overflow: scroll;\n  height: 70vh;\n  padding: 8px 18px;\n}\n</style>\n\n\n\n/** WEBPACK FOOTER **\n ** Search.vue?2bfafdff\n **/","module.exports = \" <div class=app> <router-view></router-view> </div> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n ** module id = 87\n ** module chunks = 2\n **/","module.exports = \" <div v-link=\\\"{ name: 'movie', params: { id: this.id, name: this.kebabTitle }}\\\" class=movie _v-2147ba02=\\\"\\\"> <img :src=posterUrl alt=\\\"\\\" class=poster _v-2147ba02=\\\"\\\"> <div class=title _v-2147ba02=\\\"\\\">{{title}}</div> <div class=info _v-2147ba02=\\\"\\\"> <span class=length _v-2147ba02=\\\"\\\">117 min</span> <span class=year _v-2147ba02=\\\"\\\">2015</span> </div> </div> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-2147ba02!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/MovieCard.vue\n ** module id = 88\n ** module chunks = 2\n **/","module.exports = \" <header _v-3bb411db=\\\"\\\"> <nav _v-3bb411db=\\\"\\\"></nav> <h1 _v-3bb411db=\\\"\\\">Vue<strong _v-3bb411db=\\\"\\\">movieFire</strong></h1> <div class=search _v-3bb411db=\\\"\\\"> <svg _v-3bb411db=\\\"\\\"> <use xlink:href=#ico-search _v-3bb411db=\\\"\\\"></use> </svg> </div> </header> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-3bb411db=\\\"\\\"> <symbol id=close viewBox=\\\"0 0 212.982 212.982\\\" _v-3bb411db=\\\"\\\"> <g _v-3bb411db=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z\\\" fill=#525661 _v-3bb411db=\\\"\\\"></path> </g> </symbol> <symbol id=ico-search _v-3bb411db=\\\"\\\"> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d=\\\"M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z\\\" _v-3bb411db=\\\"\\\"></path> </symbol> </svg> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-3bb411db!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Header.vue\n ** module id = 89\n ** module chunks = 2\n **/","module.exports = \" <div class=detail :class=\\\"{ 'ready': !$loadingRouteData}\\\" _v-50a28940=\\\"\\\"> <svg v-link=\\\"{name: 'home'}\\\" class=close _v-50a28940=\\\"\\\"> <use xlink:href=#close _v-50a28940=\\\"\\\"></use> </svg> <div class=movie _v-50a28940=\\\"\\\"> <img :src=poster class=poster _v-50a28940=\\\"\\\"> <div class=title _v-50a28940=\\\"\\\">{{title}}</div> <div class=info _v-50a28940=\\\"\\\"> <span class=length _v-50a28940=\\\"\\\">{{runtime}} min</span> <span class=year _v-50a28940=\\\"\\\">{{release_date}}</span> </div> <div class=desc _v-50a28940=\\\"\\\">{{overview}}</div> <button class=play _v-50a28940=\\\"\\\"> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink version=1.1 id=Capa_1 x=0px y=0px viewBox=\\\"0 0 232.153 232.153\\\" style=\\\"enable-background:new 0 0 232.153 232.153\\\" xml:space=preserve width=10px height=10px _v-50a28940=\\\"\\\"> <g id=Play _v-50a28940=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z\\\" fill=#FFFFFF _v-50a28940=\\\"\\\"></path> </g> </svg> play movie </button> </div> </div> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink style=display:none _v-50a28940=\\\"\\\"> <symbol id=close viewBox=\\\"0 0 212.982 212.982\\\" _v-50a28940=\\\"\\\"> <g _v-50a28940=\\\"\\\"> <path style=fill-rule:evenodd;clip-rule:evenodd d=\\\"M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z\\\" fill=#525661 _v-50a28940=\\\"\\\"></path> </g> </symbol> <symbol id=ico-search _v-50a28940=\\\"\\\"> <path fill-rule=evenodd clip-rule=evenodd fill=#363a47 d=\\\"M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756\\n    c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981\\n    l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0\\n    c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z\\\" _v-50a28940=\\\"\\\"></path> </symbol> </svg> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-50a28940!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/MovieDetails.vue\n ** module id = 90\n ** module chunks = 2\n **/","module.exports = \" <app-header _v-c906e114=\\\"\\\"></app-header> <h2 _v-c906e114=\\\"\\\">Most Popular Movies</h2> <section class=movies _v-c906e114=\\\"\\\"> <ul _v-c906e114=\\\"\\\"> <li v-for=\\\"movie of movies\\\" _v-c906e114=\\\"\\\"> {{movie.title}} <img :src=postertUrl alt=\\\"\\\" _v-c906e114=\\\"\\\"> </li> </ul> </section> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-c906e114!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Search.vue\n ** module id = 91\n ** module chunks = 2\n **/","module.exports = \" <app-header _v-df5ffea6=\\\"\\\"></app-header> <h2 _v-df5ffea6=\\\"\\\">Most Popular Movies</h2> <router-view _v-df5ffea6=\\\"\\\"></router-view> <section class=movies _v-df5ffea6=\\\"\\\"> <div v-if=$loadingRouteData _v-df5ffea6=\\\"\\\">Loading...</div> <movie-card v-for=\\\"movie of movies\\\" track-by=id :id=movie.id :title=movie.title :poster=movie.poster_path _v-df5ffea6=\\\"\\\"></movie-card> </section> \";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/template-rewriter.js?id=_v-df5ffea6!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Home.vue\n ** module id = 92\n ** module chunks = 2\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../node_modules/vue-loader/lib/style-rewriter.js!sass-loader?sourceMap!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./App.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./App.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../node_modules/vue-loader/lib/selector.js?type=template&index=0!./App.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/App.vue\n ** module id = 93\n ** module chunks = 2\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-df5ffea6&scoped=true!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./Home.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./Home.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../../node_modules/vue-loader/lib/template-rewriter.js?id=_v-df5ffea6!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./Home.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/components/Home.vue\n ** module id = 94\n ** module chunks = 2\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-2147ba02&scoped=true!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./MovieCard.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./MovieCard.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../../node_modules/vue-loader/lib/template-rewriter.js?id=_v-2147ba02!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./MovieCard.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/components/MovieCard.vue\n ** module id = 95\n ** module chunks = 2\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-50a28940&scoped=true!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./MovieDetails.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./MovieDetails.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../../node_modules/vue-loader/lib/template-rewriter.js?id=_v-50a28940!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./MovieDetails.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/components/MovieDetails.vue\n ** module id = 96\n ** module chunks = 2\n **/","var __vue_script__, __vue_template__\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"extract\\\":true,\\\"remove\\\":true}!vue-style-loader!css-loader?sourceMap!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-c906e114&scoped=true!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./Search.vue\")\n__vue_script__ = require(\"!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./Search.vue\")\n__vue_template__ = require(\"!!vue-html-loader!./../../node_modules/vue-loader/lib/template-rewriter.js?id=_v-c906e114!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./Search.vue\")\nmodule.exports = __vue_script__ || {}\nif (module.exports.__esModule) module.exports = module.exports.default\nif (__vue_template__) {\n(typeof module.exports === \"function\" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/components/Search.vue\n ** module id = 97\n ** module chunks = 2\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------