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