Skip to content

Commit e0c75a0

Browse files
MelnychenkoJennyMelnychenkoJenny
committed
trailer
1 parent c9efb87 commit e0c75a0

File tree

10 files changed

+93
-32
lines changed

10 files changed

+93
-32
lines changed

‎package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"animate-loading": "^1.0.3",
2222
"axios": "^1.3.5",
23+
"basiclightbox": "^5.0.4",
2324
"lodash.throttle": "^4.1.1",
2425
"modern-normalize": "^1.1.0",
2526
"notiflix": "^3.2.6",

‎src/images/icons-spr.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
99
<link rel="preconnect" href="https://fonts.googleapis.com" />
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link rel="stylesheet" href="../node_modules/basiclightbox/dist/basicLightbox.min.css">
1112
<!-- <link
1213
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
1314
rel="stylesheet"
@@ -38,5 +39,6 @@
3839
<include src="./partials/btnUp.html"></include>
3940

4041
<script type="module" src="./index.js"></script>
42+
<!-- <script src="../node_modules/basiclightbox/dist/basicLightbox.min.js"></script> -->
4143
</body>
4244
</html>

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import './js/trending';
33
import './js/btnUp';
44
import './js/footerModal';
55
import './js/pagination';
6-
import './js/trailer';
6+
// import './js/trailer';
77
import './js/movie-modal';
88
import './js/placeholder-animation';
99
import './js/pashalka'

‎src/js/library-modal.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { handleModalOpenClose } from './movie-modal/handle-modal-close';
44
import { fetchPictures } from './movie-modal/fetch-from-API';
55
import { handleApiData } from './movie-modal/handle-API-data';
66
import { PAGE_OPEN, renderList } from './whatched-list';
7+
import {handleApiTrailerData} from './trailer';
78

89
import {
910
createArrayLocalStorage,
@@ -13,6 +14,7 @@ import {
1314
renameBtn,
1415
renameBtnTextCont,
1516
} from './watched-queue-btns/fun-watched-queue'; // 💙💛 Koshyk Kostiantyn
17+
const trailerBtn = document.querySelector('.modal-movie__trailer-btn');
1618

1719
const refs = {
1820
libraryListOfWatched: document.querySelector('.gallery-library__list'), //<ul> з переглянутими фільмами
@@ -79,6 +81,12 @@ async function handleTrandingMoviesClick(event) {
7981
});
8082

8183
document.body.style.overflow = 'hidden'; //щоб body не скролився при відкритій модалці
84+
trailerBtn.addEventListener('click', click)
85+
function click() {
86+
87+
handleApiTrailerData(pickedMovieId)
88+
trailerBtn.removeEventListener('click', click)
89+
}
8290
}
8391

8492
// ========================= функционал для кнопок "Add to watcheed" и "Add to queue" 💙💛 Koshyk Kostiantyn

‎src/js/movie-modal.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { handleModalOpenClose } from './movie-modal/handle-modal-close';
44
import { fetchPictures } from './movie-modal/fetch-from-API';
55
import { handleApiData } from './movie-modal/handle-API-data';
6+
import {handleApiTrailerData} from './trailer'
67

78
import {
89
createArrayLocalStorage,
@@ -12,7 +13,7 @@ import {
1213
renameBtn,
1314
renameBtnTextCont,
1415
} from '/src/js/watched-queue-btns/fun-watched-queue'; // 💙💛 Koshyk Kostiantyn
15-
16+
const trailerBtn = document.querySelector('.modal-movie__trailer-btn');
1617
const refs = {
1718
galleryTrendList: document.querySelector('.gallery-home__list'), //<ul> з трендовими фільмами
1819
movieModalContainer: document.querySelector('.modal-movie'), // модалка
@@ -78,6 +79,13 @@ async function handleTrandingMoviesClick(event) {
7879
});
7980

8081
document.body.style.overflow = 'hidden'; //щоб body не скролився при відкритій модалці
82+
trailerBtn.addEventListener('click', click)
83+
function click() {
84+
85+
handleApiTrailerData(pickedMovieId)
86+
trailerBtn.removeEventListener('click', click)
87+
}
88+
8189
}
8290

8391
// ========================= функционал для кнопок "Add to watcheed" и "Add to queue" 💙💛 Koshyk Kostiantyn
@@ -136,3 +144,4 @@ function onQueue() {
136144
}
137145
});
138146
}
147+
// export

