├── .gitignore
├── README.md
├── babel.config.js
├── db.json
├── netflixpage.png
├── package-lock.json
├── package.json
├── public
    ├── default.png
    ├── favicon.ico
    ├── index.html
    └── logo.png
└── src
    ├── App.vue
    ├── assets
        ├── logo.png
        ├── narcosvideo.mp4
        ├── outside.mp4
        ├── style.css
        └── theplat.mp4
    ├── components
        ├── Home
        │   ├── backgroundMovie.vue
        │   ├── movieList.vue
        │   ├── movieListItem.vue
        │   ├── navBar.vue
        │   ├── navBarItem.vue
        │   ├── netflixOriginalContent.vue
        │   ├── secondItem.vue
        │   ├── sliderHome.vue
        │   ├── sliderHomeFive.vue
        │   ├── sliderHomeFour.vue
        │   ├── sliderHomeThree.vue
        │   └── sliderHomeTwo.vue
        ├── NewPopular
        │   ├── dayPopularTv.vue
        │   ├── weekPopular.vue
        │   └── weekPopularTv.vue
        ├── filmler
        │   └── backgroundFilm.vue
        ├── footer
        │   └── footers.vue
        ├── modal
        │   └── modals.vue
        ├── register
        │   └── login.vue
        ├── series
        │   ├── backgroundSeries.vue
        │   ├── diziler.vue
        │   ├── myList.vue
        │   ├── netflix.vue
        │   ├── onerilenBreaking.vue
        │   └── onerilenDiziler.vue
        └── signUp
        │   └── signUp.vue
    ├── main.js
    ├── router
        └── index.js
    ├── store
        ├── index.js
        └── modules
        │   └── users
        │       └── index.js
    ├── utils
        └── securedAxios.js
    └── views
        ├── Home.vue
        ├── List.vue
        ├── Login.vue
        ├── Movies.vue
        ├── NewAndPopular.vue
        ├── Register.vue
        ├── Search.vue
        └── Series.vue


/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 |  <h1 align="center">Vue Netflix Clone <img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/netflix.svg" alt="www.netflix.com" height="30"    width="40" /></h1>
 2 | <h1 align="center"><img align="center" src="http://img.youtube.com/vi/VXhBdPEmiDA/0.jpg" width="auto" /> </h1>
 3 | 
 4 | Projeyi kendimi geliştirmek amacıyla yaptım gelişimimde yararlı oldu. Projemi geliştirmeye devam etmekteyim bu süreçte yardımcı olmaktan çekinmeyin aşağıdaki adreslerden bana ulaşabilirsiniz.
 5 | 
 6 | It was useful in developing the project. I continue to develop my project from different addresses below to assist me in this process.<a href="https://linkedin.com/in/www.linkedin.com/in/yusuftaskiran08" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="www.linkedin.com/in/yusuftaskiran08" height="30" width="40" /></a>
 7 | 
 8 | 
 9 | ## TODO
10 | - Code structure should be arranged as clean code ✖️
11 | - Login processes should use firabase instead of db.json ✖️
12 | - Browser must be made compatible ✖️
13 | ## The programs I use in my project
14 | - <a href="https://vuejs.org/"> Vue.js </a>
15 | - <a href="https://github.com/vuejs/vuex#readme"> Vuex </a>
16 | - <a href="https://getbootstrap.com/"> Bootstrap </a>
17 | - <a href="https://axios-http.com/"> Axios </a>
18 | - <a href="https://swiperjs.com/"> Swiper.Js </a>
19 | - <a href="https://www.themoviedb.org/"> The movie db api </a>
20 | - <a href="https://github.com/stepanowon/youtube-vue3">Youtube iframe api </a>
21 | - <a href="https://github.com/DarkC0der11/vue-neat-modal#readme">Vue neat modal </a>
22 | 
23 | 
24 | ## Project setup
25 | ```
26 | npm install
27 | ```
28 | ## Json-server setup
29 | 
30 | json-server --watch db.json
31 | 
32 | ### Compiles and hot-reloads for development
33 | ```
34 | npm run serve
35 | ```
36 | 
37 | ### Compiles and minifies for production
38 | ```
39 | npm run build
40 | ```
41 | 
42 | ### Customize configuration
43 | See [Configuration Reference](https://cli.vuejs.org/config/).
44 | 


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


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "users": [
 3 |     {
 4 |       "full_name": "yusuftask",
 5 |       "email": "yusuftask@",
 6 |       "password": "12345",
 7 |       "id": 1
 8 |     }
 9 |   ],
10 |   "favorites": [
11 |     {
12 |       "adult": false,
13 |       "backdrop_path": "/vQJ3yBdF91tzd73G8seL5bOxfvG.jpg",
14 |       "genre_ids": [
15 |         53,
16 |         27,
17 |         18
18 |       ],
19 |       "id": 599281,
20 |       "original_language": "en",
21 |       "original_title": "Fear of Rain",
22 |       "overview": "A teenage girl living with schizophrenia begins to suspect her neighbor has kidnapped a child. Her parents try desperately to help her live a normal life, without exposing their own tragic secrets, and the only person who believes her is Caleb – a boy she isn’t even sure exists.",
23 |       "popularity": 1181.031,
24 |       "poster_path": "/b2shaNA4F8zNIwoRYr33lPTiFfl.jpg",
25 |       "release_date": "2021-02-12",
26 |       "title": "Fear of Rain",
27 |       "video": false,
28 |       "vote_average": 7.3,
29 |       "vote_count": 83,
30 |       "isFavorite": true
31 |     },
32 |     {
33 |       "adult": false,
34 |       "backdrop_path": "/srYya1ZlI97Au4jUYAktDe3avyA.jpg",
35 |       "genre_ids": [
36 |         14,
37 |         28,
38 |         12
39 |       ],
40 |       "id": 464052,
41 |       "original_language": "en",
42 |       "original_title": "Wonder Woman 1984",
43 |       "overview": "Wonder Woman comes into conflict with the Soviet Union during the Cold War in the 1980s and finds a formidable foe by the name of the Cheetah.",
44 |       "popularity": 1657.673,
45 |       "poster_path": "/8UlWHLMpgZm9bx6QYh0NFoq67TZ.jpg",
46 |       "release_date": "2020-12-16",
47 |       "title": "Wonder Woman 1984",
48 |       "video": false,
49 |       "vote_average": 6.9,
50 |       "vote_count": 3895,
51 |       "isFavorite": true
52 |     }
53 |   ]
54 | }


