fix preloader

markolofsen · Mar 14, 2023 · 1035cab · 1035cab
1 parent 660bf11
commit 1035cab
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 48 deletions.
diff --git a/src/@core/components/Carousel/index.tsx b/src/@core/components/Carousel/index.tsx
@@ -1,6 +1,6 @@
 // mui
-import { styled, alpha, lighten } from '@mui/system';
-import { ButtonBase } from "@mui/material";
+import { styled } from '@mui/system';
+// import { Box } from "@mui/material";
 
 // libs
 import { Splide, SplideSlide, Options } from '@splidejs/react-splide';
@@ -10,27 +10,14 @@ import '@splidejs/react-splide/css';
 const RootDiv = styled('div')(({ theme }: any) => ({
   '& .splide__arrow:disabled': {
     display: 'none'
+  },
+  '& .splide__slide': {
+    '& > *': {
+      width: '100%'
+    }
   }
 }))
 
-const Card = styled((props: any) => <ButtonBase component="div" {...props} />)(({ theme }: any) => ({
-  // borderRadius: theme.shape.borderRadius,
-  width: '100%',
-
-  // transition: theme.transitions.create(['background-color', 'border-color']),
-  // overflow: 'hidden',
-  // border: `solid 1px rgba(255,255,255, .2)`,
-  // backgroundColor: 'rgba(0,0,0,.2)',
-  // backdropFilter: 'blur(4px)',
-  // '&:hover': {
-  //   borderColor: 'rgba(255,255,255, .5)',
-  //   backgroundColor: 'rgba(0,0,0,1)',
-  // },
-  '& > *': {
-    width: '100%',
-  },
-}));
-
 interface Props extends Options {
   items: JSX.Element[]
 }
@@ -69,7 +56,7 @@ export default function Slider({ items, ...props }: Props) {
       }}>
         {items.map((item, index) => (
           <SplideSlide key={index}>
-            <Card children={item} />
+            {item}
           </SplideSlide>
         ))}
 

diff --git a/src/@core/context/useGlobalContext/actions.ts b/src/@core/context/useGlobalContext/actions.ts
@@ -33,13 +33,21 @@ const actions = () => {
       })
     }
 
+    handleMenu(bottomMenuIndex: number) {
+      this.dispatch({
+        bottomMenuIndex,
+      })
+    }
+
   }
 
   return cls
 }
 
 export interface ActionProps {
+  state: StateProps
   fullescreenHandle: FullScreenHandle
+  handleMenu: (bottomMenuIndex: number) => void
 }
 
 export default actions
diff --git a/src/@core/context/useGlobalContext/initial.ts b/src/@core/context/useGlobalContext/initial.ts
@@ -1,10 +1,9 @@
 
 // Types
 export interface StateProps {
-  // context: types.UserContextData
-  // activeOrderData: ActiveOrderData | false | null
+  bottomMenuIndex: number
 }
 
 export const initialState: StateProps = {
-
+  bottomMenuIndex: 0
 }
diff --git a/src/iconify-bundle/icons-bundle-react.js b/src/iconify-bundle/icons-bundle-react.js
diff --git a/src/views/Player/Controls/Gallery.tsx b/src/views/Player/Controls/Gallery.tsx
@@ -10,12 +10,27 @@ import Carousel from 'src/@core/components/Carousel'
 // libs
 import { Hooks } from 'pixel-streaming';
 
-const Card = styled((props: any) => <ButtonBase component="div" {...props} />)(({ theme }: any) => ({
-  height: 90,
+const Card = styled((props: any) => <ButtonBase component="ul" {...props} />)(({ theme }: any) => ({
+  listStyle: 'none',
+  margin: 0,
+  padding: theme.spacing(2),
+
+  height: 80,
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: 'stretch',
+
   borderRight: `1px solid ${theme.palette.divider}`,
+  '& > [data-li="image"]': {
+    width: 60,
+    height: '100%',
+    backgroundColor: 'rgba(255,255,255, .1)',
+    borderRadius: theme.shape.borderRadius,
+    marginRight: theme.spacing(3),
+  },
+  '& > [data-li="content"]': {
+    flex: 1,
+    // height: '100%',
+  },
 }));
 
 export default function Controls() {
@@ -33,9 +48,12 @@ export default function Controls() {
           actions.emitUi({ action: 'ui_command' }, { debug: true })
           // actions.emitSys({ action: 'system_command' }, { debug: true })
         }}>
-        <Typography variant="caption">
-          {title}
-        </Typography>
+        <li data-li="image" />
+        <li data-li="content">
+          <Typography variant="caption">
+            {title}
+          </Typography>
+        </li>
       </Card>
     )
   })
@@ -50,7 +68,7 @@ export default function Controls() {
             perPage: 3,
           },
           640: {
-            perPage: 1,
+            perPage: 2,
           },
         }}
         items={items} />

