WatchPage.tsx

import * as React from 'react';

const HeaderBar: any = () => null;
const BreadCrumbs: any = () => null;
const PageSection: any = () => null;
const MainContent: any = () => null;
const TopInfo: any = () => null;
const AgeBadge: any = () => null;
const Title: any = () => null;
const Parameters: any = () => null;
const PlayerBlock: any = () => null;
const PlayButton: any = () => null;
const Hoard: any = () => null;
const Information: any = () => null;
const Clause: any = () => null;
const IconedText: any = () => null;
const RatingBlock: any = () => null;
const VideoAssessment: any = () => null;
const FilmOption: any = () => null;
const Gallery: any = () => null;
const HeaderLink: any = () => null;
const GalleryList: any = () => null;
const GalleryItem: any = () => null;
const FixedSlimPosterBlock: any = () => null;
const MoreTile: any = () => null;
const SlimPosterBlock: any = () => null;
const AmountBadge: any = () => null;
const XArrowButton: any = () => null;
const Plot: any = () => null;
const Superscript: any = () => null;
const Button: any = () => null;
const UgcTile: any = () => null;
const ExtraLink: any = () => null;
const Knowledge: any = () => null;
const Mistakes: any = () => null;
const Suggestion: any = () => null;

const WatchPage = () => (
    <>
        <HeaderBar
            parentClass="details"
            modificator="playerPage"
            breadcrumbs={(
                <BreadCrumbs
                    parentClass="headerBar"
                    items={[{
                        title: 'Главная',
                        link: '#'
                    }, {
                        title: 'Сериалы',
                        link: '#'
                    }, {
                        title: 'Мир Дикого Запада смотреть онлайн'
                    }]}
                />
            )}
        />
        <PageSection
            parentClass="details"
        >
            <MainContent
                parentClass="details"
                modificator="playerPage"
            >
                <TopInfo
                    parentClass="details"
                >
                    <AgeBadge
                        parentClass="details"
                        value={12}
                    />
                </TopInfo>
                <Title
                    parentClass="details"
                    main="Стражи Галактики смотреть онлайн"
                    alternative="Guardians of the Galaxy"
                />
                <Parameters
                    parentClass="details"
                    info="2014, США, Комедии, Фантастика, Приключения, Боевики, Зарубежные"
                    duration={121}
                />
                <PlayerBlock
                    parentClass="details"
                    trailerLink="http://special.ivi.ru/vast/trailers/guardians.mp4"
                    actions={(
                        <PlayButton
                            parentClass="playerBlock"
                        />
                    )}
                    ageBadge={(
                        <AgeBadge
                            parentClass="playerBlock"
                            value={12}
                        />
                    )}
                />
                <Hoard
                    parentClass="details"
                    active={false}
                />
                <Information
                    parentClass="details"
                    article={(
                        <>
                            <Clause
                                parentClass="details"
                            >
                                <p>
                                    Захватывающий фантастический фильм Джеймса Ганна,&nbsp;
                                    основанный на одноименной серии комиксов...
                                </p>
                            </Clause>
                            <IconedText
                                parentClass="details"
                                modificator="about"
                                size="orino"
                                style="kindel"
                            >
                                Данный контент недоступен на некоторых устройствах
                            </IconedText>
                        </>
                    )}
                    aside={(
                        <>
                            <RatingBlock
                                parentClass="details"
                                modificator="hasQuestion"
                                extraPosition="right"
                                style="sol"
                            />
                            <VideoAssessment
                                parentClass="details"
                            />
                        </>
                    )}
                />
            </MainContent>
        </PageSection>
        <PageSection
            parentClass="details"
            modificator="detailsParameters"
        >
            <FilmOption
                parentClass="details"
                modificator="detailsParameters"
                options={[{
                    title: 'Языки',
                    value: 'Английский, Украинский'
                }, {
                    title: 'Субтитры',
                    value: 'Русские, Английский, Украинский'
                }, {
                    title: 'Доступное качество',
                    icons: ['4k', '3d', '51']
                }]}
            />
            <Gallery
                parentClass="pageSection"
                modificator="creators"
                header={(
                    <HeaderLink
                        parentClass="gallery"
                        title="Создатели"
                        link="#"
                    />
                )}
            >
                <GalleryList
                    modificator="fixedSlimPosterBlock"
                    type="person"
                >
                    {[{
                        poster: '/_html/img/persons/kalkin.jpg',
                        title: 'Маколей',
                        link: '#',
                        secondTitle: 'Калкин',
                        extra: '12 фильмов'
                    }].map((item) => (
                        <GalleryItem>
                            <FixedSlimPosterBlock
                                {...item}
                                parentClass="gallery"
                                type="person"
                            />
                        </GalleryItem>
                    ))}
                    <GalleryItem
                        modificator="more"
                    >
                        <MoreTile
                            parentClass="gallery"
                            modificator="fixedSlimPosterBlock"
                            type="person"
                            link="#"
                            caption="Ещё"
                        />
                    </GalleryItem>
                </GalleryList>
            </Gallery>
        </PageSection>
        <PageSection
            parentClass="details"
            modificator="collectionIncludes"
        >
            <Gallery
                parentClass="pageSection"
                modificator="creators"
                header={(
                    <HeaderLink
                        parentClass="gallery"
                        title="Входит в коллекции"
                    />
                )}
            >
                <GalleryList
                    modificator="slimPosterBlock"
                    type="collection"
                >
                    {[{
                        poster: '/_html/img/collections/smurfs.png',
                        title: 'Фантастические боевики',
                        link: '#',
                        extra: '5 фильмов',
                        amount: 12
                    }].map(({amount, ...item}) => (
                        <GalleryItem>
                            <SlimPosterBlock
                                {...item}
                                parentClass="gallery"
                                type="collection"
                                status="default"
                                amountBage={(
                                    <AmountBadge
                                        parentClass="poster"
                                        size="milta"
                                        status="default"
                                        amount={amount}
                                    />
                                )}
                            />
                        </GalleryItem>
                    ))}
                </GalleryList>
            </Gallery>
        </PageSection>
        <PageSection
            parentClass="details"
            modificator="dark"
        >
            <Gallery
                parentClass="details"
                modificator="dark"
                header={(
                    <HeaderLink
                        parentClass="gallery"
                        title="Смотрите также"
                    />
                )}
                prevArrow={(
                    <XArrowButton
                        parentClass="gallery"
                        modificator="slimPosterBlock"
                        direction="left"
                    />
                )}
                nextArrow={(
                    <XArrowButton
                        parentClass="gallery"
                        modificator="slimPosterBlock"
                        direction="right"
                    />
                )}
            >
                <GalleryList
                    modificator="slimPosterBlock"
                    type="poster"
                >
                    {[{
                        poster: '/_html/img/posters/otryad.jpg',
                        title: 'Отряд самоубийц',
                        link: '#',
                        status: 'paid'
                    }].map(({...item}) => (
                        <GalleryItem>
                            <SlimPosterBlock
                                {...item}
                                parentClass="gallery"
                                type="poster"
                            />
                        </GalleryItem>
                    ))}
                </GalleryList>
            </Gallery>
        </PageSection>
        <PageSection
            parentClass="details"
            modificator="detailsPlot"
        >
            <Plot
                parentClass="details"
            >
                <Clause
                    parentClass="details"
                    title="Сюжет"
                    icon={(
                        <IconedText
                            parentClass="details"
                            modificator="about"
                            size="orino"
                            style="kindel"
                        >
                            Данный контент недоступен на некоторых устройствах
                        </IconedText>
                    )}
                >
                    <p>
                        Таносу удается заполучить Камень Силы на планете Ксандар...
                    </p>
                </Clause>
            </Plot>
        </PageSection>
        <PageSection
            parentClass="details"
            modificator="detailsUgcTile"
        >
            <Gallery
                parentClass="details"
                modificator="ugc"
                header={(
                    <>
                        <HeaderLink
                            parentClass="gallery"
                            title="Отзывы"
                            link="#"
                        />
                        <Superscript
                            parentClass="gallery"
                            size="sheicu"
                            status="default"
                        >
                            4
                        </Superscript>
                        <Button
                            parentClass="gallery"
                            modificator="ugc"
                            size="sindel"
                            style="run"
                        >
                            Написать отзыв
                        </Button>
                    </>
                )}
                prevArrow={(
                    <XArrowButton
                        parentClass="gallery"
                        modificator="ugcTile"
                        direction="left"
                    />
                )}
                nextArrow={(
                    <XArrowButton
                        parentClass="gallery"
                        modificator="ugcTile"
                        direction="right"
                    />
                )}
            >
                <GalleryList
                    type="ugcTile"
                >
                    {[{
                        link: '#',
                        author: 'Кира Закирова',
                        text: 'Норм на один раз',
                        date: '23 июня 2017',
                        voteStatus: 'negative',
                        voteValue: 8
                    }].map(({...item}) => (
                        <GalleryItem>
                            <UgcTile
                                {...item}
                                parentClass="gallery"
                            />
                        </GalleryItem>
                    ))}
                </GalleryList>
            </Gallery>
        </PageSection>
        <PageSection
            parentClass="details"
        >
            <ExtraLink
                parentClass="details"
                item={[{
                    link: '#',
                    title: 'Рецензии',
                    count: 29
                }, {
                    link: '#',
                    title: 'Трейлеры',
                    count: 2
                }]}
            />
            <Knowledge
                parentClass="details"
            >
                <Clause
                    parentClass="details"
                    title="Знаете ли вы, что"
                >
                    <ul>
                        <li>
                            Фильм основан на таких сюжетных арках, как «Перчатка Бесконечности»...
                        </li>
                    </ul>
                </Clause>
            </Knowledge>
            <Mistakes
                parentClass="details"
            >
                <Clause
                    parentClass="details"
                    title="Ошибки в фильме"
                >
                    <ul>
                        <li>
                            Идея Таноса заключается в том, чтобы убить половину всех живых существ...
                        </li>
                    </ul>
                </Clause>
            </Mistakes>
            <Suggestion
                parentClass="details"
                title="Фильмы в подборках"
                items={[{
                    title: 'Фильмы 2018 года',
                    link: 'https://www.ivi.ru/collections/movies-2018'
                }, {
                    title: 'Фильмы-катастрофы',
                    link: 'https://www.ivi.ru/collections/movies-disasters'
                }]}
            />
        </PageSection>
    </>
);