Reza_ashrafi
3 years ago
parent
45c10af75c
commit
c5107688cf
17 changed files with 314 additions and 86 deletions
|
After Width: | Height: | Size: 923 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,20 @@ |
|||||||
|
// require('wavesurfer.js');
|
||||||
|
|
||||||
|
import React, { useState } from "react"; |
||||||
|
import Wavesurfer from "react-wavesurfer"; |
||||||
|
|
||||||
|
const WaveAudio = ({ audioFile }) => { |
||||||
|
const [playing, setPlaying] = useState(false); |
||||||
|
const [pos, setPos] = useState(0); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Wavesurfer |
||||||
|
audioFile={audioFile} |
||||||
|
pos={pos} |
||||||
|
onPosChange={(e) => setPos(() => e.originalArgs[0])} |
||||||
|
playing={playing} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default WaveAudio; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import React from "react"; |
||||||
|
import linkIcon from "../../../../../../assets/icons/link.svg"; |
||||||
|
|
||||||
|
export default function PDF({ link }) { |
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={link.value} |
||||||
|
className="w-full flex flex-row justify-between py-3 px-4 rounded-md bg-yellow2 my-2" |
||||||
|
> |
||||||
|
<p className="text-xs font-medium text-yellow1">{link.name}</p> |
||||||
|
<img src={linkIcon} className="w-5 h-5" /> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import React from "react"; |
||||||
|
import pdfIcon from '../../../../../../assets/icons/pdf.svg'; |
||||||
|
|
||||||
|
export default function PDF({ pdf }) { |
||||||
|
return ( |
||||||
|
<a |
||||||
|
download |
||||||
|
href={pdf.value} |
||||||
|
className="w-full flex flex-row justify-between py-3 px-4 rounded-md bg-redFF my-2" |
||||||
|
> |
||||||
|
<p className="text-xs font-medium text-red5F">{pdf.name}</p> |
||||||
|
<img src={pdfIcon} className="w-5 h-5" /> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export default function Voice({ voice }) { |
||||||
|
return ( |
||||||
|
<div className="w-full rounded-md flex flex-col my-2"> |
||||||
|
<audio controls className="w-full"> |
||||||
|
<source src={voice.value} type="audio/mp3" /> |
||||||
|
Your browser does not support the audio element. |
||||||
|
</audio> |
||||||
|
{/* <span className="text-xs">{voice.name}</span> */} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import ARImage from "../../../../../assets/images/ar.jpg"; |
||||||
|
import scroll from "../../../../../utils/scroll"; |
||||||
|
|
||||||
|
export default function Video({ selectedVideo, videoPosition }) { |
||||||
|
const height = window.innerHeight; |
||||||
|
const [top, setTop] = useState(null); |
||||||
|
useEffect(() => { |
||||||
|
scroll.linearFormula( |
||||||
|
window.scrollY > 3 * height ? 3 * height : window.scrollY, |
||||||
|
70, |
||||||
|
50, |
||||||
|
2.8 * height, |
||||||
|
3 * height |
||||||
|
); |
||||||
|
window.addEventListener("scroll", () => { |
||||||
|
console.log(window.scrollY); |
||||||
|
videoTopPositionHandler(window.scrollY); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const videoTopPositionHandler = (scrollY) => { |
||||||
|
console.log(scrollY); |
||||||
|
if (scrollY < 2.8 * height) { |
||||||
|
setTop(() => 50); |
||||||
|
} else if (scrollY >= 2.8 * height && scrollY < 3 * height) { |
||||||
|
setTop(() => |
||||||
|
scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height) |
||||||
|
); |
||||||
|
} else { |
||||||
|
setTop(() => 50); |
||||||
|
} |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="relative h-full w-full bg-transparent"> |
||||||
|
<video |
||||||
|
id="video" |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"video outline-none animation-puls transform", |
||||||
|
window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute", |
||||||
|
window.scrollY > 3.5 * window.innerHeight ? "" : "-translate-y-1/2", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
style={{ |
||||||
|
height: |
||||||
|
window.scrollY < 3.5 * window.innerHeight |
||||||
|
? (window.innerHeight * 9) / 25 |
||||||
|
: videoPosition?.height, |
||||||
|
width: |
||||||
|
window.scrollY < 3.5 * window.innerHeight |
||||||
|
? "100%" |
||||||
|
: videoPosition?.width, |
||||||
|
left: |
||||||
|
window.scrollY < 3.5 * window.innerHeight |
||||||
|
? "0px" |
||||||
|
: videoPosition?.left, |
||||||
|
top: |
||||||
|
window.scrollY < 3.5 * window.innerHeight |
||||||
|
? top + "%" |
||||||
|
: videoPosition?.top, |
||||||
|
}} |
||||||
|
controls |
||||||
|
autoPlay={"true"} |
||||||
|
> |
||||||
|
<source |
||||||
|
src={`https://dnvn.ir/api/v1/file/${20840}`} |
||||||
|
type={"video/mp4"} |
||||||
|
/> |
||||||
|
</video> |
||||||
|
<img src={ARImage} className="w-full absolute bottom-0 left-0" /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue