Merge pull request #51 from GGO-web/player_trailer

Features: added tabs component, video trailer added for title screen

src/components/Searchbar/ExtraFilters.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Select } from '@components/Select/Select';
-import { ANIME_YEARS, FILTERS_MAX } from '../../constants';
+import { ANIME_YEARS, FILTERS_MAX } from '@/constants';
 import { Item } from 'react-aria-components';
 import { Paragraph } from '@components/Paragraph/Paragraph';
 
@@ -14,7 +14,7 @@ interface ExtraFiltersProps {
 
 export const ExtraFilters: React.FC<ExtraFiltersProps> = ({ togglePopup }) => {
   const [year, setYear] = React.useState<React.Key>(1);
-  const [isYearLoading, setIsYearLoading] = React.useState(false);
+  const [isYearLoading] = React.useState(false);
   const [grade, setGrade] = React.useState<[number, number]>([0, 10]);
   const [isSeries, setIsSeries] = React.useState(true);
 

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,96 @@
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs as AriaTabs,
+  TabsProps
+} from 'react-aria-components';
+import type { TabPanelProps, TabProps } from 'react-aria-components';
+import React, { Key, useMemo, useState } from 'react';
+
+export interface ITab {
+  id: string;
+  label: string;
+  element: JSX.Element;
+}
+
+export interface ITabs extends TabsProps {
+  tabs: ITab[];
+}
+
+export const Tabs = ({ tabs, ...props }: ITabs) => {
+  const [selectedKey, setSelectedKey] = useState<Key>(tabs[0].id);
+
+  const selectedItem = useMemo(() => {
+    return document.querySelector(`.tabpanel-${selectedKey as string}`);
+  }, [selectedKey]);
+
+  return (
+    <div className="flex justify-center">
+      <AriaTabs
+        selectedKey={selectedKey}
+        onSelectionChange={setSelectedKey}
+        className="w-full tabs"
+        {...props}
+      >
+        <TabList className="flex space-x-1 tabs__list">
+          {tabs.map(({ id, label }, index) => {
+            return (
+              <MyTab
+                key={id}
+                id={id}
+                style={{ marginLeft: index ? '-6px' : 0 }}
+              >
+                {label}
+              </MyTab>
+            );
+          })}
+        </TabList>
+
+        <div
+          className={`tabs__tabpanels flex aspect-video min-h-[${
+            selectedItem?.clientHeight || 0
+          }px] relative`}
+        >
+          {tabs.map(({ id, element }) => {
+            return (
+              <MyTabPanel
+                key={`tabpanel-${id}`}
+                id={id}
+                className={`tabpanel-${id}`}
+              >
+                {element}
+              </MyTabPanel>
+            );
+          })}
+        </div>
+      </AriaTabs>
+    </div>
+  );
+};
+
+function MyTab(props: TabProps) {
+  return (
+    <Tab
+      {...props}
+      className={({ isSelected }) => `
+        tabs__item w-full max-w-[300px] py-2.5 text-center outline-none transition-colors font-bold cursor-pointer
+        ${
+          isSelected
+            ? 'rounded-tl-[6px] rounded-tr-[6px] text-white bg-[var(--color-red)] border-[1px] border-transparent'
+            : 'rounded-tl-[6px] rounded-tr-[6px] text-white border-[1px] border-[var(--color-red)]'
+        }
+      `}
+    />
+  );
+}
+
+function MyTabPanel({ className, ...props }: TabPanelProps) {
+  return (
+    <TabPanel
+      shouldForceMount={true}
+      {...props}
+      className={`mt-2 text-gray-700 rounded-2x tabpanel ${className}`}
+    />
+  );
+}

src/components/TrailerPlayer/TrailerPlayer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FlexGroup } from '@components/FlexGroup/FlexGroup';
+
+export const TrailerPlayer = () => {
+  return (
+    <FlexGroup className="trailer-container">
+      <iframe
+        className={'w-full aspect-video'}
+        src="https://www.youtube.com/embed/i66VJnh-hYc"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </FlexGroup>
+  );
+};

src/pages/Title/Title.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Breadcrumbs } from '@components/Breadcrumbs/Breadcrumbs';
 import { Header } from '@components/Header/Header';
 import { Sidenav } from '@components/Navigation/Sidenav';
@@ -10,7 +10,7 @@ import {
   RECOMMENDATIONS_ANIME,
   TITLE_BREADCRUMBS,
   LIST_RELEASE_SCHEDULE
-} from '../../constants';
+} from '@/constants';
 import { TitleInfo } from './components/TitleInfo/TitleInfo';
 import { NextSeasons } from './components/NextSeasons/NextSeasons';
 import { Recommendations } from './components/Recommendations/Recommendations';
@@ -20,14 +20,28 @@ import { SeriesReleaseSchedule } from './components/SeriesReleaseSchedule/Series
 import { TitleImages } from './components/TitleImages/TitleImages';
 import { SimilarAnime } from './components/SimilarAnime/SimilarAnime';
 
-import { FormComment } from './components/Comments/FormComment/FormComment';
-import { ItemCommment } from './components/Comments/ItemComment/ItemComment';
 import { Comments } from './components/Comments/Comments';
-
-import { CustomPlayer } from '@components/CustomPlayer/CustomPlayer';
 
+import { CustomPlayer } from '@components/CustomPlayer/CustomPlayer';
+import { TrailerPlayer } from '@components/TrailerPlayer/TrailerPlayer';
+import { ITab, Tabs } from '@components/Tabs/Tabs';
 
 export const Title = () => {
+  const videoTabs: ITab[] = useMemo(() => {
+    return [
+      {
+        id: 'anime',
+        label: 'Дивитися онлайн',
+        element: <CustomPlayer />
+      },
+      {
+        id: 'trailer',
+        label: 'Трейлер',
+        element: <TrailerPlayer />
+      }
+    ];
+  }, []);
+
   return (
     <section className="home page-section">
       <div className="home__container page-section__container">
@@ -59,7 +73,7 @@ export const Title = () => {
             <section className="player-outer">
               <TitleImages />
 
-              <CustomPlayer />
+              <Tabs tabs={videoTabs} />
 
               <SeriesReleaseSchedule listSeries={LIST_RELEASE_SCHEDULE} />
             </section>

src/scss/components.scss

@@ -7,3 +7,5 @@
 @import './components/breadcrumbs';
 
 @import './components/slider.scss';
+
+@import "./components/tabs.scss";

src/scss/components/_tabs.scss

@@ -0,0 +1,16 @@
+.tabs {
+  overflow: hidden;
+}
+
+.tabpanel {
+  position: absolute;
+  inset: 0;
+  opacity: 1;
+  translate: 0;
+  transition: translate 0.2s ease-in-out, opacity 0.3s;
+}
+
+.tabpanel[data-inert="true"] {
+  opacity: 0;
+  translate: -100%;
+}