├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── MovieDetails.vue
        ├── SearchResults.vue
        ├── TvDetails.vue
        ├── UI
        │   ├── Footer.vue
        │   ├── Navbar.vue
        │   ├── Placeholder.vue
        │   └── Spinner.vue
        ├── homepage
        │   ├── Hero.vue
        │   ├── Home.vue
        │   ├── PopularMovies.vue
        │   ├── PopularSeries.vue
        │   ├── TopRatedMovies.vue
        │   └── TopRatedSeries.vue
        └── layouts
        │   ├── DetailsContainer.vue
        │   └── MyCarousel.vue
    ├── main.js
    ├── route
        └── index.js
    └── store
        ├── index.js
        └── modules
            ├── hero.js
            ├── popularMovies.js
            ├── popularSeries.js
            ├── topRatedMovies.js
            └── topRatedSeries.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Rangga Dimas
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # kinohub-movie-app
 2 | [Live Web](https://kinohub.netlify.app).
 3 | 
 4 | ## Project setup
 5 | ```
 6 | pnpm install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | ```
11 | pnpm run serve
12 | ```
13 | 
14 | ### Compiles and minifies for production
15 | ```
16 | pnpm run build
17 | ```
18 | 
19 | ### Lints and fixes files
20 | ```
21 | pnpm run lint
22 | ```
23 | ### Dont forget to register your own tmdb apikey and put it in store/index.js
24 | 
25 | ### Customize configuration
26 | See [Configuration Reference](https://cli.vuejs.org/config/).
27 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kinohub-movie-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-carousel": "^0.18.0",
14 |     "vue-router": "^3.4.9",
15 |     "vuex": "^3.5.1"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.0",
19 |     "@vue/cli-plugin-eslint": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.2.2",
24 |     "vue-template-compiler": "^2.6.11"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     },
38 |     "rules": {}
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buckypinkman/kinohub-movie-app/6bb1487750be0195910fb24169b62233e4c6a902/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: "App"
10 |   }
11 | </script>
12 | 
13 | <style scoped>
14 |   
15 | </style>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buckypinkman/kinohub-movie-app/6bb1487750be0195910fb24169b62233e4c6a902/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/MovieDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <details-container>
  3 |     <spinner v-if="$store.state.isLoading" />
  4 |     <div>
  5 |       <div class="content">
  6 |         <img
  7 |           src="https://via.placeholder.com/1280x720.png/161c30/6d748a/?text=No Image Available :("
  8 |           v-if="results.backdrop_path == null"
  9 |           alt=""
 10 |           class="backdrop"
 11 |         />
 12 |         <img
 13 |           v-else
 14 |           :src="'http://image.tmdb.org/t/p/w1280' + results.backdrop_path"
 15 |           alt=""
 16 |           class="backdrop"
 17 |         />
 18 |         <div class="overlay">
 19 |           <div class="content-body ml-md-5 d-md-flex container">
 20 |             <img
 21 |               class="detail-poster mx-4"
 22 |               :src="'http://image.tmdb.org/t/p/w1280' + results.poster_path"
 23 |               alt=""
 24 |             />
 25 |             <div class="content-data">
 26 |               <h4>{{ results.status }}</h4>
 27 |               <h1 class="my-3">
 28 |                 {{ results.title }}
 29 |                 <span class="year">({{ getYear }})</span>
 30 |               </h1>
 31 |               <h5 class="mb-3">Rating : {{ results.vote_average }}</h5>
 32 |               <h5>
 33 |                 <span v-for="res in results.genres" :key="res.id">
 34 |                   {{ res.name }}
 35 |                 </span>
 36 |                 | {{ lang }}
 37 |               </h5>
 38 |               <a
 39 |                 :href="results.homepage"
 40 |                 target="_blank"
 41 |                 class="btn btn-primary btn-lg mt-3 mt-md-4 shadow mr-4"
 42 |                 ><i class="fas fa-play mr-3"></i>Watch Now
 43 |               </a>
 44 |               <a
 45 |                 class="btn btn-outline-light btn-lg mt-3 mt-md-4 shadow"
 46 |                 :href="
 47 |                   'https://www.youtube.com/results?search_query=' +
 48 |                   results.title +
 49 |                   ' trailer'
 50 |                 "
 51 |                 target="_blank"
 52 |                 ><i class="fas fa-play mr-3"></i>Watch Trailer</a
 53 |               >
 54 |             </div>
 55 |           </div>
 56 |         </div>
 57 |       </div>
 58 |       <div class="container">
 59 |         <div class="row summary">
 60 |           <h2 class="mb-4">SUMMARY</h2>
 61 |           <h6 v-if="readMore">{{ results.overview.slice(0, 180) }}..</h6>
 62 |           <h6 v-else>{{ results.overview }}</h6>
 63 |           <a @click.prevent="readMore = !readMore" href="#">
 64 |             <span v-if="readMore">Read more..</span>
 65 |             <span v-else>Read Less..</span>
 66 |           </a>
 67 |         </div>
 68 |         <div class="row cast long-mr">
 69 |           <h2 class="mb-4">CASTS</h2>
 70 |           <my-carousel>
 71 |             <h4 v-if="casts.length == 0">No data available.</h4>
 72 |             <slide v-for="result in casts" :key="result.id" v-else>
 73 |               <div class="img-wrap mr-4 p-2">
 74 |                 <placeholder v-if="result.profile_path == null" />
 75 |                 <img
 76 |                   :src="'http://image.tmdb.org/t/p/w500' + result.profile_path"
 77 |                   class="img-fluid poster"
 78 |                   alt=""
 79 |                 />
 80 |                 <div class="p-2 mt-2">
 81 |                   <h6>{{ result.name }}</h6>
 82 |                   <p>{{ result.character }}</p>
 83 |                 </div>
 84 |               </div>
 85 |             </slide>
 86 |           </my-carousel>
 87 |         </div>
 88 |         <div class="row mt-5">
 89 |           <h2 class="mb-4">Similiar Movies</h2>
 90 |           <my-carousel>
 91 |             <h4 v-if="similiarItem.length == 0">No data available.</h4>
 92 |             <slide v-for="result in similiarItem" :key="result.id" v-else>
 93 |               <div class="img-wrap mr-4 p-2">
 94 |                 <router-link
 95 |                   :to="{ name: 'MovieDetails', params: { movieId: result.id } }"
 96 |                 >
 97 |                   <placeholder v-if="result.poster_path == null" />
 98 |                   <img
 99 |                     :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
100 |                     class="img-fluid poster"
101 |                     alt=""
102 |                   />
103 |                 </router-link>
104 |                 <div class="p-2 mt-2">
105 |                   <p>{{ result.title }}</p>
106 |                 </div>
107 |               </div>
108 |             </slide>
109 |           </my-carousel>
110 |         </div>
111 |         <div class="row mt-5">
112 |           <router-link :to="{ name: 'Home' }">
113 |             <p>Back to home</p>
114 |           </router-link>
115 |         </div>
116 |       </div>
117 |     </div>
118 |   </details-container>
119 | </template>
120 | 
121 | <script>
122 | import DetailsContainer from './layouts/DetailsContainer.vue';
123 | 
124 | export default {
125 |   components: { DetailsContainer },
126 |   name: "movieDetails",
127 |   props: ["movieId"],
128 |   data() {
129 |     return {
130 |       results: "",
131 |       readMore: true,
132 |       casts: "",
133 |       similiarItem: "",
134 |     };
135 |   },
136 |   methods: {
137 |     getDetails(id) {
138 |       fetch(
139 |         `https://api.themoviedb.org/3/movie/${id}?api_key=${this.$store.state.api_key}&language=en-US`
140 |       )
141 |         .then((response) => response.json())
142 |         .then((response) => {
143 |           console.log(response);
144 |           this.results = response;
145 |         });
146 |     },
147 |     getCredits(id) {
148 |       this.$store.state.isLoading = true
149 |       fetch(
150 |         `https://api.themoviedb.org/3/movie/${id}/credits?api_key=${this.$store.state.api_key}&language=en-US`
151 |       )
152 |         .then((response) => response.json())
153 |         .then((response) => {
154 |           console.log(response);
155 |           this.casts = response.cast;
156 |           this.$store.state.isLoading = false;
157 |         });
158 |     },
159 |     getSimiliarItems(id) {
160 |       fetch(
161 |         `https://api.themoviedb.org/3/movie/${id}/similar?api_key=${this.$store.state.api_key}&language=en-US&page=1`
162 |       )
163 |         .then((response) => response.json())
164 |         .then((response) => {
165 |           console.log(response);
166 |           this.similiarItem = response.results;
167 |         });
168 |     },
169 |   },
170 |   async created() {
171 |     await this.getDetails(this.movieId);
172 | 
173 |     await this.getCredits(this.movieId);
174 | 
175 |     await this.getSimiliarItems(this.movieId);
176 |   },
177 |   watch: {
178 |     movieId(newId) {
179 |       //watch route props
180 |       this.getDetails(newId);
181 |       this.getCredits(newId);
182 |       this.getSimiliarItems(newId);
183 |     },
184 |   },
185 |   computed: {
186 |     getYear() {
187 |       const release = this.results.release_date;
188 |       return release.split("-", 1).join();
189 |     },
190 |     lang() {
191 |       return this.results.original_language.toUpperCase();
192 |     },
193 |   },
194 | };
195 | </script>
196 | 


