Merge pull request #37 from markolofsen/dev

Dev

README.md

@@ -15,8 +15,6 @@ yarn && yarn dev
 yarn start
 ```
 
-## 
-
 
 ## Links
 

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

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

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
 }

src/pages/player.tsx

@@ -31,7 +31,7 @@ export default function Page() {
 
     const psHost = router.query.ss
     if (psHost) {
-      newCfg.psHost = psHost as string
+      newCfg.psHost = decodeURIComponent(psHost as string)
     }
 
     // alert(JSON.stringify(mergedConfig, null, 2))

src/views/ConnectionForm/EmbedSample.tsx

@@ -28,7 +28,7 @@ const PlayerView = () => {
     <MetaEditor
       debugMode="${config.debugMode}"
       showToolbar={${config.showToolbar}}
-      psHost="${config.psHost}"
+      psHost="${decodeURIComponent(config.psHost)}"
       psConfig={${JSON.stringify(config.psConfig, null, 4).replace(/(?:\r\n|\r|\n)/g, '\n    ')}}>
       <Button onClick={() => emitUi({ action: "ui_command" })}>
         Send action

src/views/ConnectionForm/index.tsx

@@ -31,12 +31,12 @@ export default function ConnectionForm() {
     const playerConfig = localStorage.getItem('playerConfig')
     if (playerConfig) {
       const config = JSON.parse(playerConfig) as PlayerConfigProps
-
       if (config.psHost) {
-        if (config.psHost.includes('127.0.0.1')) {
+        const configHost = decodeURIComponent(config.psHost)
+        if (configHost.includes('127.0.0.1')) {
           setLocalhost(true)
         } else {
-          const ss = config.psHost.split('://').slice(-1)[0]
+          const ss = configHost.split('://').slice(-1)[0]
           setAddress(ss)
           setLocalhost(false)
         }
@@ -50,7 +50,7 @@ export default function ConnectionForm() {
     e.preventDefault()
 
     localStorage.setItem('playerConfig', JSON.stringify(mergeConfig))
-    router.push(`/player?ss=${psHost}`)
+    router.push(`/player?ss=${mergeConfig.psHost}`)
   }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -66,7 +66,7 @@ export default function ConnectionForm() {
 
   const mergeConfig: PlayerConfigProps = {
     ...config,
-    psHost,
+    psHost: encodeURIComponent(psHost),
   }
 
   // render

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} />

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}`,
   // },
@@ -39,6 +43,9 @@ const CardItem = styled((props: any) => <ButtonBase component="div" {...props} /
     fontSize: '1.8rem',
     color: theme.palette.text.secondary,
     marginBottom: theme.spacing(1),
+    [theme.breakpoints.down("lg")]: {
+      fontSize: '1.3rem',
+    },
   },
   '& > h5': {
     transition: theme.transitions.create(['color']),
@@ -47,15 +54,22 @@ const CardItem = styled((props: any) => <ButtonBase component="div" {...props} /
     ...theme.typography.caption,
     color: theme.palette.text.secondary,
     textTransform: 'uppercase',
+    [theme.breakpoints.down("lg")]: {
+      fontSize: '.7rem',
+    },
   }
 }))
 
 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
@@ -105,25 +119,25 @@ export default function MainMenu() {
         gap={0}
         breakpoints={{
           1400: {
-            perPage: 4,
+            perPage: 5,
             gap: 0,
           },
           1200: {
-            perPage: 3,
+            perPage: 4,
             gap: 0,
           },
           900: {
-            perPage: 5,
+            perPage: 6,
             gap: 0,
           },
           640: {
             perPage: 4,
             gap: 0,
           },
-          430: {
-            perPage: 3,
-            gap: 0,
-          },
+          // 430: {
+          //   perPage: 4,
+          //   gap: 0,
+          // },
         }}
         items={items} />
     </MenuList>