--------------------------------------------------------------------------------
/netflixpage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/netflixpage.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-netflix-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@vue/compiler-sfc": "^3.0.5",
11 |     "axios": "^0.21.1",
12 |     "swiper": "^6.4.11",
13 |     "vue": "^3.0.0",
14 |     "vue-neat-modal": "^1.3.2",
15 |     "vue-router": "^4.0.0-0",
16 |     "vuex": "^4.0.0",
17 |     "youtube-vue3": "^0.1.10"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-vuex": "~4.5.0",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "sass": "^1.32.6",
25 |     "sass-loader": "^10.1.1"
26 |   },
27 |   "browserslist": [
28 |     "> 1%",
29 |     "last 2 versions",
30 |     "not dead"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/public/default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/public/default.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title>
10 |         Vue Netflix - Clone
11 |     </title>
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
13 |         integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
15 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
16 |     
17 |     
18 | </head>
19 | 
20 | <body>
21 |     <noscript>
22 |     </noscript>
23 |     <div id="app"></div>
24 |     <!-- built files will be auto injected -->
25 | 
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/public/logo.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import backgroundMovie from "@/components/Home/backgroundMovie";
 9 | export default {
10 |   components: {
11 |     backgroundMovie,
12 |   },
13 |  
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/narcosvideo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/src/assets/narcosvideo.mp4


--------------------------------------------------------------------------------
/src/assets/outside.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/src/assets/outside.mp4


--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
  3 | 
  4 | * {
  5 |     font-family: 'Roboto', sans-serif;
  6 |     -webkit-user-select: none;
  7 |     -moz-user-select: -moz-none;
  8 |     -o-user-select: none;
  9 |     user-select: none;
 10 | }
 11 | 
 12 | /* Movie Backgrounds */
 13 | .nextReleasesContainer {
 14 |     width: 100%;
 15 |     height: 700px;
 16 |     position: relative;
 17 |     background: #1414147e;
 18 |     display: flex;
 19 |     align-items: center;
 20 | 
 21 | }
 22 | 
 23 | .nextReleasesContainer>.videoContainer {
 24 |     position: absolute;
 25 |     top: 0;
 26 |     left: 0;
 27 |     z-index: -1;
 28 |     width: 100%;
 29 |     height: 100%;
 30 |     /* background-image: linear-gradient(to bottom, rgb(27, 27, 27), rgb(0, 0, 0)); */
 31 |     overflow: hidden;
 32 | }
 33 | 
 34 | .nextReleasesContainer>.videoContainer>video {
 35 |     width: 100%;
 36 | }
 37 | 
 38 | .containerReleases {
 39 |     width: 500px;
 40 |     margin-left: 50px;
 41 | }
 42 | 
 43 | .containerReleases h1 {
 44 |     color: #ffffff;
 45 |     text-shadow: black 0.1em 0.1em 0.2em;
 46 |     font-size: 50px;
 47 |     font-family: Arial, Helvetica, sans-serif;
 48 |     margin-bottom: 30px;
 49 |     position: relative;
 50 |     margin-left: -3px;    
 51 | }
 52 | 
 53 | .containerReleases p {
 54 |     color: #e9e9e9;
 55 |     font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 56 |     text-shadow: #e9e9e9 0em 0em 0em;
 57 |     font-size: 16px;
 58 |     margin-bottom: 30px;
 59 |     text-align: justify;
 60 | }
 61 | 
 62 | .containerReleases button {
 63 |     border: none;
 64 |     background: rgba(78, 78, 78, 0.562);
 65 |     color: #e9e9e9;
 66 |     font-size: 15px;
 67 |     font-weight: bold;
 68 |     text-align: center;
 69 |     transition: transform 0.5s;
 70 |     border-radius: 4px;
 71 | }
 72 | 
 73 | .containerReleases button:hover {
 74 |     border: none;
 75 |     cursor: pointer;
 76 |     background: rgba(78, 78, 78, 0.2);
 77 |     color: #fff;
 78 | 
 79 | }
 80 | 
 81 | .containerReleases button span {
 82 |     padding-left: 10px;
 83 | }
 84 | 
 85 | #buttonPlay {
 86 |     width: 130px;
 87 |     height: 44px;
 88 |     margin-right: 20px;
 89 |     background-color: #fff;
 90 |     color: black;
 91 | 
 92 | }
 93 | 
 94 | .izlemeyeDevam {
 95 |     position: absolute;
 96 |     top: 500px;
 97 |     left: 50;
 98 | }
 99 | 
100 | #buttonInfo {
101 |     width: 200px;
102 |     height: 44px;
103 |     font: bold;
104 | }
105 | 
106 | @media only screen and (max-width: 900px) {
107 |     .nextReleasesContainer {
108 |         height: 50vh;
109 |     }
110 | }
111 | 
112 | 
113 | /* Movie Backgrounds */
114 | 
115 | /* Navbar SecondItem */
116 | .secondItem {
117 |     display: flex;
118 |     justify-content: flex-start;
119 |     align-items: center;
120 |     margin-left: auto;
121 | }
122 | 
123 | .navbar-brand {
124 |     font-size: 2rem;
125 |     font-weight: bold;
126 | }
127 | 
128 | .navbar-linear {
129 |     /* background-color: linear-gradient(to bottom, rgba(167, 167, 167, 0.13), rgba(0, 0, 0, 0.486)); */
130 |     position: fixed;
131 |     width: 100%;
132 |     z-index: 4;
133 |     margin-top: 0 !important;
134 |     background: linear-gradient(to bottom, #000, #0003 70%, #0000);
135 |     transition: background .5s;
136 | 
137 | }
138 | 
139 | .nav-item {
140 |     font-size: 15px;
141 |     color: #e5e5e5;
142 | }
143 | 
144 | /* Navbar SecondItem */
145 | 
146 | 
147 | /* Card css */
148 | 
149 | 
150 | .container-card {
151 |     background-color: #141414 !important;
152 |     display: flex;
153 |     /* width: 100%; */
154 |     margin-left: 50px;
155 | 
156 | }
157 | 
158 | .row {
159 |     margin-left: -15px;
160 | }
161 | 
162 | .text-span {
163 |     color: #fff;
164 |     margin-left: 55px;
165 |     font-size: 25px;
166 |     margin-top: 60px !important;
167 | }
168 | 
169 | img {
170 |     -webkit-user-drag: none;
171 |     -moz-user-drag: none;
172 |     -o-user-drag: none;
173 | }
174 | 
175 | img {
176 |     pointer-events: none;
177 | }
178 | 
179 | 
180 | .originalCard {
181 |     padding: 0 !important;
182 |     width: 21rem !important;
183 |     height: 500px !important;
184 |     top: 0px;
185 |     border: none !important;
186 |     overflow: hidden;
187 | 
188 | }
189 | 
190 | .originalCard img {
191 |     object-fit: fill !important;
192 |     align-items: center;
193 | 
194 | }
195 | 
196 | .originalCard:hover {
197 |     transform: scale(1.2);
198 |     cursor: pointer;
199 |     border: none;
200 |     transition: 0.7s ease-in-out;
201 | }
202 | 
203 | .film_info_original_card {
204 |     position: absolute;
205 |     display: flex;
206 |     justify-content: center;
207 |     width: 370px;
208 |     height: 50px;
209 |     opacity: -1;
210 | }
211 | 
212 | .title {
213 |     margin-top: 15px;
214 |     margin-left: -15px;
215 | }
216 | 
217 | .originalCard:hover .film_info_original_card {
218 |     bottom: 0%;
219 |     width: 370px;
220 |     height: 135px;
221 |     transition: 700ms all;
222 |     opacity: 1;
223 |     background: linear-gradient(to top, #000, #0003 70%, #0000);
224 | }
225 | 
226 | .swiper-container-pointer-events {
227 |     touch-action: none !important;
228 | }
229 | 
230 | .list-icon-left_original i {
231 |     padding: 20px;
232 |     border: 2px solid #fff !important;
233 |     border-radius: 50%;
234 |     color: #dbdbdb;
235 |     cursor: pointer;
236 |     transition: 300ms all;
237 |     margin-right: 35px !important;
238 |     margin-top: 15px;
239 |     background: transparent;
240 | }
241 | 
242 | .list-icon-left_original i:hover {
243 |     background-color: #212529;
244 | }
245 | 
246 | .movie_card {
247 |     padding: 0 !important;
248 |     width: 12rem;
249 |     margin-top: 10px;
250 |     top: 0px;
251 |     border: none !important;
252 |     overflow: hidden;
253 |     position: relative;
254 | 
255 |     /* box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19); */
256 | }
257 | 
258 | .search_movie_card {
259 |     padding: 0 !important;
260 |     width: 10rem;
261 |     margin-top: 10px;
262 |     top: 0px;
263 |     border: none !important;
264 |     overflow: hidden;
265 |     position: relative;
266 | 
267 | }
268 | 
269 | 
270 | 
271 | .icerik {
272 |     padding-top: 150px;
273 | }
274 | 
275 | .icerik a {
276 |     color: #fff;
277 | }
278 | 
279 | .icerik a:hover {
280 |     color: red;
281 | }
282 | 
283 | .movie_card:hover {
284 |     z-index: 3;
285 |     cursor: pointer;
286 |     border: none;
287 |     transition: 0.7s ease-in-out;
288 | }
289 | 
290 | .swiper-container {
291 |     height: 400px !important;
292 |     padding-top: 20px !important;
293 | }
294 | 
295 | .movie_card img {
296 |     height: 100%;
297 |     width: 100%;
298 |     object-fit: cover;
299 | }
300 | 
301 | .list-icon-left i {
302 |     margin-right: 0px !important;
303 |     font-size: 12px !important;
304 |     padding: 12px;
305 |     border: 2px solid #fff !important;
306 |     border-radius: 50%;
307 |     color: #dbdbdb;
308 |     cursor: pointer;
309 |     transition: transform 300ms all;
310 |     margin-right: 10px !important;
311 |     margin-top: 5px;
312 |     background-color: #212529;
313 | }
314 | 
315 | .list-icon-left {
316 |     justify-content: center;
317 | }
318 | 
319 | .swiper-button-prev,
320 | .swiper-button-next {
321 |     top: 45% !important;
322 | }
323 | 
324 | .film_info {
325 |     position: absolute;
326 |     transition: 700ms all;
327 |     bottom: -50%;
328 |     display: flex;
329 |     justify-content: center;
330 |     width: 200px;
331 |     height: 50px;
332 | 
333 | 
334 | }
335 | 
336 | .movie_card:hover .film_info {
337 |     bottom: 0%;
338 |     transition: 700ms all;
339 |     width: 200px;
340 |     height: 50px;
341 |     background: linear-gradient(to top, #000, #0003 70%, #0000);
342 | 
343 | }
344 | 
345 | .vue-neat-modal-wrapper {
346 |     z-index: 999 !important;
347 | }
348 | 
349 | /* ToolTip css */
350 | .toolTip {
351 |     position: relative;
352 |     display: inline-block;
353 |     border-bottom: 1px dotted black;
354 | }
355 | 
356 | .toolTip .toolTiptext {
357 |     visibility: hidden;
358 |     width: 122px;
359 |     background-color: #fff;
360 |     color: black;
361 |     text-align: center;
362 |     border-radius: 6px;
363 |     padding: 10px 0;
364 |     position: absolute;
365 |     bottom: 110%;
366 |     margin-bottom: 5px;
367 |     left: 50%;
368 |     margin-left: -60px;
369 |     white-space: nowrap;
370 | 
371 | }
372 | 
373 | .toolTip .toolTiptext-sm {
374 |     visibility: hidden;
375 |     width: 85px;
376 |     background-color: #fff;
377 |     color: black;
378 |     text-align: center;
379 |     border-radius: 6px;
380 |     padding: 10px 0;
381 |     position: absolute;
382 |     bottom: 110%;
383 |     margin-bottom: 5px;
384 |     left: 40%;
385 |     margin-left: -40px;
386 |     white-space: nowrap;
387 | }
388 | 
389 | .tool-span {
390 |     font-size: 15px;
391 | }
392 | 
393 | .toolTip .toolTiptext::after {
394 |     content: "";
395 |     position: absolute;
396 |     top: 100%;
397 |     left: 50%;
398 |     margin-left: -5px;
399 |     border-width: 5px;
400 |     border-style: solid;
401 |     border-color: #fff transparent transparent transparent;
402 | }
403 | 
404 | .toolTip .toolTiptext-sm::after {
405 |     content: "";
406 |     position: absolute;
407 |     top: 100%;
408 |     left: 50%;
409 |     margin-left: -5px;
410 |     border-width: 5px;
411 |     border-style: solid;
412 |     border-color: #fff transparent transparent transparent;
413 | }
414 | 
415 | 
416 | .toolTip:hover .toolTiptext {
417 |     visibility: visible;
418 |     transition: 300ms all;
419 | 
420 | }
421 | 
422 | .toolTip:hover .toolTiptext-sm {
423 |     visibility: visible;
424 |     transition: 300ms all;
425 | 
426 | }
427 | 
428 | .tool-span-sm {
429 |     font-size: 12px;
430 |     z-index: 1;
431 |     position: absolute;
432 | }
433 | 
434 | /* ToolTip css */
435 | 
436 | .play_button {
437 |     background-color: #E50914;
438 |     position: absolute;
439 |     width: 60px;
440 |     height: 60px;
441 |     border-radius: 50%;
442 |     right: 0px;
443 |     bottom: 0px;
444 |     font-size: 27px;
445 |     padding-left: 21px;
446 |     padding-top: 16px;
447 |     /* color: #FFFFFF; */
448 |     cursor: pointer;
449 | }
450 | 
451 | 
452 | /* Card sss */
453 | 
454 | .container-fluid {
455 |     margin: 0px ! important;
456 |     padding: 0px ! important;
457 | 
458 | }
459 | 
460 | .header {
461 |     width: 100%;
462 | }
463 | 
464 | /* top10css */
465 | 
466 | .scrollbar {
467 |     height: 450px;
468 |     overflow-x: scroll;
469 |     overflow-y: hidden;
470 |     scrollbar-color: red yellow;
471 | }
472 | 
473 | /* Card hover */
474 | .container-card {
475 |     display: flex;
476 |     margin-top: 50px;
477 | }
478 | 
479 | .container-card-original {
480 |     display: flex;
481 |     margin-top: 50px;
482 | }
483 | 
484 | .item {
485 |     position: relative;
486 |     display: block;
487 |     transition: 500ms;
488 | }
489 | 
490 | 
491 | 
492 | .item:hover~.item,
493 | .item:focus~.item {
494 |     transform: translateX(25%);
495 | }
496 | 
497 | 
498 | 
499 | /* yedek */
500 | 


--------------------------------------------------------------------------------
/src/assets/theplat.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusuftask08/Netflix/d7a3cd551b67975b2cb06a9096286f39dd9bbf47/src/assets/theplat.mp4


--------------------------------------------------------------------------------
/src/components/Home/backgroundMovie.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="nextReleasesContainer" style="background: none">
 4 |       <div class="videoContainer" style="top: -50px !important">
 5 |         <video autoplay muted loop src="@/assets/theplat.mp4"></video>
 6 |       </div>
 7 | 
 8 |       <div class="containerReleases">
 9 |         <h1>THE PLATFORM</h1>
10 |         <p style="font-size: 18px !important">
11 |           Bir hapishanede üzeri yiyecekle kaplı bir platform kat kat aşağı iner.
12 |           Üst katlardaki mahkûmlar doyasıya yerken alttakiler aç ve çaresiz
13 |           kalır. İsyan kaçınılmazdır.
14 |         </p>
15 |         <button id="buttonPlay" @click="showDetail()">
16 |           <i class="fas fa-play"></i>
17 | 
18 |           <span>Oynat</span>
19 |         </button>
20 |         <button @click="showDetail()" id="buttonInfo">
21 |           <i class="fas fa-info-circle"></i>
22 |           <span> Daha Fazla Bilgi </span>
23 |         </button>
24 |         <modals />
25 |       </div>
26 |     </div>
27 | 
28 |     <modals
29 |       v-model="isOpen"
30 |       :modalData="modalData"
31 |       :videoId="videoId"
32 |       :modalId="modalId"
33 |     />
34 |   </div>
35 | </template>
36 | <script>
37 | import modals from "@/components/modal/modals.vue";
38 | import axios from "axios";
39 | export default {
40 |   components: { modals },
41 |   data() {
42 |     return {
43 |       isOpen: false,
44 |       modalId: [],
45 |       modalData: [],
46 |       videoId: [],
47 |     };
48 |   },
49 |   methods: {
50 |     async showDetail() {
51 |       try {
52 |         await axios
53 |           .get(
54 |             `https://api.themoviedb.org/3/movie/619264?<//APIKEY\\>&language=en-US&append_to_response=videos,credits,release_dates,similar`
55 |           )
56 |           .then((response) => {
57 |             console.log("theplatfrom", response);
58 |             this.modalId = response.data;
59 |             this.modalData = this.modalId;
60 |             console.log("this.modalData :>> ", this.modalData);
61 |           });
62 | 
63 |         this.isOpen = true;
64 |         this.videoId = this.modalData.videos.results;
65 |       } catch (error) {
66 |         console.error(error);
67 |       } finally {
68 |         this.showLoading = false;
69 |       }
70 |     },
71 |   },
72 | };
73 | </script>
74 | <style>
75 | .videoContainer:after {
76 |   content: "";
77 |   display: block;
78 |   position: absolute;
79 |   width: 100%;
80 |   height: 55%;
81 |   bottom: 0;
82 |   background: -webkit-linear-gradient(to top, #181818, transparent 50%);
83 |   background: linear-gradient(to top, #181818, transparent 50%);
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/Home/movieList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="contanier-text">
  4 |       <div class="icerik contanier-text-title text-white">
  5 |         <div v-show="icerik" class="inline" style="">
  6 |           <div class="text">
  7 |             <p v-if="icerik" style="list-style: none; color: grey">
  8 |               İlgili İçeriğe göz atın :
  9 |             </p>
 10 |           </div>
 11 | 
 12 |           <div class="ul">
 13 |             <ul>
 14 |               <li
 15 |                 style="list-style: none; display: inline"
 16 |                 v-for="movie in movieList"
 17 |                 :key="movie.id"
 18 |               >
 19 |                 |
 20 |                 <a v-if="(icerik = !movie.lenght)" @click="showDetail(movie)">
 21 |                   {{ movie.original_title }}
 22 |                 </a>
 23 |               </li>
 24 |             </ul>
 25 |           </div>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 |     <modals :modalData="modalData" v-model="isOpen" :videoId="videoId" :modalId="modalId" />
 30 |     <div class="row">
 31 |       <div
 32 |         class="col-6 col-sm-2 my-5"
 33 |         v-for="movie in movieList"
 34 |         :key="movie.id"
 35 |       >
 36 |         <movieListItem :movie="movie" />
 37 |       </div>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | <script>
 42 | import movieListItem from "@/components/Home/movieListItem";
 43 | import modals from "@/components/modal/modals";
 44 | 
 45 | import axios from "axios";
 46 | import { mapGetters } from "vuex";
 47 | export default {
 48 |   data() {
 49 |     return {
 50 |       icerik: false,
 51 |       isOpen: false,
 52 |       movie: [],
 53 |       modalData: [],
 54 |       modalId: [],
 55 |       videoId: [],
 56 |       showLoading: true,
 57 |     };
 58 |   },
 59 |   components: {
 60 |     movieListItem,
 61 |     modals,
 62 |   },
 63 |   methods: {
 64 |     async showDetail(movie) {
 65 |       this.showLoading = true;
 66 |       try {
 67 |         await axios
 68 |           .get(
 69 |             `https://api.themoviedb.org/3/movie/${movie.id}?api_key=<//APIKEY\\>&language=en-US&append_to_response=videos,credits,release_dates,similar`
 70 |           )
 71 |           .then((response) => {
 72 |             console.log("iddetailvideos", response);
 73 |             this.modalId = response.data;
 74 |             this.modalData = movie;
 75 |           });
 76 | 
 77 |         console.log("movie", movie);
 78 |         this.isOpen = true;
 79 | 
 80 |         this.videoId = this.modalId.videos.results;
 81 |         console.log("this.videoId :>> ", this.videoId);
 82 |       } catch (error) {
 83 |         console.error(error);
 84 |       } finally {
 85 |         this.showLoading = false;
 86 |       }
 87 |     },
 88 |   },
 89 | 
 90 |   // console.log("movieisimidcek :>> ", movie);
 91 |   // this.modalData = movie;
 92 |   // this.isOpen = !this.isOpen;
 93 | 
 94 |   computed: {
 95 |     ...mapGetters({
 96 |       movieList: "movieItemList",
 97 |     }),
 98 |   },
 99 | };
100 | </script>
101 | <style>
102 | ul li a {
103 |   margin-right: 3px;
104 | 
105 |   cursor: pointer;
106 | }
107 | ul li:hover {
108 |   color: red;
109 | }
110 | .text p {
111 |   width: 150px;
112 | }
113 | .inline {
114 |   display: flex;
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/components/Home/movieListItem.vue:
--------------------------------------------------------------------------------
  1 | <template >
  2 |   <div class="container-card">
  3 |     <div class="">
  4 |       <div class="ms-2 me-2 movie_card item">
  5 |         <img
  6 |           :src="'http://image.tmdb.org/t/p/w500/' + movie.poster_path"
  7 |           class="card-img-top"
  8 |           alt="..."
  9 |         />
 10 | 
 11 |         <div class="film_info" v-if="isAuthenticated">
 12 |           <div class="list-icon-left">
 13 |             <a
 14 |               ><i class="fas fa-play" style="background: white; color: black">
 15 |               </i
 16 |             ></a>
 17 | 
 18 |             <a @click="addFavorite(movie)"
 19 |               ><i class="fas fa-plus toolTip">
 20 |                 <span class="toolTiptext-sm tool-span-sm"> Listeme ekle </span>
 21 |               </i></a
 22 |             >
 23 |             <a @click="showDetail(movie)">
 24 |               <i class="fas fa-chevron-down toolTip">
 25 |                 <span class="toolTiptext-sm tool-span-sm">
 26 |                   Daha fazla bilgi
 27 |                 </span>
 28 |               </i>
 29 |             </a>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 |       <modals
 34 |         :modalData="modalData"
 35 |         :modalId="modalId"
 36 |         :videoId="videoId"
 37 |         v-model="isOpen"
 38 |       />
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | <script>
 43 | import axios from "axios";
 44 | import modals from "@/components/modal/modals";
 45 | import { mapGetters } from 'vuex';
 46 | 
 47 | export default {
 48 |   components: { modals },
 49 | 
 50 |   props: {
 51 |     movie: {
 52 |       type: Object,
 53 |       required: true,
 54 |       isOpen: false,
 55 |     },
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       isOpen: false,
 60 |       modalData: [],
 61 |       modalId: [],
 62 |       videoId: [],
 63 |       showLoading: true,
 64 |     };
 65 |   },
 66 |   methods: {
 67 |     addFavorite(movie) {
 68 |       axios
 69 |         .post("http://localhost:3000/favorites", {
 70 |           ...movie,
 71 |           isFavorite: true,
 72 |         })
 73 |         .then((response) => {
 74 |           console.log(response);
 75 |         })
 76 |         .catch((err) => console.log(err));
 77 |     },
 78 |     async showDetail(movie) {
 79 |       this.showLoading = true;
 80 |       try {
 81 |         await axios
 82 |           .get(
 83 |             `https://api.themoviedb.org/3/movie/${movie.id}?api_key=<//APIKEY\\>&language=en-US&append_to_response=videos,credits,release_dates,similar`
 84 |           )
 85 |           .then((response) => {
 86 |             console.log("iddetailvideos", response);
 87 |             this.modalId = response.data;
 88 |             this.modalData = movie;
 89 |           });
 90 | 
 91 |         console.log("modalDatas", this.modalData);
 92 |         this.isOpen = true;
 93 | 
 94 |         this.videoId = this.modalId.videos.results;
 95 |         console.log("this.videoId :>> ", this.videoId);
 96 |       } catch (error) {
 97 |         console.error(error);
 98 |       } finally {
 99 |         this.showLoading = false;
100 |       }
101 |     },
102 |   },
103 |   computed: {
104 |     ...mapGetters({
105 |       isAuthenticated: "users/isAuthenticated",
106 |     }),
107 |   },
108 | };
109 | </script>


--------------------------------------------------------------------------------
/src/components/Home/navBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav class="container-fluid flex-row">
 4 |       <nav
 5 |         class="navbar navbar-expand-xxl navbar-dark navbar-linear"
 6 |         :class="{ change_color: windowTop > 50 }"
 7 |         style="position: fixed"
 8 |       >
 9 |         <div class="container-fluid">
10 |           <a
11 |             href="/"
12 |             style="margin-right: 20px; margin-left: 50px"
13 |           >
14 |             <img
15 |               src="https://i.ibb.co/r5krrdz/logo.png"
16 |               alt="netflix-font"
17 |               style="width:120px"
18 |             />
19 |           </a>
20 |           <navBarItem />
21 |           <secondItem />
22 |         </div>
23 |       </nav>
24 |     </nav>
25 |   </div>
26 | </template>
27 | 
28 | 
29 | <script>
30 | import secondItem from "@/components/Home/secondItem";
31 | import navBarItem from "@/components/Home/navBarItem";
32 | 
33 | export default {
34 |   components: {
35 |     secondItem,
36 |     navBarItem,
37 |   },
38 |   data() {
39 |     return {
40 |       windowTop: 0,
41 |     };
42 |   },
43 |   mounted() {
44 |     window.addEventListener("scroll", this.onScroll);
45 |   },
46 |   beforeUnmount() {
47 |     window.removeEventListener("scroll", this.onScroll);
48 |   },
49 |   methods: {
50 |     onScroll(e) {
51 |       this.windowTop = e.target.documentElement.scrollTop; // scrool bar takip ediyorum ve 0 a bağlıyorum
52 |     },
53 |   },
54 | };
55 | </script>
56 | <style >
57 | /* scrool bar hareket ettiğinde navbarın arka planını değiştiriyorum  */
58 | .change_color {
59 |   background-color: rgb(20, 20, 20) !important;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/Home/navBarItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 4 |               <li class="nav-item me-2">
 5 |                 <router-link to="/" class="nav-link active " style="font-weight:700;"
 6 |                   >Ana Sayfa</router-link
 7 |                 >
 8 |               </li>
 9 |               <li class="nav-item me-2">
10 |                 <router-link to="/Series" class="nav-link">Diziler</router-link>
11 |               </li>
12 |               <li class="nav-item me-2">
13 |                 <!-- <a class="nav-link" href="#">Filmler</a> -->
14 |                 <router-link to="/Movies" class="nav-link">Filmler</router-link>
15 |               </li>
16 |               <li class="nav-item me-2">
17 |                 <!-- <a class="nav-link" href="#">Yeni ve Popüler</a> -->
18 |                 <router-link to="/NewAndPopular" class="nav-link"
19 |                   >Yeni ve Popüler</router-link
20 |                 >
21 |               </li>
22 |               <li class="nav-item me-2">
23 |                 <!-- <a class="nav-link" href="#">Listem</a> -->
24 |                 <router-link to="/List" class="nav-link">Listem</router-link>
25 |               </li>
26 |             </ul>
27 |     </div>
28 | </template>


--------------------------------------------------------------------------------
/src/components/Home/netflixOriginalContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="netflix-original-icerik">
  3 |     <div class="text-span" style="margin-left: 61px">
  4 |       <span> Netlix Orijinal İçerikleri </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="4"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock"
 20 |       style="height: auto !important"
 21 |     >
 22 |       <swiper-slide v-for="gundem in gundemList" :key="gundem.id">
 23 |         <div class="container-card-original ms-5">
 24 |           <div class="imdb">
 25 |             <div class="ms-3 originalCard">
 26 |               <img
 27 |                 :src="'http://image.tmdb.org/t/p/w500/' + gundem.poster_path"
 28 |                 class="card-img-top"
 29 |                 alt="..."
 30 |               />
 31 | 
 32 |               <div class="film_info_original_card"  v-if="isAuthenticated">
 33 |                 <div class="list-icon-left_original">
 34 |                   <i
 35 |                     class="fas fa-play right"
 36 |                     style="background: white; color: black"
 37 |                   >
 38 |                   </i>
 39 |                   <i class="fas fa-plus toolTip right-2" @click="addFavorite(gundem)">
 40 |                     <span class="toolTiptext tool-span"> Listeme ekle </span>
 41 |                   </i>
 42 |                   <a @click="showDetail(gundem)">
 43 |                     <i class="fas fa-chevron-down toolTip">
 44 |                       <span class="toolTiptext tool-span">
 45 |                         Daha fazla bilgi
 46 |                       </span>
 47 |                     </i></a
 48 |                   >
 49 |                 </div>
 50 |               </div>
 51 |             </div>
 52 |           </div>
 53 |         </div>
 54 |       </swiper-slide>
 55 |     </swiper>
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | import { Modal } from "vue-neat-modal";
 69 | // Import Swiper Vue.js components
 70 | import { Swiper, SwiperSlide } from "swiper/vue";
 71 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 72 | 
 73 | // Import Swiper styles
 74 | import "swiper/components/navigation/navigation.scss";
 75 | import "swiper/swiper.scss";
 76 | import { mapGetters } from 'vuex';
 77 | export default {
 78 |   components: {
 79 |     modals,
 80 |     Modal,
 81 |     Swiper,
 82 |     SwiperSlide,
 83 |     Navigation,
 84 |   },
 85 |   data() {
 86 |     return {
 87 |       gundemList: [],
 88 |       isOpen: false,
 89 |       modalData:[],
 90 |       modalId: [],
 91 |       videoId: [],
 92 |       showLoading: true,
 93 |     };
 94 |   },
 95 |   methods: {
 96 |      addFavorite(gundem) {
 97 |       axios
 98 |         .post("http://localhost:3000/favorites", {
 99 |           ...gundem,
100 |           isFavorite: true,
101 |         })
102 |         .then((response) => {
103 |           console.log(response);
104 |         })
105 |         .catch((err) => console.log(err));
106 |     },
107 |     async showDetail(gundem) {
108 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
109 |       this.showLoading = true;
110 |       try {
111 |         await axios
112 |           .get(
113 |             `https://api.themoviedb.org/3/movie/${gundem.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
114 |           )
115 |           .then((response) => {
116 |             console.log("iddetailvideos", response);
117 |             this.modalId = response.data;
118 |             this.modalData = gundem;
119 |           });
120 | 
121 |         console.log("gundem", gundem);
122 |         this.isOpen = true;
123 | 
124 |         this.videoId = this.modalId.videos.results;
125 |         console.log("this.videoId :>> ", this.videoId);
126 |       } catch (error) {
127 |         console.error(error);
128 |       } finally {
129 |         this.showLoading = false;
130 |       }
131 |     },
132 |     onSwiper(swiper) {
133 |       console.log(swiper);
134 |     },
135 |     onSlideChange() {
136 |       console.log("slide change");
137 |     },
138 |   },
139 |   created() {
140 |     axios
141 |       .get(
142 |         "https://api.themoviedb.org/3/movie/popular?api_key=<//APIKEY\\>&language=en-US&page=1&append_to_response=videos,images"
143 |       )
144 |       .then((response) => {
145 |         console.log("gundemListOriginalContent", response);
146 |         this.gundemList = response.data.results;
147 |       });
148 |   },
149 |    computed: {
150 |     ...mapGetters({
151 |       isAuthenticated: "users/isAuthenticated",
152 |     }),
153 |   },
154 | };
155 | </script>
156 |    


--------------------------------------------------------------------------------
/src/components/Home/secondItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="secondItem">
  3 |     <div v-show="searchopen">
  4 |       <input
  5 |         v-if="searchopen"
  6 |         type="text"
  7 |         class="form-control me-5"
  8 |         v-model="searchKey"
  9 |         placeholder="Film.."
 10 |         @keydown.enter="
 11 |           searchMovie(searchKey, searchpage(), (searchopen = false))
 12 |         "
 13 |       />
 14 |     </div>
 15 |     <i
 16 |       @click="searchopen = !searchopen"
 17 |       class="fa fa-search me-4 text-white fs-sm-4 ms-3"
 18 |       href="#"
 19 |     ></i>
 20 | 
 21 |     <i class="fas fa-gift me-4 text-white fs-sm-4"></i>
 22 |     <i class="fas fa-bell me-4 text-white fs-sm-4"></i>
 23 |     <router-link
 24 |       to="/Login"
 25 |       v-if="!isAuthenticated"
 26 |       tag="button"
 27 |       class="btn btn-outline-dark me-5 mb-2"
 28 |       style="color: #fff; margin-top: 5px; width: 120px"
 29 |     >
 30 |       Giriş Yap</router-link
 31 |     >
 32 |     <ul v-else class="navbar-nav me-0 mb-2 mb-lg-0">
 33 |       <img
 34 |         src="https://pbs.twimg.com/media/D8tCa48VsAA4lxn.jpg"
 35 |         style="width: 35px; height: 35px; border-radius: 5px"
 36 |         alt=""
 37 |       />
 38 |       <li class="nav-item-down dropdown">
 39 |         <a
 40 |           @click="menuOpened = !menuOpened"
 41 |           class="nav-link dropdown-toggle"
 42 |           id="navbarDropdown"
 43 |           role="button"
 44 |           data-bs-toggle="dropdown"
 45 |           aria-expanded="false"
 46 |         >
 47 |         </a>
 48 | 
 49 |         <ul
 50 |           :class="{ show: menuOpened }"
 51 |           class="dropdown-menu"
 52 |           aria-labelledby="navbarDropdown"
 53 |         >
 54 |           <li>
 55 |             <router-link class="dropdown-item" to="/List">
 56 |               <img
 57 |                 src="https://pbs.twimg.com/media/D8tCa48VsAA4lxn.jpg"
 58 |                 style="width: 32px; border-radius: 3px; margin-right: 15px"
 59 |                 alt=""
 60 |               />
 61 |               <span style="font-size: 14px; color: #fff">
 62 |                 {{ currentUser.full_name }}
 63 |               </span>
 64 |             </router-link>
 65 |             <hr style="color: #fff" />
 66 |             <router-link class="dropdown-item" to="/List">
 67 |               <span style="font-size: 14px; color: #fff">Listem</span>
 68 |             </router-link>
 69 |           </li>
 70 |           <li>
 71 |             <router-link class="dropdown-item" to="/List">
 72 |               <span style="font-size: 14px; color: #fff">Hesabım</span>
 73 |             </router-link>
 74 |           </li>
 75 | 
 76 |           <li>
 77 |             <a class="dropdown-item" href="#" @click.prevent="logout">
 78 |               <span style="font-size: 14px; color: #fff">Çıkış yap</span>
 79 |             </a>
 80 |           </li>
 81 |         </ul>
 82 |       </li>
 83 |     </ul>
 84 |   </div>
 85 | </template>
 86 | <script >
 87 | // import axios from "axios";
 88 | import { mapActions, mapGetters, mapMutations } from "vuex";
 89 | export default {
 90 |   data() {
 91 |     return {
 92 |       searchopen: false,
 93 |       searchKey: null,
 94 |       menuOpened: false,
 95 |     };
 96 |   },
 97 |   methods: {
 98 |     ...mapActions(["searchMovie"]),
 99 |     searchpage() {
100 |       this.$router.push({ name: "Search" });
101 |     },
102 |     ...mapMutations({
103 |       logout: "users/logout",
104 |     }),
105 |   },
106 |   computed: {
107 |     ...mapGetters({
108 |       currentUser: "users/currentUser",
109 |       isAuthenticated: "users/isAuthenticated",
110 |     }),
111 |   },
112 |   mounted() {
113 |     document
114 |       .querySelector(":not(#navbarDropdown)")
115 |       .addEventListener("click", (evt) => {
116 |         if (evt?.target?.id !== "navbarDropdown") {
117 |           this.menuOpened = false;
118 |         }
119 |       });
120 |   },
121 | };
122 | </script>
123 | <style >
124 | .form-control {
125 |   background-color: rgba(0, 0, 0, 0.5);
126 |   color: #fff;
127 | }
128 | .form-control:focus {
129 |   background: rgba(0, 0, 0, 0.5);
130 |   border-color: grey;
131 |   color: #fff;
132 |   box-shadow: none !important;
133 | }
134 | .show {
135 |   background: rgba(0, 0, 0, 0.9);
136 | }
137 | .nav-item-dropdown {
138 |   margin-right: 15px;
139 | }
140 | .nav-item-down {
141 |   margin-right: 10px !important;
142 | }
143 | .dropdown-menu .show {
144 |   margin-right: 30px !important;
145 | }
146 | .dropdown-menu {
147 |   min-width: 0em !important;
148 |   left: -120px;
149 | }
150 | .dropdown-menu li a:hover {
151 |   text-decoration: underline;
152 |   color: #fff;
153 |   background-color: transparent;
154 | }
155 | </style>
156 | 
157 | 


--------------------------------------------------------------------------------
/src/components/Home/sliderHome.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gundem-container">
  3 |     <div class="text-span">
  4 |       <span> Gündemdekiler </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="gundem in gundemList" :key="gundem.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + gundem.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 | 
 29 |           <div class="film_info" v-if="isAuthenticated">
 30 |             <div class="list-icon-left">
 31 |               <a
 32 |                 ><i class="fas fa-play" style="background: white; color: black">
 33 |                 </i
 34 |               ></a>
 35 | 
 36 |               <a @click="addFavorite(gundem)"
 37 |                 ><i class="fas fa-plus toolTip">
 38 |                   <span class="toolTiptext-sm tool-span-sm">
 39 |                     Listeme ekle
 40 |                   </span>
 41 |                 </i></a
 42 |               >
 43 |               <a @click="showDetail(gundem)">
 44 |                 <i class="fas fa-chevron-down toolTip">
 45 |                   <span class="toolTiptext-sm tool-span-sm">
 46 |                     Daha fazla bilgi
 47 |                   </span>
 48 |                 </i>
 49 |               </a>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </swiper-slide>
 54 |     </swiper>
 55 | 
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | // Import Swiper Vue.js components
 69 | import { Swiper, SwiperSlide } from "swiper/vue";
 70 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 71 | 
 72 | // Import Swiper styles
 73 | import "swiper/components/navigation/navigation.scss";
 74 | import "swiper/swiper.scss";
 75 | import { mapActions, mapGetters } from "vuex";
 76 | export default {
 77 |   components: {
 78 |     modals,
 79 |     Swiper,
 80 |     SwiperSlide,
 81 |     Navigation,
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       gundemList: [],
 86 |       isOpen: false,
 87 |       modalData: [],
 88 |       modalId: [],
 89 |       videoId: [],
 90 |       showLoading: true,
 91 |     };
 92 |   },
 93 | 
 94 |   methods: {
 95 |     addFavorite(gundem) {
 96 |       axios
 97 |         .post("http://localhost:3000/favorites", {
 98 |           ...gundem,
 99 |           isFavorite: true,
100 |         })
101 |         .then((response) => {
102 |           console.log(response);
103 |         })
104 |         .catch((err) => console.log(err));
105 |     },
106 |     async showDetail(gundem) {
107 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
108 |       this.showLoading = true;
109 |       try {
110 |         await axios
111 |           .get(
112 |             `https://api.themoviedb.org/3/movie/${gundem.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
113 |           )
114 |           .then((response) => {
115 |             console.log("iddetailvideos", response);
116 |             this.modalId = response.data;
117 |             this.modalData = gundem;
118 |           });
119 | 
120 |         console.log("gundem", gundem);
121 |         this.isOpen = true;
122 | 
123 |         this.videoId = this.modalId.videos.results;
124 |         console.log("this.videoId :>> ", this.videoId);
125 |       } catch (error) {
126 |         console.error(error);
127 |       } finally {
128 |         this.showLoading = false;
129 |       }
130 |     },
131 | 
132 |     onSwiper(swiper) {
133 |       console.log(swiper);
134 |     },
135 |     onSlideChange() {
136 |       console.log("slide change");
137 |     },
138 |   },
139 |   computed: {
140 |     ...mapGetters({
141 |       isAuthenticated: "users/isAuthenticated",
142 |     }),
143 |   },
144 | 
145 |   created() {
146 |     axios
147 |       .get(
148 |         "https://api.themoviedb.org/3/movie/popular?api_key=<//APIKEY\\>&language=en-US&page=1"
149 |       )
150 |       .then((response) => {
151 |         console.log("gundemList", response);
152 |         this.gundemList = response.data.results;
153 |       });
154 |   },
155 | };
156 | </script>
157 | <style>
158 | .gundem-container {
159 |   top: -200px;
160 | }
161 | </style>
162 | 
163 |    


--------------------------------------------------------------------------------
/src/components/Home/sliderHomeFive.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gunun-populerleri">
  3 |     <div class="text-span">
  4 |       <span> Günün Popülerleri </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="dayPopular in dayPopular" :key="dayPopular.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + dayPopular.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 | 
 29 |           <div class="film_info" v-if="isAuthenticated">
 30 |             <div class="list-icon-left">
 31 |               <a
 32 |                 ><i class="fas fa-play" style="background: white; color: black">
 33 |                 </i
 34 |               ></a>
 35 | 
 36 |               <a @click="addFavorite(dayPopular)"
 37 |                 ><i class="fas fa-plus toolTip">
 38 |                   <span class="toolTiptext-sm tool-span-sm">
 39 |                     Listeme ekle
 40 |                   </span>
 41 |                 </i></a
 42 |               >
 43 |               <a @click="showDetail(dayPopular)">
 44 |                 <i class="fas fa-chevron-down toolTip">
 45 |                   <span class="toolTiptext-sm tool-span-sm">
 46 |                     Daha fazla bilgi
 47 |                   </span>
 48 |                 </i>
 49 |               </a>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </swiper-slide>
 54 |     </swiper>
 55 | 
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | // Import Swiper Vue.js components
 69 | import { Swiper, SwiperSlide } from "swiper/vue";
 70 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 71 | 
 72 | // Import Swiper styles
 73 | import "swiper/components/navigation/navigation.scss";
 74 | import "swiper/swiper.scss";
 75 | import { mapGetters } from 'vuex';
 76 | export default {
 77 |   components: {
 78 |     modals,
 79 |     Swiper,
 80 |     SwiperSlide,
 81 |     Navigation,
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       dayPopular: [],
 86 |       isOpen: false,
 87 |       modalData: [],
 88 |       modalId: [],
 89 |       videoId: [],
 90 |       showLoading: true,
 91 |     };
 92 |   },
 93 |   methods: {
 94 |     addFavorite(dayPopular) {
 95 |       axios
 96 |         .post("http://localhost:3000/favorites", {
 97 |           ...dayPopular,
 98 |           isFavorite: true,
 99 |         })
100 |         .then((response) => {
101 |           console.log(response);
102 |         })
103 |         .catch((err) => console.log(err));
104 |     },
105 |     async showDetail(dayPopular) {
106 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
107 |       this.showLoading = true;
108 |       try {
109 |         await axios
110 |           .get(
111 |             `https://api.themoviedb.org/3/movie/${dayPopular.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
112 |           )
113 |           .then((response) => {
114 |             console.log("iddetailvideos", response);
115 |             this.modalId = response.data;
116 |             this.modalData = dayPopular;
117 |           });
118 | 
119 |         console.log("dayPopular", dayPopular);
120 |         this.isOpen = true;
121 | 
122 |         this.videoId = this.modalId.videos.results;
123 |         console.log("this.videoId :>> ", this.videoId);
124 |       } catch (error) {
125 |         console.error(error);
126 |       } finally {
127 |         this.showLoading = false;
128 |       }
129 |     },
130 |     onSwiper(swiper) {
131 |       console.log(swiper);
132 |     },
133 |     onSlideChange() {
134 |       console.log("slide change");
135 |     },
136 |   },
137 |   created() {
138 |     axios
139 |       .get(
140 |         "https://api.themoviedb.org/3/trending/movie/day?api_key=<//APIKEY\\>"
141 |       )
142 |       .then((response) => {
143 |         console.log("dayPopular", response);
144 |         this.dayPopular = response.data.results;
145 |       });
146 |   },
147 |   computed: {
148 |     ...mapGetters({
149 |       isAuthenticated: "users/isAuthenticated",
150 |     }),
151 |   },
152 | };
153 | </script>
154 |    
155 | 


--------------------------------------------------------------------------------
/src/components/Home/sliderHomeFour.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="yeni-cikanlar">
  3 |     <div class="text-span">
  4 |       <span> Yeni Çıkanlar </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="newMovieList in newMovieList" :key="newMovieList.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + newMovieList.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 | 
 29 |           <div class="film_info" v-if="isAuthenticated">
 30 |             <div class="list-icon-left">
 31 |               <a
 32 |                 ><i class="fas fa-play" style="background: white; color: black">
 33 |                 </i
 34 |               ></a>
 35 | 
 36 |               <a @click="addFavorite(newMovieList)"
 37 |                 ><i class="fas fa-plus toolTip">
 38 |                   <span class="toolTiptext-sm tool-span-sm">
 39 |                     Listeme ekle
 40 |                   </span>
 41 |                 </i></a
 42 |               >
 43 |               <a @click="showDetail(newMovieList)">
 44 |                 <i class="fas fa-chevron-down toolTip">
 45 |                   <span class="toolTiptext-sm tool-span-sm">
 46 |                     Daha fazla bilgi
 47 |                   </span>
 48 |                 </i>
 49 |               </a>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </swiper-slide>
 54 |     </swiper>
 55 | 
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | // Import Swiper Vue.js components
 69 | import { Swiper, SwiperSlide } from "swiper/vue";
 70 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 71 | 
 72 | // Import Swiper styles
 73 | import "swiper/components/navigation/navigation.scss";
 74 | import "swiper/swiper.scss";
 75 | import { mapGetters } from 'vuex';
 76 | export default {
 77 |   components: {
 78 |     modals,
 79 |     Swiper,
 80 |     SwiperSlide,
 81 |     Navigation,
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       newMovieList: [],
 86 |       isOpen: false,
 87 |       modalData: [],
 88 |       modalId: [],
 89 |       videoId: [],
 90 |       showLoading: true,
 91 |     };
 92 |   },
 93 |   methods: {
 94 |       addFavorite(newMovieList) {
 95 |       axios
 96 |         .post("http://localhost:3000/favorites", {
 97 |           ...newMovieList,
 98 |           isFavorite: true,
 99 |         })
100 |         .then((response) => {
101 |           console.log(response);
102 |         })
103 |         .catch((err) => console.log(err));
104 |     },
105 |     async showDetail(newMovieList) {
106 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
107 |       this.showLoading = true;
108 |       try {
109 |         await axios
110 |           .get(
111 |             `https://api.themoviedb.org/3/movie/${newMovieList.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
112 |           )
113 |           .then((response) => {
114 |             console.log("iddetailvideos", response);
115 |             this.modalId = response.data;
116 |             this.modalData = newMovieList;
117 |           });
118 | 
119 |         console.log("newMovieList", newMovieList);
120 |         this.isOpen = true;
121 | 
122 |         this.videoId = this.modalId.videos.results;
123 |         console.log("this.videoId :>> ", this.videoId);
124 |       } catch (error) {
125 |         console.error(error);
126 |       } finally {
127 |         this.showLoading = false;
128 |       }
129 |     },
130 |     onSwiper(swiper) {
131 |       console.log(swiper);
132 |     },
133 |     onSlideChange() {
134 |       console.log("slide change");
135 |     },
136 |   },
137 | 
138 |   created() {
139 |     axios
140 |       .get(
141 |         "https://api.themoviedb.org/3/movie/upcoming?api_key=<//APIKEY\\>&language=en-US&page=1"
142 |       )
143 |       .then((response) => {
144 |         console.log("newMovieList", response);
145 |         this.newMovieList = response.data.results;
146 |       });
147 |   },
148 |   computed: {
149 |     ...mapGetters({
150 |       isAuthenticated: "users/isAuthenticated",
151 |     }),
152 |   },
153 | };
154 | </script>
155 |    
156 | 
157 | 


--------------------------------------------------------------------------------
/src/components/Home/sliderHomeThree.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="netflixte-populer">
  3 |     <div class="text-span">
  4 |       <span> Netflix'te Popüler </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="netflixTePop in netflixTePop" :key="netflixTePop.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + netflixTePop.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 | 
 29 |           <div class="film_info" v-if="isAuthenticated">
 30 |             <div class="list-icon-left">
 31 |               <a
 32 |                 ><i class="fas fa-play" style="background: white; color: black">
 33 |                 </i
 34 |               ></a>
 35 | 
 36 |               <a @click="addFavorite(netflixTePop)"
 37 |                 ><i class="fas fa-plus toolTip">
 38 |                   <span class="toolTiptext-sm tool-span-sm">
 39 |                     Listeme ekle
 40 |                   </span>
 41 |                 </i></a
 42 |               >
 43 |               <a @click="showDetail(netflixTePop)">
 44 |                 <i class="fas fa-chevron-down toolTip">
 45 |                   <span class="toolTiptext-sm tool-span-sm">
 46 |                     Daha fazla bilgi
 47 |                   </span>
 48 |                 </i>
 49 |               </a>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </swiper-slide>
 54 |     </swiper>
 55 | 
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | // Import Swiper Vue.js components
 69 | import { Swiper, SwiperSlide } from "swiper/vue";
 70 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 71 | 
 72 | // Import Swiper styles
 73 | import "swiper/components/navigation/navigation.scss";
 74 | import "swiper/swiper.scss";
 75 | import { mapGetters } from 'vuex';
 76 | export default {
 77 |   components: {
 78 |     modals,
 79 |     Swiper,
 80 |     SwiperSlide,
 81 |     Navigation,
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       netflixTePop: [],
 86 |       isOpen: false,
 87 |       modalData: [],
 88 |       modalId: [],
 89 |       videoId: [],
 90 |       showLoading: true,
 91 |     };
 92 |   },
 93 |   methods: {
 94 |     addFavorite(netflixTePop) {
 95 |       axios
 96 |         .post("http://localhost:3000/favorites", {
 97 |           ...netflixTePop,
 98 |           isFavorite: true,
 99 |         })
100 |         .then((response) => {
101 |           console.log(response);
102 |         })
103 |         .catch((err) => console.log(err));
104 |     },
105 |     async showDetail(netflixTePop) {
106 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
107 |       this.showLoading = true;
108 |       try {
109 |         await axios
110 |           .get(
111 |             `https://api.themoviedb.org/3/movie/${netflixTePop.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
112 |           )
113 |           .then((response) => {
114 |             console.log("iddetailvideos", response);
115 |             this.modalId = response.data;
116 |             this.modalData = netflixTePop;
117 |           });
118 | 
119 |         console.log("netflixTePop", netflixTePop);
120 |         this.isOpen = true;
121 | 
122 |         this.videoId = this.modalId.videos.results;
123 |         console.log("this.videoId :>> ", this.videoId);
124 |       } catch (error) {
125 |         console.error(error);
126 |       } finally {
127 |         this.showLoading = false;
128 |       }
129 |     },
130 |     onSwiper(swiper) {
131 |       console.log(swiper);
132 |     },
133 |     onSlideChange() {
134 |       console.log("slide change");
135 |     },
136 |   },
137 | 
138 |   created() {
139 |     axios
140 |       .get(
141 |         "https://api.themoviedb.org/3/movie/popular?api_key=<//APIKEY\\>&language=en-US&page=2"
142 |       )
143 |       .then((response) => {
144 |         console.log("netflixTePop", response);
145 |         this.netflixTePop = response.data.results;
146 |       });
147 |   },
148 |     computed: {
149 |     ...mapGetters({
150 |       isAuthenticated: "users/isAuthenticated",
151 |     }),
152 |   },
153 | };
154 | </script>
155 |    
156 | 
157 | 


--------------------------------------------------------------------------------
/src/components/Home/sliderHomeTwo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="out-izleyen-oneri">
  3 |     <div class="text-span">
  4 |       <span> Outside the Wire Adlı Yapımı İzleyenlere Öneriler </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide
 22 |         v-for="OutOnerilenler in OutOnerilenler"
 23 |         :key="OutOnerilenler.id"
 24 |       >
 25 |         <div class="ms-2 me-2 movie_card item">
 26 |           <img
 27 |             :src="
 28 |               'http://image.tmdb.org/t/p/w500/' + OutOnerilenler.poster_path
 29 |             "
 30 |             class="card-img-top"
 31 |             alt="..."
 32 |           />
 33 | 
 34 |           <div class="film_info" v-if="isAuthenticated">
 35 |             <div class="list-icon-left">
 36 |               <a
 37 |                 ><i class="fas fa-play" style="background: white; color: black">
 38 |                 </i
 39 |               ></a>
 40 | 
 41 |               <a @click="addFavorite(OutOnerilenler)"
 42 |                 ><i class="fas fa-plus toolTip">
 43 |                   <span class="toolTiptext-sm tool-span-sm">
 44 |                     Listeme ekle
 45 |                   </span>
 46 |                 </i></a
 47 |               >
 48 |               <a @click="showDetail(OutOnerilenler)">
 49 |                 <i class="fas fa-chevron-down toolTip">
 50 |                   <span class="toolTiptext-sm tool-span-sm">
 51 |                     Daha fazla bilgi
 52 |                   </span>
 53 |                 </i>
 54 |               </a>
 55 |             </div>
 56 |           </div>
 57 |         </div>
 58 |       </swiper-slide>
 59 |     </swiper>
 60 | 
 61 |     <modals
 62 |       :modalData="modalData"
 63 |       :modalId="modalId"
 64 |       :videoId="videoId"
 65 |       v-model="isOpen"
 66 |     />
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 | import axios from "axios";
 72 | import modals from "@/components/modal/modals";
 73 | // Import Swiper Vue.js components
 74 | import { Swiper, SwiperSlide } from "swiper/vue";
 75 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 76 | 
 77 | // Import Swiper styles
 78 | import "swiper/components/navigation/navigation.scss";
 79 | import "swiper/swiper.scss";
 80 | import { mapGetters } from "vuex";
 81 | export default {
 82 |   components: {
 83 |     modals,
 84 |     Swiper,
 85 |     SwiperSlide,
 86 |     Navigation,
 87 |   },
 88 |   data() {
 89 |     return {
 90 |       OutOnerilenler: [],
 91 |       isOpen: false,
 92 |       modalData: [],
 93 |       modalId: [],
 94 |       videoId: [],
 95 |       showLoading: true,
 96 |     };
 97 |   },
 98 |   methods: {
 99 |     addFavorite(OutOnerilenler) {
100 |       axios
101 |         .post("http://localhost:3000/favorites", {
102 |           ...OutOnerilenler,
103 |           isFavorite: true,
104 |         })
105 |         .then((response) => {
106 |           console.log(response);
107 |         })
108 |         .catch((err) => console.log(err));
109 |     },
110 |     async showDetail(OutOnerilenler) {
111 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
112 |       this.showLoading = true;
113 |       try {
114 |         await axios
115 |           .get(
116 |             `https://api.themoviedb.org/3/movie/${OutOnerilenler.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
117 |           )
118 |           .then((response) => {
119 |             console.log("iddetailvideos", response);
120 |             this.modalId = response.data;
121 |             this.modalData = OutOnerilenler;
122 |           });
123 | 
124 |         console.log("netflixTePop", OutOnerilenler);
125 |         this.isOpen = true;
126 | 
127 |         this.videoId = this.modalId.videos.results;
128 |         console.log("this.videoId :>> ", this.videoId);
129 |       } catch (error) {
130 |         console.error(error);
131 |       } finally {
132 |         this.showLoading = false;
133 |       }
134 |     },
135 |     onSwiper(swiper) {
136 |       console.log(swiper);
137 |     },
138 |     onSlideChange() {
139 |       console.log("slide change");
140 |     },
141 |   },
142 | 
143 |   created() {
144 |     axios
145 |       .get(
146 |         "https://api.themoviedb.org/3/movie/38700/similar?api_key=<//APIKEY\\>&language=en-US&page=1"
147 |       )
148 |       .then((response) => {
149 |         console.log("topTenList", response);
150 |         this.OutOnerilenler = response.data.results;
151 |       });
152 |   },
153 |   computed: {
154 |     ...mapGetters({
155 |       isAuthenticated: "users/isAuthenticated",
156 |     }),
157 |   },
158 | };
159 | </script>
160 |    
161 | 


--------------------------------------------------------------------------------
/src/components/NewPopular/dayPopularTv.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gunun-populer-dizi">
  3 |     <div class="text-span">
  4 |       <span> Günün Popüler Dizileri </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="dayPopularTV in dayPopularTV" :key="dayPopularTV.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + dayPopularTV.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 |           <div class="film_info" v-if="isAuthenticated">
 29 |             <div class="list-icon-left">
 30 |               <a
 31 |                 ><i class="fas fa-play" style="background: white; color: black">
 32 |                 </i
 33 |               ></a>
 34 | 
 35 |               <a @click="addFavorite(dayPopularTV)"
 36 |                 ><i class="fas fa-plus toolTip">
 37 |                   <span class="toolTiptext-sm tool-span-sm">
 38 |                     Listeme ekle
 39 |                   </span>
 40 |                 </i></a
 41 |               >
 42 |               <a @click="showDetail(dayPopularTV)">
 43 |                 <i class="fas fa-chevron-down toolTip">
 44 |                   <span class="toolTiptext-sm tool-span-sm">
 45 |                     Daha fazla bilgi
 46 |                   </span>
 47 |                 </i>
 48 |               </a>
 49 |             </div>
 50 |           </div>
 51 |         </div>
 52 |       </swiper-slide>
 53 |     </swiper>
 54 | 
 55 |     <modals
 56 |       :modalData="modalData"
 57 |       :modalId="modalId"
 58 |       :videoId="videoId"
 59 |       v-model="isOpen"
 60 |     />
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import axios from "axios";
 66 | import modals from "@/components/modal/modals";
 67 | // Import Swiper Vue.js components
 68 | import { Swiper, SwiperSlide } from "swiper/vue";
 69 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 70 | 
 71 | // Import Swiper styles
 72 | import "swiper/components/navigation/navigation.scss";
 73 | import "swiper/swiper.scss";
 74 | import { mapGetters } from 'vuex';
 75 | export default {
 76 |   components: {
 77 |     modals,
 78 |     Swiper,
 79 |     SwiperSlide,
 80 |     Navigation,
 81 |   },
 82 |   data() {
 83 |     return {
 84 |       dayPopularTV: [],
 85 |       isOpen: false,
 86 |       modalData: [],
 87 |       modalId: [],
 88 |       videoId: [],
 89 |       showLoading: true,
 90 |     };
 91 |   },
 92 |   methods: {
 93 |     addFavorite(dayPopularTV) {
 94 |       axios
 95 |         .post("http://localhost:3000/favorites", {
 96 |           ...dayPopularTV,
 97 |           isFavorite: true,
 98 |         })
 99 |         .then((response) => {
100 |           console.log(response);
101 |         })
102 |         .catch((err) => console.log(err));
103 |     },
104 |     async showDetail(dayPopularTV) {
105 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
106 |       this.showLoading = true;
107 |       try {
108 |         await axios
109 |           .get(
110 |             `https://api.themoviedb.org/3/movie/${dayPopularTV.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
111 |           )
112 |           .then((response) => {
113 |             console.log("dayPopularTV", response);
114 |             this.modalId = response.data;
115 |             this.modalData = dayPopularTV;
116 |           });
117 | 
118 |         console.log("dayPopularTV", dayPopularTV);
119 |         this.isOpen = true;
120 | 
121 |         this.videoId = this.modalId.videos.results;
122 |         console.log("this.videoId :>> ", this.videoId);
123 |       } catch (error) {
124 |         console.error(error);
125 |       } finally {
126 |         this.showLoading = false;
127 |       }
128 |     },
129 |     onSwiper(swiper) {
130 |       console.log(swiper);
131 |     },
132 |     onSlideChange() {
133 |       console.log("slide change");
134 |     },
135 |   },
136 |   created() {
137 |     axios
138 |       .get(
139 |         "https://api.themoviedb.org/3/trending/tv/day?api_key=<//APIKEY\\>"
140 |       )
141 |       .then((response) => {
142 |         console.log("dayPopularTV", response);
143 |         this.dayPopularTV = response.data.results;
144 |       });
145 |   },
146 |   computed: {
147 |     ...mapGetters({
148 |       isAuthenticated: "users/isAuthenticated",
149 |     }),
150 |   },
151 | };
152 | </script>
153 |    
154 | 


--------------------------------------------------------------------------------
/src/components/NewPopular/weekPopular.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="haftanin-populer">
  3 |     <div class="text-span" style="margin-top: 100px !important">
  4 |       <span> Haftanın Popülerleri </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide v-for="weekPopular in weekPopular" :key="weekPopular.id">
 22 |         <div class="ms-2 me-2 movie_card item">
 23 |           <img
 24 |             :src="'http://image.tmdb.org/t/p/w500/' + weekPopular.poster_path"
 25 |             class="card-img-top"
 26 |             alt="..."
 27 |           />
 28 | 
 29 |           <div class="film_info" v-if="isAuthenticated">
 30 |             <div class="list-icon-left">
 31 |               <a
 32 |                 ><i class="fas fa-play" style="background: white; color: black">
 33 |                 </i
 34 |               ></a>
 35 | 
 36 |               <a @click="addFavorite(weekPopular)"
 37 |                 ><i class="fas fa-plus toolTip">
 38 |                   <span class="toolTiptext-sm tool-span-sm">
 39 |                     Listeme ekle
 40 |                   </span>
 41 |                 </i></a
 42 |               >
 43 |               <a @click="showDetail(weekPopular)">
 44 |                 <i class="fas fa-chevron-down toolTip">
 45 |                   <span class="toolTiptext-sm tool-span-sm">
 46 |                     Daha fazla bilgi
 47 |                   </span>
 48 |                 </i>
 49 |               </a>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </swiper-slide>
 54 |     </swiper>
 55 | 
 56 |     <modals
 57 |       :modalData="modalData"
 58 |       :modalId="modalId"
 59 |       :videoId="videoId"
 60 |       v-model="isOpen"
 61 |     />
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import axios from "axios";
 67 | import modals from "@/components/modal/modals";
 68 | // Import Swiper Vue.js components
 69 | import { Swiper, SwiperSlide } from "swiper/vue";
 70 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 71 | 
 72 | // Import Swiper styles
 73 | import "swiper/components/navigation/navigation.scss";
 74 | import "swiper/swiper.scss";
 75 | import { mapGetters } from "vuex";
 76 | export default {
 77 |   components: {
 78 |     modals,
 79 |     Swiper,
 80 |     SwiperSlide,
 81 |     Navigation,
 82 |   },
 83 |   data() {
 84 |     return {
 85 |       weekPopular: [],
 86 |       isOpen: false,
 87 |       modalData: [],
 88 |       modalId: [],
 89 |       videoId: [],
 90 |       showLoading: true,
 91 |     };
 92 |   },
 93 |   methods: {
 94 |     addFavorite(weekPopular) {
 95 |       axios
 96 |         .post("http://localhost:3000/favorites", {
 97 |           ...weekPopular,
 98 |           isFavorite: true,
 99 |         })
100 |         .then((response) => {
101 |           console.log(response);
102 |         })
103 |         .catch((err) => console.log(err));
104 |     },
105 |     async showDetail(weekPopular) {
106 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
107 |       this.showLoading = true;
108 |       try {
109 |         await axios
110 |           .get(
111 |             `https://api.themoviedb.org/3/movie/${weekPopular.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
112 |           )
113 |           .then((response) => {
114 |             console.log("iddetailvideos", response);
115 |             this.modalId = response.data;
116 |             this.modalData = weekPopular;
117 |           });
118 | 
119 |         console.log("weekPopular", weekPopular);
120 |         this.isOpen = true;
121 | 
122 |         this.videoId = this.modalId.videos.results;
123 |         console.log("this.videoId :>> ", this.videoId);
124 |       } catch (error) {
125 |         console.error(error);
126 |       } finally {
127 |         this.showLoading = false;
128 |       }
129 |     },
130 |     onSwiper(swiper) {
131 |       console.log(swiper);
132 |     },
133 |     onSlideChange() {
134 |       console.log("slide change");
135 |     },
136 |   },
137 |   created() {
138 |     axios
139 |       .get(
140 |         "https://api.themoviedb.org/3/trending/movie/week?api_key=<//APIKEY\\> "
141 |       )
142 |       .then((response) => {
143 |         console.log("weekPopular", response);
144 |         this.weekPopular = response.data.results;
145 |       });
146 |   },
147 |   computed: {
148 |     ...mapGetters({
149 |       isAuthenticated: "users/isAuthenticated",
150 |     }),
151 |   },
152 | };
153 | </script>
154 |    
155 | 


--------------------------------------------------------------------------------
/src/components/NewPopular/weekPopularTv.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="haftanin-populer-dizileri">
  3 |     <div class="text-span">
  4 |       <span> Haftanın Popüler Dizileri </span>
  5 |     </div>
  6 |     <swiper
  7 |       :slides-per-view="7"
  8 |       :space-between="0"
  9 |       @swiper="onSwiper"
 10 |       @slideChange="onSlideChange"
 11 |       :mousewheel-control="false"
 12 |       :performance-mode="false"
 13 |       :pagination-visible="true"
 14 |       :pagination-clickable="false"
 15 |       :autoScrollOffset="0"
 16 |       :draggable="false"
 17 |       :mousewheel="false"
 18 |       navigation
 19 |       class="item swiper-scrollbar-lock ms-5"
 20 |     >
 21 |       <swiper-slide
 22 |         v-for="weekPopularTV in weekPopularTV"
 23 |         :key="weekPopularTV.id"
 24 |       >
 25 |         <div class="ms-2 me-2 movie_card item">
 26 |           <img
 27 |             :src="'http://image.tmdb.org/t/p/w500/' + weekPopularTV.poster_path"
 28 |             class="card-img-top"
 29 |             alt="..."
 30 |           />
 31 | 
 32 |           <div class="film_info" v-if="isAuthenticated">
 33 |             <div class="list-icon-left">
 34 |               <a
 35 |                 ><i class="fas fa-play" style="background: white; color: black">
 36 |                 </i
 37 |               ></a>
 38 | 
 39 |               <a @click="addFavorite(weekPopularTV)"
 40 |                 ><i class="fas fa-plus toolTip">
 41 |                   <span class="toolTiptext-sm tool-span-sm">
 42 |                     Listeme ekle
 43 |                   </span>
 44 |                 </i></a
 45 |               >
 46 |               <a @click="showDetail(weekPopularTV)">
 47 |                 <i class="fas fa-chevron-down toolTip">
 48 |                   <span class="toolTiptext-sm tool-span-sm">
 49 |                     Daha fazla bilgi
 50 |                   </span>
 51 |                 </i>
 52 |               </a>
 53 |             </div>
 54 |           </div>
 55 |         </div>
 56 |       </swiper-slide>
 57 |     </swiper>
 58 | 
 59 |     <modals
 60 |       :modalData="modalData"
 61 |       :modalId="modalId"
 62 |       :videoId="videoId"
 63 |       v-model="isOpen"
 64 |     />
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import axios from "axios";
 70 | import modals from "@/components/modal/modals";
 71 | // Import Swiper Vue.js components
 72 | import { Swiper, SwiperSlide } from "swiper/vue";
 73 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 74 | 
 75 | // Import Swiper styles
 76 | import "swiper/components/navigation/navigation.scss";
 77 | import "swiper/swiper.scss";
 78 | import { mapGetters } from "vuex";
 79 | export default {
 80 |   components: {
 81 |     modals,
 82 |     Swiper,
 83 |     SwiperSlide,
 84 |     Navigation,
 85 |   },
 86 |   data() {
 87 |     return {
 88 |       weekPopularTV: [],
 89 |       isOpen: false,
 90 |       modalData: [],
 91 |       modalId: [],
 92 |       videoId: [],
 93 |       showLoading: true,
 94 |     };
 95 |   },
 96 |   methods: {
 97 |     addFavorite(weekPopularTV) {
 98 |       axios
 99 |         .post("http://localhost:3000/favorites", {
100 |           ...weekPopularTV,
101 |           isFavorite: true,
102 |         })
103 |         .then((response) => {
104 |           console.log(response);
105 |         })
106 |         .catch((err) => console.log(err));
107 |     },
108 |     async showDetail(weekPopularTV) {
109 |       console.log("isOpenACILIYORMU :>> ", this.isOpen);
110 |       this.showLoading = true;
111 |       try {
112 |         await axios
113 |           .get(
114 |             `https://api.themoviedb.org/3/movie/${weekPopularTV.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
115 |           )
116 |           .then((response) => {
117 |             console.log("weekPopularTV", response);
118 |             this.modalId = response.data;
119 |             this.modalData = weekPopular;
120 |           });
121 | 
122 |         console.log("weekPopularTV", weekPopularTV);
123 |         this.isOpen = true;
124 | 
125 |         this.videoId = this.modalId.videos.results;
126 |         console.log("this.videoId :>> ", this.videoId);
127 |       } catch (error) {
128 |         console.error(error);
129 |       } finally {
130 |         this.showLoading = false;
131 |       }
132 |     },
133 |     onSwiper(swiper) {
134 |       console.log(swiper);
135 |     },
136 |     onSlideChange() {
137 |       console.log("slide change");
138 |     },
139 |   },
140 |   created() {
141 |     axios
142 |       .get(
143 |         "https://api.themoviedb.org/3/trending/tv/week?api_key=<//APIKEY\\>"
144 |       )
145 |       .then((response) => {
146 |         console.log("weekPopularTV", response);
147 |         this.weekPopularTV = response.data.results;
148 |       });
149 |   },
150 |   computed: {
151 |     ...mapGetters({
152 |       isAuthenticated: "users/isAuthenticated",
153 |     }),
154 |   },
155 | };
156 | </script>
157 |    
158 | 


--------------------------------------------------------------------------------
/src/components/filmler/backgroundFilm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="nextReleasesContainer">
 4 |       <div class="videoContainer" style="top: -50px !important">
 5 |         <video autoplay muted loop src="@/assets/outside.mp4" ></video>
 6 |       </div>
 7 | 
 8 |       <div class="containerReleases">
 9 |         <h1>OUT SIDE THE WIRE</h1>
10 |         <p style="font-size: 20px !important">
11 |           Yakın gelecekte bir savaş bölgesine gönderilen insansız hava aracı
12 |           pilotu, bir nükleer saldırıyı durdurmak için çok gizli bir android
13 |           subayla iş birliği yapar.
14 |         </p>
15 |         <button id="buttonPlay" @click="showDetail()">
16 |           <i class="fas fa-play"></i>
17 | 
18 |           <span>Oynat</span>
19 |         </button>
20 |         <button @click="showDetail()" id="buttonInfo">
21 |           <i class="fas fa-info-circle"></i>
22 |           <span> Daha Fazla Bilgi</span>
23 |         </button>
24 |       </div>
25 |     </div>
26 | 
27 |     <modals
28 |       v-model="isOpen"
29 |       :modalData="modalData"
30 |       :videoId="videoId"
31 |       :modalId="modalId"
32 |     />
33 |   </div>
34 | </template>
35 | <script>
36 | import modals from "@/components/modal/modals.vue";
37 | import axios from "axios";
38 | export default {
39 |   components: { modals },
40 |   data() {
41 |     return {
42 |       isOpen: false,
43 |       modalId: [],
44 |       modalData: [],
45 |       videoId: [],
46 |     };
47 |   },
48 |   methods: {
49 |     async showDetail() {
50 |       try {
51 |         await axios
52 |           .get(
53 |             `https://api.themoviedb.org/3/movie/775996?api_key=<//APIKEY\\>&language=en-US&append_to_response=videos,credits,release_dates,similar`
54 |           )
55 |           .then((response) => {
56 |             console.log("theplatfrom", response);
57 |             this.modalId = response.data;
58 |             this.modalData = this.modalId;
59 |             console.log("this.modalData :>> ", this.modalData);
60 |           });
61 | 
62 |         this.isOpen = true;
63 |         this.videoId = this.modalData.videos.results;
64 |       } catch (error) {
65 |         console.error(error);
66 |       } finally {
67 |         this.showLoading = false;
68 |       }
69 |     },
70 |     onSwiper(swiper) {
71 |       console.log(swiper);
72 |     },
73 |     onSlideChange() {
74 |       console.log("slide change");
75 |     },
76 |   },
77 | };
78 | </script>
79 | <style>
80 | .videoContainer:after {
81 |   content: "";
82 |   display: block;
83 |   position: absolute;
84 |   width: 100%;
85 |   height: 55%;
86 |   bottom: 0;
87 |   background: -webkit-linear-gradient(to top, #181818, transparent 50%);
88 |   background: linear-gradient(to top, #181818, transparent 50%);
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/footer/footers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container-footer">
 3 |     <section class="link">
 4 |       <div class="logo">
 5 |         <a href="https://www.facebook.com/netflixturkiye"
 6 |           ><i class="fab fa-facebook-square fa-2x logo"></i
 7 |         ></a>
 8 |         <a href="https://www.instagram.com/netflixturkiye/"
 9 |           ><i class="fab fa-instagram fa-2x logo"></i
10 |         ></a>
11 |         <a href="https://www.instagram.com/netflixturkiye/"
12 |           ><i class="fab fa-twitter fa-2x logo"></i
13 |         ></a>
14 |         <a href="https://www.youtube.com/channel/UCeZOywU-zg9j3SxYG0FdLtw"
15 |           ><i class="fab fa-youtube fa-2x logo"></i
16 |         ></a>
17 |       </div>
18 |       <div class="sub-links">
19 |         <ul>
20 |           <li><a href="#">Seslendirme ve Alt yazı</a></li>
21 |           <li><a href="#">Sesli Betimleme</a></li>
22 |           <li><a href="#">Yardım Merkezi</a></li>
23 |           <li><a href="#">Hediye Kartları</a></li>
24 |           <li><a href="#">Medya Merkezi</a></li>
25 |           <li><a href="#">Yatırımcı İlişkileri</a></li>
26 |           <li><a href="#">İş İmkanları</a></li>
27 |           <li><a href="#">Kullanım Koşulları</a></li>
28 |           <li><a href="#">Gizlilik</a></li>
29 |           <li><a href="#">Yasal Uyarılar</a></li>
30 |           <li><a href="#">Kurumsal Bilgiler</a></li>
31 |           <li><a href="#">Bize Ulaşın</a></li>
32 |         </ul>
33 |       </div>
34 |     </section>
35 | 
36 |     <div class="footers">
37 |       <p>copy 1997-2021 Netflix, Inc.</p>
38 |       <p>Yusuf Taskiran copy 2021</p>
39 |     </div>
40 |   </div>
41 | </template>
42 | <style>
43 | .container-footer {
44 |   position: relative;
45 |   margin-bottom: 0;
46 |   clear: both;
47 |   width: 100%;
48 | }
49 | 
50 | .sub-links ul {
51 |   display: grid;
52 |   grid-gap: 20px;
53 |   grid-template-columns: repeat(3, 1fr);
54 |   text-align: center;
55 | }
56 | .logo {
57 |   grid-gap: 20px;
58 |   grid-template-columns: repeat(2, 1fr);
59 |   margin-bottom: 20px;
60 |   margin-left: 70px;
61 | }
62 | .link {
63 |   padding: 50px;
64 | }
65 | 
66 | .sub-links ul {
67 |   color: grey;
68 |   list-style: none;
69 |   padding: 0;
70 |   display: grid;
71 |   grid-gap: 20px;
72 |   grid-template-columns: repeat(4, 1fr);
73 | }
74 | 
75 | .sub-links a {
76 |   color: grey;
77 |   text-decoration: none;
78 | }
79 | .logo a {
80 |   color: grey;
81 | }
82 | 
83 | .sub-links a:hover {
84 |   color: grey;
85 |   text-decoration: underline;
86 | }
87 | 
88 | .logos a {
89 |   padding: 10px;
90 | }
91 | 
92 | .footers {
93 |   padding: 20px;
94 |   text-align: center;
95 |   color: grey;
96 |   margin: 10px;
97 | }
98 | </style>


--------------------------------------------------------------------------------
/src/components/modal/modals.vue:
--------------------------------------------------------------------------------
  1 | <template >
  2 |   <Modal modal-transition="scale">
  3 |     <template #default="{ close }">
  4 |       <div class="modal-container">
  5 |         <div class="card">
  6 |           <div class="img-modal">
  7 |             <i @click="close" class="far fa-times-circle close-icon"></i>
  8 | 
  9 |             <div class="images-modal">
 10 |               <div class="youtube-container">
 11 |                 <YoutubeVue3
 12 |                   ref="youtube"
 13 |                   :videoid="videoId[0].key"
 14 |                   :width="850"
 15 |                   :height="440"
 16 |                   :mute="true"
 17 |                   :loop="loop"
 18 |                 />
 19 |               </div>
 20 |               <div
 21 |                 class="img-show images-modal-show"
 22 |                 @mouseover="showImage"
 23 |                 @mouseleave="!showImage"
 24 |               >
 25 |                 <img
 26 |                   v-if="show"
 27 |                   :src="
 28 |                     'http://image.tmdb.org/t/p/w500/' + modalData.backdrop_path
 29 |                   "
 30 |                   class="card-img-top img-gradient"
 31 |                   alt="..."
 32 |                   style="position: relative"
 33 |                 />
 34 |               </div>
 35 |             </div>
 36 |             <div class="modal-title">
 37 |               <h1 class="text-white">{{ modalData.original_title }}</h1>
 38 |             </div>
 39 |             <div class="btn-modal">
 40 |               <button
 41 |                 id="buttonPlay"
 42 |                 class="button"
 43 |                 style="width: 170px; height: 50px; font-size: 20px"
 44 |               >
 45 |                 <i class="fas fa-play"></i>
 46 | 
 47 |                 <span>Oynat</span>
 48 |               </button>
 49 |               <div class="list-icon-left-modal">
 50 |                 <i class="fas fa-plus toolTip">
 51 |                   <span
 52 |                     class="toolTiptext tool-span"
 53 |                     style="
 54 |                       font-size: 20px;
 55 |                       width: 180px;
 56 |                       left: -3%;
 57 |                       margin-bottom: 10px;
 58 |                     "
 59 |                   >
 60 |                     <b>Listeme ekle</b>
 61 |                   </span>
 62 |                 </i>
 63 | 
 64 |                 <i class="far fa-thumbs-up toolTip">
 65 |                   <span
 66 |                     class="toolTiptext tool-span"
 67 |                     style="
 68 |                       font-size: 20px;
 69 |                       width: 180px;
 70 |                       left: -3%;
 71 |                       margin-bottom: 10px;
 72 |                     "
 73 |                   >
 74 |                     <b>Bunu sevdim</b>
 75 |                   </span>
 76 |                 </i>
 77 |                 <i class="far fa-thumbs-down toolTip">
 78 |                   <span
 79 |                     class="toolTiptext tool-span"
 80 |                     style="
 81 |                       font-size: 20px;
 82 |                       width: 180px;
 83 |                       left: -3%;
 84 |                       margin-bottom: 10px;
 85 |                     "
 86 |                   >
 87 |                     <b> Bana göre değil </b>
 88 |                   </span>
 89 |                 </i>
 90 |               </div>
 91 |             </div>
 92 |           </div>
 93 |           <div class="detail-container">
 94 |             <div
 95 |               class="row"
 96 |               style="margin-left: 0px !important; margin-top: 15px"
 97 |             >
 98 |               <div class="col-sm">
 99 |                 <div class="puan">
100 |                   <span class="Pborder">{{ modalData.vote_average }}</span>
101 |                   <div class="date">
102 |                     <span style="margin-left: 5px">{{
103 |                       modalId.release_date
104 |                     }}</span>
105 |                   </div>
106 |                 </div>
107 | 
108 |                 <div class="tagline">
109 |                   <span> {{ modalId.tagline }} </span>
110 |                 </div>
111 |               </div>
112 |               <div class="col-sm">
113 |                 <div class="col-sm-right">
114 |                   <div class="genres">
115 |                     <span style="color: #777">Türler: </span>
116 |                     <div v-for="item in modalId.genres" :key="item.id">
117 |                       <p
118 |                         class="genres-text"
119 |                         style="margin-left: 5px; align-items: center"
120 |                       >
121 |                         {{ item.name }}
122 |                       </p>
123 |                     </div>
124 |                   </div>
125 |                   <div class="cast">
126 |                     <span style="color: #777">Oyuncular: </span>
127 |                     <span>
128 |                       {{ modalId.credits.cast[0].name }},
129 |                       {{ modalId.credits.cast[1].name }}</span
130 |                     >
131 |                   </div>
132 |                   <div class="original-dil">
133 |                     <span style="color: #777">Orijinal Dil: </span>
134 |                     <span
135 |                       class="Pborder"
136 |                       style="margin-left: 5px; text-transform: uppercase"
137 |                     >
138 |                       {{ modalId.original_language }}</span
139 |                     >
140 |                   </div>
141 |                   <div class="director">
142 |                     <span style="color: #777">Yönetmen: </span>
143 |                     <span class="Pborder" style="margin-left: 5px">
144 |                       {{ modalId.credits.crew[1].name }}
145 |                     </span>
146 |                   </div>
147 |                 </div>
148 |               </div>
149 |             </div>
150 |             <div class="benzer-span"><span> Benzerleri</span></div>
151 |             <div class="container-modal-mini">
152 |               <div class="mini-modal-cart row">
153 |                 <div
154 |                   class="benzerleri col-6 col-sm-6"
155 |                   v-for="item in modalId.similar.results"
156 |                   :key="item.id"
157 |                 >
158 |                   <div class="img-container">
159 |                     <img
160 |                       :src="
161 |                         'http://image.tmdb.org/t/p/w500/' + item.backdrop_path
162 |                       "
163 |                     />
164 | 
165 |                     <div class="content">
166 |                       <div class="story">
167 |                         <div class="title-mini-modal">
168 |                           <span> {{ item.original_title }} </span>
169 |                         </div>
170 | 
171 |                         <div class="date-mini-modal">
172 |                           <span
173 |                             class="Pborder"
174 |                             style="color: rgb(204, 203, 203)"
175 |                           >
176 |                             {{ item.vote_average }}</span
177 |                           >
178 |                           <span
179 |                             style="margin-left: 15px; color:   color: rgb(204, 203, 203);"
180 |                             >{{ item.release_date }}</span
181 |                           >
182 |                           <span
183 |                             class="Pborder"
184 |                             style="margin-left: 15px; color: rgb(204, 203, 203)"
185 |                           >
186 |                             {{ item.original_language }}</span
187 |                           >
188 |                         </div>
189 |                         <p>
190 |                           <!-- {{ item.overview }} -->
191 |                         </p>
192 |                       </div>
193 |                     </div>
194 |                   </div>
195 |                 </div>
196 |               </div>
197 |             </div>
198 |             <div class="divider-border"></div>
199 |             <div class="track-container">
200 |               <div class="track-content">
201 |                 <div class="about-wrapper">
202 |                   <span class="benzer-span" style="margin-bottom: 0px">
203 |                     <strong> {{ modalId.original_title }} </strong>
204 |                     <p style="margin-left: 10px">Hakkında</p>
205 |                   </span>
206 |                 </div>
207 |                 <div class="about-container">
208 |                   <div class="col-sm-right" style="margin-left: 0px !important">
209 |                     <div class="director-content">
210 |                       <span style="color: #777">Yönetmen: </span>
211 |                       <span class="" style="margin-left: 5px; color: #ddd">
212 |                         {{ modalId.credits.crew[1].name }}
213 |                       </span>
214 |                     </div>
215 |                     <div class="cast-content">
216 |                       <span style="color: #777">Oyuncu Kadrosu: </span>
217 |                       <span style="color: #ddd">
218 |                         {{ modalId.credits.cast[0].name }},
219 |                         {{ modalId.credits.cast[1].name }},
220 |                         {{ modalId.credits.cast[2].name }},
221 |                         {{ modalId.credits.cast[3].name }},
222 |                         {{ modalId.credits.cast[4].name }},
223 |                         {{ modalId.credits.cast[5].name }},
224 |                         {{ modalId.credits.cast[6].name }},
225 |                         {{ modalId.credits.cast[7].name }},
226 |                         {{ modalId.credits.cast[8].name }},
227 |                         {{ modalId.credits.cast[9].name }}
228 |                       </span>
229 |                     </div>
230 |                     <div class="writing-content">
231 |                       <span style="color: #777">Senarist: </span>
232 |                       <span style="color: #ddd">
233 |                         {{ modalId.credits.crew[10].name }},
234 |                         {{ modalId.credits.crew[11].name }},
235 |                         {{ modalId.credits.crew[12].name }}
236 |                       </span>
237 |                     </div>
238 |                     <div class="genres-content">
239 |                       <span style="color: #777">Türler: </span>
240 | 
241 |                       <span
242 |                         style="color: #ddd; margin-right: 3px"
243 |                         v-for="item in modalId.genres"
244 |                         :key="item.id"
245 |                       >
246 |                         {{ item.name }}</span
247 |                       >
248 |                     </div>
249 | 
250 |                     <div class="original-dil-content">
251 |                       <span style="color: #777">Orijinal Dil: </span>
252 |                       <span
253 |                         class="Pborder"
254 |                         style="
255 |                           margin-left: 5px;
256 |                           text-transform: uppercase;
257 |                           color: #ddd;
258 |                         "
259 |                       >
260 |                         {{ modalId.original_language }}
261 |                       </span>
262 |                     </div>
263 |                     <div class="adult-content">
264 |                       <span style="color: #777">Yetişkinlik Düzeyi: </span>
265 |                       <span
266 |                         class="Pborder"
267 |                         style="margin-left: 5px; color: #ddd"
268 |                       >
269 |                         18+
270 |                       </span>
271 |                       <span style="margin-left: 5px; color: #ddd">
272 |                         {{
273 |                           modalId.adult == true ||
274 |                           "18 yaş ve üzerindeki izleyiciler için uygun"
275 |                         }}
276 |                       </span>
277 |                     </div>
278 |                   </div>
279 |                 </div>
280 |               </div>
281 |             </div>
282 |             <div class="divider"></div>
283 |           </div>
284 |         </div>
285 |       </div>
286 |     </template>
287 |   </Modal>
288 | </template>
289 |  
290 |   <script>
291 | import { Modal } from "vue-neat-modal";
292 | import diziler from "@/components/series/diziler";
293 | import { YoutubeVue3 } from "youtube-vue3";
294 | 
295 | export default {
296 |   components: {
297 |     Modal,
298 |     diziler,
299 |     YoutubeVue3,
300 |   },
301 |   props: {
302 |     modalData: {
303 |       type: Object,
304 |       required: true,
305 |     },
306 |     modalId: {
307 |       type: Object,
308 |       required: true,
309 |     },
310 |     videoId: {
311 |       type: Object,
312 |       required: true,
313 |     },
314 |   },
315 |   data() {
316 |     return {
317 |       modalTransition: "scale",
318 |       isOpen: false,
319 |       loop: 1,
320 |       show: true,
321 |     };
322 |   },
323 |   methods: {
324 |     applyConfig() {
325 |       this.play = Object.assign(this.play, this.temp);
326 |     },
327 |     playCurrentVideo() {
328 |       this.$refs.youtube.player.playVideo();
329 |     },
330 |     stopCurrentVideo() {
331 |       this.$refs.youtube.player.stopVideo();
332 |     },
333 |     pauseCurrentVideo() {
334 |       this.$refs.youtube.player.pauseVideo();
335 |     },
336 |     muteCurrentVideo() {
337 |       this.$refs.youtube.player.muteVideo();
338 |     },
339 |     showImage() {
340 |       this.show = false;
341 |     },
342 |   },
343 | };
344 | </script> 
345 | 
346 | <style>
347 | .adult-content {
348 |   margin-left: 0;
349 |   margin: 0.5em;
350 |   font-size: 14px;
351 |   line-height: 20px;
352 |   word-break: break-word;
353 |   text-align: left;
354 | }
355 | .writing-content {
356 |   margin-left: 0;
357 |   margin: 0.5em;
358 |   font-size: 14px;
359 |   line-height: 20px;
360 |   word-break: break-word;
361 |   text-align: left;
362 | }
363 | .about-container {
364 |   display: flex;
365 |   justify-content: flex-start;
366 | }
367 | .director-content {
368 |   margin-left: 0;
369 |   margin: 0.5em;
370 |   font-size: 14px;
371 |   line-height: 20px;
372 |   word-break: break-word;
373 |   text-align: left;
374 | }
375 | .original-dil-content {
376 |   margin-left: 0;
377 |   margin: 0.5em;
378 |   font-size: 14px;
379 |   line-height: 20px;
380 |   word-break: break-word;
381 |   text-align: left;
382 | }
383 | .genres-content {
384 |   margin-left: 0;
385 |   margin: 0.5em;
386 |   font-size: 14px;
387 |   line-height: 20px;
388 |   word-break: break-word;
389 |   text-align: left;
390 | }
391 | .cast-content {
392 |   margin-left: 0;
393 |   margin: 0.5em;
394 |   font-size: 14px;
395 |   line-height: 20px;
396 |   text-align: left;
397 |   word-break: break-word;
398 | }
399 | .about-wrapper {
400 |   background-color: #181818;
401 |   margin-left: 5px;
402 | }
403 | .divider-border {
404 |   border-bottom: 2px solid #404040;
405 |   height: 6em;
406 | }
407 | .divider {
408 |   margin-top: 300px;
409 | }
410 | .images-modal-show {
411 |   top: 0;
412 |   height: 100%;
413 |   width: 100%;
414 |   position: relative;
415 | }
416 | .img-show {
417 |   transition: 2000ms all;
418 |   position: relative;
419 | }
420 | .youtube-container {
421 |   background: #1414147e;
422 |   position: fixed;
423 |   height: 435px;
424 | }
425 | #youtube-vue-player-soma {
426 |   position: relative;
427 | }
428 | .imagesopacity {
429 |   opacity: 0;
430 |   transition: 300ms all;
431 | }
432 | .youtubeVideo {
433 |   position: relative;
434 |   border-top-left-radius: 6px;
435 |   border-top-right-radius: 6px;
436 |   height: 435px;
437 |   opacity: 0.5;
438 |   background: #1414147e;
439 | }
440 | .date-mini-modal {
441 |   position: absolute;
442 |   bottom: 0;
443 |   margin-bottom: 3px;
444 | }
445 | .title-mini-modal {
446 |   display: flex;
447 |   align-items: center;
448 |   justify-content: center;
449 |   color: rgb(204, 203, 203);
450 | }
451 | /* minicardcss */
452 | .img-container {
453 |   position: relative;
454 |   width: 100%;
455 | }
456 | .container-modal-mini {
457 |   display: flex;
458 |   margin-left: 15px;
459 |   align-items: flex-start;
460 | }
461 | .img-container img {
462 |   width: 100%;
463 |   height: auto;
464 |   border-top-left-radius: 5px;
465 |   border-top-right-radius: 5px;
466 |   object-fit: fill;
467 | }
468 | 
469 | .content {
470 |   width: 100%;
471 |   height: 150px;
472 |   box-sizing: border-box;
473 |   padding: 15px 20px 20px;
474 | }
475 | 
476 | .story {
477 |   text-align: center;
478 |   margin-right: auto;
479 |   margin-bottom: 12px;
480 | }
481 | 
482 | .story span {
483 |   color: #fff;
484 |   text-transform: uppercase;
485 | }
486 | 
487 | .story p {
488 |   font-size: 14px;
489 |   margin-top: 5px;
490 | }
491 | 
492 | /* minicardcss */
493 | .benzerleri {
494 |   width: 240px;
495 |   height: 130;
496 |   background: #2f2f2f;
497 |   border-radius: 5px;
498 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
499 |   margin-bottom: 15px;
500 |   margin-right: 8px;
501 |   padding-right: 0px !important;
502 |   padding-left: 0px !important;
503 |   align-items: center;
504 | }
505 | .benzer-span {
506 |   display: flex;
507 |   justify-content: flex-start;
508 |   font-weight: 600;
509 |   font-size: 24px;
510 |   margin-bottom: 20px;
511 |   margin-top: 48px;
512 | }
513 | .tagline {
514 |   margin-top: 10px;
515 |   display: flex;
516 | }
517 | .tagline span {
518 |   justify-content: flex-start;
519 | }
520 | .date {
521 |   white-space: nowrap;
522 |   margin-left: 5px;
523 | }
524 | .cast {
525 |   margin-bottom: 5px;
526 |   justify-content: flex-start;
527 |   display: flex;
528 | }
529 | .original-dil {
530 |   margin-bottom: 5px;
531 |   margin-right: auto;
532 | }
533 | .director {
534 |   margin-right: auto;
535 | }
536 | .puan {
537 |   width: 30px;
538 |   text-align: center;
539 |   justify-content: space-between;
540 |   display: flex;
541 | }
542 | .col-sm-right {
543 |   display: flex;
544 |   flex-direction: column;
545 |   margin-left: 20px;
546 | }
547 | .genres {
548 |   display: flex;
549 |   align-items: center;
550 |   text-align: center;
551 |   margin: 0px !important;
552 | }
553 | .genres-text {
554 |   margin-left: 2px;
555 |   bottom: 0;
556 |   align-items: center;
557 |   justify-content: center;
558 |   margin: 0px !important;
559 |   padding-left: 5px;
560 | }
561 | .detail-container {
562 |   padding: 0 3em;
563 |   text-align: center;
564 |   background: #181818;
565 | }
566 | .Pborder {
567 |   border: solid 1px rgba(255, 255, 255, 0.4);
568 |   padding: 0 0.5em;
569 |   white-space: nowrap;
570 | }
571 | .list-icon-left-modal i {
572 |   text-align: center;
573 |   padding: 17px;
574 |   border: 2px solid rgb(119, 119, 119);
575 |   border-radius: 50%;
576 |   margin-right: 4px;
577 |   color: #dbdbdb;
578 |   cursor: pointer;
579 |   background-color: #2a2a2ad3;
580 |   width: 60px;
581 |   height: 60px;
582 |   font-size: 20px;
583 |   justify-content: center;
584 | }
585 | 
586 | .title-modal {
587 |   margin-left: 15px;
588 | }
589 | .list-icon-left-modal i:hover,
590 | .list-icon-right svg:hover {
591 |   background-color: #1a1919;
592 |   border-color: #fff;
593 | }
594 | .modal-title {
595 |   position: relative;
596 |   left: 3em;
597 |   bottom: 220px;
598 |   align-items: center;
599 |   width: auto;
600 |   display: flex;
601 | }
602 | .btn-modal {
603 |   position: relative;
604 |   left: 3em;
605 |   bottom: 200px;
606 |   align-items: center;
607 |   width: 400px;
608 |   display: flex;
609 | }
610 | .button {
611 |   border: none;
612 |   background: rgba(78, 78, 78, 0.562);
613 |   color: #e9e9e9;
614 |   font-size: 15px;
615 |   font-weight: bold;
616 |   text-align: center;
617 |   transition: transform 0.5s;
618 |   border-radius: 4px;
619 | }
620 | .button:hover {
621 |   border: none;
622 |   cursor: pointer;
623 |   background: rgba(78, 78, 78, 0.2);
624 |   color: #fff;
625 | }
626 | .button span {
627 |   padding-left: 10px;
628 | }
629 | #buttonPlay {
630 |   width: 130px;
631 |   height: 44px;
632 |   margin-right: 10px;
633 |   background-color: #fff;
634 |   color: black;
635 | }
636 | 
637 | .close-icon {
638 |   position: absolute;
639 |   top: 15px;
640 |   font-size: 30px;
641 |   right: 5px;
642 |   color: rgba(180, 179, 179, 0.432);
643 |   z-index: 1;
644 |   cursor: pointer;
645 | }
646 | .close-icon i {
647 |   position: absolute;
648 | }
649 | .vue-neat-modal--fullscreen .card {
650 |   border-radius: 0;
651 | }
652 | .body.vue-neat-modal-open {
653 |   overflow: unset !important;
654 | }
655 | .modal-container {
656 |   position: relative;
657 |   top: 0;
658 |   transform: translateX(0px) translateY(calc(24px + 2em)) scaleX(1) scaleY(1)
659 |     translateZ(0px);
660 |   color: #fff;
661 |   font-size: 16px;
662 |   z-index: 2;
663 |   height: 800px;
664 |   border-radius: 10px;
665 |   overflow: scroll;
666 |   box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
667 |   width: 850px;
668 |   margin-bottom: 20px;
669 | }
670 | .card {
671 |   background-color: #212529;
672 |   border-radius: 6px;
673 |   height: auto;
674 | }
675 | 
676 | .img-modal {
677 |   position: relative;
678 |   border-top-left-radius: 6px;
679 |   border-top-right-radius: 6px;
680 |   height: 440px;
681 |   opacity: 1;
682 | }
683 | .images-modal {
684 |   top: 0;
685 |   height: 100%;
686 |   width: 100%;
687 |   position: relative;
688 | }
689 | .images-modal:after {
690 |   content: "";
691 |   display: block;
692 |   position: absolute;
693 |   width: 100%;
694 |   height: 55%;
695 |   bottom: 0;
696 |   background: -webkit-linear-gradient(to top, #181818, transparent 50%);
697 |   background: linear-gradient(to top, #181818, transparent 50%);
698 | }
699 | 
700 | .images-modal img {
701 |   width: 100%;
702 |   height: 100%;
703 |   opacity: 1;
704 |   position: relative;
705 | }
706 | .images-bla {
707 |   position: relative;
708 | }
709 | .card h1 {
710 |   margin-top: 0;
711 | }
712 | .vue-neat-modal {
713 |   margin: 50% !important;
714 |   overflow-y: unset !important;
715 | }
716 | </style>


--------------------------------------------------------------------------------
/src/components/register/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <header class="showcase">
  4 |       <div class="logo">
  5 |         <img src="https://i.ibb.co/r5krrdz/logo.png" />
  6 |       </div>
  7 | 
  8 |       <div class="showcase-content">
  9 |         <div class="formm" style="margin-bottom: 10px !important">
 10 |           <form>
 11 |             <h1>Kayıt ol</h1>
 12 |             <div class="info">
 13 |               <input
 14 |                 v-model="userData.full_name"
 15 |                 class="name"
 16 |                 type="name"
 17 |                 placeholder="Ad Soyad"
 18 |               />
 19 |               <input
 20 |                 v-model="userData.email"
 21 |                 class="email"
 22 |                 type="email"
 23 |                 placeholder="E‑posta veya telefon numarası"
 24 |               />
 25 |               <br />
 26 |               <input
 27 |                 v-model="userData.password"
 28 |                 class="email"
 29 |                 type="current-password"
 30 |                 placeholder="Parola"
 31 |               />
 32 |             </div>
 33 |             <div class="btn">
 34 |               <button
 35 |                 @click="onSave({ ...userData })"
 36 |                 class="btn-red"
 37 |                 type="submit"
 38 |               >
 39 |                 Kayıt ol
 40 |               </button>
 41 |             </div>
 42 |             <div class="help">
 43 |               <p>
 44 |                 Hesabım var
 45 | 
 46 |                 <router-link to="/login">
 47 |                   <a href="https://www.netflix.com/dz-en/">
 48 |                     <strong>Giriş yap</strong>
 49 |                   </a></router-link
 50 |                 >
 51 |               </p>
 52 |             </div>
 53 |           </form>
 54 |         </div>
 55 | 
 56 |         <div class="fcbk" style="margin-bottom: 10px!">
 57 |           <a href="https://facebook.com">
 58 |             <img src="https://i.ibb.co/LrVMXNR/social-fb.png" alt="Facebook" />
 59 |           </a>
 60 |           <p>Facebook ile Oturum aç</p>
 61 |         </div>
 62 | 
 63 |         <div class="more">
 64 |           <p>
 65 |             Bu sayfa robot olmadığınızı kanıtlamak için Google reCAPTCHA
 66 |             tarafından korunuyor. <a href="#">Daha fazlasını öğrenin.</a>
 67 |           </p>
 68 |         </div>
 69 |       </div>
 70 |       <footer>
 71 |         <div class="ftr-content">
 72 |           <div class="contact">
 73 |             <a href="#">
 74 |               <span
 75 |                 >Sorularınız mı var? 0850-390-7444 numaralı telefonu
 76 |                 arayın</span
 77 |               >
 78 |             </a>
 79 |           </div>
 80 |           <div class="ftr">
 81 |             <a href="#"> <span>SSS</span> </a>
 82 |             <a href="#"><span>Çerez Tercihleri</span> </a>
 83 |             <a href="#"> <span>Yardım Merkezi</span> </a>
 84 |             <a href="#"> <span>Kurumsal Bilgiler</span> </a>
 85 |             <a href="#"> <span> Kullanım Koşulları</span></a>
 86 |             <a href="#"> <span>Gizlilik</span> </a>
 87 |           </div>
 88 |           <div class="select">
 89 |             <select>
 90 |               <option>Türkçe</option>
 91 |               <option>English</option>
 92 |             </select>
 93 |           </div>
 94 |         </div>
 95 |       </footer>
 96 |     </header>
 97 |   </div>
 98 | </template>
 99 | <script>
100 | import { mapActions } from "vuex";
101 | export default {
102 |   data() {
103 |     return {
104 |       userData: {
105 |         full_name: null,
106 |         email: null,
107 |         password: null,
108 |       },
109 |     };
110 |   },
111 |   methods: {
112 |     ...mapActions({
113 |       onSave: "users/register",
114 |     }),
115 |    
116 |   },
117 | };
118 | </script>
119 | <style>
120 | * {
121 |   box-sizing: border-box;
122 |   margin: 0;
123 |   padding: 0;
124 | }
125 | 
126 | .body {
127 |   font-family: "Arial", sans-serif;
128 |   -webkit-font-smoothing: antialiased;
129 |   color: #999;
130 |   background: #141414;
131 |   width: 100%;
132 |   height: 100vh;
133 |   position: relative;
134 |   background: url("https://i.ibb.co/vXqDmnh/background.jpg") no-repeat center
135 |     center/cover;
136 | }
137 | 
138 | ul {
139 |   list-style: none;
140 | }
141 | 
142 | h1,
143 | h2,
144 | h3,
145 | h4 {
146 |   color: #fff;
147 | }
148 | 
149 | a {
150 |   color: #fff;
151 |   text-decoration: none;
152 | }
153 | 
154 | p {
155 |   margin: 0.5rem 0;
156 | }
157 | 
158 | img {
159 |   width: 100%;
160 | }
161 | 
162 | .showcase::after {
163 |   content: "";
164 |   position: absolute;
165 |   top: 0;
166 |   left: 0;
167 |   width: 100%;
168 |   height: 100%;
169 |   z-index: 1;
170 |   background: rgba(0, 0, 0, 0.65);
171 |   box-shadow: inset 30px 10px 150px #000000;
172 | }
173 | 
174 | .logo {
175 |   position: relative;
176 |   z-index: 2;
177 |   height: 90px;
178 | }
179 | 
180 | .logo img {
181 |   width: 170px;
182 |   position: absolute;
183 |   top: 20px;
184 |   left: 40px;
185 | }
186 | 
187 | .showcase-content {
188 |   position: relative;
189 |   z-index: 2;
190 |   width: 450px;
191 |   height: 645px;
192 |   background: rgb(0, 0, 0, 0.65);
193 |   margin: 0 auto;
194 |   display: flex;
195 |   flex-direction: column;
196 |   justify-content: flex-start;
197 |   align-items: flex-start;
198 |   text-align: left;
199 |   padding: 60px 65px;
200 |   border-radius: 5px;
201 | }
202 | 
203 | .formm h1 {
204 |   margin-bottom: 20px;
205 | }
206 | 
207 | .formm {
208 |   width: 100%;
209 |   margin-bottom: 40px;
210 | }
211 | 
212 | .formm .info {
213 |   padding: 5px 0;
214 |   /* margin-bottom: 20px; */
215 | }
216 | 
217 | .formm .info .email {
218 |   margin-bottom: 30px;
219 |   width: 100%;
220 |   height: 50px;
221 |   border-radius: 5px;
222 |   border: none;
223 |   padding: 10px;
224 |   font-size: inherit;
225 |   color: #fff;
226 |   background: #343434;
227 | }
228 | .name {
229 |   margin-bottom: 30px;
230 |   width: 100%;
231 |   height: 50px;
232 |   border-radius: 5px;
233 |   border: none;
234 |   padding: 10px;
235 |   font-size: inherit;
236 |   color: #fff;
237 | }
238 | 
239 | .formm .btn {
240 |   margin-bottom: 20px;
241 |   width: 100%;
242 | }
243 | 
244 | .btn-red {
245 |   width: 100%;
246 |   height: 50px;
247 |   border-radius: 5px;
248 |   background: red;
249 |   color: #fff;
250 |   font-size: inherit;
251 |   font-weight: bold;
252 |   border: none;
253 |   cursor: pointer;
254 |   outline: none;
255 |   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
256 | }
257 | 
258 | .help {
259 |   display: flex;
260 |   justify-content: space-between;
261 |   font-size: 0.8rem;
262 | }
263 | 
264 | .help a {
265 |   color: #999;
266 | }
267 | 
268 | .help a:hover {
269 |   text-decoration: underline;
270 | }
271 | 
272 | /* ------ input ------- */
273 | 
274 | input[type="checkbox"] {
275 |   background: #737373;
276 |   -webkit-border-radius: 2px;
277 |   -moz-border-radius: 2px;
278 |   border-radius: 2px;
279 |   border: 0;
280 |   height: 16px;
281 |   left: -20px;
282 |   width: 16px;
283 |   margin-right: 5px;
284 | }
285 | 
286 | input[type="name"] {
287 |   background: #343434;
288 | }
289 | 
290 | input[type="password"] {
291 |   background: #343434;
292 | }
293 | 
294 | /* ------ input end ------- */
295 | 
296 | .fcbk {
297 |   width: 100%;
298 |   display: flex;
299 |   align-items: center;
300 |   justify-content: flex-start;
301 |   font-size: 0.8em;
302 | }
303 | .beni-hatirla {
304 |   display: flex;
305 | }
306 | 
307 | .fcbk img {
308 |   width: 20px;
309 |   margin-right: 10px;
310 | }
311 | 
312 | .signup {
313 |   width: 100%;
314 |   display: flex;
315 |   align-items: center;
316 |   justify-content: flex-start;
317 | }
318 | 
319 | .signup p {
320 |   margin-right: 5px;
321 | }
322 | 
323 | .more {
324 |   font-size: 0.8em;
325 |   line-height: 1.1em;
326 | }
327 | 
328 | /* ------ FOOTER ------- */
329 | 
330 | footer {
331 |   position: absolute;
332 |   z-index: 2;
333 |   background: rgb(0, 0, 0, 0.65);
334 |   width: 100%;
335 |   height: 250px;
336 |   display: flex;
337 |   margin-top: 81px;
338 |   justify-content: flex-start;
339 | }
340 | 
341 | .ftr-content {
342 |   margin-left: 10%;
343 |   padding-top: 20px;
344 |   font-size: 1em;
345 | }
346 | 
347 | .ftr-content span {
348 |   color: #999;
349 |   padding: 0;
350 |   margin-bottom: 16px;
351 |   min-width: 100px;
352 |   width: 25%;
353 |   padding-right: 12px;
354 |   vertical-align: top;
355 |   margin-right: 50px;
356 | }
357 | .ftr-content span:hover {
358 |   text-decoration: none;
359 | }
360 | .ftr-content a:hover {
361 |   text-decoration: none;
362 | }
363 | 
364 | .contact {
365 |   margin-bottom: 30px;
366 |   position: relative;
367 |   text-align: start;
368 |   height: auto;
369 | }
370 | 
371 | .contact a:hover {
372 |   text-decoration: underline;
373 | }
374 | 
375 | .ftr {
376 |   margin-bottom: 30px;
377 |   width: 100%;
378 |   font-size: 0.8em;
379 |   display: flex;
380 |   text-align: start;
381 |   margin-right: 30px;
382 | }
383 | 
384 | .select {
385 |   width: 100px;
386 |   height: 40px;
387 |   border: none;
388 |   font-size: inherit;
389 |   padding-left: 10px;
390 |   background: #333333;
391 |   text-align: start;
392 | }
393 | .select select {
394 |   width: 80px;
395 |   height: 40px;
396 |   border: none;
397 |   font-size: inherit;
398 |   color: #999;
399 |   background: #333333;
400 |   text-align: start;
401 | }
402 | </style>


--------------------------------------------------------------------------------
/src/components/series/backgroundSeries.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="nextReleasesContainer">
 4 |       <div class="videoContainer">
 5 |         <video autoplay muted loop src="@/assets/narcosvideo.mp4"></video>
 6 |       </div>
 7 | 
 8 |       <div class="containerReleases">
 9 |         <h1>N A R C O S</h1>
10 |         <p class="fs-5">
11 |           Bu gangster dizisinde, Kolombiya'nın şiddet dolu ve güçlü uyuşturucu
12 |           kartellerinin gerçek hikayesini izleyeceksiniz.
13 |         </p>
14 |         <button id="buttonPlay">
15 |           <i class="fas fa-play"></i>
16 | 
17 |           <span>Oynat</span>
18 |         </button>
19 |         <button id="buttonInfo">
20 |           <i class="fas fa-info-circle"></i>
21 | 
22 |           <span> Daha fazla bilgi al</span>
23 |         </button>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | <style>
29 | .videoContainer:after {
30 |   content: "";
31 |   display: block;
32 |   position: absolute;
33 |   width: 100%;
34 |   height: 55%;
35 |   bottom: 0;
36 |   background: -webkit-linear-gradient(to top, #181818, transparent 50%);
37 |   background: linear-gradient(to top, #181818, transparent 50%);
38 | }
39 | </style>


--------------------------------------------------------------------------------
/src/components/series/diziler.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="populer-diziler">
  3 |     <div class="text-span">
  4 |       <span>Popüler Diziler</span>
  5 |     </div>
  6 | 
  7 |     <swiper
  8 |       :slides-per-view="7"
  9 |       :space-between="50"
 10 |       @swiper="onSwiper"
 11 |       @slideChange="onSlideChange"
 12 |       :mousewheel-control="false"
 13 |       :performance-mode="false"
 14 |       :pagination-visible="true"
 15 |       :pagination-clickable="false"
 16 |       :autoScrollOffset="0"
 17 |       :draggable="false"
 18 |       :mousewheel="false"
 19 |       class="item ms-5 swiper-scrollbar-lock"
 20 |     >
 21 |       <swiper-slide
 22 |         v-for="popularList in seriesPopularList"
 23 |         :key="popularList.id"
 24 |       >
 25 |         <div class="ms-2 me-2 movie_card item">
 26 |           <img
 27 |             :src="'http://image.tmdb.org/t/p/w500/' + popularList.poster_path"
 28 |             class="card-img-top"
 29 |             alt="..."
 30 |           />
 31 |           <div class="film_info" v-if="isAuthenticated">
 32 |             <div class="list-icon-left">
 33 |               <a
 34 |                 ><i class="fas fa-play" style="background: white; color: black">
 35 |                 </i
 36 |               ></a>
 37 | 
 38 |               <a @click="addFavorite(popularList)"
 39 |                 ><i class="fas fa-plus toolTip">
 40 |                   <span class="toolTiptext-sm tool-span-sm">
 41 |                     Listeme ekle
 42 |                   </span>
 43 |                 </i></a
 44 |               >
 45 |               <a
 46 |                 ><i class="fas fa-chevron-down toolTip">
 47 |                   <span class="toolTiptext-sm tool-span-sm">
 48 |                     Daha fazla bilgi
 49 |                   </span>
 50 |                 </i></a
 51 |               >
 52 |             </div>
 53 |           </div>
 54 |         </div>
 55 |       </swiper-slide>
 56 |     </swiper>
 57 |   </div>
 58 | </template>
 59 | <script>
 60 | // Import Swiper Vue.js components
 61 | import { Swiper, SwiperSlide } from "swiper/vue";
 62 | import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
 63 | 
 64 | // Import Swiper styles
 65 | import "swiper/components/navigation/navigation.scss";
 66 | import "swiper/swiper.scss";
 67 | import axios from "axios";
 68 | import modals from "@/components/modal/modals";
 69 | import { mapGetters } from "vuex";
 70 | 
 71 | SwiperCore.use([Navigation, Pagination, A11y]);
 72 | export default {
 73 |   components: {
 74 |     Swiper,
 75 |     SwiperSlide,
 76 |     Navigation,
 77 |     modals,
 78 |   },
 79 |   data() {
 80 |     return {
 81 |       seriesPopularList: [],
 82 |       isOpen: false,
 83 |     };
 84 |   },
 85 |   methods: {
 86 |     addFavorite(popularList) {
 87 |       axios
 88 |         .post("http://localhost:3000/favorites", {
 89 |           ...popularList,
 90 |           isFavorite: true,
 91 |         })
 92 |         .then((response) => {
 93 |           console.log(response);
 94 |         })
 95 |         .catch((err) => console.log(err));
 96 |     },
 97 |     showDetail(popularList) {
 98 |       console.log("populardatacek ", popularList);
 99 |       this.isOpen = !this.isOpen;
100 |       this.modalId = popularList.id;
101 |       this.modalData = popularList;
102 |       axios
103 |         .get(
104 |           `https://api.themoviedb.org/3/movie/${popularList.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos`
105 |         )
106 |         .then((response) => {
107 |           console.log("iddetailvideos", response);
108 |           this.popularList = response.data.results;
109 |           this.modalId.data.cast = cast;
110 |         });
111 |       let cast;
112 |       for (i = 0; i < 6; i++) {
113 |         array.push(cast[i]);
114 |       }
115 |     },
116 |     onSwiper(swiper) {
117 |       console.log(swiper);
118 |     },
119 |     onSlideChange() {
120 |       console.log("slide change");
121 |     },
122 |   },
123 |   created() {
124 |     axios
125 |       .get(
126 |         "https://api.themoviedb.org/3/tv/popular?api_key=<//APIKEY\\>&language=en-US&page=1"
127 |       )
128 |       .then((response) => {
129 |         console.log("seriesPopularList", response);
130 |         this.seriesPopularList = response.data.results;
131 |       });
132 |   },
133 |   computed: {
134 |     ...mapGetters({
135 |       isAuthenticated: "users/isAuthenticated",
136 |     }),
137 |   },
138 | };
139 | </script>


--------------------------------------------------------------------------------
/src/components/series/myList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="contanier-text">
  4 |       <div class="icerik contanier-text-title text-white">
  5 |         <div class="text-span" style="margin-left: 0px; margin-top: 0px">
  6 |           <span> Listem </span>
  7 |         </div>
  8 |         <div class="row">
  9 |           <div
 10 |             v-for="favori in favoriteList"
 11 |             :key="favori.id"
 12 |             class="ms-2 me-2 movie_card"
 13 |           >
 14 |             <img
 15 |               :src="'http://image.tmdb.org/t/p/w500/' + favori.poster_path"
 16 |               class="card-img-top"
 17 |               alt="..."
 18 |             />
 19 |             <div class="film_info">
 20 |               <div class="list-icon-left">
 21 |                 <a
 22 |                   ><i
 23 |                     class="fas fa-play"
 24 |                     style="background: white; color: black"
 25 |                   >
 26 |                   </i
 27 |                 ></a>
 28 | 
 29 |                 <a @click="deleteItem(favori)"
 30 |                   ><i class="fas fa-check toolTip">
 31 |                     <span
 32 |                       class="toolTiptext-sm tool-span-sm"
 33 |                       style="width: 100px; left: 25% !important"
 34 |                     >
 35 |                       Listemden Çıkar
 36 |                     </span>
 37 |                   </i></a
 38 |                 >
 39 |                 <a @click="showDetail(favori)">
 40 |                   <i class="fas fa-chevron-down toolTip">
 41 |                     <span class="toolTiptext-sm tool-span-sm">
 42 |                       Daha fazla bilgi
 43 |                     </span>
 44 |                   </i>
 45 |                 </a>
 46 |               </div>
 47 |             </div>
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 |     </div>
 52 | 
 53 |     <modals
 54 |       :modalData="modalData"
 55 |       :modalId="modalId"
 56 |       :videoId="videoId"
 57 |       v-model="isOpen"
 58 |     />
 59 |   </div>
 60 | </template>
 61 | <script>
 62 | import axios from "axios";
 63 | import modals from "@/components/modal/modals";
 64 | 
 65 | export default {
 66 |   components: { modals },
 67 |   data() {
 68 |     return {
 69 |       favoriteList: [],
 70 |       isOpen: false,
 71 |       modalData: [],
 72 |       modalId: [],
 73 |       videoId: [],
 74 |       showLoading: true,
 75 |     };
 76 |   },
 77 |   methods: {
 78 |     async showDetail(favori) {
 79 |       this.showLoading = true;
 80 |       try {
 81 |         await axios
 82 |           .get(
 83 |             `https://api.themoviedb.org/3/movie/${favori.id}?api_key=7b97ca5600ae944d697e04e778928d05&language=en-US&append_to_response=videos,credits,release_dates,similar`
 84 |           )
 85 |           .then((response) => {
 86 |             console.log("iddetailvideos", response);
 87 |             this.modalId = response.data;
 88 |             this.modalData = favori;
 89 |           });
 90 | 
 91 |         console.log("modalDatas", this.modalData);
 92 |         this.isOpen = true;
 93 | 
 94 |         this.videoId = this.modalId.videos.results;
 95 |         console.log("this.videoId :>> ", this.videoId);
 96 |       } catch (error) {
 97 |         console.error(error);
 98 |       } finally {
 99 |         this.showLoading = false;
100 |       }
101 |     },
102 |     deleteItem(favori) {
103 |       axios
104 |         .delete(`http://localhost:3000/favorites/${favori.id}`)
105 |         .then((delete_response) => {
106 |           console.log("Delete Response", delete_response);
107 |           this.favoriteList = this.favoriteList.filter(
108 |             (i) => i.id != favori.id
109 |           );
110 |         })
111 |         .catch((err) => console.log(err));
112 |     },
113 |   },
114 |   created() {
115 |     axios.get("http://localhost:3000/favorites").then((requests) => {
116 |       console.log("favorilistesiçekildi", requests);
117 |       this.favoriteList = requests.data;
118 |     });
119 |   },
120 | };
121 | </script>
122 | <style>
123 | .listem-container {
124 |   top: -200px;
125 | }
126 | .swiper-container {
127 |   top: 0 !important;
128 | }
129 | .text-span {
130 |   margin-bottom: 0px !important;
131 | }
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/components/series/netflix.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gunun-populer-dizile">
  3 |     <div class="text-span">
  4 |       <span> Günün Popüler Dizileri </span>
  5 |     </div>
  6 | 
  7 |     <swiper
  8 |       :slides-per-view="7"
  9 |       :space-between="50"
 10 |       @swiper="onSwiper"
 11 |       @slideChange="onSlideChange"
 12 |       :mousewheel-control="false"
 13 |       :performance-mode="false"
 14 |       :pagination-visible="true"
 15 |       :pagination-clickable="false"
 16 |       navigation
 17 |       class="item ms-5"
 18 |     >
 19 |       <swiper-slide v-for="seriesList in seriesList" :key="seriesList.id">
 20 |         <div class="ms-2 me-2 movie_card item">
 21 |           <img
 22 |             :src="'http://image.tmdb.org/t/p/w500/' + seriesList.poster_path"
 23 |             class="card-img-top"
 24 |             alt="..."
 25 |           />
 26 |           <div class="film_info" v-if="isAuthenticated">
 27 |             <div class="list-icon-left">
 28 |               <a
 29 |                 ><i class="fas fa-play" style="background: white; color: black">
 30 |                 </i
 31 |               ></a>
 32 | 
 33 |               <a @click="addFavorite(seriesList)"
 34 |                 ><i class="fas fa-plus toolTip">
 35 |                   <span class="toolTiptext-sm tool-span-sm">
 36 |                     Listeme ekle
 37 |                   </span>
 38 |                 </i></a
 39 |               >
 40 |               <i class="fas fa-chevron-down toolTip">
 41 |                 <span class="toolTiptext-sm tool-span-sm">
 42 |                   Daha fazla bilgi
 43 |                 </span>
 44 |               </i>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |       </swiper-slide>
 49 |     </swiper>
 50 |   </div>
 51 | </template>
 52 | <script>
 53 | // Import Swiper Vue.js components
 54 | import { Swiper, SwiperSlide } from "swiper/vue";
 55 | import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";
 56 | 
 57 | // Import Swiper styles
 58 | import "swiper/components/navigation/navigation.scss";
 59 | import "swiper/swiper.scss";
 60 | import axios from "axios";
 61 | import { mapGetters } from 'vuex';
 62 | 
 63 | SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 64 | export default {
 65 |   components: {
 66 |     Swiper,
 67 |     SwiperSlide,
 68 |     Navigation,
 69 |   },
 70 |   data() {
 71 |     return {
 72 |       seriesList: [],
 73 |     };
 74 |   },
 75 |   methods: {
 76 |     addFavorite(seriesList) {
 77 |       axios
 78 |         .post("http://localhost:3000/favorites", {
 79 |           ...seriesList,
 80 |           isFavorite: true,
 81 |         })
 82 |         .then((response) => {
 83 |           console.log(response);
 84 |         })
 85 |         .catch((err) => console.log(err));
 86 |     },
 87 |     onSwiper(swiper) {
 88 |       console.log(swiper);
 89 |     },
 90 |     onSlideChange() {
 91 |       console.log("slide change");
 92 |     },
 93 |   },
 94 |   created() {
 95 |     axios
 96 |       .get(
 97 |         "https://api.themoviedb.org/3/trending/tv/day?api_key=<//APIKEY\\>"
 98 |       )
 99 |       .then((response) => {
100 |         console.log("seriesList", response);
101 |         this.seriesList = response.data.results;
102 |       });
103 |   },
104 |   computed: {
105 |     ...mapGetters({
106 |       isAuthenticated: "users/isAuthenticated",
107 |     }),
108 |   },
109 | };
110 | </script>


--------------------------------------------------------------------------------
/src/components/series/onerilenBreaking.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="onerilen-breaking">
  3 |     <div class="text-span">
  4 |       <span> Breaking Bad Adlı Diziyi İzleyenlere Önerilenler </span>
  5 |     </div>
  6 | 
  7 |     <swiper
  8 |       :slides-per-view="7"
  9 |       :space-between="50"
 10 |       @swiper="onSwiper"
 11 |       @slideChange="onSlideChange"
 12 |       :mousewheel-control="false"
 13 |       :performance-mode="false"
 14 |       :pagination-visible="true"
 15 |       :pagination-clickable="false"
 16 |       navigation
 17 |       class="item ms-5"
 18 |     >
 19 |       <swiper-slide v-for="seriesList in seriesList" :key="seriesList.id">
 20 |         <div class="ms-2 me-2 movie_card item">
 21 |           <img
 22 |             :src="'http://image.tmdb.org/t/p/w500/' + seriesList.poster_path"
 23 |             class="card-img-top"
 24 |             alt="..."
 25 |           />
 26 |           <div class="film_info" v-if="isAuthenticated">
 27 |             <div class="list-icon-left">
 28 |               <a
 29 |                 ><i class="fas fa-play" style="background: white; color: black">
 30 |                 </i
 31 |               ></a>
 32 | 
 33 |               <a @click="addFavorite(seriesList)"
 34 |                 ><i class="fas fa-plus toolTip">
 35 |                   <span class="toolTiptext-sm tool-span-sm">
 36 |                     Listeme ekle
 37 |                   </span>
 38 |                 </i></a
 39 |               >
 40 |               <i class="fas fa-chevron-down toolTip">
 41 |                 <span class="toolTiptext-sm tool-span-sm">
 42 |                   Daha fazla bilgi
 43 |                 </span>
 44 |               </i>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |       </swiper-slide>
 49 |     </swiper>
 50 |   </div>
 51 | </template>
 52 | <script>
 53 | // Import Swiper Vue.js components
 54 | import { Swiper, SwiperSlide } from "swiper/vue";
 55 | import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";
 56 | 
 57 | // Import Swiper styles
 58 | import "swiper/components/navigation/navigation.scss";
 59 | import "swiper/swiper.scss";
 60 | import axios from "axios";
 61 | import { mapGetters } from "vuex";
 62 | 
 63 | SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 64 | export default {
 65 |   components: {
 66 |     Swiper,
 67 |     SwiperSlide,
 68 |     Navigation,
 69 |   },
 70 |   data() {
 71 |     return {
 72 |       seriesList: [],
 73 |     };
 74 |   },
 75 |   methods: {
 76 |     addFavorite(seriesList) {
 77 |       axios
 78 |         .post("http://localhost:3000/favorites", {
 79 |           ...seriesList,
 80 |           isFavorite: true,
 81 |         })
 82 |         .then((response) => {
 83 |           console.log(response);
 84 |         })
 85 |         .catch((err) => console.log(err));
 86 |     },
 87 |     onSwiper(swiper) {
 88 |       console.log(swiper);
 89 |     },
 90 |     onSlideChange() {
 91 |       console.log("slide change");
 92 |     },
 93 |   },
 94 |   created() {
 95 |     axios
 96 |       .get(
 97 |         "https://api.themoviedb.org/3/tv/1396/recommendations?api_key=<//APIKEY\\>&language=en-US&page=1"
 98 |       )
 99 |       .then((response) => {
100 |         console.log("seriesList", response);
101 |         this.seriesList = response.data.results;
102 |       });
103 |   },
104 |   computed: {
105 |     ...mapGetters({
106 |       isAuthenticated: "users/isAuthenticated",
107 |     }),
108 |   },
109 | };
110 | </script>


--------------------------------------------------------------------------------
/src/components/series/onerilenDiziler.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="narcos-onerilen">
  3 |     <div class="text-span">
  4 |       <span> Narcos Adlı Diziyi İzleyenlere Önerilenler </span>
  5 |     </div>
  6 | 
  7 |     <swiper
  8 |       :slides-per-view="7"
  9 |       :space-between="50"
 10 |       @swiper="onSwiper"
 11 |       @slideChange="onSlideChange"
 12 |       :mousewheel-control="false"
 13 |       :performance-mode="false"
 14 |       :pagination-visible="true"
 15 |       :pagination-clickable="false"
 16 |       navigation
 17 |       class="item ms-5"
 18 |     >
 19 |       <swiper-slide v-for="seriesList in seriesList" :key="seriesList.id">
 20 |         <div class="ms-2 me-2 movie_card item">
 21 |           <img
 22 |             :src="'http://image.tmdb.org/t/p/w500/' + seriesList.poster_path"
 23 |             class="card-img-top"
 24 |             alt="..."
 25 |           />
 26 |           <div class="film_info" v-if="isAuthenticated">
 27 |             <div class="list-icon-left">
 28 |               <a
 29 |                 ><i class="fas fa-play" style="background: white; color: black">
 30 |                 </i
 31 |               ></a>
 32 | 
 33 |               <a @click="addFavorite(seriesList)"
 34 |                 ><i class="fas fa-plus toolTip">
 35 |                   <span class="toolTiptext-sm tool-span-sm">
 36 |                     Listeme ekle
 37 |                   </span>
 38 |                 </i></a
 39 |               >
 40 |               <i class="fas fa-chevron-down toolTip">
 41 |                 <span class="toolTiptext-sm tool-span-sm">
 42 |                   Daha fazla bilgi
 43 |                 </span>
 44 |               </i>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |       </swiper-slide>
 49 |     </swiper>
 50 |   </div>
 51 | </template>
 52 | <script>
 53 | // Import Swiper Vue.js components
 54 | import { Swiper, SwiperSlide } from "swiper/vue";
 55 | import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";
 56 | 
 57 | // Import Swiper styles
 58 | import "swiper/components/navigation/navigation.scss";
 59 | import "swiper/swiper.scss";
 60 | import axios from "axios";
 61 | import { mapGetters } from 'vuex';
 62 | 
 63 | SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 64 | export default {
 65 |   components: {
 66 |     Swiper,
 67 |     SwiperSlide,
 68 |     Navigation,
 69 |   },
 70 |   data() {
 71 |     return {
 72 |       seriesList: [],
 73 |     };
 74 |   },
 75 |   methods: {
 76 |     addFavorite(seriesList) {
 77 |       axios
 78 |         .post("http://localhost:3000/favorites", {
 79 |           ...seriesList,
 80 |           isFavorite: true,
 81 |         })
 82 |         .then((response) => {
 83 |           console.log(response);
 84 |         })
 85 |         .catch((err) => console.log(err));
 86 |     },
 87 |     onSwiper(swiper) {
 88 |       console.log(swiper);
 89 |     },
 90 |     onSlideChange() {
 91 |       console.log("slide change");
 92 |     },
 93 |   },
 94 |   created() {
 95 |     axios
 96 |       .get(
 97 |         "https://api.themoviedb.org/3/tv/63351/recommendations?api_key=<//APIKEY\\>&language=en-US&page=1"
 98 |       )
 99 |       .then((response) => {
100 |         console.log("", response);
101 |         this.seriesList = response.data.results;
102 |       });
103 |   },
104 |   computed: {
105 |     ...mapGetters({
106 |       isAuthenticated: "users/isAuthenticated",
107 |     }),
108 |   },
109 | };
110 | </script>


--------------------------------------------------------------------------------
/src/components/signUp/signUp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <header class="showcase">
  4 |       <div class="logo">
  5 |         <img src="https://i.ibb.co/r5krrdz/logo.png" />
  6 |       </div>
  7 | 
  8 |       <div class="showcase-content">
  9 |         <div class="formm">
 10 |           <form>
 11 |             <h1>Oturum Aç</h1>
 12 |             <div class="info">
 13 |               <input
 14 |                 v-model="userData.email"
 15 |                 class="email"
 16 |                 type="email"
 17 |                 placeholder="E‑posta veya telefon numarası"
 18 |               />
 19 |               <br />
 20 |               <input
 21 |                 v-model="userData.password"
 22 |                 class="email"
 23 |                 type="current-password"
 24 |                 placeholder="Parola"
 25 |               />
 26 |             </div>
 27 |             <div class="btn">
 28 |               <button @click="Loggin({ ...userData })" class="btn-red">
 29 |                 Oturum Aç
 30 |               </button>
 31 |             </div>
 32 |             <div class="help">
 33 |               <div class="beni-hatirla">
 34 |                 <input value="true" type="checkbox" /><label
 35 |                   >Beni hatırla</label
 36 |                 >
 37 |               </div>
 38 | 
 39 |               <a href="https://www.netflix.com/dz-en/LoginHelp"
 40 |                 >Yardım ister misiniz ?</a
 41 |               >
 42 |             </div>
 43 |           </form>
 44 |         </div>
 45 | 
 46 |         <div class="fcbk">
 47 |           <a href="https://facebook.com">
 48 |             <img src="https://i.ibb.co/LrVMXNR/social-fb.png" alt="Facebook" />
 49 |           </a>
 50 |           <p>Facebook ile Oturum aç</p>
 51 |         </div>
 52 |         <div class="signup">
 53 |           <p>
 54 |             Netflix'e katılmak istermisiniz ?
 55 | 
 56 |             <router-link to="/Register">
 57 |               <a href="https://www.netflix.com/dz-en/">
 58 |                 <strong>Şimdi Kaydolun.</strong>
 59 |               </a></router-link
 60 |             >
 61 |           </p>
 62 |         </div>
 63 | 
 64 |         <div class="more">
 65 |           <p>
 66 |             Bu sayfa robot olmadığınızı kanıtlamak için Google reCAPTCHA
 67 |             tarafından korunuyor. <a href="#">Daha fazlasını öğrenin.</a>
 68 |           </p>
 69 |         </div>
 70 |       </div>
 71 | 
 72 |       <footer>
 73 |         <div class="ftr-content">
 74 |           <div class="contact">
 75 |             <a href="#">
 76 |               <span
 77 |                 >Sorularınız mı var? 0850-390-7444 numaralı telefonu
 78 |                 arayın</span
 79 |               >
 80 |             </a>
 81 |           </div>
 82 |           <div class="ftr">
 83 |             <a href="#"> <span>SSS</span> </a>
 84 |             <a href="#"><span>Çerez Tercihleri</span> </a>
 85 |             <a href="#"> <span>Yardım Merkezi</span> </a>
 86 |             <a href="#"> <span>Kurumsal Bilgiler</span> </a>
 87 |             <a href="#"> <span> Kullanım Koşulları</span></a>
 88 |             <a href="#"> <span>Gizlilik</span> </a>
 89 |           </div>
 90 |           <div class="select">
 91 |             <select>
 92 |               <i class="fas fa-globe"></i>
 93 | 
 94 |               <option>Türkçe</option>
 95 |               <option>English</option>
 96 |             </select>
 97 |           </div>
 98 |         </div>
 99 |       </footer>
100 |     </header>
101 |   </div>
102 | </template>
103 | <script>
104 | import { mapActions } from "vuex";
105 | export default {
106 |   data() {
107 |     return {
108 |       userData: {
109 |         email: "yusuftask@",
110 |         password: "12345",
111 |       },
112 |     };
113 |   },
114 |   methods: {
115 |     ...mapActions({
116 |       Loggin: "users/Loggin",
117 |     }),
118 |   },
119 | };
120 | </script>
121 | <style>
122 | * {
123 |   box-sizing: border-box;
124 |   margin: 0;
125 |   padding: 0;
126 | }
127 | 
128 | .body {
129 |   font-family: "Arial", sans-serif;
130 |   -webkit-font-smoothing: antialiased;
131 |   color: #999;
132 |   background: #141414;
133 |   width: 100%;
134 |   height: 100vh;
135 |   position: relative;
136 |   background: url("https://i.ibb.co/vXqDmnh/background.jpg") no-repeat center
137 |     center/cover;
138 | }
139 | 
140 | ul {
141 |   list-style: none;
142 | }
143 | 
144 | h1,
145 | h2,
146 | h3,
147 | h4 {
148 |   color: #fff;
149 | }
150 | 
151 | a {
152 |   color: #fff;
153 |   text-decoration: none;
154 | }
155 | 
156 | p {
157 |   margin: 0.5rem 0;
158 | }
159 | 
160 | img {
161 |   width: 100%;
162 | }
163 | 
164 | .showcase::after {
165 |   content: "";
166 |   position: absolute;
167 |   top: 0;
168 |   left: 0;
169 |   width: 100%;
170 |   height: 100%;
171 |   z-index: 1;
172 |   background: rgba(0, 0, 0, 0.65);
173 |   box-shadow: inset 30px 10px 150px #000000;
174 | }
175 | 
176 | .logo {
177 |   position: relative;
178 |   z-index: 2;
179 |   height: 90px;
180 | }
181 | 
182 | .logo img {
183 |   width: 170px;
184 |   position: absolute;
185 |   top: 20px;
186 |   left: 40px;
187 | }
188 | 
189 | .showcase-content {
190 |   position: relative;
191 |   z-index: 2;
192 |   width: 450px;
193 |   height: 645px;
194 |   background: rgb(0, 0, 0, 0.65);
195 |   margin: 0 auto;
196 |   display: flex;
197 |   flex-direction: column;
198 |   justify-content: flex-start;
199 |   align-items: flex-start;
200 |   text-align: left;
201 |   padding: 60px 65px;
202 |   border-radius: 5px;
203 | }
204 | 
205 | .formm h1 {
206 |   margin-bottom: 20px;
207 | }
208 | 
209 | .formm {
210 |   width: 100%;
211 |   margin-bottom: 40px;
212 | }
213 | 
214 | .formm .info {
215 |   padding: 5px 0;
216 |   /* margin-bottom: 20px; */
217 | }
218 | 
219 | .formm .info .email {
220 |   margin-bottom: 30px;
221 |   width: 100%;
222 |   height: 50px;
223 |   border-radius: 5px;
224 |   border: none;
225 |   padding: 10px;
226 |   font-size: inherit;
227 |   color: #fff;
228 | }
229 | 
230 | .formm .btn {
231 |   margin-bottom: 20px;
232 |   width: 100%;
233 | }
234 | 
235 | .btn-red {
236 |   width: 100%;
237 |   height: 50px;
238 |   border-radius: 5px;
239 |   background: red;
240 |   color: #fff;
241 |   font-size: inherit;
242 |   font-weight: bold;
243 |   border: none;
244 |   cursor: pointer;
245 |   outline: none;
246 |   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
247 | }
248 | 
249 | .help {
250 |   display: flex;
251 |   justify-content: space-between;
252 |   font-size: 0.8rem;
253 | }
254 | 
255 | .help a {
256 |   color: #999;
257 | }
258 | 
259 | .help a:hover {
260 |   text-decoration: underline;
261 | }
262 | 
263 | /* ------ input ------- */
264 | 
265 | input[type="checkbox"] {
266 |   background: #737373;
267 |   -webkit-border-radius: 2px;
268 |   -moz-border-radius: 2px;
269 |   border-radius: 2px;
270 |   border: 0;
271 |   height: 16px;
272 |   left: -20px;
273 |   width: 16px;
274 |   margin-right: 5px;
275 | }
276 | 
277 | input[type="email"] {
278 |   background: #343434;
279 | }
280 | 
281 | input[type="current-password"] {
282 |   background: #343434;
283 | }
284 | 
285 | /* ------ input end ------- */
286 | 
287 | .fcbk {
288 |   width: 100%;
289 |   display: flex;
290 |   align-items: center;
291 |   justify-content: flex-start;
292 |   font-size: 0.8em;
293 | }
294 | .beni-hatirla {
295 |   display: flex;
296 | }
297 | 
298 | .fcbk img {
299 |   width: 20px;
300 |   margin-right: 10px;
301 | }
302 | 
303 | .signup {
304 |   width: 100%;
305 |   display: flex;
306 |   align-items: center;
307 |   justify-content: flex-start;
308 | }
309 | 
310 | .signup p {
311 |   margin-right: 5px;
312 | }
313 | 
314 | .more {
315 |   font-size: 0.8em;
316 |   line-height: 1.1em;
317 | }
318 | 
319 | /* ------ FOOTER ------- */
320 | 
321 | footer {
322 |   position: absolute;
323 |   z-index: 2;
324 |   background: rgb(0, 0, 0, 0.65);
325 |   width: 100%;
326 |   height: 250px;
327 |   display: flex;
328 |   margin-top: 81px;
329 |   justify-content: flex-start;
330 | }
331 | 
332 | .ftr-content {
333 |   margin-left: 10%;
334 |   padding-top: 20px;
335 |   font-size: 1em;
336 | }
337 | 
338 | .ftr-content span {
339 |   color: #999;
340 |   padding: 0;
341 |   margin-bottom: 16px;
342 |   min-width: 100px;
343 |   width: 25%;
344 |   padding-right: 12px;
345 |   vertical-align: top;
346 |   margin-right: 50px;
347 | }
348 | .ftr-content span:hover {
349 |   text-decoration: none;
350 | }
351 | .ftr-content a:hover {
352 |   text-decoration: none;
353 | }
354 | 
355 | .contact {
356 |   margin-bottom: 30px;
357 |   position: relative;
358 |   text-align: start;
359 |   height: auto;
360 | }
361 | 
362 | .contact a:hover {
363 |   text-decoration: underline;
364 | }
365 | 
366 | .ftr {
367 |   margin-bottom: 30px;
368 |   width: 100%;
369 |   font-size: 0.8em;
370 |   display: flex;
371 |   text-align: start;
372 |   margin-right: 30px;
373 | }
374 | 
375 | .select {
376 |   width: 100px;
377 |   height: 40px;
378 |   border: none;
379 |   font-size: inherit;
380 |   padding-left: 10px;
381 |   background: #333333;
382 |   text-align: start;
383 | }
384 | .select select {
385 |   width: 80px;
386 |   height: 40px;
387 |   border: none;
388 |   font-size: inherit;
389 |   color: #999;
390 |   background: #333333;
391 |   text-align: start;
392 | }
393 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     createApp
 3 | } from 'vue'
 4 | import App from './App.vue'
 5 | import router from './router'
 6 | import store from './store'
 7 | import "./assets/style.css"
 8 | // GLOBAL Component Registration
 9 | import modals from "@/components/modal/modals";
10 | import navBar from "@/components/Home/navBar";
11 | 
12 | import 'vue-neat-modal/dist/vue-neat-modal.css'
13 | import {
14 |     Modal
15 | } from 'vue-neat-modal'
16 | 
17 | 
18 | 
19 | 
20 | const app = createApp(App);
21 | app.use(store);
22 | app.use(router);
23 | app.use(VueYouTubeIframe);
24 | app.component("modals", modals);
25 | app.component('AppModal', Modal);
26 | app.component('navBar', navBar);
27 | 
28 | app.mount("#app");


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     createRouter,
 3 |     createWebHistory
 4 | } from 'vue-router'
 5 | import Home from '../views/Home.vue'
 6 | import store from "../store"
 7 | 
 8 | const util = require('util');
 9 | const routes = [{
10 |         path: '/',
11 |         name: 'Home',
12 |         component: Home
13 |     },
14 |     {
15 |         path: '/List',
16 |         name: 'List',
17 | 
18 |         component: () =>
19 |             import( /* webpackChunkName: "about" */ '@/views/List.vue')
20 |     },
21 |     {
22 |         path: '/Movies',
23 |         name: 'Movies',
24 | 
25 |         component: () =>
26 |             import( /* webpackChunkName: "about" */ '@/views/Movies.vue')
27 |     },
28 |     {
29 |         path: '/NewAndPopular',
30 |         name: 'NewAndPopular',
31 | 
32 |         component: () =>
33 |             import( /* webpackChunkName: "about" */ '@/views/NewAndPopular.vue')
34 |     },
35 |     {
36 |         path: '/Series',
37 |         name: 'Series',
38 | 
39 |         component: () =>
40 |             import( /* webpackChunkName: "about" */ '@/views/Series.vue')
41 |     }, {
42 |         path: '/Search',
43 |         name: 'Search',
44 | 
45 |         component: () =>
46 |             import( /* webpackChunkName: "about" */ '@/views/Search.vue')
47 |     },
48 |     {
49 |         path: '/Login',
50 |         name: 'Login',
51 | 
52 |         component: () =>
53 |             import( /* webpackChunkName: "about" */ '@/views/Login.vue')
54 |     },
55 |     {
56 |         path: '/Register',
57 |         name: 'Register',
58 | 
59 |         component: () =>
60 |             import( /* webpackChunkName: "about" */ '@/views/Register.vue')
61 |     },
62 | ]
63 | 
64 | const router = createRouter({
65 |     history: createWebHistory(),
66 |     routes
67 | })
68 | router.beforeEach((to, from, next) => {
69 |     let user = null;
70 |     const authenticatedPages = ["Home", "Movies", "List", "NewAndPopular", "Series", "Search"];
71 |     // local storage üzerinde user varmı?
72 |     if (localStorage?.user) user = JSON.parse(localStorage?.user)
73 |     // localstorage üzerinde user varsa store u güncelle
74 |     if (user !== null && typeof user === 'object') {
75 |         store.commit("users/setUser", user)
76 |     };
77 |     // is isAuthenticated bilgisini store üzerinden almak
78 |     const isAuthenticated = store.getters["users/isAuthenticated"]
79 |     if (isAuthenticated) store.dispatch("users/setFavorites");
80 | 
81 | 
82 |     // rules...
83 |     //eğer giriş yapmamışsa ve user ile ilgili bölümlere sokma login sayfasına yönlendir
84 |     if (!isAuthenticated && authenticatedPages.indexOf(to.name) > -1) next({
85 |         name: "Login"
86 |     });
87 |     if (isAuthenticated && (to.name === "Login" || to.name === "Register"))
88 |         next({
89 |             name: "Home"
90 |         });
91 | 
92 |     next();
93 | 
94 | 
95 | 
96 | })
97 | export default router


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import {
 3 |   createStore
 4 | } from 'vuex'
 5 | import users from "./modules/users"
 6 | export default createStore({
 7 |   state: {
 8 |     movies: [],
 9 |     baseURL: "https://api.themoviedb.org/3/search/movie",
10 |     apiKey: "<//APIKEY\\>",
11 |     property: "language=en-US&query=",
12 |     propert: "page=1",
13 | 
14 |   },
15 |   mutations: {
16 |     setMovies(state, pMovies) {
17 |       state.movies = pMovies;
18 |     },
19 | 
20 |   },
21 |   getters: {
22 |     movieItemList: state => state.movies,
23 |   },
24 |   actions: {
25 |     searchMovie({
26 |       commit,
27 |       state
28 |     }, searchKey) {
29 |       axios
30 |         .get(`${state.baseURL}?api_key=${state.apiKey}&${state.property}${searchKey}&${state.propert}&append_to_response=credits,detail
31 | `)
32 |         .then((movie_list_response) => {
33 |           console.log("SearchList", movie_list_response);
34 |           commit("setMovies", movie_list_response.data.results || [])
35 | 
36 | 
37 | 
38 |         });
39 |     }
40 |   },
41 |   modules: {
42 |     users,
43 |   }
44 | })


--------------------------------------------------------------------------------
/src/store/modules/users/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     appAxios
 3 | } from "@/utils/securedAxios"
 4 | import router from "@/router"
 5 | export default {
 6 |     namespaced: true,
 7 |     state: {
 8 |         user: null,
 9 |     },
10 |     mutations: {
11 |         setUser(state, pUser) {
12 |             state.user = pUser
13 |         },
14 |         logout(state) {
15 |             state.user = null;
16 |             localStorage.clear();
17 |             router.push({
18 |                 name: "Home "
19 |             });
20 |         },
21 | 
22 |     },
23 |     actions: {
24 |         register({
25 |             commit
26 |         }, pUser) {
27 |             appAxios.post("/users", pUser).then(register_response => {
28 |                 console.log('register :>> ', register_response);
29 |                 commit("setUser", register_response);
30 |             });
31 |         },
32 |         Loggin({
33 |             commit
34 |         }, pUser) {
35 |             appAxios.get(`/users?email=${pUser.email}&password=${pUser.password}`).then(login_response => {
36 |                 console.log('login_response :>> ', login_response);
37 |                 if (login_response?.status === 200 &&
38 |                     login_response?.data?.length > 0) {
39 | 
40 |                 }
41 |                 commit("setUser", login_response?.data[0]);
42 |                 localStorage.user = JSON.stringify(login_response?.data[0]);
43 |                 router.push("/")
44 |             });
45 |         },
46 | 
47 |     },
48 |     getters: {
49 |         currentUser: state => state.user,
50 |         isAuthenticated: state => state.user !== null,
51 |     },
52 | }


--------------------------------------------------------------------------------
/src/utils/securedAxios.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export const appAxios = axios.create({
4 |     baseURL: "http://localhost:3000",
5 |     withCredentials: false,
6 |     headers: {
7 |         "Content-Type": "application/json"
8 |     }
9 | })


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navBar />
 4 |     <backgroundMovie />
 5 |     <sliderHome />
 6 |     <dayPopularTv />
 7 |     <sliderHomeTwo />
 8 |     <sliderHomeThree />
 9 |     <sliderHomeFour />
10 |     <sliderHomeFive />
11 |     <netflixOriginalContent />
12 |     <diziler />
13 |     <onerilenBreaking />
14 |     <dayPopularTv />
15 |     <footers />
16 |   </div>
17 | </template>
18 | 
19 |  
20 | <script>
21 | import backgroundMovie from "@/components/Home/backgroundMovie";
22 | import movieList from "@/components/Home/movieList";
23 | import sliderHome from "@/components/Home/sliderHome";
24 | import sliderHomeTwo from "@/components/Home/sliderHomeTwo";
25 | import sliderHomeThree from "@/components/Home/sliderHomeThree.vue";
26 | import sliderHomeFour from "@/components/Home/sliderHomeFour.vue";
27 | import sliderHomeFive from "@/components/Home/sliderHomeFive.vue";
28 | import netflixOriginalContent from "@/components/Home/netflixOriginalContent.vue";
29 | import diziler from "@/components/series/diziler.vue";
30 | import onerilenBreaking from "@/components/series/onerilenBreaking.vue";
31 | import dayPopularTv from "@/components/NewPopular/dayPopularTv.vue";
32 | import footers from "@/components/footer/footers.vue";
33 | 
34 | export default {
35 |   components: {
36 |     backgroundMovie,
37 |     movieList,
38 |     sliderHome,
39 |     sliderHomeTwo,
40 |     sliderHomeThree,
41 |     sliderHomeFour,
42 |     sliderHomeFive,
43 |     netflixOriginalContent,
44 |     diziler,
45 |     onerilenBreaking,
46 |     dayPopularTv,
47 |     footers,
48 |   },
49 | };
50 | </script>
51 | 
52 | <style>
53 | * {
54 |   margin: 0;
55 |   padding: 0;
56 |   outline: 0;
57 |   box-sizing: border-box;
58 | }
59 | body {
60 |   background-color: #141414;
61 |   height: 100vh;
62 | }
63 | #app h4 {
64 |   color: #e9e9e9;
65 |   text-align: center;
66 |   font-family: Arial, Helvetica, sans-serif;
67 |   padding-top: 30px;
68 |   padding-bottom: 30px;
69 | }
70 | @media only screen and (max-width: 599px) {
71 |   #app h4 {
72 |     font-size: 14px;
73 |   }
74 | }
75 | </style>


--------------------------------------------------------------------------------
/src/views/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navBar />
 4 |     <myList />
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import myList from "@/components/series/myList";
 9 | 
10 | export default {
11 |   components: {
12 |     myList,
13 |   },
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <signUp />
 3 | </template>
 4 | <script>
 5 | import signUp from "@/components/signUp/signUp.vue";
 6 | export default {
 7 |   components: {
 8 |     signUp,
 9 |   },
10 | };
11 | </script>


--------------------------------------------------------------------------------
/src/views/Movies.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navBar />
 4 |     <backgroundFilm />
 5 |     <sliderHome />
 6 |     <sliderHomeThree />
 7 |     <sliderHomeFour />
 8 |     <sliderHomeTwo />
 9 |     <footers />
10 |   </div>
11 | </template>
12 | <script>
13 | import footers from "@/components/footer/footers";
14 | import backgroundFilm from "@/components/filmler/backgroundFilm";
15 | import sliderHome from "@/components/Home/sliderHome";
16 | import sliderHomeTwo from "@/components/Home/sliderHomeTwo";
17 | import sliderHomeThree from "@/components/Home/sliderHomeThree";
18 | import sliderHomeFour from "@/components/Home/sliderHomeFour";
19 | 
20 | export default {
21 |   components: {
22 |     footers,
23 |     backgroundFilm,
24 |     sliderHome,
25 |     sliderHomeTwo,
26 |     sliderHomeThree,
27 |     sliderHomeFour,
28 |   },
29 | };
30 | </script>


--------------------------------------------------------------------------------
/src/views/NewAndPopular.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navBar style="position: fixed; z-index: 1000; top: 0; left: 0; right: 0" />
 4 |     <weekPopular />
 5 |     <sliderHomeFour />
 6 |      <weekPopularTv />
 7 |     <sliderHomeFive  />
 8 |     <dayPopularTv />
 9 |   </div>
10 | </template>
11 | <script>
12 | import sliderHomeFive from "@/components/Home/sliderHomeFive";
13 | import weekPopular from "@/components/NewPopular/weekPopular";
14 | import weekPopularTv from "@/components/NewPopular/weekPopularTv";
15 | import dayPopularTv from "@/components/NewPopular/dayPopularTv";
16 | import sliderHomeFour from "@/components/Home/sliderHomeFour";
17 | 
18 | export default {
19 |   components: {
20 |     sliderHomeFive,
21 |     weekPopular,
22 |     weekPopularTv,
23 |     dayPopularTv,
24 |     sliderHomeFour,
25 |   },
26 | };
27 | </script>
28 | <style>
29 | </style>


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <login />
 3 | </template>
 4 | <script>
 5 | import login from "@/components/register/login.vue";
 6 | export default {
 7 |   components: {
 8 |     login,
 9 |   },
10 | };
11 | </script>


--------------------------------------------------------------------------------
/src/views/Search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <navBar />
 3 |   <movieList />
 4 |   <footers />
 5 | </template>
 6 | <script>
 7 | import movieList from "@/components/Home/movieList";
 8 | import footers from "@/components/footer/footers.vue";
 9 | export default {
10 |   components: {
11 |     movieList,
12 |     footers,
13 |   },
14 | };
15 | </script>
16 | <style>
17 | </style>
18 | 
19 | 


--------------------------------------------------------------------------------
/src/views/Series.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navBar />
 4 |     <backgroundSeries />
 5 |     <diziler />
 6 |     <dayPopularTv />
 7 |     <onerilenDiziler />
 8 |     <onerilenBreaking />
 9 |     <netflix />
10 |     <footers />
11 |   </div>
12 | </template>
13 | <script>
14 | import diziler from "@/components/series/diziler";
15 | import backgroundSeries from "@/components/series/backgroundSeries";
16 | import dayPopularTv from "@/components/NewPopular/dayPopularTv";
17 | import onerilenDiziler from "@/components/series/onerilenDiziler";
18 | import onerilenBreaking from "@/components/series/onerilenBreaking";
19 | import netflix from "@/components/series/netflix";
20 | import footers from "@/components/footer/footers.vue";
21 | 
22 | export default {
23 |   components: {
24 |     diziler,
25 |     backgroundSeries,
26 |     dayPopularTv,
27 |     onerilenDiziler,
28 |     onerilenBreaking,
29 |     netflix,
30 |     footers,
31 |   },
32 | };
33 | </script>
34 | 


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