reza added ar concept

temp
Reza_ashrafi 3 years ago
parent 45c10af75c
commit c5107688cf
  1. 1
      package.json
  2. 8
      src/assets/icons/link.svg
  3. 12
      src/assets/icons/pdf.svg
  4. 20
      src/components/Wave/index.js
  5. 14
      src/views/Home/Page2/Mobile/QrResult/Link/index.js
  6. 15
      src/views/Home/Page2/Mobile/QrResult/PDF/index.js
  7. 13
      src/views/Home/Page2/Mobile/QrResult/Voice/index.js
  8. 124
      src/views/Home/Page2/Mobile/QrResult/index.js
  9. 76
      src/views/Home/Page2/Mobile/Video/index.js
  10. 49
      src/views/Home/Page2/Mobile/index.js
  11. 21
      src/views/Home/Page2/index.js
  12. 2
      src/views/Home/Page3/index.js
  13. 2
      src/views/Home/Test/Question.js
  14. 17
      src/views/Home/Test/index.js
  15. 11
      src/views/Home/index.js
  16. 10
      tailwind.config.js
  17. 5
      yarn.lock

@ -17,6 +17,7 @@
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-toastify": "^8.1.0",
"react-wavesurfer": "^0.8.6",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.0",

@ -0,0 +1,8 @@
<svg id="link_1_" data-name="link (1)" xmlns="http://www.w3.org/2000/svg" width="19.001" height="19.002" viewBox="0 0 19.001 19.002">
<g id="Group_467" data-name="Group 467">
<g id="Group_466" data-name="Group 466">
<path id="Path_1936" data-name="Path 1936" d="M6.884,184.864,4.645,187.1a2.375,2.375,0,0,1-3.359-3.358l4.479-4.479a2.375,2.375,0,0,1,3.358,0,.792.792,0,1,0,1.12-1.12,3.958,3.958,0,0,0-5.6,0L.166,182.625a3.959,3.959,0,1,0,5.6,5.6L8,185.984a.792.792,0,1,0-1.12-1.12Z" transform="translate(0.993 -170.381)" fill="#d6ff06"/>
<path id="Path_1937" data-name="Path 1937" d="M200.692.159a3.959,3.959,0,0,0-5.6,0l-2.686,2.686a.792.792,0,0,0,1.12,1.12l2.686-2.686a2.375,2.375,0,0,1,3.359,3.358l-4.926,4.926a2.375,2.375,0,0,1-3.358,0,.792.792,0,0,0-1.12,1.12,3.958,3.958,0,0,0,5.6,0l4.926-4.926A3.958,3.958,0,0,0,200.692.159Z" transform="translate(-182.85 1)" fill="#d6ff06"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 923 B

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.346" height="16.346" viewBox="0 0 16.346 16.346">
<g id="files" transform="translate(0 0)">
<g id="Group_450" data-name="Group 450" transform="translate(0 0)">
<g id="Group_449" data-name="Group 449">
<path id="Path_1925" data-name="Path 1925" d="M290.554,256h-2.043a.511.511,0,0,0-.511.511V260.6a.511.511,0,0,0,.511.511h2.043a1.022,1.022,0,0,0,1.022-1.022v-3.065A1.022,1.022,0,0,0,290.554,256Zm0,4.086h-1.532v-3.065h1.532Z" transform="translate(-278.805 -247.827)" fill="#ff0808"/>
<path id="Path_1926" data-name="Path 1926" d="M419.065,257.022V256h-2.554a.511.511,0,0,0-.511.511v4.6h1.022v-2.043h2.043v-1.022h-2.043v-1.022Z" transform="translate(-402.719 -247.827)" fill="#ff0808"/>
<path id="Path_1927" data-name="Path 1927" d="M1.022,14.813V1.532a.511.511,0,0,1,.511-.511H9.195V3.065a1.022,1.022,0,0,0,1.022,1.022h2.043V5.619h1.022V3.575a.511.511,0,0,0-.148-.363L10.068.148A.511.511,0,0,0,9.705,0H1.532A1.532,1.532,0,0,0,0,1.532V14.813a1.532,1.532,0,0,0,1.532,1.532H5.108V15.324H1.532A.511.511,0,0,1,1.022,14.813Z" transform="translate(0 0)" fill="#ff0808"/>
<path id="Path_1928" data-name="Path 1928" d="M162.554,256h-2.043a.511.511,0,0,0-.511.511v4.6h1.022v-1.532h1.532a1.022,1.022,0,0,0,1.022-1.022v-1.532A1.022,1.022,0,0,0,162.554,256Zm0,2.554h-1.532v-1.532h1.532Z" transform="translate(-154.892 -247.827)" fill="#ff0808"/>
</g>
</g>
</g>
</svg>

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>
);
}

