82 lines
4.3 KiB
React
82 lines
4.3 KiB
React
|
import { React, useEffect, useState } from 'react'
|
|||
|
|
import ContentBlock from './components/ContentBlock'
|
|||
|
|
import { useParams } from 'react-router-dom'
|
|||
|
|
import axios from 'axios'
|
|||
|
|
|
|||
|
|
export default function FilmPage() {
|
|||
|
|
const params = useParams()
|
|||
|
|
const [items, setItems] = useState({});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetch("http://localhost:8080/cinema/" + params.id)
|
|||
|
|
.then(function (response) {
|
|||
|
|
return response.json();
|
|||
|
|
})
|
|||
|
|
.then(function (data) {
|
|||
|
|
console.info('Get film success');
|
|||
|
|
setItems(data);
|
|||
|
|
})
|
|||
|
|
.catch(function (error) {
|
|||
|
|
console.error('Error:', error);
|
|||
|
|
throw "Can't get film";
|
|||
|
|
});
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const content = (
|
|||
|
|
<div>
|
|||
|
|
<div className="container pt-4">
|
|||
|
|
<div className="container d-block text-start">
|
|||
|
|
<img className="row posterFilmPage img-fluid float-start me-3 mt-3" src={items.image} alt={items.name} align="left" />
|
|||
|
|
<a className="col text-white fw-bold fs-2" onClick={() => window.location.reload()} style={{ cursor: "pointer" }}>{items.name}, 2020 г. </a>
|
|||
|
|
<span className="col badge green-mark text-white fw-bold fs-5 mx-2 p-2">9.2</span>
|
|||
|
|
<button className="col badge willSee text-white fw-bold fs-5 mx-2 p-2 border border-0">
|
|||
|
|
Буду смотреть
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="container table text-start fs-4">
|
|||
|
|
<div className="row text-white fw-bold fs-3">О фильме</div>
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-xs-6 col-sm-3">Год производства</div>
|
|||
|
|
<div className="col-xs-6 col-sm-3">1000</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-xs-6 col-sm-3">Страна</div>
|
|||
|
|
<div className="col-xs-6 col-sm-3">Россия</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-xs-6 col-sm-3">Жанр</div>
|
|||
|
|
<div className="col-xs-6 col-sm-3">Драма</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-xs-6 col-sm-3">Длительность</div>
|
|||
|
|
<div className="col-xs-6 col-sm-3">189 мин. / 03:09</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="row">
|
|||
|
|
<div className="col-xs-6 col-sm-3">Возраст</div>
|
|||
|
|
<div className="col-xs-6 col-sm-3">16+</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-white fw-bold m-auto p-1 fs-3 text-start">Описание</h3>
|
|||
|
|
<div className="description text-start fs-4">
|
|||
|
|
Пол Эджкомб — начальник блока смертников в тюрьме «Холодная гора», каждыйиз узников которого однажды проходит «зеленую милю» по пути к месту казни. Пол повидал много заключённых
|
|||
|
|
и надзирателей за время работы. Однако гигант Джон Коффи, обвинённый в страшном преступлении,
|
|||
|
|
стал одним из самых необычных обитателей блока.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<hr className="border border-0 bg-black" />
|
|||
|
|
<div className="container">
|
|||
|
|
<h1 className="fs-1 fw-bold text-white ms-2 text-start">Трейлер</h1>
|
|||
|
|
<nav className="ratio ratio-16x9">
|
|||
|
|
<iframe className="p-2" src="https://www.youtube.com/embed/Ca3mUSDJlgM" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<ContentBlock valueBlock={content} title='Страница фильма' />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|