docs(website): add introduction video

Author: christianalfoni

packages/overmind-website/src/components/VideoPlayer/index.tsx

@@ -6,9 +6,7 @@ type Props = {
   url: string
 }
 
-// https://www.youtube.com/watch?v=RA1_cCgEWws
-
-const VideoPlayer: SFC<Props> = () => {
+const VideoPlayer: SFC<Props> = ({ url }) => {
   const ref = useRef(null)
   const isMobile = useIsMobile()
 
@@ -25,10 +23,7 @@ const VideoPlayer: SFC<Props> = () => {
           className={styles.iframe}
           width={isMobile ? '300' : '560'}
           height={isMobile ? '169' : '315'}
-          src={
-            this.props.url.replace('watch?v=', 'embed/') +
-            '?rel=0&amp;showinfo=0'
-          }
+          src={url.replace('watch?v=', 'embed/') + '?rel=0&amp;showinfo=0'}
           frameBorder="0"
           // @ts-ignore
           allow="autoplay; encrypted-media"

packages/overmind-website/src/components/Videos/styles.ts

@@ -14,17 +14,18 @@ export const video = css`
   position: relative;
   display: flex;
   align-items: center;
-  text-decoration: none;
   justify-content: center;
   text-align: center;
   box-sizing: border-box;
-  padding: var(--padding-3);
-  color: var(--color-white-1);
+  text-decoration: none;
+  padding: var(--padding-4);
+  margin: var(--padding-3);
+  color: var(--color-black-1);
   font-size: var(--font-size-4);
   cursor: pointer;
   width: 200px;
   height: 125px;
-  background-color: var(--color-black-2);
+  border-bottom: 2px solid var(--color-primary);
   transition: box-shadow 0.1s ease-out;
   box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.75);
   :hover {
@@ -35,6 +36,6 @@ export const video = css`
     bottom: var(--padding-2);
     right: var(--padding-2);
     font-size: var(--font-size-1);
-    color: var(--color-white-2);
+    color: var(--color-black-2);
   }
 `

packages/overmind-website/src/overmind/actions.ts

@@ -1,5 +1,6 @@
 import { Action, fromOperator, pipe, action, filter, debounce } from 'overmind'
 import { Page, RouteContext, GuideParams, VideoParams } from './types'
+import * as operators from './operators'
 
 export const openHome: Action<RouteContext> = async ({ state, effects }) => {
   state.page = Page.HOME
@@ -17,22 +18,13 @@ export const openGuides: Action<RouteContext> = async ({ state, effects }) => {
   }
 }
 
-export const openVideos: Action<RouteContext> = async ({ state, effects }) => {
-  state.page = Page.VIDEOS
-  if (!state.videos.length) {
-    state.isLoadingVideos = true
-    state.videos = await effects.request('/backend/videos')
-    state.isLoadingVideos = false
-  }
-}
+export const openVideos: Action<RouteContext> = fromOperator(
+  operators.openVideos<RouteContext>()
+)
 
-export const openVideo: Action<RouteContext<VideoParams>> = async ({
-  value: routeContext,
-  state,
-}) => {
-  state.page = Page.VIDEOS
-  state.currentVideo = routeContext.params.title
-}
+export const openVideo: Action<RouteContext<VideoParams>> = fromOperator(
+  operators.openVideo
+)
 
 export const openGuide: Action<RouteContext<GuideParams>> = async ({
   value: routeContext,

packages/overmind-website/src/overmind/operators.ts

@@ -0,0 +1,20 @@
+import { action, Operator, pipe } from 'overmind'
+import { Page, RouteContext, VideoParams } from './types'
+
+export const openVideos: <T extends RouteContext>() => Operator<T> = () =>
+  action(async ({ state, effects }) => {
+    state.page = Page.VIDEOS
+    state.currentVideo = null
+    if (!state.videos.length) {
+      state.isLoadingVideos = true
+      state.videos = await effects.request('/backend/videos')
+      state.isLoadingVideos = false
+    }
+  })
+
+export const openVideo: Operator<RouteContext<VideoParams>> = pipe(
+  openVideos<RouteContext<VideoParams>>(),
+  action(({ value: routeContext, state }) => {
+    state.currentVideo = routeContext.params.title
+  })
+)

packages/overmind-website/videos.json

@@ -1 +1,8 @@
-[]
+[
+  {
+    "title": "Overmind introduction",
+    "url": "https://www.youtube.com/watch?v=82Aq_ujnBQw",
+    "shortName": "overmind-introduction",
+    "type": "beginner"
+  }
+]