--------------------------------------------------------------------------------
/src/components/SearchResults.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="searchResult">
  3 |     <spinner v-if="$store.state.isLoading" />
  4 |     <navbar />
  5 |     <div class="container mt-4">
  6 |       <h2 v-if="movResults.length || tvResults.length == 0">Movie not found.</h2>
  7 |       <h2 v-else>Search results for : "{{ this.searchQuery }}"</h2>
  8 |       <div class="row mt-4 justify-content-center">
  9 |         <div
 10 |           class="card-wrap mt-3 p-3"
 11 |           style="width: 12rem"
 12 |           v-for="result in movResults"
 13 |           :key="result.id"
 14 |         >
 15 |           <router-link
 16 |             :to="{ name: 'MovieDetails', params: { movieId: result.id } }"
 17 |           >
 18 |             <placeholder v-if="result.poster_path == null" />
 19 |             <img
 20 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
 21 |               class="img-fluid search-poster"
 22 |               alt=""
 23 |             />
 24 |             <div class="search-title pl-2 py-3">
 25 |               <p>{{ result.title }}</p>
 26 |             </div>
 27 |           </router-link>
 28 |         </div>
 29 |         <div
 30 |           class="card-wrap mt-3 p-3"
 31 |           style="width: 12rem"
 32 |           v-for="result in tvResults"
 33 |           :key="result.id"
 34 |         >
 35 |           <router-link :to="{ name: 'TvDetails', params: { tvId: result.id } }">
 36 |             <placeholder v-if="result.poster_path == null" />
 37 |             <img
 38 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
 39 |               class="img-fluid poster"
 40 |               alt=""
 41 |             />
 42 |             <div class="search-title pl-2 py-3">
 43 |               <p>{{ result.name }}</p>
 44 |             </div>
 45 |           </router-link>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |   name: "searchResult",
 55 |   props: ['searchQuery'],
 56 |   data() {
 57 |     return {
 58 |       movResults: "",
 59 |       tvResults: "",
 60 |     };
 61 |   },
 62 |   methods: {
 63 |     getMovie(query) {
 64 |       fetch(
 65 |         `https://api.themoviedb.org/3/search/movie?api_key=${this.$store.state.api_key}&language=en-US&query=${query}&page=1&include_adult=false`
 66 |       )
 67 |         .then((response) => response.json())
 68 |         .then((response) => {
 69 |           console.log(response);
 70 |           this.movResults = response.results;
 71 |         });
 72 |     },
 73 |     getTv(query) {
 74 |       this.$store.state.isLoading = true
 75 |       fetch(
 76 |       `https://api.themoviedb.org/3/search/tv?api_key=${this.$store.state.api_key}&language=en-US&query=${query}&page=1&include_adult=false`
 77 |     )
 78 |       .then((response) => response.json())
 79 |       .then((response) => {
 80 |         console.log(response);
 81 |         this.tvResults = response.results;
 82 |         this.$store.state.isLoading = false
 83 |       });
 84 |     },
 85 |   },
 86 |   async created() {
 87 |     await this.getMovie(this.searchQuery)
 88 |     await this.getTv(this.searchQuery)
 89 |   },
 90 |   watch: {
 91 |     searchQuery(newQuery) {
 92 |       this.getMovie(newQuery)
 93 |       this.getTv(newQuery)
 94 |     },
 95 |   },
 96 | };
 97 | </script>
 98 | 
 99 | <style scoped>