‎src/js/trailer.js

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
1-
// import basicLightbox from 'basiclightbox';
2-
const trailerBtn = document.querySelector('.modal-movie__trailer-btn');
3-
4-
// trailerBtn.addEventListener('click', handleTrailerBtnClick)
1+
import axios from 'axios';
2+
import * as basicLightbox from 'basiclightbox'
53

4+
const API_KEY = 'c05652c397b2dd01065e8cba4a8a45ab';
5+
const BASE_URL = 'https://api.themoviedb.org/3/movie/';
66

7-
// function handleTrailerBtnClick(trailerKey) {
8-
// fetchTrailer(id)
9-
// .then(e => {
10-
// trailerKey = e.results[0].key;
11-
// const instance = basicLightbox.create(`
12-
// <iframe class="trailerPlayer" src="https://www.youtube.com/embed/${trailerKey}" width="1200" height="800" frameborder="0"></iframe>
13-
// `);
7+
export async function fetchTrailer(id) {
8+
try {
9+
const { data } = await axios.get(
10+
`${BASE_URL}${id}/videos?api_key=${API_KEY}&language=en-US`
11+
);
12+
return data;
13+
} catch (error) {
14+
console.error('Smth wrong with api get full trends' + error);
15+
}
16+
}
1417

15-
// instance.show();
16-
// })
17-
// .catch(error => {
18-
// trailer.setAttribute('disabled', 'disabled');
19-
// trailer.textContent = 'no trailer';
20-
// });
21-
// }
2218

23-
const BASE_URL = 'https://api.themoviedb.org/3/movie/';
24-
const API_KEY = '3dd9518c386fd347d5f1ac2580a699a4';
19+
export const handleApiTrailerData = async (pickedMovieId) => {
20+
21+
try {
22+
await fetchTrailer(pickedMovieId).then(el => {
2523

24+
const trailerKey = el.results[0].key;
25+
const instance = basicLightbox.create(`<iframe class="trailerPlayer" src="https://www.youtube.com/embed/${trailerKey}" width="1200" height="800" frameborder="0"></iframe>`);
2626

27-
const fetchTrailer = async(id) => {
28-
try {
29-
const response = await fetch(`${BASE_URL}movie/${id}/videos?api_key=${API_KEY}`);
30-
const data = await response.json();
31-
const results = await data
32-
return results}
33-
catch(error) {
34-
throw new Error(error.message);
27+
instance.show();
28+
if (instance.show()) {
29+
window.addEventListener('keydown', (event) => {
30+
if (event.key === 'Escape') {
31+
instance.close();
32+
}
33+
})
3534
}
36-
}
35+
}
36+
);
37+
38+
} catch (err) {
39+
console.log(err);
40+
}
41+
42+
};

‎src/partials/modal.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ <h2 class="movie-modal__heading visually-hidden">Picked Movie</h2>
1010
<div class="modal-movie__command-btns-wrap">
1111
<button class="modal-movie__add-to-watched-btn modal-movie__command-btns button" type="button">add to Watched</button>
1212
<button class="modal-movie__add-to-queue-btn modal-movie__command-btns button" type="button">add to queue</button>
13-
<!-- <button class="modal-movie__trailer-btn modal-movie__command-btns button" type="button"> watch trailer </button> -->
13+
1414
</div>
15+
<button class="modal-movie__trailer-btn modal-movie__command-btns button" type="button">
16+
<svg class="trailer__icon" width="35" height="30">
17+
<use href="./images/icons-spr.svg#icon-play"></use>
18+
</svg> </button>
1519
</div>
1620
</div>

‎src/sass/components/_modal.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,3 +349,19 @@
349349
// color: var(--color-white);
350350
// background-color: var(--color-accent);
351351
// }
352+
.modal-movie__trailer-btn {
353+
position: absolute;
354+
top: 60px;
355+
left: 25px;
356+
display: flex;
357+
width: 50px;
358+
height: 50px;
359+
justify-content: center;
360+
align-items: center;
361+
}
362+
.trailer__icon {
363+
fill: var(--color-accent);
364+
}
365+
.modal-movie__trailer-btn:hover .trailer__icon {
366+
fill: var(--color-white);
367+
}

0 commit comments

Comments
 (0)