diff --git a/src/views/Player/Controls/MainMenu.tsx b/src/views/Player/Controls/MainMenu.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+// context
+import { useGlobalContext } from 'src/@core/context';
+
 // mui
 import { styled } from '@mui/system';
 import { Typography } from '@mui/material';
@@ -22,6 +25,7 @@ const CardItem = styled((props: any) => <ButtonBase component="div" {...props} /
   padding: theme.spacing(4, 6),
   borderRadius: theme.shape.borderRadius,
   transition: theme.transitions.create(['background-color']),
+
   // ':not(:last-child)': {
   //   borderRight: `1px solid ${theme.palette.divider}`,
   // },
@@ -58,10 +62,14 @@ const CardItem = styled((props: any) => <ButtonBase component="div" {...props} /
 
 export default function MainMenu() {
 
-  const [activeIndex, setActiveIndex] = React.useState(-1)
+  // context
+  const globalContext = useGlobalContext()
+
+  // states
+  const activeIndex = globalContext.state.bottomMenuIndex
 
   const handleMenuClick = (index: number) => {
-    setActiveIndex(index)
+    globalContext.handleMenu(index)
   }
 
   // render

diff --git a/src/views/Player/Controls/index.tsx b/src/views/Player/Controls/index.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+// context
+import { useGlobalContext } from 'src/@core/context';
+
 // mui
 import { styled } from '@mui/system';
 import { Box, Collapse, Button } from '@mui/material';
@@ -32,9 +35,10 @@ const RootDiv = styled('ul')(({ theme }: any) => ({
   },
   [theme.breakpoints.up("md")]: {
     display: 'flex',
-    alignItems: 'center',
+    // alignItems: 'center',
   },
 
+
   '& > [data-li="menu"]': {
     [theme.breakpoints.up("md")]: {
       flex: '1 0 40%',
@@ -43,9 +47,8 @@ const RootDiv = styled('ul')(({ theme }: any) => ({
   },
   '& > [data-li="gallery"]': {
     flex: 1,
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
     overflow: 'hidden',
+    borderRadius: theme.shape.borderRadius,
     [theme.breakpoints.down("md")]: {
       marginBottom: theme.spacing(3),
     },
@@ -66,16 +69,27 @@ const IconButtonMenu = styled(Button)(({ theme }: any) => ({
 
 export default function Controls() {
 
+  // context
+  const globalContext = useGlobalContext()
+
   // hooks
   const media = useMedia()
 
   // states
   const [show, setShow] = React.useState(true)
+  const [collapsed, setCollapsed] = React.useState(true)
 
   React.useEffect(() => {
     setShow(media.down.sm ? false : true)
   }, [media.down.sm])
 
+  React.useEffect(() => {
+    setCollapsed(false)
+    setTimeout(() => {
+      setCollapsed(true)
+    }, 300)
+  }, [globalContext.state.bottomMenuIndex])
+
   return (
     <ClickAwayListener
       onClickAway={() => {
@@ -107,7 +121,15 @@ export default function Controls() {
               <MainMenu />
             </li>
             <li data-li="gallery">
-              <Gallery />
+              <Collapse in={collapsed}>
+                <Box sx={{
+                  borderRadius: theme => theme.shape.borderRadius + 'px',
+                  border: '1px solid',
+                  borderColor: 'divider',
+                }}>
+                  <Gallery />
+                </Box>
+              </Collapse>
             </li>
           </RootDiv>
 

diff --git a/src/views/Player/Preloader.tsx b/src/views/Player/Preloader.tsx
@@ -5,7 +5,7 @@ import project from 'src/configs/project';
 
 // mui
 import { styled } from '@mui/system';
-import { Typography, Button, IconButton, Portal } from '@mui/material';
+import { Paper, Typography, Button, IconButton, Portal } from '@mui/material';
 
 // icons
 import CircularProgress from '@mui/material/CircularProgress';
@@ -52,12 +52,6 @@ const Background = styled('div')(({ theme }: any) => ({
 
 }))
 
-const ErrorDiv = styled('div')(({ theme }: any) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-}))
-
 const LoaderDiv = styled('div')(({ theme }: any) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -106,8 +100,21 @@ const WebrtcError = () => {
   const preloader = Hooks.preloader()
 
   return (
-    <ErrorDiv>
+    <Paper
+      variant='outlined'
+      sx={{
+        backgroundColor: 'rgba(0,0,0,.7)',
+        backdropFilter: 'blur(4px)',
+        p: 10,
+        textAlign: 'center',
+      }}>
+
       <Typography variant="h5" align="center" sx={{ mb: 5 }}>
+        This player is not connected to the video stream. <br />
+        To connect, you need to run Unreal Engine + Signaling Server.
+      </Typography>
+
+      <Typography variant="subtitle2" align="center" sx={{ mb: 5 }}>
         {preloader.webrtcErrorHeader}
       </Typography>
       <Button
@@ -117,7 +124,8 @@ const WebrtcError = () => {
         variant="contained">
         Restart
       </Button>
-    </ErrorDiv>
+
+    </Paper>
   )
 }