100 | a {
101 |   text-decoration: none;
102 |   color: white;
103 | }
104 | 
105 | .search-poster {
106 |   cursor: pointer;
107 |   transition: 0.2s;
108 | }
109 | 
110 | .search-poster:hover {
111 |   transform: scale(1.04);
112 |   box-shadow: 0 0 11px rgba(3, 3, 3, 0.822);
113 | }
114 | 
115 | @media only screen and (max-width: 768px) {
116 |   .card-wrap {
117 |     max-width: 10rem;
118 |   }
119 | 
120 |   .search-poster {
121 |     max-width: 130px;
122 |   }
123 | 
124 | }
125 | </style>


--------------------------------------------------------------------------------
/src/components/TvDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <details-container>
  3 |     <spinner v-if="$store.state.isLoading" />
  4 |     <div class="content">
  5 |       <img
  6 |         src="https://via.placeholder.com/1280x720.png/161c30/6d748a/?text=No Image Available :("
  7 |         v-if="results.backdrop_path == null"
  8 |         alt=""
  9 |         class="backdrop"
 10 |       />
 11 |       <img
 12 |         v-else
 13 |         :src="'http://image.tmdb.org/t/p/w1280' + results.backdrop_path"
 14 |         alt=""
 15 |         class="backdrop"
 16 |       />
 17 |       <div class="overlay">
 18 |         <div class="content-body ml-md-5 d-md-flex container">
 19 |           <img
 20 |             class="detail-poster mx-4"
 21 |             :src="'http://image.tmdb.org/t/p/w1280' + results.poster_path"
 22 |             alt=""
 23 |           />
 24 |           <div class="content-data">
 25 |             <h4>{{ results.status }}</h4>
 26 |             <h5>
 27 |               Created by :
 28 |               <span class="text-white font-weight-bold">{{ getCreator }}</span>
 29 |             </h5>
 30 |             <h1 class="my-3">
 31 |               {{ results.name }}
 32 |               <span class="year">({{ getYear }} - {{ getLastYear }})</span>
 33 |             </h1>
 34 |             <h5>
 35 |               Rating : {{ results.vote_average }} |
 36 |               <span v-for="res in results.genres" :key="res.id">
 37 |                 {{ res.name }}
 38 |               </span>
 39 |               | {{ lang }}
 40 |             </h5>
 41 |             <h5 class="mt-3">
 42 |               Episodes :
 43 |               {{ results.number_of_episodes }} | Seasons :
 44 |               {{ results.number_of_seasons }}
 45 |             </h5>
 46 |             <a
 47 |               :href="results.homepage"
 48 |               target="_blank"
 49 |               class="btn btn-primary btn-lg mt-3 mt-md-4 shadow mr-4"
 50 |               ><i class="fas fa-play mr-3"></i>Watch Now
 51 |             </a>
 52 |             <a
 53 |               class="btn btn-outline-light btn-lg mt-3 mt-md-4 shadow"
 54 |               :href="
 55 |                 'https://www.youtube.com/results?search_query=' +
 56 |                 results.name +
 57 |                 ' trailer'
 58 |               "
 59 |               target="_blank"
 60 |               ><i class="fas fa-play mr-3"></i>Watch Trailer</a
 61 |             >
 62 |           </div>
 63 |         </div>
 64 |       </div>
 65 |     </div>
 66 |     <div class="container">
 67 |       <div class="row summary">
 68 |         <h2 class="mb-4">SUMMARY</h2>
 69 |         <h6 v-if="readMore">{{ results.overview.slice(0, 180) }}..</h6>
 70 |         <h6 v-else>{{ results.overview }}</h6>
 71 |         <a @click.prevent="readMore = !readMore" href="#">
 72 |           <span v-if="readMore">Read more..</span>
 73 |           <span v-else>Read Less..</span>
 74 |         </a>
 75 |       </div>
 76 |       <div class="row cast long-mr">
 77 |         <h2 class="mb-4">CASTS</h2>
 78 |         <my-carousel>
 79 |           <h4 v-if="casts.length == 0">No data available.</h4>
 80 |           <slide v-for="result in casts" :key="result.id" v-else>
 81 |             <div class="img-wrap mr-4 p-2">
 82 |               <placeholder v-if="result.profile_path == null" />
 83 |               <img
 84 |                 :src="'http://image.tmdb.org/t/p/w500' + result.profile_path"
 85 |                 class="img-fluid poster"
 86 |                 alt=""
 87 |               />
 88 |               <div class="p-2 mt-2">
 89 |                 <h6>{{ result.name }}</h6>
 90 |                 <p>{{ result.character }}</p>
 91 |               </div>
 92 |             </div>
 93 |           </slide>
 94 |         </my-carousel>
 95 |       </div>
 96 |       <div class="row cast long-mr">
 97 |         <h2 class="mb-4">Similiar TV Shows</h2>
 98 |         <my-carousel>
 99 |           <h4 v-if="similiarItem.length == 0">No data available.</h4>
