You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

81 lines
2.0 KiB

import React, { useEffect, useState } from "react";
import _ from "lodash";
import { connect } from "react-redux";
import QrResult from "./QrResult";
import QrScanner from "./QrScanner";
import AR from "./AR";
import Video from "./Video";
function Mobile({ mobilePosition, selectedVideo, unit }) {
return (
<div
className={_.join(
["fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"],
" "
)}
style={{
top: "5%",
height: (window.innerHeight * 9) / 10,
width: (window.innerHeight * 10) / 20,
left: mobilePosition + "%",
border: '4px solid black'
}}
>
<div className="relative w-full h-full flex">
<div
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
>
<QrScanner />
</div>
<div
className={_.join(
[
"absolute w-full h-full min-h-full transform transitiona-ll duration-500",
unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
>
<QrResult />
</div>
<div
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
>
<AR />
</div>
<div
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
>
<Video selectedVideo={selectedVideo} />
</div>
</div>
</div>
);
}
export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
mobilePosition: state.scrollAction.page2MobilePosition,
unit : state.scrollAction.page2MobileUnit,
}),
{}
)(Mobile);