video player working

src/components/global/PlayIcon.tsx

@@ -0,0 +1,12 @@
+// Icons
+import play from "../../icons/play.svg";
+
+const PlayIcon = () => {
+  return (
+    <div className="play-icon">
+      <img src={play} alt="play" />
+    </div>
+  );
+};
+
+export default PlayIcon;

src/components/global/VideoPlayer.tsx

@@ -0,0 +1,28 @@
+// Modules
+import ReactPlayer from "react-player/lazy";
+import { hosting } from "../../links";
+
+// Components
+import PlayIcon from "./PlayIcon";
+
+// Types
+import { playerInterface } from "../../types/playerType";
+
+const VideoPlayer = ({ videoUrl, placeholder }: playerInterface) => {
+  return (
+    <div className="player">
+      {placeholder ? <img src={hosting + placeholder} alt="" /> : ""}
+      <ReactPlayer
+        url={hosting + videoUrl}
+        light
+        controls
+        playIcon={videoUrl.length > 0 ? <PlayIcon /> : undefined}
+        volume={1}
+        height={"100%"}
+        width={"100%"}
+      />
+    </div>
+  );
+};
+
+export default VideoPlayer;

src/components/main/CalendarSection.tsx

@@ -0,0 +1,78 @@
+// Modules
+import { useState, useEffect } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper";
+import "swiper/css";
+import { v4 as uuidv4 } from "uuid";
+
+// Icons
+import arrowPrev from "../../icons/arrow-left-white.svg";
+import arrowNext from "../../icons/arrow-right-white.svg";
+
+// Components
+import VideoPlayer from "../global/VideoPlayer";
+
+// Types
+import { playerType } from "../../types/playerType";
+
+// Helpers
+import { getVideos } from "../../helpers/apiRequests";
+import { hosting } from "../../links";
+
+const CalendarSection = () => {
+  const [video, setVideo]: playerType = useState("");
+  const [videoData, setVideoData]: any = useState();
+  const [placeholder, setPlaceholder]: any = useState();
+  useEffect(() => {
+    getVideos((res: any) => {
+      setVideoData(res);
+      setPlaceholder(res[0].poster);
+      setVideo(res[0].video);
+    });
+  }, []);
+  return (
+    <section className="calendars-outer">
+      <div className="container">
+        <div className="calendars">
+          <div className="calendars-left">
+            <VideoPlayer videoUrl={video} placeholder={placeholder} />
+            <div className="slider-video">
+              <Swiper
+                modules={[]}
+                spaceBetween={24}
+                slidesPerView={3}
+                loop={false}
+              >
+                {videoData
+                  ? videoData.map((vid: any) => {
+                      return (
+                        <SwiperSlide key={uuidv4()}>
+                          <div
+                            className="video-slide"
+                            onClick={() => {
+                              setVideo(vid.video);
+                              setPlaceholder(vid.poster);
+                            }}
+                          >
+                            <img src={hosting + vid.poster} alt="" />
+                          </div>
+                        </SwiperSlide>
+                      );
+                    })
+                  : ["", "", ""].map(() => {
+                      return (
+                        <SwiperSlide key={uuidv4()}>
+                          <div className="video-slide skeleton"></div>
+                        </SwiperSlide>
+                      );
+                    })}
+              </Swiper>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CalendarSection;

src/components/main/MainSlider.tsx

@@ -1,13 +1,10 @@
 // Modules
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Autoplay } from "swiper";
-import { useState, useEffect, useMemo } from "react";
 import "swiper/css";
+import { useState, useEffect } from "react";
 import { v4 as uuidv4 } from "uuid";
 
-// Images
-import game from "../../images/slider-img.jpg";
-
 // Icons
 import arrowPrev from "../../icons/arrow-left-white.svg";
 import arrowNext from "../../icons/arrow-right-white.svg";

src/helpers/apiRequests.ts

@@ -11,6 +11,7 @@ import {
   postsAll,
   postsAside,
   post,
+  videos,
 } from "../links";
 import React from "react";
 
@@ -82,3 +83,12 @@ export const getEvent = (
       }, 1000);
     });
 };
+
+export const getVideos = (setState: any) => {
+  axios
+    .get(videos)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};

src/icons/play.svg

@@ -0,0 +1,14 @@
+<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b_48_22)">
+<circle cx="39.4372" cy="39.4372" r="39.4372" fill="white" fill-opacity="0.2"/>
+</g>
+<path d="M52.0583 39.4373L26.8185 56.7897L26.8185 22.085L52.0583 39.4373Z" fill="white"/>
+<defs>
+<filter id="filter0_b_48_22" x="-5" y="-5" width="88.8745" height="88.8745" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="2.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_48_22"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_48_22" result="shape"/>
+</filter>
+</defs>
+</svg>

src/links.ts

@@ -11,3 +11,5 @@ export const postsAside: string =
   hosting + "/api/v1/posts?locale=ru&per_page=4&sort_order=asc";
 
 export const post: string = hosting + "/api/v1/posts"; // /id ? locale
+
+export const videos: string = hosting + "/api/v1/videos";

src/pages/Main.tsx

@@ -6,15 +6,17 @@ import MainSlider from "../components/main/MainSlider";
 import EventsSection from "../components/main/EventsSection";
 import PlayerRating from "../components/main/PlayerRatingSection";
 import Partners from "../components/main/PartnersSection";
+import CalendarSection from "../components/main/CalendarSection";
 
 const Main = () => {
   useEffect(() => {
-    // window.scrollTo(0, 0);
+    window.scrollTo(0, 0);
   }, []);
   return (
     <main className="main">
       <MainSlider />
       <EventsSection />
+      <CalendarSection />
       <PlayerRating />
       <Partners />
     </main>

src/styles/_main.scss

@@ -161,3 +161,37 @@
   width: 100%;
   @include shineLoad;
 }
+
+.calendars {
+  padding: 4rem 0 8rem 0;
+  display: grid;
+  grid-template-columns: 91.1rem 1fr;
+  gap: 12rem;
+}
+
+.calendars-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.video-slide {
+  max-width: 28.7rem;
+  max-height: 16rem;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.skeleton {
+    @include shineLoad;
+    height: 16rem;
+  }
+}

src/styles/_video-player.scss

@@ -0,0 +1,33 @@
+.player {
+  width: 100%;
+  min-height: 51.2rem;
+  @include shineLoad;
+
+  img {
+    pointer-events: none;
+    z-index: -1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.play-icon {
+  position: relative;
+  background: #000000a6;
+  width: 100%;
+  height: 100%;
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 2;
+    width: 8rem;
+    height: 8rem;
+    transform: translate(-50%, -50%);
+  }
+}

src/styles/style.scss

@@ -14,3 +14,4 @@
 @import "./structure";
 @import "./contact";
 @import "./calendar";
+@import "./video-player";

src/types/playerType.ts

@@ -0,0 +1,5 @@
+export type playerType = [string, React.Dispatch<string>];
+export interface playerInterface {
+  videoUrl: string;
+  placeholder: any;
+}