WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

first commit

Browse Source
This commit is contained in:
Olu Amey
2021-12-18 20:23:31 -05:00
commit bce242fd22
308 changed files with 42398 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeTwo/VideoPlayerHomeTwo.js
+105
View File
@@ -0,0 +1,105 @@
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;