@ -1,17 +1,48 @@
import React from "react";
import React, { useState } from "react";
import olum2Image from "../../../../../assets/images/olum-2.svg";
import { connect } from "react-redux";
import _ from "lodash";
import PDF from "./PDF";
import Link from "./Link";
import Voice from "./Voice";
// import WaveAudio from "../../../../../components/Wave";
function QrResult({ book, grades, checked }) {
const Identifier = ({ item, activeType }) => {
return (
<>
{activeType === "all" ? (
<>
{item.type === "voice" ? <Voice voice={item} /> : null}
{item.type === "link" ? <Link link={item} /> : null}
{item.type === "pdf" ? <PDF pdf={item} /> : null}
</>
) : (
<>
{item.type === "voice" && item.type === activeType ? (
<Voice voice={item} />
) : null}
{item.type === "link" && item.type === activeType ? (
<Link link={item} />
) : null}
{item.type === "pdf" && item.type === activeType ? (
<PDF pdf={item} />
) : null}
</>
)}
</>
);
};
function QrResult({ book, grades, checked, dataTypes, list }) {
const [activeType, setActivetType] = useState("all");
return (
<div
className={_.join(
[
"relative w-full h-full min-h-full transition-all transform flex flex-col px-2 pt-10 bg-white",
"relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white",
],
" "
)}
onClick={(e) => e.stopPropagation()}
>
<div className="w-full flex flex-row items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
@ -20,13 +51,45 @@ function QrResult({ book, grades, checked }) {
<strong className="text-blueC0 font-light mt-2 text-sm">
{_.join(["پایه", grades[book.grade]], " ")}
</strong>
<p className="mt-1 text-blueC0 text-sm">{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}</p>
<p className="mt-1 text-blueC0 text-sm">
{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}
</p>
</div>
</div>
<div className="flex flex-column rounded-md border border-blueFE overflow-hidden">
<ul className="w-full flex flex-row list-none">
<div
className="flex flex-col justify-start rounded-md border border-blueFE overflow-hidden"
style={{ borderWidth: 1, borderColor: "#C1E0FE", borderStyle: "solid" }}
>
<ul className="w-full flex flex-row list-none items-center">
{dataTypes.map((item, index) => (
<li
key={index}
onClick={() => setActivetType(item.type)}
className={_.join(
[
"w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300",
activeType === item.type
? "font-bold bg-blueFF"
: "font-light bg-white",
],
" "
)}
style={{
borderBottom:
activeType === item.type
? "1px solid #E8FCFF"
: "1px solid #C1E0FE",
}}
>
{item.name}
</li>
))}
</ul>
<div className="px-2 py-3 w-full flex flex-col">
{list.map((item, index) => (
<Identifier item={item} key={index} activeType={activeType} />
))}
</div>
</div>
</div>
);
@ -43,30 +106,49 @@ QrResult.defaultProps = {
grade: 2,
imageUrl: olum2Image,
},
dataTypes : [
dataTypes: [
{
name: "تمامی محتواها",
type: "all",
},
{
name: "صوت",
type: "voice",
},
{
name: "ویدئو",
type: "video",
},
{
name : 'تمامی محتواها',
type : 'all'
name: "پی دی اف",
type: "pdf",
},
{
name : 'صوت',
type : 'voice'
name: "پاورپوینت",
type: "ppt",
},
{
name : 'ویدئو',
type : 'video'
name: "لینکها",
type: "link",
},
],
list: [
{
name : 'پی دی اف',
type : 'pdf'
name: "استاد رضایی فصل پنجم",
type: "voice",
value:
"https://assets.mixkit.co/sfx/preview/mixkit-fast-rocket-whoosh-1714.mp3",
},
{
name : 'پاورپوینت',
type : 'ppt'
name: "فایل پی دی اف تمارین مربوط به درس چهاردهم",
type: "pdf",
value:
"https://smallpdf.com/handle-widget#url=https://assets.ctfassets.net/l3l0sjr15nav/29D2yYGKlHNm0fB2YM1uW4/8e638080a0603252b1a50f35ae8762fd/Get_Started_With_Smallpdf.pdf",
},
{
name : 'لینکها',
type : 'links'
name: "لینک مربوط به محتوای یک چیز نامعلوم است",
type: "link",
value: "https://www.aparat.com/",
},
]
],
};

@ -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>
);
}

