Skip to content

Commit b26f4c0

Browse files
joelhooksltclmbdev
joelhooks
and
ltclmbdev
authored
Jh/player state machine (skillrecordings#90)
* yarn add @reach/listbox * move Metadata and PlayerControls to separate files * wip * clean up * clean up * update types * load data on changes * fix and sort components * remove speed * state machine kung fu * make next happy * move files around * sitemap Co-authored-by: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
1 parent 5868b88 commit b26f4c0

12 files changed

Lines changed: 420 additions & 220 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"dependencies": {
2626
"@mdx-js/react": "^1.6.16",
2727
"@reach/disclosure": "^0.11.2",
28+
"@reach/listbox": "^0.11.2",
2829
"@reach/menu-button": "^0.11.2",
2930
"@reach/visually-hidden": "^0.11.1",
3031
"@tailwindcss/ui": "^0.6.0",

‎public/sitemap.xml‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3-
<url><loc>https://next.egghead.io/</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
4-
<url><loc>https://next.egghead.io/about</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
5-
<url><loc>https://next.egghead.io/discord</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
6-
<url><loc>https://next.egghead.io/discord/callback</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
7-
<url><loc>https://next.egghead.io/instructors</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
8-
<url><loc>https://next.egghead.io/learn</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
9-
<url><loc>https://next.egghead.io/learn/react</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
10-
<url><loc>https://next.egghead.io/learn/react/accessibility</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
11-
<url><loc>https://next.egghead.io/learn/react/components</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
12-
<url><loc>https://next.egghead.io/learn/react/hooks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
13-
<url><loc>https://next.egghead.io/learn/react/metaframeworks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
14-
<url><loc>https://next.egghead.io/learn/react/state-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
15-
<url><loc>https://next.egghead.io/learn/react/toolkit-or-framework</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
16-
<url><loc>https://next.egghead.io/login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
17-
<url><loc>https://next.egghead.io/podcasts</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
18-
<url><loc>https://next.egghead.io/pricing</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
19-
<url><loc>https://next.egghead.io/privacy</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
20-
<url><loc>https://next.egghead.io/sale</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
21-
<url><loc>https://next.egghead.io/stories</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
22-
<url><loc>https://next.egghead.io/talks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
23-
<url><loc>https://next.egghead.io/team</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-16T22:26:56.010Z</lastmod></url>
3+
<url><loc>https://next.egghead.io/</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
4+
<url><loc>https://next.egghead.io/about</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
5+
<url><loc>https://next.egghead.io/discord</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
6+
<url><loc>https://next.egghead.io/discord/callback</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
7+
<url><loc>https://next.egghead.io/instructors</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
8+
<url><loc>https://next.egghead.io/learn</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
9+
<url><loc>https://next.egghead.io/learn/react</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
10+
<url><loc>https://next.egghead.io/learn/react/accessibility</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
11+
<url><loc>https://next.egghead.io/learn/react/components</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
12+
<url><loc>https://next.egghead.io/learn/react/hooks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
13+
<url><loc>https://next.egghead.io/learn/react/metaframeworks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
14+
<url><loc>https://next.egghead.io/learn/react/state-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
15+
<url><loc>https://next.egghead.io/learn/react/toolkit-or-framework</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
16+
<url><loc>https://next.egghead.io/login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
17+
<url><loc>https://next.egghead.io/podcasts</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
18+
<url><loc>https://next.egghead.io/pricing</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
19+
<url><loc>https://next.egghead.io/privacy</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
20+
<url><loc>https://next.egghead.io/sale</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
21+
<url><loc>https://next.egghead.io/stories</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
22+
<url><loc>https://next.egghead.io/talks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
23+
<url><loc>https://next.egghead.io/team</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-09-17T22:50:40.149Z</lastmod></url>
2424
</urlset>

‎src/components/EggheadPlayer/machine.ts‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/components/images/icon-chevron-double-right.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/images/icon-download.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/pages/lessons/Metadata.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, {FunctionComponent} from 'react'
2+
import {isEmpty, get} from 'lodash'
3+
import Markdown from 'react-markdown'
4+
import Eggo from '../../../components/images/eggo.svg'
5+
6+
type MetadataProps = {
7+
title: string
8+
instructor: {
9+
full_name: string
10+
http_url: string
11+
avatar_64_url: string
12+
}
13+
tags: [
14+
{
15+
name: string
16+
http_url: string
17+
image_url: string
18+
},
19+
]
20+
summary: string
21+
[cssRelated: string]: any
22+
}
23+
24+
const Metadata: FunctionComponent<MetadataProps> = ({
25+
title,
26+
instructor,
27+
tags,
28+
summary,
29+
...restProps
30+
}: MetadataProps) => {
31+
return (
32+
<div {...restProps}>
33+
{title && <h3 className="mt-0 text-2xl">{title}</h3>}
34+
<div className="flex items-center mt-4">
35+
<a href={get(instructor, 'http_url', '#')} className="mr-4">
36+
{get(instructor, 'avatar_64_url') ? (
37+
<img
38+
src={instructor.avatar_64_url}
39+
alt=""
40+
className="w-8 rounded-full m-0"
41+
/>
42+
) : (
43+
<Eggo className="w-8 rounded-full" />
44+
)}
45+
</a>
46+
{get(instructor, 'full_name') && (
47+
<a href={get(instructor, 'http_url', '#')}>{instructor.full_name}</a>
48+
)}
49+
{!isEmpty(tags) && (
50+
<div className="flex ml-6">
51+
{tags.map((tag, index) => (
52+
<a
53+
href={tag.http_url}
54+
key={index}
55+
className="flex items-center ml-4 first:ml-0"
56+
>
57+
<img
58+
src={tag.image_url}
59+
alt=""
60+
className="w-5 h-5 flex-shrink-0"
61+
/>
62+
<span className="ml-2">{tag.name}</span>
63+
</a>
64+
))}
65+
</div>
66+
)}
67+
</div>
68+
{summary && <Markdown className="mt-4">{summary}</Markdown>}
69+
</div>
70+
)
71+
}
72+
73+
export default Metadata

‎src/components/pages/lessons/PlayerControls.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, {FunctionComponent} from 'react'
2+
import Link from 'next/link'
3+
4+
type PlayerControlsProps = {
5+
handlerDownload: any
6+
isPro: boolean
7+
}
8+
9+
const availableSpeeds: string[] = ['0.85', '1', '1.25', '1.5', '1.75', '2']
10+
11+
const PlayerControls: FunctionComponent<PlayerControlsProps> = ({
12+
children,
13+
handlerDownload,
14+
isPro,
15+
}) => {
16+
return (
17+
<div className="flex items-center justify-between mt-4">
18+
{children}
19+
{isPro ? (
20+
<>
21+
<div className="flex items-center">
22+
<button
23+
onClick={handlerDownload}
24+
className="ml-4 bg-gray-300 rounded p-2"
25+
>
26+
<svg
27+
xmlns="http://www.w3.org/2000/svg"
28+
fill="none"
29+
viewBox="0 0 24 24"
30+
stroke="red"
31+
className="w-4"
32+
>
33+
<path
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
strokeWidth={2}
37+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
38+
/>
39+
</svg>
40+
</button>
41+
</div>
42+
</>
43+
) : (
44+
<div>This stuff if for Pro members only</div>
45+
)}
46+
</div>
47+
)
48+
}
49+
50+
export default PlayerControls

‎src/machines/lesson-player-machine.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {Machine} from 'xstate'
2+
3+
interface PlayerStateSchema {
4+
states: {
5+
loading: {}
6+
loaded: {}
7+
playing: {}
8+
paused: {}
9+
quizzing: {}
10+
rating: {}
11+
subscribing: {}
12+
showingNext: {}
13+
joining: {}
14+
completed: {}
15+
}
16+
}
17+
18+
export type PlayerStateEvent =
19+
| {type: 'PLAY'}
20+
| {type: 'PAUSE'}
21+
| {type: 'LOADED'}
22+
| {type: 'SUBSCRIBE'}
23+
| {type: 'JOIN'}
24+
| {type: 'QUIZ'}
25+
| {type: 'COMPLETE'}
26+
| {type: 'NEXT'}
27+
| {type: 'RATE'}
28+
| {type: 'LOAD'}
29+
30+
const playerMachine = Machine<PlayerStateSchema, PlayerStateEvent>({
31+
id: 'player',
32+
initial: 'loading',
33+
states: {
34+
loading: {
35+
on: {
36+
LOADED: 'loaded',
37+
},
38+
},
39+
loaded: {
40+
on: {
41+
PLAY: 'playing',
42+
SUBSCRIBE: 'subscribing',
43+
JOIN: 'joining',
44+
PAUSE: 'paused',
45+
},
46+
},
47+
playing: {
48+
on: {
49+
QUIZ: 'quizzing',
50+
COMPLETE: 'completed',
51+
RATE: 'rating',
52+
PAUSE: 'paused',
53+
},
54+
},
55+
paused: {
56+
on: {
57+
PLAY: 'playing',
58+
},
59+
},
60+
completed: {
61+
on: {
62+
NEXT: 'showingNext',
63+
SUBSCRIBE: 'subscribing',
64+
JOIN: 'joining',
65+
RATE: 'rating',
66+
QUIZ: 'quizzing',
67+
},
68+
},
69+
quizzing: {
70+
on: {
71+
NEXT: 'showingNext',
72+
SUBSCRIBE: 'subscribing',
73+
JOIN: 'joining',
74+
RATE: 'rating',
75+
},
76+
},
77+
rating: {
78+
on: {
79+
NEXT: 'showingNext',
80+
SUBSCRIBE: 'subscribing',
81+
JOIN: 'joining',
82+
QUIZ: 'quizzing',
83+
},
84+
},
85+
subscribing: {
86+
on: {
87+
NEXT: 'showingNext',
88+
JOIN: 'joining',
89+
RATE: 'rating',
90+
QUIZ: 'quizzing',
91+
},
92+
},
93+
joining: {
94+
on: {
95+
NEXT: 'showingNext',
96+
SUBSCRIBE: 'subscribing',
97+
RATE: 'rating',
98+
QUIZ: 'quizzing',
99+
},
100+
},
101+
showingNext: {
102+
on: {
103+
LOAD: 'loading',
104+
},
105+
},
106+
},
107+
})
108+
109+
export default playerMachine

‎src/pages/_app.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import mdxComponents from 'components/mdx'
99
import defaultSeoConfig from 'next-seo.json'
1010
import {useURL} from 'hooks/useUrl'
1111
import '../styles/index.css'
12+
import '@reach/listbox/styles.css'
1213
import Router from 'next/router'
1314

1415
declare global {

0 commit comments

Comments
 (0)