100 |           <slide v-for="result in similiarItem" :key="result.id" v-else>
101 |             <div class="img-wrap mr-4 p-2">
102 |               <router-link
103 |                 :to="{ name: 'TvDetails', params: { tvId: result.id } }"
104 |               >
105 |                 <placeholder v-if="result.poster_path == null" />
106 |                 <img
107 |                   :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
108 |                   class="img-fluid poster"
109 |                   alt=""
110 |                 />
111 |               </router-link>
112 |               <div class="p-2 mt-2">
113 |                 <p>{{ result.name }}</p>
114 |               </div>
115 |             </div>
116 |           </slide>
117 |         </my-carousel>
118 |       </div>
119 |       <div class="row mt-5">
120 |         <router-link :to="{ name: 'Home' }">
121 |           <p>Back to home</p>
122 |         </router-link>
123 |       </div>
124 |     </div>
125 |   </details-container>
126 | </template>
127 | 
128 | <script>
129 | import DetailsContainer from "./layouts/DetailsContainer.vue";
130 | export default {
131 |   components: { DetailsContainer },
132 |   name: "tvDetails",
133 |   props: ["tvId"],
134 |   data() {
135 |     return {
136 |       results: "",
137 |       casts: "",
138 |       readMore: true,
139 |       similiarItem: "",
140 |     };
141 |   },
142 |   methods: {
143 |     getDetails(id) {
144 |       fetch(
145 |         `https://api.themoviedb.org/3/tv/${id}?api_key=${this.$store.state.api_key}&language=en-US`
146 |       )
147 |         .then((response) => response.json())
148 |         .then((response) => {
149 |           console.log(response);
150 |           this.results = response;
151 |         });
152 |     },
153 |     getCredits(id) {
154 |       this.$store.state.isLoading = true;
155 |       fetch(
156 |         `https://api.themoviedb.org/3/tv/${id}/credits?api_key=${this.$store.state.api_key}&language=en-US`
157 |       )
158 |         .then((response) => response.json())
159 |         .then((response) => {
160 |           console.log(response);
161 |           this.casts = response.cast;
162 |           this.$store.state.isLoading = false;
163 |         });
164 |     },
165 |     getSimiliarItems(id) {
166 |       fetch(
167 |         `https://api.themoviedb.org/3/tv/${id}/similar?api_key=${this.$store.state.api_key}&language=en-US&page=1`
168 |       )
169 |         .then((response) => response.json())
170 |         .then((response) => {
171 |           console.log(response);
172 |           this.similiarItem = response.results;
173 |         });
174 |     },
175 |   },
176 |   async created() {
177 |     await this.getDetails(this.tvId);
178 | 
179 |     await this.getCredits(this.tvId);
180 | 
181 |     await this.getSimiliarItems(this.tvId);
182 |   },
183 |   watch: {
184 |     tvId(newId) {
185 |       //watch route props
186 |       this.getDetails(newId);
187 |       this.getCredits(newId);
188 |       this.getSimiliarItems(newId);
189 |     },
190 |   },
191 |   computed: {
192 |     getYear() {
193 |       const release = this.results.first_air_date;
194 |       return release.split("-", 1).join();
195 |     },
196 |     getLastYear() {
197 |       const release = this.results.last_air_date.split("-", 1).join();
198 |       if (release == this.getYear) {
199 |         return "?";
200 |       }
201 |       return release;
202 |     },
203 |     getCreator() {
204 |       const creator = this.results.created_by.map((res) => res.name);
205 |       if (creator.length == 0) {
206 |         return "(no data available)";
207 |       }
208 |       return creator[0];
209 |     },
210 |     lang() {
211 |       return this.results.original_language.toUpperCase();
212 |     },
213 |   },
214 | };
215 | </script>
216 | 


--------------------------------------------------------------------------------
/src/components/UI/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="footer py-5">
  3 |     <div class="container">
  4 |       <div class="row justify-content-center">
  5 |         <div class="col-md-6 col-7 my-credits">
  6 |           <router-link :to="{ name: 'Home' }">
  7 |             <a class="footer-brand"><span>Kino</span>hub</a>
  8 |           </router-link>
  9 |           <div class="social-media mt-4 d-flex">
 10 |             <a href="https://web.facebook.com/rangga.dimas80/" target="_blank">
 11 |               <div class="circle rounded-circle">
 12 |                 <i class="fab fa-facebook"></i>
 13 |               </div>
 14 |             </a>
 15 |             <a href="https://github.com/buckypinkman" target="_blank">
 16 |               <div class="circle rounded-circle mx-3">
 17 |                 <i class="fab fa-github"></i>
 18 |               </div>
 19 |             </a>
 20 |             <a
 21 |               href="https://www.linkedin.com/in/rangga-dimas-a41b721a6/"
 22 |               target="_blank"
 23 |             >
 24 |               <div class="circle rounded-circle">
 25 |                 <i class="fab fa-linkedin-in"></i>
 26 |               </div>
 27 |             </a>
 28 |           </div>
 29 |           <div class="footer-copy mt-5">
 30 |             <p>Copyright &copy;2020</p>
 31 |             <p>Coded and designed by Rangga Dimas</p>
 32 |           </div>
 33 |         </div>
 34 |         <div class="col-md-3 col-5">
 35 |           <p>Powered by :</p>
 36 |           <img
 37 |             class="logo mt-3 mb-5"
 38 |             src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_1-5bdc75aaebeb75dc7ae79426ddd9be3b2be1e342510f8202baf6bffa71d7f5c4.svg"
 39 |             alt=""
 40 |           />
 41 |           <a class="link" href="https://themoviedb.org/" target="_blank"
 42 |             >www.themoviedb.org</a
 43 |           >
 44 |         </div>
 45 |       </div>
 46 |     </div>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <style scoped>
 51 | .footer {
 52 |   position: relative;
 53 |   left: 0;
 54 |   bottom: 0;
 55 |   width: 100%;
 56 |   background-color: rgb(14, 18, 24);
 57 |   color: white;
 58 | }
 59 | 
 60 | .logo {
 61 |   width: 120px;
 62 | }
 63 | 
 64 | .link {
 65 |   font-size: 17px;
 66 | }
 67 | 
 68 | .footer-brand {
 69 |   color: white;
 70 |   letter-spacing: 2px;
 71 |   cursor: pointer;
 72 |   font-size: 27px;
 73 | }
 74 | 
 75 | .circle {
 76 |   background-color: rgb(218, 218, 218);
 77 |   width: 45px;
 78 |   height: 45px;
 79 |   transition: 0.2s;
 80 | }
 81 | 
 82 | .circle:hover {
 83 |   background-color: rgb(182, 184, 190);
 84 | }
 85 | 
 86 | .fab {
 87 |   color: rgb(14, 18, 24);
 88 |   margin-top: 0.75rem;
 89 |   margin-left: 0.75rem;
 90 | }
 91 | 
 92 | p {
 93 |   color: rgb(218, 218, 218);
 94 | }
 95 | 
 96 | span {
 97 |   color: #d58585;
 98 | }
 99 | 
100 | a {
101 |   font-size: 1.4rem;
102 |   text-decoration: none;
103 | }
104 | 
105 | @media only screen and (max-width: 600px) {
106 |   .link {
107 |     font-size: 13px;
108 |   }
109 | 
110 |   .my-credits {
111 |     padding-left: 25px;
112 |   }
113 | 
114 | }
115 | 
116 | @media only screen and (min-width: 768px) {
117 |   .container {
118 |     padding-left: 5rem;
119 |   }
120 | 
121 |   .logo {
122 |     width: 160px;
123 |   }
124 | }
125 | </style>


