feat: added multi players, remove / add next

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

components/Player.js

@@ -1,18 +1,67 @@
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-function Player({ src }) {
-  return <iframe
-    id="player"
-    src={src}
-    height="720"
-    width="1280"
-    frameBorder="0"
-    scrolling="no"
-    allowFullScreen="true">
-  </iframe>;
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+
+const Clip = styled.div`
+  height: 200px;
+  width: 400px;
+  background-color: red;
+  margin: 10px;
+  position: absolute;
+  /* should be (Wc - Wp) / 2 */
+  left: -100px;
+  box-shadow: 0px -1px 24px 0px rgba(0,0,0,0.75);
+
+  ${({ isActive }) => isActive && css`
+    background-color: yellow;
+    border: 1px solid black;
+  `}
+
+  ${({ order }) => css`
+    z-index: ${order};
+  `}
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: grey;
+`;
+
+const PreviewWrapper = styled.div`
+  height: 100px;
+  width: 200px;
+  background-color: green;
+  position: relative;
+  margin: 0 20px;
+`;
+
+function Preview({ order = 0, isActive, cb }) {
+  return (
+    <PreviewWrapper>
+      <Clip order={order} isActive={isActive} onClick={cb} />
+    </PreviewWrapper>
+  );
+}
+
+function Player() {
+  const [isActive, setIsActive] = useState(2);
+
+  const toggleState = (id) => () => {
+    console.log(id);
+
+    setIsActive(id);
+  };
+
+  return (
+    <Wrapper>
+      <Preview isActive={isActive === 0} cb={toggleState(0)} order={0}/>
+      <Preview isActive={isActive === 1} cb={toggleState(1)} order={1}/>
+      <Preview isActive={isActive === 2} cb={toggleState(2)} order={2}/>
+      <Preview isActive={isActive === 3} cb={toggleState(3)} order={1}/>
+      <Preview isActive={isActive === 4} cb={toggleState(4)} order={0}/>
+    </Wrapper>
+  );
 }
 
-export default dynamic(() => Promise.resolve(Player), {
-  ssr: false,
-});
+export default Player;

package.json

@@ -26,11 +26,14 @@
     "axios": "^0.19.2",
     "express": "^4.17.1",
     "next": "^9.2.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "react-dom": "^16.13.0",
+    "styled-components": "^5.0.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "babel-plugin-styled-components": "^1.10.7",
     "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.20.1",

pages/_document.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Document from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      // eslint-disable-next-line no-param-reassign
+      ctx.renderPage = () => originalRenderPage({
+        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+      });
+
+      const initialProps = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

pages/index.js

@@ -3,23 +3,21 @@ import axios from 'axios';
 import Player from '../components/Player';
 
 function Index({ clips }) {
-  return (<>
-    {clips.map(({ embed_url, id }) => <Player key={id} src={embed_url}/>)}
-  </>);
+  return (<Player />);
 }
 
-Index.getInitialProps = async ({ req }) => {
-  const { data: games } = await axios.get(`${req.api_url}games/top?first=2`, {
-    headers: { 'Client-ID': req.client_id },
-  });
+// Index.getInitialProps = async ({ req }) => {
+//   const { data: games } = await axios.get(`${req.api_url}games/top?first=2`, {
+//     headers: { 'Client-ID': req.client_id },
+//   });
 
-  const res = await Promise.all(games.data.map(({ id }) => axios.get(`${req.api_url}clips?game_id=${id}&first=3`, {
-    headers: { 'Client-ID': req.client_id },
-  })));
+//   const res = await Promise.all(games.data.map(({ id }) => axios.get(`${req.api_url}clips?game_id=${id}&first=3`, {
+//     headers: { 'Client-ID': req.client_id },
+//   })));
 
-  const clips = res.reduce((acc, { data }) => [...acc, ...data.data], []);
+//   const clips = res.reduce((acc, { data }) => [...acc, ...data.data], []);
 
-  return { clips };
-};
+//   return { clips };
+// };
 
 export default Index;