diff --git a/src/js/api.js b/src/js/api.js index 50917d2..c096385 100644 --- a/src/js/api.js +++ b/src/js/api.js @@ -15,18 +15,3 @@ async function onGetFilmDataByID(id) { console.log(error); } } - -// ----------------------------------------------------------- -export async function onGetFilmVideoByID(id) { - try { - const response = await axios.get( - `${BASE_URL}/movie/${id}/videos?api_key=${KEY}` - ); - if (!response.status) { - throw new Error('This movie is not available'); - } - return response; - } catch (error) { - console.log(error); - } -} diff --git a/src/js/modal-create-markup.js b/src/js/modal-create-markup.js index fff9a90..624d646 100644 --- a/src/js/modal-create-markup.js +++ b/src/js/modal-create-markup.js @@ -2,7 +2,8 @@ import { refs } from './refs'; import { onCloseModal } from './modal-open-close'; export { onCreateMarkup, onRemoveMarkupModal }; -import { addRefsAndListeners, delListeners } from './add-to-localstorage-btn'; + import { addRefsAndListeners, delListeners } from './add-to-localstorage-btn'; + function onCreateMarkup({ poster_path, @@ -21,15 +22,11 @@ function onCreateMarkup({
-
${title} -
-
-

${title}

@@ -59,13 +56,12 @@ function onCreateMarkup({

${overview}

- diff --git a/src/js/modal-open-close.js b/src/js/modal-open-close.js index 7a4c05e..326c66e 100644 --- a/src/js/modal-open-close.js +++ b/src/js/modal-open-close.js @@ -4,11 +4,8 @@ import { refs } from './refs'; import { onCreateMarkup } from './modal-create-markup'; export { onCloseModal }; -// ------------------------------------------------------ -import { onGetFilmVideoByID } from './api'; -// ----------------------------------------------------- +import {delListeners} from './add-to-localstorage-btn' -import { delListeners } from './add-to-localstorage-btn'; const BASE_POSTER_URL = 'https://image.tmdb.org/t/p/w500/'; @@ -65,90 +62,24 @@ function onOpenModal(e) { data.overview = 'Description not found'; } onCreateMarkup(data); - // =================VIDEO================ - - document.getElementById(filmId).addEventListener('click', () => { - openTrailer(filmId); - }); }); -} - -// -------------------------------------------------------------------------------- - -function openTrailer(filmId) { - onGetFilmVideoByID(filmId) - .then(data => { - return data.data; - }) - // .then(trailer => { - // if (trailer.length !== 0) { - // return showOpenTrailer(trailer[0].key); - // } - // }); - - .then(data => { - createTrailerCard(data); - }); -} - -// function showOpenTrailer(videoTrailer) { -// refs.trailer.setAttribute( -// 'src', -// `https://www.youtube.com/embed/${videoTrailer}` -// ); -// } - -function createTrailerCard(data) { - const videoArr = []; - const trailerArr = data.results; - trailerArr.forEach(results => { - videoArr.push(results); - // console.log(videoArr); - // console.log(results); - }); - const findByType = videoArr.find(e => e.type === 'Trailer'); - console.log(findByType); - - const key = Object.values(findByType); - // console.log(key[3]); - const name = Object.values(findByType); - // console.log(name[2]); - - const markupTrailer = `
- -
`; - - refs.backdrop.innerHTML = markupTrailer; - - let closeModalButton = - refs.backdrop.getElementsByClassName('button-close')[0]; - closeModalButton.addEventListener('click', onCloseModal); - closeModalButton.addEventListener('click', onRemoveMarkupModal); - - // function onRemoveMarkupModal() { - // refs.backdrop.innerHTML = ` `; - // } -} + // add/remove is-active class on buttons + if (addToWatchedButton.textContent.toLowerCase() === 'add to watched') { + addToWatchedButton.classList.remove('is-active'); + } else { + addToWatchedButton.classList.add('is-active'); + } -// =============================================================== + if (queueBtn.textContent.toLowerCase() === 'add to queue') { + queueBtn.classList.remove('is-active'); + } else { + queueBtn.classList.add('is-active'); + } -function onRemoveMarkupModal() { - refs.backdrop.innerHTML = ` `; } function onCloseModal() { + delListeners(); window.removeEventListener('keydown', onEscKeyPress); @@ -167,38 +98,3 @@ function onClickBackdrop(e) { onCloseModal(); } } - -// if (data.results.length > 0) { -// console.log(data.results); -// var videoArr = []; -// const filmRes = data.results; - -// filmRes.forEach(({ name, key, type }) => { -// // filmRes.find(item.id); -// if (type === 'Trailer') { -// videoArr.push( -// `
-// -//
` -// ); -// } -// }); - -// refs.backdrop.innerHTML = arrayFor.join(''); - -// let closeModalButton = -// refs.backdrop.getElementsByClassName('button-close')[0]; -// closeModalButton.addEventListener('click', onCloseModal); -// closeModalButton.addEventListener('click', onRemoveMarkupModal); diff --git a/src/sass/components/modal.scss b/src/sass/components/modal.scss index 6bb1799..30e9334 100644 --- a/src/sass/components/modal.scss +++ b/src/sass/components/modal.scss @@ -194,35 +194,35 @@ } } -.modal-button { - width: 110px; - height: 44px; +// .modal-button { +// width: 110px; +// height: 44px; - padding: 0px; +// padding: 0px; - border-radius: 5px; +// border-radius: 5px; - background-color: inherit; +// background-color: inherit; - cursor: pointer; +// cursor: pointer; - @media (min-width: 768px) and (max-width: 1023px) { - width: 125px; - } +// @media (min-width: 768px) and (max-width: 1023px) { +// width: 125px; +// } - @media (min-width: 1024px) { - width: 136px; - } -} +// @media (min-width: 1024px) { +// width: 136px; +// } +// } -.modal-button:hover, -.modal-button:focus { - background-color: var(--accent-color); - color: var(--background-color); - border: none; - transition-duration: var(--animation-duration); - transition-timing-function: var(--timing-function); -} +// .modal-button:hover, +// .modal-button:focus { +// background-color: var(--accent-color); +// color: var(--background-color); +// border: none; +// transition-duration: var(--animation-duration); +// transition-timing-function: var(--timing-function); +// } .modal-info__button-list { display: flex; @@ -234,67 +234,3 @@ margin-right: 15px; } } -// ------------------------------ -.iframe__div { - position: relative; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.5); -} - -.watch-trailer__btn { - position: relative; - width: 300px; - height: 125px; - - color: #ffffff; - border: 1px solid #ffffff; - border-radius: 50%; - background: rgba(0, 0, 0, 0.5); - z-index: 2; - cursor: pointer; - - @media (min-width: 768px) and (max-width: 1023px) { - width: 125px; - } - - @media (min-width: 1024px) { - width: 136px; - } -} - -// .trailer-btn-circle { -//
-// position: absolute; -// top: 50%; -// left: 50%; -// transform: translate(-50%, -50%); -// width: 0; -// height: 0; -// border: 0 solid transparent; -// border-bottom-width: 42px; -// border-top-width: 42px; -// border-left: 72px solid black; -// } - -.watch-trailer__btn:hover, -.watch-trailer__btn:focus { - background-color: var(--accent-color); - color: var(--background-color); - border: none; - transition-duration: var(--animation-duration); - transition-timing-function: var(--timing-function); -} - -.trailer-btn { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.modal-container__img { - position: relative; -}