--------------------------------------------------------------------------------
/src/components/UI/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar" id="navb">
 3 |     <div class="container">
 4 |       <router-link :to="{ name: 'Home' }">
 5 |         <a class="navbar-brand"><span>Kino</span>hub</a>
 6 |       </router-link>
 7 |       <form class="d-flex">
 8 |         <input
 9 |           class="form-control form-control-sm mr-2"
10 |           type="search"
11 |           placeholder="Search Movie or TV Show"
12 |           aria-label="Search"
13 |           v-model="searchQuery"
14 |         />
15 |         <router-link
16 |           :to="{ name: 'Search', params: { searchQuery: searchQuery } }"
17 |         >
18 |           <button class="btn btn-primary btn-sm" type="submit">
19 |             <i class="fas fa-search"></i>
20 |           </button>
21 |         </router-link>
22 |       </form>
23 |     </div>
24 |   </nav>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: "navb",
30 |   data() {
31 |     return {
32 |       searchQuery: "",
33 |     };
34 |   },
35 | };
36 | </script>
37 | 
38 | <style scoped>
39 | nav {
40 |   background-color: transparent;
41 |   padding-top: .8rem;
42 |   padding-bottom: .8rem;
43 | }
44 | 
45 | .navbar-brand {
46 |   color: white;
47 |   letter-spacing: 2px;
48 |   cursor: pointer;
49 | }
50 | 
51 | span {
52 |   color: #d58585;
53 |   
54 | }
55 | 
56 | a {
57 |   font-size: 1.4rem;
58 |   text-decoration: none;
59 | }
60 | 
61 | input {
62 |   background-color: #41484e;
63 |   border: none;
64 |   width: 15rem;
65 |   color: rgb(222, 222, 231);
66 | }
67 | 
68 | input:focus {
69 |   background-color: #41484e;
70 |   color: rgb(222, 222, 231);
71 | }
72 | 
73 | @media only screen and (max-width: 600px) {
74 |   input {
75 |     width: 12.5rem;
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/components/UI/Placeholder.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <img
3 |     src="https://via.placeholder.com/500x750.png/161c30/6d748a/?text=No Image"
4 |     alt=""
5 |     class="img-fluid poster"
6 |   />
7 | </template>


--------------------------------------------------------------------------------
/src/components/UI/Spinner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="spin">
 3 |     <div class="lds-ring">
 4 |       <div></div>
 5 |       <div></div>
 6 |       <div></div>
 7 |       <div></div>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <style scoped>
13 | 
14 | .spin {
15 |   background-color: rgba(11, 15, 34, 0.93);
16 |   z-index: 2;
17 |   width: 100%;
18 |   height: 100%;
19 |   position: absolute;
20 |   margin: 0 auto;
21 | }
22 | 
23 | .lds-ring {
24 |   display: inline-block;
25 |   position: relative;
26 |   width: 110px;
27 |   height: 110px;
28 |   top: 50%;
29 |   left: 50%;
30 | }
31 | .lds-ring div {
32 |   box-sizing: border-box;
33 |   display: block;
34 |   position: absolute;
35 |   width: 64px;
36 |   height: 64px;
37 |   margin: 0;
38 |   border: 8px solid #fff;
39 |   border-radius: 50%;
40 |   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
41 |   border-color: #fff transparent transparent transparent;
42 | }
43 | .lds-ring div:nth-child(1) {
44 |   animation-delay: -0.45s;
45 | }
46 | .lds-ring div:nth-child(2) {
47 |   animation-delay: -0.3s;
48 | }
49 | .lds-ring div:nth-child(3) {
50 |   animation-delay: -0.15s;
51 | }
52 | @keyframes lds-ring {
53 |   0% {
54 |     transform: rotate(0deg);
55 |   }
56 |   100% {
57 |     transform: rotate(360deg);
58 |   }
59 | }
60 | @media only screen and (max-width: 500px) {
61 |   .lds-ring div{
62 |     left: -21%;
63 |   }
64 | }
65 | </style>


--------------------------------------------------------------------------------
/src/components/homepage/Hero.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="hero">
  3 |     <carousel
  4 |       :perPage="1"
  5 |       :paginationEnabled="false"
  6 |       :autoplay="true"
  7 |       :autoplayTimeout="3000"
  8 |       :loop="true"
  9 |     >
 10 |       <slide v-for="result in computedResults" :key="result.id">
 11 |         <div class="wrap">
 12 |           <img
 13 |             :src="'http://image.tmdb.org/t/p/w1280' + result.backdrop_path"
 14 |           />
 15 | 
 16 |           <router-link
 17 |             :to="{ name: 'MovieDetails', params: { movieId: result.id } }"
 18 |           >
 19 |             <div class="overlay">
 20 |               <div class="content col-md-7">
 21 |                 <h4>LATEST</h4>
 22 |                 <h1>{{ result.title }}</h1>
 23 |                 <h5>
 24 |                   Rating : {{ result.vote_average }} |
 25 |                   {{ result.original_language.toUpperCase() }}
 26 |                 </h5>
 27 |               </div>
 28 |             </div>
 29 |           </router-link>
 30 |         </div>
 31 |       </slide>
 32 |     </carousel>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | export default {
 38 |   name: "hero",
 39 |   computed: {
 40 |     computedResults() {
 41 |       return this.$store.getters.heroResults;
 42 |     },
 43 |   },
 44 |   methods: {
 45 |     getResults() {
 46 |       this.$store.dispatch("heroResults");
 47 |     },
 48 |   },
 49 |   created() {
 50 |     this.getResults();
 51 |   },
 52 | };
 53 | </script>
 54 | 
 55 | <style scoped>
 56 | img {
 57 |   width: 100%;
 58 |   height: auto;
 59 | }
 60 | 
 61 | .wrap {
 62 |   position: relative;
 63 | }
 64 | 
 65 | .overlay {
 66 |   position: absolute;
 67 |   cursor: pointer;
 68 |   color: #fff;
 69 |   top: 0;
 70 |   left: 0;
 71 |   width: 100%;
 72 |   height: 100%;
 73 |   background: linear-gradient(
 74 |     90deg,
 75 |     rgba(0, 0, 0, 0.8) 10%,
 76 |     rgba(0, 0, 0, 0.3) 100%
 77 |   );
 78 | }
 79 | 
 80 | .content {
 81 |   margin: 0;
 82 |   position: absolute;
 83 |   top: 50%;
 84 |   -ms-transform: translateY(-50%);
 85 |   transform: translateY(-50%);
 86 |   padding-left: 4rem;
 87 | }
 88 | 
 89 | h1 {
 90 |   font-size: 3rem;
 91 |   font-weight: bolder;
 92 | }
 93 | 
 94 | h4,
 95 | h5 {
 96 |   color: #dbdbdb;
 97 | }
 98 | 
 99 | @media only screen and (max-width: 600px) {
100 |   .content {
101 |     padding-left: 2rem;
102 |   }
103 | 
104 |   h1 {
105 |     font-size: 1.5rem;
106 |   }
107 | 
108 |   h4,
109 |   h5 {
110 |     font-size: 1rem;
111 |   }
112 | }
113 | 
114 | /*
115 | .overlay {
116 |   height: 110vh;
117 |   font-size: 0.9rem;
118 |   position: relative;
119 |   width: 100%;
120 |   transform: translate(0%, -100%);
121 |   background: rgb(0, 0, 0);
122 |   background: linear-gradient(
123 |     20deg,
124 |     rgba(0, 0, 0, 4) 0%,
125 |     rgba(0, 0, 0, 0) 100%
126 |   );
127 |   width: 100%;
128 |   transition: 0.4s ease;
129 |   color: white;
130 |   text-align: center;
131 |   cursor: pointer;
132 | } */
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/components/homepage/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <spinner v-if="$store.state.isLoading" />
 4 |     <navbar />
 5 |     <hero />
 6 |     <div class="container long-mr">
 7 |       <popular-movies />
 8 |       <top-rated-movies class="long-mr" />
 9 |       <popular-series class="long-mr" />
10 |       <top-rated-series class="long-mr" />
11 |     </div>
12 |     <Footer class="long-mr" />
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import Hero from "./Hero.vue";
18 | import PopularMovies from "./PopularMovies.vue";
19 | import TopRatedMovies from "./TopRatedMovies.vue";
20 | import PopularSeries from "./PopularSeries.vue";
21 | import TopRatedSeries from "./TopRatedSeries.vue";
22 | import Footer from "../UI/Footer.vue";
23 | 
24 | export default {
25 |   name: "App",
26 |   components: {
27 |     Hero,
28 |     PopularMovies,
29 |     TopRatedMovies,
30 |     PopularSeries,
31 |     TopRatedSeries,
32 |     Footer,
33 |   },
34 | };
35 | </script>
36 | 
37 | <style>
38 | body {
39 |   background-color: rgb(12, 15, 26);
40 |   color: white;
41 | }
42 | 
43 | #app {
44 |   font-family: Avenir, Helvetica, Arial, sans-serif;
45 |   -webkit-font-smoothing: antialiased;
46 |   -moz-osx-font-smoothing: grayscale;
47 | }
48 | 
49 | .long-mr {
50 |   margin-top: 6rem;
51 | }
52 | 
53 | .title {
54 |   color: rgb(233, 233, 233);
55 |   font-weight: bolder;
56 |   margin-bottom: 3rem !important;
57 | }
58 | 
59 | .poster {
60 |   cursor: pointer;
61 |   transition: 0.2s;
62 | }
63 | 
64 | .poster:hover {
65 |   transform: scale(1.04);
66 |   box-shadow: 0 0 11px rgba(3, 3, 3, 0.822);
67 | }
68 | 
69 | p {
70 |   font-size: 14px;
71 | }
72 | 
73 | @media only screen and (max-width: 768px) {
74 |   .poster {
75 |     max-width: 135px;
76 |   }
77 | }
78 | 
79 | @media only screen and (max-width: 992px) {
80 |   .long-mr {
81 |     margin-top: 3.8rem;
82 |   }
83 | 
84 |   .title {
85 |     font-size: 1.6rem;
86 |     margin-bottom: 1.8rem !important;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/homepage/PopularMovies.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="" id="popularMovies">
 3 |     <h1 class="title">Popular Movies</h1>
 4 |     <my-carousel>
 5 |       <slide v-for="result in computedResults" :key="result.id">
 6 |         <div class="img-wrap mr-4 p-1">
 7 |           <router-link
 8 |             :to="{ name: 'MovieDetails', params: { movieId: result.id } }"
 9 |           >
10 |             <img
11 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
12 |               class="img-fluid poster"
13 |               alt=""
14 |             />
15 |           </router-link>
16 |         </div>
17 |       </slide>
18 |     </my-carousel>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | 
24 | export default {
25 |   name: "popularMovies",
26 |   computed: {
27 |     computedResults() {
28 |       return this.$store.getters.movieResults
29 |     }
30 |   },
31 |   methods: {
32 |     getResults() {
33 |       this.$store.dispatch('movieResults')
34 |     }
35 |   },
36 |   created() {
37 |     this.getResults()
38 |   },
39 | 
40 |   //   computed: {
41 |   //     responsiveSlide() {
42 |   //       let getUserWidth = window.screen.width;
43 |   //       const mobileWidth = 600;
44 |   //       const mobilePageSlide = 3;
45 |   //       const largePageSlide = 6;
46 |   //       if (getUserWidth < mobileWidth) {
47 |   //         return mobilePageSlide;
48 |   //       }
49 |   //       return largePageSlide;
50 |   //     },
51 |   //   },
52 | };
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/components/homepage/PopularSeries.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="" id="popularSeries">
 3 |     <h1 class="title">Popular Series</h1>
 4 |     <my-carousel>
 5 |       <slide v-for="result in computedResults" :key="result.id">
 6 |         <div class="img-wrap mr-4 p-1">
 7 |           <router-link :to="{ name: 'TvDetails', params: { tvId: result.id } }">
 8 |             <img
 9 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
10 |               class="img-fluid poster"
11 |               alt=""
12 |             />
13 |           </router-link>
14 |         </div>
15 |       </slide>
16 |     </my-carousel>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "popularSeries",
23 |   computed: {
24 |     computedResults() {
25 |       return this.$store.getters.seriesResults
26 |     }
27 |   },
28 |   methods: {
29 |     getResults() {
30 |       this.$store.dispatch('seriesResults')
31 |     }
32 |   },
33 |   created() {
34 |     this.getResults()
35 |   },
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/homepage/TopRatedMovies.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="" id="topRatedMovies">
 3 |     <h1 class="title">Top Rated Movies</h1>
 4 |     <my-carousel>
 5 |       <slide v-for="result in computedResults" :key="result.id">
 6 |         <div class="img-wrap mr-4 p-1">
 7 |           <router-link
 8 |             :to="{ name: 'MovieDetails', params: { movieId: result.id } }"
 9 |           >
10 |             <img
11 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
12 |               class="img-fluid poster"
13 |               alt=""
14 |             />
15 |           </router-link>
16 |         </div>
17 |       </slide>
18 |     </my-carousel>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: "topRatedMovies",
25 |   computed: {
26 |     computedResults() {
27 |       return this.$store.getters.topMoviesResults
28 |     }
29 |   },
30 |   methods: {
31 |     getResults() {
32 |       this.$store.dispatch('topMoviesResults')
33 |     }
34 |   },
35 |   created() {
36 |     this.getResults()
37 |   },
38 | };
39 | </script>
40 | 
41 | 


--------------------------------------------------------------------------------
/src/components/homepage/TopRatedSeries.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="" id="topRatedSeries">
 3 |     <h1 class="title">Top Rated Series</h1>
 4 |     <my-carousel>
 5 |       <slide v-for="result in computedResults" :key="result.id">
 6 |         <div class="img-wrap mr-4 p-1">
 7 |           <router-link :to="{ name: 'TvDetails', params: { tvId: result.id } }">
 8 |             <img
 9 |               :src="'http://image.tmdb.org/t/p/w500' + result.poster_path"
10 |               class="img-fluid poster"
11 |               alt=""
12 |             />
13 |           </router-link>
14 |         </div>
15 |       </slide>
16 |     </my-carousel>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "topRatedSeries",
23 |   computed: {
24 |     computedResults() {
25 |       return this.$store.getters.topSeriesResults
26 |     }
27 |   },
28 |   methods: {
29 |     getResults() {
30 |       this.$store.dispatch('topSeriesResults')
31 |     }
32 |   },
33 |   created() {
34 |     this.getResults()
35 |   },
36 | };
37 | </script>


--------------------------------------------------------------------------------
/src/components/layouts/DetailsContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="details-container">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <style scoped>
  8 | body {
  9 |   color: white;
 10 | }
 11 | 
 12 | .detail-poster {
 13 |   width: 11rem;
 14 |   box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
 15 | }
 16 | 
 17 | .backdrop {
 18 |   width: 100%;
 19 |   height: auto;
 20 | }
 21 | 
 22 | .content {
 23 |   position: relative;
 24 | }
 25 | 
 26 | .overlay {
 27 |   position: absolute;
 28 |   top: 0;
 29 |   left: 0;
 30 |   width: 100%;
 31 |   height: 100%;
 32 |   background: linear-gradient(
 33 |     90deg,
 34 |     rgba(0, 0, 0, 0.8) 10%,
 35 |     rgba(0, 0, 0, 0.2) 100%
 36 |   );
 37 | }
 38 | 
 39 | .content-body {
 40 |   margin: 0;
 41 |   position: absolute;
 42 |   top: 50%;
 43 |   -ms-transform: translateY(-50%);
 44 |   transform: translateY(-50%);
 45 | }
 46 | 
 47 | .year {
 48 |   color: #ececec;
 49 |   font-weight: 400;
 50 |   font-size: 2rem;
 51 | }
 52 | 
 53 | h1 {
 54 |   font-weight: bolder;
 55 | }
 56 | 
 57 | h4,
 58 | h5 {
 59 |   color: #ececec;
 60 | }
 61 | 
 62 | h6 {
 63 |   font-size: 1.1rem;
 64 | }
 65 | 
 66 | .summary {
 67 |   margin-top: 6.5rem;
 68 | }
 69 | 
 70 | @media only screen and (max-width: 768px) {
 71 |   .content-body {
 72 |     margin-top: 2rem;
 73 |     text-align: center;
 74 |     position: unset;
 75 |     transform: translateY(-25%);
 76 |     margin: auto; 
 77 |   }
 78 | 
 79 |   .summary {
 80 |     margin-top: -30px;
 81 |   }
 82 | 
 83 |   .content-data {
 84 |     margin-top: 2rem;
 85 |   }
 86 | 
 87 |   .backdrop {
 88 |     opacity: 0.6;
 89 |   }
 90 | 
 91 |   .overlay {
 92 |     position: unset;
 93 |     background: transparent;
 94 |   }
 95 | 
 96 |   .data {
 97 |     text-align: center;
 98 |   }
 99 | }
100 | </style>


--------------------------------------------------------------------------------
/src/components/layouts/MyCarousel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <carousel
 3 |     :perPageCustom="[[320,2],[768,6]]"
 4 |     :paginationEnabled="false"
 5 |     :spacePadding="5"
 6 |     :navigationEnabled="true"
 7 |     :navigationNextLabel="$store.getters.chevRight"
 8 |     :navigationPrevLabel="$store.getters.chevLeft"
 9 |   >
10 |     <slot></slot>
11 |   </carousel>
12 | </template>
13 | 
14 | <style>
15 | .fa-chevron-right {
16 |   color: rgb(35, 123, 255);
17 | }
18 | .fa-chevron-left {
19 |   color: rgb(35, 123, 255);
20 | }
21 | @media only screen and (max-width: 576px) {
22 |   .VueCarousel-navigation-prev {
23 |     transform: translate(15%, -50%) !important;
24 |   }
25 |   .VueCarousel-navigation-next {
26 |     transform: translate(-15%, -50%) !important;
27 |   }
28 | }
29 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import Navbar from './components/UI/Navbar.vue'
 4 | import Placeholder from './components/UI/Placeholder.vue'
 5 | import Spinner from './components/UI/Spinner.vue'
 6 | import VueCarousel from 'vue-carousel'
 7 | import MyCarousel from './components/layouts/MyCarousel.vue'
 8 | Vue.config.productionTip = false
 9 | import router from './route/index'
10 | import store from './store/index'
11 | 
12 | Vue.component('navbar', Navbar)
13 | Vue.component('placeholder', Placeholder)
14 | Vue.component('spinner', Spinner)
15 | Vue.component('my-carousel', MyCarousel)
16 | 
17 | Vue.use(VueCarousel)
18 | 
19 | new Vue({
20 |   store,
21 |   router,
22 |   render: h => h(App),
23 | }).$mount('#app')


--------------------------------------------------------------------------------
/src/route/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import MovieDetails from '../components/MovieDetails.vue'
 4 | import Home from '../components/homepage/Home.vue'
 5 | import TvDetails from '../components/TvDetails.vue'
 6 | import SearchResults from '../components/SearchResults.vue'
 7 | 
 8 | Vue.use(VueRouter)
 9 | 
10 | export default new VueRouter({
11 |     routes: [{
12 |             path: '/',
13 |             name: 'Home',
14 |             component: Home
15 |         },
16 |         {
17 |             path: "/movie/details/:movieId",
18 |             name: 'MovieDetails',
19 |             component: MovieDetails,
20 |             props: true
21 |         },
22 |         {
23 |             path: "/tv/details/:tvId",
24 |             name: 'TvDetails',
25 |             component: TvDetails,
26 |             props: true
27 |         },
28 |         {
29 |             path: "/search/:searchQuery",
30 |             name: 'Search',
31 |             component: SearchResults,
32 |             props: true
33 |         }
34 |     ],
35 |     scrollBehavior(to, from, savedPosition) {
36 |         if (savedPosition) {
37 |             return savedPosition
38 |         } else {
39 |             return {
40 |                 x: 0,
41 |                 y: 0
42 |             }
43 |         }
44 |     }
45 | })


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | //homepage modules
 5 | import popularMovies from './modules/popularMovies'
 6 | import popularSeries from './modules/popularSeries'
 7 | import topRatedMovies from './modules/topRatedMovies'
 8 | import topRatedSeries from './modules/topRatedSeries'
 9 | import hero from './modules/hero'
10 | 
11 | 
12 | Vue.use(Vuex)
13 | 
14 | const store = new Vuex.Store({
15 |   modules: {
16 |     popularMovies,
17 |     popularSeries,
18 |     topRatedMovies,
19 |     topRatedSeries,
20 |     hero,
21 |   },
22 |   state() {
23 |     return {
24 |       api_key: '', //your apikey here
25 |       isLoading: false
26 |     }
27 |   },
28 |   getters: {
29 |     chevRight() {
30 |       return "<i class='fas fa-chevron-right fa-2x'></i>"
31 |     },
32 |     chevLeft() {
33 |       return "<i class='fas fa-chevron-left fa-2x'></i>"
34 |     }
35 |   }
36 | })
37 | 
38 | export default store


--------------------------------------------------------------------------------
/src/store/modules/hero.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state() {
 3 |       return {
 4 |         heroResults: ""
 5 |       }
 6 |     },
 7 |     getters: {
 8 |       heroResults(state) {
 9 |         return state.heroResults
10 |       }
11 |     },
12 |     actions: {
13 |       async heroResults({
14 |         state, rootState
15 |       }) {
16 |         await fetch(
17 |             `https://api.themoviedb.org/3/movie/now_playing?api_key=${rootState.api_key}&language=en-US&page=1`
18 |           )
19 |           .then((response) => response.json())
20 |           .then((response) => {
21 |             console.log(response);
22 |             state.heroResults = response.results;
23 |           });
24 |       },
25 |     }
26 |   }


