From 41f1c2309c8c78654a5e131fd45a9af711e553ce Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Sun, 17 Jul 2022 19:27:28 +0500 Subject: [PATCH] video player working --- src/components/global/PlayIcon.tsx | 12 ++++ src/components/global/VideoPlayer.tsx | 28 +++++++++ src/components/main/CalendarSection.tsx | 78 +++++++++++++++++++++++++ src/components/main/MainSlider.tsx | 5 +- src/helpers/apiRequests.ts | 10 ++++ src/icons/play.svg | 14 +++++ src/links.ts | 2 + src/pages/Main.tsx | 4 +- src/styles/_main.scss | 34 +++++++++++ src/styles/_video-player.scss | 33 +++++++++++ src/styles/style.scss | 1 + src/types/playerType.ts | 5 ++ 12 files changed, 221 insertions(+), 5 deletions(-) create mode 100644 src/components/global/PlayIcon.tsx create mode 100644 src/components/global/VideoPlayer.tsx create mode 100644 src/components/main/CalendarSection.tsx create mode 100644 src/icons/play.svg create mode 100644 src/styles/_video-player.scss create mode 100644 src/types/playerType.ts diff --git a/src/components/global/PlayIcon.tsx b/src/components/global/PlayIcon.tsx new file mode 100644 index 0000000..1e3595d --- /dev/null +++ b/src/components/global/PlayIcon.tsx @@ -0,0 +1,12 @@ +// Icons +import play from "../../icons/play.svg"; + +const PlayIcon = () => { + return ( +
+ play +
+ ); +}; + +export default PlayIcon; diff --git a/src/components/global/VideoPlayer.tsx b/src/components/global/VideoPlayer.tsx new file mode 100644 index 0000000..66bde25 --- /dev/null +++ b/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 ( +
+ {placeholder ? : ""} + 0 ? : undefined} + volume={1} + height={"100%"} + width={"100%"} + /> +
+ ); +}; + +export default VideoPlayer; diff --git a/src/components/main/CalendarSection.tsx b/src/components/main/CalendarSection.tsx new file mode 100644 index 0000000..b197ab6 --- /dev/null +++ b/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 ( +
+
+
+
+ +
+ + {videoData + ? videoData.map((vid: any) => { + return ( + +
{ + setVideo(vid.video); + setPlaceholder(vid.poster); + }} + > + +
+ + ); + }) + : ["", "", ""].map(() => { + return ( + +
+ + ); + })} + +
+
+
+
+
+ ); +}; + +export default CalendarSection; diff --git a/src/components/main/MainSlider.tsx b/src/components/main/MainSlider.tsx index 2cc7b38..532a58a 100644 --- a/src/components/main/MainSlider.tsx +++ b/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"; diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts index 5f785c7..c44871e 100644 --- a/src/helpers/apiRequests.ts +++ b/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(); +}; diff --git a/src/icons/play.svg b/src/icons/play.svg new file mode 100644 index 0000000..b58e535 --- /dev/null +++ b/src/icons/play.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/links.ts b/src/links.ts index 8484421..019f6f0 100644 --- a/src/links.ts +++ b/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"; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 833a16a..2d391f5 100644 --- a/src/pages/Main.tsx +++ b/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 (
+
diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 23e7c34..56d737f 100644 --- a/src/styles/_main.scss +++ b/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; + } +} diff --git a/src/styles/_video-player.scss b/src/styles/_video-player.scss new file mode 100644 index 0000000..3d0bb69 --- /dev/null +++ b/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%); + } +} diff --git a/src/styles/style.scss b/src/styles/style.scss index 7d99baf..ae8946a 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -14,3 +14,4 @@ @import "./structure"; @import "./contact"; @import "./calendar"; +@import "./video-player"; diff --git a/src/types/playerType.ts b/src/types/playerType.ts new file mode 100644 index 0000000..c76de08 --- /dev/null +++ b/src/types/playerType.ts @@ -0,0 +1,5 @@ +export type playerType = [string, React.Dispatch]; +export interface playerInterface { + videoUrl: string; + placeholder: any; +}