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