--------------------------------------------------------------------------------
/src/store/modules/popularMovies.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   state() {
 3 |     return {
 4 |       movieResults: ""
 5 |     }
 6 |   },
 7 |   getters: {
 8 |     movieResults(state) {
 9 |       return state.movieResults
10 |     }
11 |   },
12 |   actions: {
13 |     async movieResults({
14 |       state, rootState
15 |     }) {
16 |       await fetch(
17 |           `https://api.themoviedb.org/3/movie/popular?api_key=${rootState.api_key}&language=en-US&page=1`
18 |         )
19 |         .then((response) => response.json())
20 |         .then((response) => {
21 |           console.log(response);
22 |           state.movieResults = response.results;
23 |         });
24 |     },
25 |   }
26 | }


--------------------------------------------------------------------------------
/src/store/modules/popularSeries.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state() {
 3 |       return {
 4 |         seriesResults: ""
 5 |       }
 6 |     },
 7 |     getters: {
 8 |       seriesResults(state) {
 9 |         return state.seriesResults
10 |       }
11 |     },
12 |     actions: {
13 |       async seriesResults({
14 |         state, rootState
15 |       }) {
16 |         await fetch(
17 |             `https://api.themoviedb.org/3/tv/popular?api_key=${rootState.api_key}&language=en-US&page=1`
18 |           )
19 |           .then((response) => response.json())
20 |           .then((response) => {
21 |             console.log(response);
22 |             state.seriesResults = response.results;
23 |           });
24 |       },
25 |     }
26 |   }


