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