Merge pull request #53 from GGO-web/title_dynamic_info

Title dynamic info
GGO-web · Dec 3, 2023 · 96660a7 · 96660a7
2 parents 2db7f80 + 8dbf57d
commit 96660a7
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 54 deletions.
diff --git a/src/components/CustomPlayer/CustomPlayer.tsx b/src/components/CustomPlayer/CustomPlayer.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { toFormattedTime } from '@helpers/getDateFromSeconds';
 import { fetchVideoPlayer } from '@helpers/fetchVideoPlayer';
-import { SavedPlayerInfo } from '../../interfaces/SavedPlayerInfo.interface';
+import { SavedPlayerInfo } from '@/interfaces/SavedPlayerInfo.interface';
 
 import { Select } from '@components/Select/Select';
 import { Item } from 'react-aria-components';
 
-export const CustomPlayer = () => {
+export const CustomPlayer = ({ url }: { url?: string }) => {
   const [info, setInfo] = useState<SavedPlayerInfo>();
   const [seasons, setSeasons] = useState<{ season: number }[]>();
   const [season, setSeason] = useState<React.Key>(1);
@@ -22,6 +22,7 @@ export const CustomPlayer = () => {
     setIsPlayerLoading(true);
 
     const { info } = await fetchVideoPlayer({
+      url,
       season,
       episode,
       startTime
@@ -56,8 +57,12 @@ export const CustomPlayer = () => {
   };
 
   useEffect(() => {
+    if (!url) {
+      return;
+    }
+
     fetchVideoPlayerData();
-  }, [season, episode, startTime]);
+  }, [url, season, episode, startTime]);
 
   return (
     <div className="player-container relative aspect-video">

diff --git a/src/components/FlexGroup/FlexGroup.tsx b/src/components/FlexGroup/FlexGroup.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import cn from 'classnames';
 
 interface FlexGroupProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children: React.ReactNode | React.ReactNode[];
   centerY?: boolean;
   center?: boolean;
   column?: boolean;

diff --git a/src/components/Searchbar/Search.tsx b/src/components/Searchbar/Search.tsx
@@ -4,7 +4,7 @@ import axios from 'axios';
 
 import { Item } from 'react-aria-components';
 import { Select } from '@components/Select/Select';
-import { IJsonAlbum } from '../../types/album';
+import { IJsonAlbum } from '@/types/album';
 import { useQuery } from '@tanstack/react-query';
 import { GenreService } from '@services/Genre/Genre.service';
 
@@ -17,15 +17,13 @@ export const Search = () => {
     staleTime: 1000 * 60 * 60 // 60 minutes caching
   });
 
-  console.log(newGenres);
-
   const [posts, setPosts] = React.useState<IJsonAlbum[]>([]);
 
   const [search, setSearch] = useState('');
   const [isSearchLoading, setIsSearchLoading] = useState(false);
 
   const [genre, setGenre] = useState<React.Key>(1);
-  const [isGenreLoading, setIsGenreLoading] = useState(false);
+  const [isGenreLoading] = useState(false);
 
   const filterSearch = search.toLowerCase() || '';
 

diff --git a/src/helpers/fetchVideoPlayer.ts b/src/helpers/fetchVideoPlayer.ts
@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { SavedPlayerInfo } from '../interfaces/SavedPlayerInfo.interface';
+import { SavedPlayerInfo } from '@/interfaces/SavedPlayerInfo.interface';
 
 interface FetchPlayerProps {
   url?: string;
@@ -26,9 +26,7 @@ export const fetchVideoPlayer = async ({
   const randomPoster = getRandomArbitrary(1, 5);
   return fetch(
     `${
-      url
-        ? url
-        : 'https://voidboost.net/serial/8171b59d92582ed8eb7d17c9d6768660/iframe'
+      url ? url : 'https://voidboost.net/embed/tt15765670'
     }?s=${season}&e=${episode}&start=${startTime}&autoplay=${
       startTime !== 0 ? 1 : 0
     }&poster=1&poster_id=${randomPoster}&h=voidboost.net&plang=ua`

diff --git a/src/pages/Title/Title.tsx b/src/pages/Title/Title.tsx
@@ -4,8 +4,6 @@ import { Header } from '@components/Header/Header';
 import { Sidenav } from '@components/Navigation/Sidenav';
 
 import {
-  CURRENT_ANIME,
-  DESCRIPTION_ANIME,
   NEXT_ANIME,
   RECOMMENDATIONS_ANIME,
   TITLE_BREADCRUMBS,
@@ -25,22 +23,39 @@ import { Comments } from './components/Comments/Comments';
 import { CustomPlayer } from '@components/CustomPlayer/CustomPlayer';
 import { TrailerPlayer } from '@components/TrailerPlayer/TrailerPlayer';
 import { ITab, Tabs } from '@components/Tabs/Tabs';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { TitleService } from '@services/Title/Title.service';
 
 export const Title = () => {
+  const { id } = useParams();
+
+  const { data: title } = useQuery({
+    queryKey: ['titles', id],
+    queryFn: async () => {
+      return TitleService.getTitleById(id);
+    },
+    staleTime: 1000 * 60 * 60
+  });
+
+  const playerLink = useMemo(() => {
+    return title?.players?.at(0)?.embedLink;
+  }, [title]);
+
   const videoTabs: ITab[] = useMemo(() => {
     return [
       {
         id: 'anime',
         label: 'Дивитися онлайн',
-        element: <CustomPlayer />
+        element: <CustomPlayer url={playerLink} />
       },
       {
         id: 'trailer',
         label: 'Трейлер',
         element: <TrailerPlayer />
       }
     ];
-  }, []);
+  }, [playerLink]);
 
   return (
     <section className="home page-section">
@@ -53,21 +68,22 @@ export const Title = () => {
             <Breadcrumbs
               items={[
                 ...TITLE_BREADCRUMBS,
-                { name: 'Константин: Місто Демонів', link: '#' }
+                { name: title?.name || 'Невідомий шедевр', link: '#' }
               ]}
             />
 
             <section className="title__main">
-              <TitleInfo anime={CURRENT_ANIME} />
+              <TitleInfo anime={title} />
+
               <div className="title__main-col-2">
                 <NextSeasons anime={NEXT_ANIME} />
                 <Recommendations anime={RECOMMENDATIONS_ANIME} />
               </div>
             </section>
 
             <TitleDescription
-              heading={DESCRIPTION_ANIME.heading}
-              paragraph={DESCRIPTION_ANIME.paragraph}
+              heading={title?.name}
+              paragraph={title?.description}
             />
 
             <section className="player-outer">

diff --git a/src/pages/Title/components/TitleDescrption/TitleDescription.tsx b/src/pages/Title/components/TitleDescrption/TitleDescription.tsx
@@ -3,22 +3,41 @@ import { Paragraph } from '@components/Paragraph/Paragraph';
 import React from 'react';
 
 interface TitleDescriptionProps {
-  heading: string;
-  paragraph: string;
+  heading?: string;
+  paragraph?: string;
 }
 
 export const TitleDescription: React.FC<TitleDescriptionProps> = ({
   heading,
   paragraph
 }) => {
+  const formatText = (text = '') => {
+    if (!text) {
+      return 'Тут мав бути крутий опис, але його вміст загубили';
+    }
+
+    // Split the text into sentences
+    const sentences = text.split('. ');
+
+    // Capitalize the first letter of each sentence
+    const capitalizedSentences = sentences.map((sentence) => {
+      return sentence.charAt(0).toUpperCase() + sentence.slice(1);
+    });
+
+    // Join the sentences back into a single string
+    const result = capitalizedSentences.join('. ');
+
+    return result;
+  };
+
   return (
     <>
       <strong>
         <Heading className="text-xl mb-5">
-          Про що мультсеріал &quot;{heading}&quot;:
+          Про що мультсеріал &quot;{heading || 'Невідомий'}&quot;:
         </Heading>
       </strong>
-      <Paragraph className="mb-[63px]">{paragraph}</Paragraph>
+      <Paragraph className="mb-[63px]">{formatText(paragraph)}</Paragraph>
     </>
   );
 };
diff --git a/src/pages/Title/components/TitleInfo/TitleInfo.tsx b/src/pages/Title/components/TitleInfo/TitleInfo.tsx
@@ -2,41 +2,49 @@ import React from 'react';
 
 import { FlexGroup } from '@components/FlexGroup/FlexGroup';
 import { Heading } from '@components/Heading/Heading';
-import { Paragraph } from '@components/Paragraph/Paragraph';
-import { ICurrentAnime, TITLE_INFO } from '../../../../constants';
 
-export const TitleInfo = ({ anime }: { anime: ICurrentAnime }) => {
+import { Title } from '@services/Title/interfaces/Title.interface';
+
+export const TitleInfo = ({ anime }: { anime?: Title }) => {
   return (
     <div className="title-info">
-      <Heading>{anime.name}</Heading>
+      <Heading>{anime?.name || 'Невідомий шедевр'}</Heading>
       <main className="title-info__main">
         <div
           className="title-info__promo"
-          style={{ backgroundImage: `url(${anime.image})` }}
+          style={{ backgroundImage: `url(${anime?.imageLink})` }}
         >
           <div className="title-info__promo-rating">
-            <p className="text-sm">
-              <strong>IMDB</strong>
-            </p>
-            <p className="text-xl">
-              <strong>{anime.rating}</strong>
-            </p>
+            <p className="text-sm font-bold text-center">IMDB</p>
+            <p className="text-xl font-bold text-center">5</p>
           </div>
         </div>
 
         <div className="title-info__description pb-[28px] mt-[48px]">
           <FlexGroup gap={28} column>
-            {TITLE_INFO.map((item) => {
-              const showSubtitles =
-                item.key === 'subtitles' && item.key ? 'Субтитри' : '-';
-
-              return (
-                <Paragraph key={item.id}>
-                  <strong>{item.characteristic}</strong>{' '}
-                  {item.key !== 'subtitles' ? anime[item.key] : showSubtitles}
-                </Paragraph>
-              );
-            })}
+            <FlexGroup>
+              <strong>Рік виходу:</strong>
+              {anime?.year || '-'}
+            </FlexGroup>
+
+            <FlexGroup>
+              <strong>Країна:</strong>
+              {anime?.country || '-'}
+            </FlexGroup>
+
+            <FlexGroup>
+              <strong>Жанр:</strong>
+              {anime?.genres?.map((genre) => genre.name)?.join(', ') || []}
+            </FlexGroup>
+
+            <FlexGroup>
+              <strong>Режисер:</strong>
+              {anime?.directors || '-'}
+            </FlexGroup>
+
+            <FlexGroup>
+              <strong>Озвучення:</strong> Cубтитри
+            </FlexGroup>
           </FlexGroup>
         </div>
       </main>

diff --git a/src/scss/screens/title/components/_titelInfo.scss b/src/scss/screens/title/components/_titelInfo.scss
@@ -32,14 +32,9 @@
       border-radius: 6px;
 
       background-color: $red;
+
       p {
         line-height: normal;
-        &:nth-child(1) {
-          text-align: right;
-        }
-        &:nth-child(2) {
-          text-align: center;
-        }
       }
     }
   }

diff --git a/src/services/Players/interfaces/Player.interface.ts b/src/services/Players/interfaces/Player.interface.ts
@@ -0,0 +1,9 @@
+export interface Player {
+  id: string;
+  name: string;
+  source?: string;
+  embedLink: string;
+  createdAt: string;
+  updatedAt: string;
+  titleId: string;
+}
diff --git a/src/services/Title/Title.service.ts b/src/services/Title/Title.service.ts
@@ -1,7 +1,9 @@
 import { Api } from '@api/api';
 import { GetAllTitlesResponse } from './interfaces/query/getAll/response.interface';
 import { GetAllTitlesRequest } from './interfaces/query/getAll/request.interface';
-import { API_SERVICES } from '@/constants';
+import { API_SERVICES, FunctionService } from '@/constants';
+import { GetTitleByIdRequest } from '@services/Title/interfaces/query/get/request.interface';
+import { Title } from '@services/Title/interfaces/Title.interface';
 
 export class TitleServiceApi extends Api {
   public constructor({ serviceName }: { serviceName: string }) {
@@ -26,6 +28,20 @@ export class TitleServiceApi extends Api {
 
     return titles.data.data;
   }
+
+  public async getTitleById<T = GetTitleByIdRequest>(
+    id?: string
+  ): Promise<Title | undefined> {
+    if (!id) {
+      return;
+    }
+
+    const response = await this.get<T, { data: Title }>(
+      (API_SERVICES.TITLE.GET_BY_ID as FunctionService)(id)
+    );
+
+    return response.data.data;
+  }
 }
 
 export const TitleService = new TitleServiceApi(API_SERVICES.TITLE);
diff --git a/src/services/Title/interfaces/Title.interface.ts b/src/services/Title/interfaces/Title.interface.ts
@@ -1,12 +1,14 @@
 import { Genre } from '@services/Genre/interfaces/Genre.interface';
 import { Keyword } from '@services/Keywords/interfaces/Keyword.interface';
+import { Player } from '@services/Players/interfaces/Player.interface';
 
 export interface Title {
   id: string;
   name: string;
   imageLink: string;
   genres: Genre[];
   keywords: Keyword[];
+  players: Player[];
   description: string;
   country: string;
   year: number;

diff --git a/src/services/Title/interfaces/query/get/request.interface.ts b/src/services/Title/interfaces/query/get/request.interface.ts
@@ -0,0 +1,3 @@
+export interface GetTitleByIdRequest {
+  id?: string;
+}
diff --git a/src/services/Title/interfaces/query/getAll/request.interface.ts b/src/services/Title/interfaces/query/getAll/request.interface.ts
@@ -1,5 +1,4 @@
 export interface GetAllTitlesRequest {
-  jaja: string;
   search?: string | string[]; // keywords
   genres?: string;
 }