first

weibenfalk · Jul 17, 2019 · f9686e0 · f9686e0
commit f9686e0
Show file tree

Hide file tree

Showing 400 changed files with 178,760 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/Stepped solutions/.DS_Store b/Stepped solutions/.DS_Store
diff --git a/Stepped solutions/Start of video 10/.DS_Store b/Stepped solutions/Start of video 10/.DS_Store
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/.gitignore b/Stepped solutions/Start of video 10/react-hooks-videoplayer/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/package-lock.json b/Stepped solutions/Start of video 10/react-hooks-videoplayer/package-lock.json
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/package.json b/Stepped solutions/Start of video 10/react-hooks-videoplayer/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "react-hooks-videoplayer-start",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-player": "^1.11.1",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^3.0.1",
+    "styled-components": "^4.3.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "homepage": "http://www.weibenfalk.com/react_videoplayer/"
+}
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/favicon.ico b/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/favicon.ico
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/index.html b/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link href="https://fonts.googleapis.com/css?family=Hind:700" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+
+    <input hidden value="{&quot;playlistId&quot;:&quot;wbn_rdx&quot;,&quot;playlist&quot;:[{&quot;num&quot;:1,&quot;title&quot;:&quot;Introduction and setup&quot;,&quot;id&quot;:&quot;ghI-gMi1DPc&quot;,&quot;duration&quot;:&quot;10:51&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/ghI-gMi1DPc&quot;},
+    {&quot;num&quot;:2,&quot;title&quot;:&quot;Folder structure, midware and provider&quot;,&quot;id&quot;:&quot;ejJlnMPCmNo&quot;,&quot;duration&quot;:&quot;13:27&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/ejJlnMPCmNo&quot;},
+    {&quot;num&quot;:3,&quot;title&quot;:&quot;Action creators for the Home Page&quot;,&quot;id&quot;:&quot;4tuFk_pdWVo&quot;,&quot;duration&quot;:&quot;17:35&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/4tuFk_pdWVo&quot;},
+    {&quot;num&quot;:4,&quot;title&quot;:&quot;Reducers for the Home Page&quot;,&quot;id&quot;:&quot;Jh6Abc_bJ50&quot;,&quot;duration&quot;:&quot;08:34&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/Jh6Abc_bJ50&quot;},
+    {&quot;num&quot;:5,&quot;title&quot;:&quot;Connecting the Home Page&quot;,&quot;id&quot;:&quot;ztHLpdVv9Vc&quot;,&quot;duration&quot;:&quot;13:42&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/ztHLpdVv9Vc&quot;},
+    {&quot;num&quot;:6,&quot;title&quot;:&quot;Quick Recap&quot;,&quot;id&quot;:&quot;iV5GDHY_cJk&quot;,&quot;duration&quot;:&quot;05:50&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/iV5GDHY_cJk&quot;},
+    {&quot;num&quot;:7,&quot;title&quot;:&quot;Completing the App&quot;,&quot;id&quot;:&quot;XMmSM0TqQ2k&quot;,&quot;duration&quot;:&quot;16:33&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/XMmSM0TqQ2k&quot;},
+    {&quot;num&quot;:8,&quot;title&quot;:&quot;BONUS - Persist the state in sessionStorage&quot;,&quot;id&quot;:&quot;r5fLW4PUrSQ&quot;,&quot;duration&quot;:&quot;10:06&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/r5fLW4PUrSQ&quot;},
+    {&quot;num&quot;:9,&quot;title&quot;:&quot;BONUS - Higher order functions&quot;,&quot;id&quot;:&quot;L89dt9sHNJ0&quot;,&quot;duration&quot;:&quot;06:09&quot;,&quot;video&quot;:&quot;https://www.youtube.com/embed/L89dt9sHNJ0&quot;}
+    ]}" name="videos">
+
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/manifest.json b/Stepped solutions/Start of video 10/react-hooks-videoplayer/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/Nightmode.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/Nightmode.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import StyledNightmode from './styles/StyledNightmode';
+
+const NightMode = ({ nightModeCallback, nightMode }) => (
+  <StyledNightmode>
+    <span>Nightmode: </span>
+    <label className="switch">
+      <input type="checkbox" checked={nightMode} onChange={nightModeCallback} />
+      <span className="slider round" />
+    </label>
+  </StyledNightmode>
+);
+
+export default NightMode;
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/PlaylistHeader.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/PlaylistHeader.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import StyledPlaylistHeader from './styles/StyledPlaylistHeader';
+import StyledJourney from './styles/StyledJourney';
+
+const PlaylistHeader = ({ active, total }) => (
+  <StyledPlaylistHeader>
+    <p>{active.title}</p>
+    <StyledJourney>
+      {active.num} / {total}
+    </StyledJourney>
+  </StyledPlaylistHeader>
+);
+
+export default PlaylistHeader;
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/PlaylistItem.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/PlaylistItem.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import StyledPlaylistItem from './styles/StyledPlaylistItem';
+
+const PlaylistItem = ({ video, active, played }) => (
+  <StyledPlaylistItem active={active} played={played}>
+    <div className="wbn-player__video-nr">{video.num}</div>
+    <div className="wbn-player__video-name">{video.title}</div>
+    <div className="wbn-player__video-time">{video.duration}</div>
+  </StyledPlaylistItem>
+);
+
+export default PlaylistItem;
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/Video.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/Video.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactPlayer from 'react-player';
+import StyledVideoWrapper from './styles/StyledVideoWrapper';
+import StyledVideo from './styles/StyledVideo';
+
+const Video = ({ active, autoplay, endCallback, progressCallback }) => (
+  <StyledVideo>
+    <StyledVideoWrapper>
+      <ReactPlayer
+        width="100%"
+        height="100%"
+        style={{ position: "absolute", top: "0"}}
+        playing={autoplay}
+        controls={true}
+        url={active.video}
+        onEnded={endCallback}
+        onProgress={progressCallback}
+      />
+    </StyledVideoWrapper>
+  </StyledVideo>
+);
+
+export default Video;
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/containers/App.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/containers/App.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import WbnPlayer from './WbnPlayer';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import GlobalStyle from '../styles/GlobalStyle';
+
+const App = () => (
+  <BrowserRouter>
+  <>
+    <Switch>
+      <Route exact path="/" component={WbnPlayer} />
+      <Route exact path="/:activeVideo" component={WbnPlayer} />
+    </Switch>
+    <GlobalStyle />
+  </>
+  </BrowserRouter>
+)
+
+export default App;
diff --git a/...solutions/Start of video 10/react-hooks-videoplayer/src/components/containers/Playlist.js b/...solutions/Start of video 10/react-hooks-videoplayer/src/components/containers/Playlist.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PlaylistHeader from '../PlaylistHeader';
+import PlaylistItems from '../containers/PlaylistItems';
+import NightMode from '../Nightmode';
+import StyledPlaylist from '../styles/StyledPlaylist';
+
+const Playlist = ({ videos, active, nightModeCallback, nightMode }) => (
+    <StyledPlaylist>
+      <NightMode nightModeCallback={nightModeCallback} nightMode={nightMode} />
+      <PlaylistHeader active={active} total={videos.length} />
+      <PlaylistItems videos={videos} active={active} />
+    </StyledPlaylist>
+  )
+
+export default Playlist;
diff --git a/...ions/Start of video 10/react-hooks-videoplayer/src/components/containers/PlaylistItems.js b/...ions/Start of video 10/react-hooks-videoplayer/src/components/containers/PlaylistItems.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PlaylistItem from '../PlaylistItem';
+import StyledPlaylistitems from '../styles/StyledPlaylistitems';
+
+const Playlistitems = ({ videos, active }) => (
+  <StyledPlaylistitems>
+    {videos.map(video => (
+      <PlaylistItem
+        key={video.id}
+        video={video}
+        active={video.id === active.id ? true : false}
+        played={video.played}
+      />
+    ))}
+  </StyledPlaylistitems>
+)
+
+export default Playlistitems;
diff --git a/...olutions/Start of video 10/react-hooks-videoplayer/src/components/containers/WbnPlayer.js b/...olutions/Start of video 10/react-hooks-videoplayer/src/components/containers/WbnPlayer.js
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import Video from '../Video';
+import Playlist from '../containers/Playlist';
+import StyledWbnPlayer from '../styles/StyledWbnPlayer';
+
+const theme = {
+  bgcolor: "#353535",
+  bgcolorItem: "#414141",
+  bgcolorItemActive: "#405c63",
+  bgcolorPlayed: "#526d4e",
+  border: "none",
+  borderPlayed: "none",
+  color : "#fff",
+};
+
+const themeLight = {
+  bgcolor: "#fff",
+  bgcolorItem: "#fff",
+  bgcolorItemActive: "#80a7b1",
+  bgcolorPlayed: "#7d9979",
+  border: "1px solid #353535",
+  borderPlayed: "none",
+  color : "#353535",
+};
+
+const WbnPlayer = props => {
+
+  const videos = JSON.parse(document.querySelector('[name="videos"]').value);
+
+  const [state, setState] = useState({
+    videos: videos.playlist,
+    activeVideo: videos.playlist[0],
+    nightMode: true,
+    playlistId: videos.playlistId,
+    autoplay: false,
+  });
+
+  const nightModeCallback = () => {
+
+  }
+
+  const endCallback = () => {
+
+  }
+
+  const progressCallback = () => {
+
+  }
+
+  return (
+    <ThemeProvider theme={state.nightMode ? theme : themeLight}>
+      {state.videos !== null ? (
+        <StyledWbnPlayer>
+          <Video
+            active={state.activeVideo}
+            autoplay={state.autoplay}
+            endCallback={endCallback}
+            progressCallback={progressCallback}
+          />
+          <Playlist
+            videos={state.videos}
+            active={state.activeVideo}
+            nightModeCallback={nightModeCallback}
+            nightMode={state.nightMode}
+          />
+        </StyledWbnPlayer>
+      ) : null}
+    </ThemeProvider>
+  )
+}
+
+export default WbnPlayer;
diff --git a/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/hoc/withLink.js b/Stepped solutions/Start of video 10/react-hooks-videoplayer/src/components/hoc/withLink.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const withLink = props => {
+  <div>
+    Higher Order Component
+  </div>
+}
+
+export default withLink;
diff --git a/... solutions/Start of video 10/react-hooks-videoplayer/src/components/styles/GlobalStyle.js b/... solutions/Start of video 10/react-hooks-videoplayer/src/components/styles/GlobalStyle.js
@@ -0,0 +1,13 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    font-size: 10px;
+    font-family: 'Hind', sans-serif;
+  }
+`;
+
+export default GlobalStyle;
diff --git a/...olutions/Start of video 10/react-hooks-videoplayer/src/components/styles/StyledJourney.js b/...olutions/Start of video 10/react-hooks-videoplayer/src/components/styles/StyledJourney.js
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const StyledJourney = styled.div`
+  background: #565656;
+  font-size: 0.8em;
+  padding: 2px 5px;
+  height: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 5px;
+`;
+
+export default StyledJourney;