Olu Amey
106 lines
4.6 KiB
JavaScript
106 lines
4.6 KiB
JavaScript
import React, { useRef, useState } from 'react';
|
|
import Slider from 'react-slick';
|
|
import 'slick-carousel/slick/slick-theme.css';
|
|
import 'slick-carousel/slick/slick.css';
|
|
import videoSlideOne from '../../assets/images/video-slide-1.jpg';
|
|
import videoSlideTwo from '../../assets/images/video-slide-2.jpg';
|
|
import videoThumb from '../../assets/images/video-thumb-1.jpg';
|
|
import PopupVideo from '../PopupVideo';
|
|
|
|
function VideoPlayerHomeTwo({ className }) {
|
|
const [showVideo, setshowVideoValue] = useState(false);
|
|
const handleVideoShow = (e) => {
|
|
e.preventDefault();
|
|
setshowVideoValue(!showVideo);
|
|
};
|
|
const sliderRef = useRef();
|
|
const settings = {
|
|
autoplay: true,
|
|
arrows: false,
|
|
dots: false,
|
|
};
|
|
const sliderNext = () => {
|
|
sliderRef.current.slickNext();
|
|
};
|
|
const sliderPrev = () => {
|
|
sliderRef.current.slickPrev();
|
|
};
|
|
return (
|
|
<>
|
|
{showVideo && (
|
|
<PopupVideo
|
|
handler={(e) => handleVideoShow(e)}
|
|
videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
|
|
/>
|
|
)}
|
|
<section className={`appie-video-player-area pb-100 ${className || ''}`}>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-8">
|
|
<div className="appie-video-player-item">
|
|
<div className="thumb">
|
|
<img src={videoThumb} alt="" />
|
|
<div className="video-popup">
|
|
<a
|
|
onClick={(e) => handleVideoShow(e)}
|
|
role="button"
|
|
href="#"
|
|
className="appie-video-popup"
|
|
>
|
|
<i className="fas fa-play" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="content">
|
|
<h3 className="title">
|
|
Watch the two-minute video to learn how.
|
|
</h3>
|
|
<p>
|
|
The wireless cheesed on your bike mate zonked a load of old
|
|
tosh hunky dory it's all gone to pot haggle william car boot
|
|
pear shaped geeza.
|
|
</p>
|
|
<a className="main-btn" href="#">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4">
|
|
<div
|
|
className="appie-video-player-slider"
|
|
style={{ position: 'relative' }}
|
|
>
|
|
<span
|
|
onClick={sliderPrev}
|
|
className="prev slick-arrow"
|
|
style={{ display: 'block' }}
|
|
>
|
|
<i className="fal fa-arrow-left" />
|
|
</span>
|
|
<Slider ref={sliderRef} {...settings}>
|
|
<div className="item">
|
|
<img src={videoSlideOne} alt="" />
|
|
</div>
|
|
<div className="item">
|
|
<img src={videoSlideTwo} alt="" />
|
|
</div>
|
|
</Slider>
|
|
<span
|
|
onClick={sliderNext}
|
|
className="next slick-arrow"
|
|
style={{ display: 'block' }}
|
|
>
|
|
<i className="fal fa-arrow-right" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default VideoPlayerHomeTwo;
|