Merge pull request #32 from markolofsen/dev

Dev

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "yarn build:icons && next build",
     "start": "next start",
     "lint": "next lint",
     "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest",

src/@core/components/Carousel/index.tsx

@@ -7,6 +7,12 @@ import { Splide, SplideSlide, Options } from '@splidejs/react-splide';
 import '@splidejs/react-splide/css';
 
 
+const RootDiv = styled('div')(({ theme }: any) => ({
+  '& .splide__arrow:disabled': {
+    display: 'none'
+  }
+}))
+
 const Card = styled((props: any) => <ButtonBase component="div" {...props} />)(({ theme }: any) => ({
   // borderRadius: theme.shape.borderRadius,
   width: '100%',
@@ -22,7 +28,7 @@ const Card = styled((props: any) => <ButtonBase component="div" {...props} />)((
   // },
   '& > *': {
     width: '100%',
-  }
+  },
 }));
 
 interface Props extends Options {
@@ -32,40 +38,42 @@ interface Props extends Options {
 export default function Slider({ items, ...props }: Props) {
 
   return (
-    <Splide options={{
-      rewind: true,
-      perPage: 6,
-      gap: '1rem',
-      // height: 230,
-      pagination: false,
-      padding: {
-        bottom: 0,
-      },
-      breakpoints: {
-        1200: {
-          perPage: 4,
-          gap: '.7rem',
-          // height: '10rem',
+    <RootDiv>
+      <Splide options={{
+        rewind: true,
+        perPage: 6,
+        gap: '1rem',
+        // height: 230,
+        pagination: false,
+        padding: {
+          bottom: 0,
         },
-        640: {
-          perPage: 2,
-          gap: '.7rem',
-          // height: '10rem',
+        breakpoints: {
+          1200: {
+            perPage: 4,
+            gap: '.7rem',
+            // height: '10rem',
+          },
+          640: {
+            perPage: 2,
+            gap: '.7rem',
+            // height: '10rem',
+          },
+          // 480: {
+          //   perPage: 1,
+          //   gap: '.7rem',
+          //   height: '15rem',
+          // },
         },
-        // 480: {
-        //   perPage: 1,
-        //   gap: '.7rem',
-        //   height: '15rem',
-        // },
-      },
-      ...props,
-    }}>
-      {items.map((item, index) => (
-        <SplideSlide key={index}>
-          <Card children={item} />
-        </SplideSlide>
-      ))}
+        ...props,
+      }}>
+        {items.map((item, index) => (
+          <SplideSlide key={index}>
+            <Card children={item} />
+          </SplideSlide>
+        ))}
 
-    </Splide>
+      </Splide>
+    </RootDiv>
   );
 }

src/@core/hooks/useMedia.ts

@@ -0,0 +1,85 @@
+/* Usage
+
+// hooks
+import { useMedia } from 'src/hooks/useMedia'
+
+function demo() {
+	const media = useMedia();
+	const isMobile = media.down.sm
+
+		console.warn(media)
+
+		// Response:
+		// "up":{"xs":true,"sm":true,"md":true,"lg":false,"xl":false},
+		// "down":{"xs":false,"sm":false,"md":true,"lg":true,"xl":true},
+
+	return (
+		<div>
+
+			{media.up.sm && (
+				<div>
+					Over sm
+				</div>
+			)}
+			{media.down.sm && (
+				<div>
+					Less then sm
+				</div>
+			)}
+
+			<br />
+			{JSON.strinigy(media)}
+		</div>
+	)
+}
+
+*/
+
+// Mui
+// import { useTheme, ThemedProps } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+
+interface MediaItem {
+	xs: boolean
+	sm: boolean
+	md: boolean
+	lg: boolean
+	xl: boolean
+	xxl: boolean
+	[key: string]: boolean
+}
+
+interface MediaDict {
+	up: MediaItem
+	down: MediaItem
+	only: MediaItem
+}
+
+export const useMedia = () => {
+	// const theme: ThemedProps = useTheme();
+
+	const matches = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+
+	const chunks: MediaItem = {
+		xs: false,
+		sm: false,
+		md: false,
+		lg: false,
+		xl: false,
+		xxl: false,
+	}
+
+	const res: MediaDict = {
+		up: chunks,
+		down: chunks,
+		only: chunks,
+	}
+	for (const i of matches) {
+		res.up[i] = useMediaQuery((theme: any) => theme.breakpoints.up(i)) as boolean
+		res.down[i] = useMediaQuery((theme: any) => theme.breakpoints.down(i)) as boolean
+		res.only[i] = useMediaQuery((theme: any) => theme.breakpoints.only(i)) as boolean
+	}
+
+	return res as MediaDict
+}

src/pages/index.tsx

@@ -1,6 +1,6 @@
 
-// snippets
-import ConnectionForm from 'src/layouts/ConnectionForm'
+// views
+import ConnectionForm from 'src/views/ConnectionForm'
 
 export default function Page() {
 

src/pages/player.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/router'
 // libs
 import { PlayerConfigProps } from 'pixel-streaming'
 
-// layouts
-import Player from 'src/layouts/Player'
-import defaultConfig from 'src/layouts/Player/defaultConfig'
+// views
+import Player from 'src/views/Player'
+import defaultConfig from 'src/views/Player/defaultConfig'
 
 export default function Page() {
 

src/layouts/Player/Controls/Gallery.tsx → src/views/Player/Controls/Gallery.tsx

@@ -43,16 +43,14 @@ export default function Controls() {
   return (
     <div>
       <Carousel
-        perPage={3}
+        perPage={5}
         gap={0}
         breakpoints={{
           1200: {
-            perPage: 2,
-            gap: '.7rem',
+            perPage: 3,
           },
           640: {
             perPage: 1,
-            gap: '.7rem',
           },
         }}
         items={items} />