@ -4,6 +4,7 @@ import { connect } from "react-redux";
import QrResult from "./QrResult";
import QrScanner from "./QrScanner";
import AR from "./AR";
import Video from "./Video";
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) {
return (
@ -25,7 +26,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 1 ? "opacity-100" : "opacity-0",
unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
@ -35,8 +36,8 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
<div
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 2 ? "opacity-100" : "opacity-0",
"absolute w-full h-full min-h-full transform transitiona-ll duration-500",
unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
@ -47,7 +48,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100" : "opacity-0",
unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
@ -57,47 +58,13 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
<div
className={_.join(
[
"absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
unit === 4 ? "opacity-100" : "opacity-0",
"absolute left-0 top-0 h-full w-full",
unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
>
<video
id="video"
className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 3.5 * window.innerHeight ? "fixed" : "static",
],
" "
)}
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
? "auto"
: videoPosition?.left,
top:
window.scrollY < 3.5 * window.innerHeight
? "auto"
: videoPosition?.top,
}}
controls
autoPlay={"true"}
>
<source
src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`}
type={"video/mp4"}
/>
</video>
<Video videoPosition={videoPosition} selectedVideo={selectedVideo} />
</div>
</div>
</div>

@ -100,9 +100,13 @@ export default function Page2({ list, page, autoPlay }) {
});
}, []);
useEffect(() => {
// if (boxPosition.translateY < -17) {
// }
}, [boxPosition]);
useEffect(() => {
unitPositionHandler(window.scrollY);
},[mobilePosition])
}, [mobilePosition]);
const boxPositionHandler = (scrollY) => {
if (scrollY <= height) {
@ -158,7 +162,7 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height
)
);
}else{
} else {
setMobilePosition(6);
}
};
@ -171,6 +175,7 @@ export default function Page2({ list, page, autoPlay }) {
} else {
}
};
const unitPositionHandler = (scrollY) => {
if (scrollY > 2 * height && scrollY <= 2.5 * height) {
@ -179,13 +184,11 @@ export default function Page2({ list, page, autoPlay }) {
} else {
setUnit(1);
}
}
else if(scrollY > 2.5 * height && scrollY <= 2.7 * height){
} else if (scrollY > 2.5 * height && scrollY <= 2.7 * height) {
setUnit(2);
}
else if(scrollY > 2.7 * height && scrollY <= 3.2 * height){
} else if (scrollY > 2.7 * height && scrollY <= 2.8 * height) {
setUnit(3);
}else if(scrollY > 3.2 * height && scrollY < 3.5 * height){
} else if (scrollY > 2.8 * height && scrollY < 3.5 * height) {
setUnit(4);
}
};
@ -224,9 +227,9 @@ export default function Page2({ list, page, autoPlay }) {
<img src={qrImage} alt="" />
</div>
<div
className="absolute left-7 bg-purple-500"
className="absolute left-7 bg-black"
style={{
height: (window.innerHeight * 9) / 25,
height: (window.innerHeight * 9) / 25 - 20,
width: (window.innerHeight * 10) / 20 - 16,
bottom: (window.innerHeight * 9) / 30,
}}

@ -16,7 +16,7 @@ export default function Page3({ list, page }) {
<div
className={_.join(
[
"fixed left-0 h-screen w-full pt-20 bg-white transition-opacity duration-500 flex flex-row justify-center items-end",
"fixed left-0 h-screen w-full pt-20 bg-white transition-opacity duration-1000 flex flex-row justify-center items-end",
top > 0 ? "opacity-0 z-0" : "opacity-100 z-30",
],
" "

@ -24,7 +24,7 @@ export default function Question({ question }) {
)}
style={{
backgroundColor: select === option ? "#32af00" : "transparent",
borderColor: select === option ? "transparent" : "#f5f5f5",
borderColor: select === option ? "transparent" : "#777",
borderWidth: 1,
borderStyle: "solid",
}}

@ -60,7 +60,7 @@ export default function Test({ title, duration, questions }) {
>
<header
className="w-3/4 flex flex-row justify-between py-3 px-3 rounded-md"
style={{ border: "1px solid #F1F1F1" }}
style={{ border: "1px solid #777" }}
>
<div className="flex flex-row items-center">
<span
@ -79,6 +79,12 @@ export default function Test({ title, duration, questions }) {
{questions.map((question, index) => (
<QuestionBox question={question} key={index} />
))}
<button
className="text-md bg-blueC0 text-white py-3 px-4 rounded-md"
onClick={() => window.scrollTo(0, 5.5 * window.innerHeight)}
>
ثبت نهایی
</button>
</div>
);
}
@ -96,14 +102,5 @@ Test.defaultProps = {
"امکان دارد شاید و یا یک چیز دیگررر",
],
},
{
text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
options: [
"امکان دارد شاید و یا یک چیز دیگر",
"امکان دارد شاید و یا یک چیز دیگرر",
"امکان دارد شاید و یا یک چیز دیگرر",
"امکان دارد شاید و یا یک چیز دیگررر",
],
},
],
};

@ -16,6 +16,17 @@ export default function Home() {
} else {
setAutoPlay(() => false);
}
if (
!JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY > 1000
) {
localStorage.setItem(
"joiRect",
JSON.stringify(
document.getElementById("video-joi").getBoundingClientRect()
)
);
}
});
}, []);
return (

@ -7,16 +7,20 @@ module.exports = {
blueC0: "#196EC0",
blueB0 : "#517AB0",
blue90: "#235A90",
blueFF : '#E8FCFF'
blueFF : '#E8FCFF',
redFF : '#FFE6E6',
yellow2 : '#FDFFDA'
}),
textColor : (theme) => ({
...theme("colors"),
primary: "#235A90",
blueC0: "#196EC0",
blueE8 : '#2E81E8',
green71 : '#067182',
blue52 : '#132F52',
blue5F : '#05335F'
blue5F : '#05335F',
green71 : '#067182',
red5F : '#5F1A05',
yellow1 : '#5F5F05',
}),
borderColor : (theme) => ({
...theme("colors"),

@ -9517,6 +9517,11 @@ react-toastify@^8.1.0:
dependencies:
clsx "^1.1.1"
react-wavesurfer@^0.8.6:
version "0.8.6"
resolved "https://registry.yarnpkg.com/react-wavesurfer/-/react-wavesurfer-0.8.6.tgz#da05f3f501e566a63853f9babec45a5251111538"
integrity sha1-2gXz9QHlZqY4U/m6vsRaUlERFTg=
react@^17.0.2:
version "17.0.2"
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"

Loading…
Cancel
Save