--------------------------------------------------------------------------------
/src/store/modules/topRatedMovies.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state() {
 3 |       return {
 4 |         topMovies: ""
 5 |       }
 6 |     },
 7 |     getters: {
 8 |       topMoviesResults(state) {
 9 |         return state.topMovies
10 |       }
11 |     },
12 |     actions: {
13 |       async topMoviesResults({
14 |         state, rootState
15 |       }) {
16 |         await fetch(
17 |             `https://api.themoviedb.org/3/movie/top_rated?api_key=${rootState.api_key}&language=en-US&page=1`
18 |           )
19 |           .then((response) => response.json())
20 |           .then((response) => {
21 |             console.log(response);
22 |             state.topMovies = response.results;
23 |           });
24 |       },
25 |     }
26 |   }


--------------------------------------------------------------------------------
/src/store/modules/topRatedSeries.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state() {
 3 |       return {
 4 |         topSeries: ""
 5 |       }
 6 |     },
 7 |     getters: {
 8 |       topSeriesResults(state) {
 9 |         return state.topSeries
10 |       }
11 |     },
12 |     actions: {
13 |       async topSeriesResults({
14 |         state, rootState
15 |       }) {
16 |         rootState.isLoading = true
17 |         await fetch(
18 |             `https://api.themoviedb.org/3/tv/top_rated?api_key=${rootState.api_key}&language=en-US&page=1`
19 |           )
20 |           .then((response) => response.json())
21 |           .then((response) => {
22 |             console.log(response);
23 |             state.topSeries = response.results;
24 |             rootState.isLoading = false
25 |           });
26 |       },
27 |     }
28 |   }


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