Skip to content

Revert "try to create trailer" #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DeadlyPants11 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Revert "try to create trailer" #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2f447a
modal-button
Murlykin Feb 1, 2023
80b8029
Merge branch 'main' of https://github.com/DeadlyPants11/project
Murlykin Feb 1, 2023
77b5839
Revert "try to create trailer"
DeadlyPants11 Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions src/js/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
10 changes: 3 additions & 7 deletions src/js/modal-create-markup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -21,15 +22,11 @@ function onCreateMarkup({
</svg>
</button>
<div class="modal-container">
<div class="modal-container__img">
<img
class="modal-container__img"
src="${poster_path}"
alt="${title}"
/>
<div class="trailer-btn">
<button type="button" class="watch-trailer__btn " id="${id}">WATCH TRAILER</button></div>
</div>
<div class="modal-info__container">
<h2 class="modal-info__title">${title}</h2>
<table class="modal-info-table">
Expand Down Expand Up @@ -59,13 +56,12 @@ function onCreateMarkup({
<p class="modal-info__description">
${overview}
</p>

<ul class="modal-info__button-list">
<li class="modal-info__button-list-item">

<button type="button" class="modal-button btn-add-to-watched">ADD TO WATCHED</button></li>
<li class="modal-info__button-list-item">
<button type="button" class="modal-button btn-add-to-queue">ADD TO QUEUE</button></li>


</ul>
</div>
Expand Down
130 changes: 13 additions & 117 deletions src/js/modal-open-close.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/';

Expand Down Expand Up @@ -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 = `<div class="iframe__div">
<button data-modal-close type="button" class="button-close">
<svg class="button-close__icon" width="14" height="14">
<use href="${refs.IconCloseHref}"></use>
</svg>
</button>
<iframe
class="iframe-video"
width="760" height="515"
src="https://www.youtube.com/embed/${key[3]}"
title="${name[2]}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture;
web-share" allowfullscreen>
</iframe></div>`;

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);
Expand All @@ -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(
// `<div class="iframe__div ">
// <button data-modal-close type="button" class="button-close">
// <svg class="button-close__icon" width="14" height="14">
// <use href="${refs.IconCloseHref}"></use>
// </svg>
// </button>
// <iframe
// class="iframe-video"
// width="760" height="515"
// src="https://www.youtube.com/embed/${key}"
// title="${name}" frameborder="0"
// allow="accelerometer; autoplay; clipboard-write;
// encrypted-media; gyroscope; picture-in-picture;
// web-share" allowfullscreen>
// </iframe></div>`
// );
// }
// });

// refs.backdrop.innerHTML = arrayFor.join('');

// let closeModalButton =
// refs.backdrop.getElementsByClassName('button-close')[0];
// closeModalButton.addEventListener('click', onCloseModal);
// closeModalButton.addEventListener('click', onRemoveMarkupModal);
108 changes: 22 additions & 86 deletions src/sass/components/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
// <div class="trailer-btn-circle"></div>
// 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;
}