You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.4 KiB
96 lines
2.4 KiB
7 years ago
|
import { shell } from 'electron'
|
||
|
|
import React, { Component } from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
|
||
|
|
import { MdSearch } from 'react-icons/lib/md'
|
||
|
|
|
||
|
|
import styles from './Help.scss'
|
||
|
|
|
||
|
|
class Help extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
videos: [
|
||
|
|
{
|
||
|
|
id: 'GYIHrd7e-n0',
|
||
|
|
title: 'Joyner Lucas - Mask Off Remix (Mask On)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'ZFy7RdZWwj8',
|
||
|
|
title: 'Joyner Lucas - Bank Account (Remix)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'DlFmfxACvig',
|
||
|
|
title: 'Lil Skies - Nowadays ft. Landon Cube (Dir. by @_ColeBennett_)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'XbZ0OXmXw38',
|
||
|
|
title: 'Dave - Wanna Know ft. Drake (Audio)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'sRrcogH7F_I',
|
||
|
|
title: 'Bryson Tiller - How About Now (Freestyle)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'j6Np8vCO0hQ',
|
||
|
|
title: 'Young Pappy - Killa (Official Music Video)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'PjqKPHZJgF0',
|
||
|
|
title: 'Lil Wayne - Family Feud feat. Drake (Official Audio) | Dedication 6'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { videos } = this.state
|
||
|
|
return (
|
||
|
|
<div className={styles.helpContainer}>
|
||
|
|
<header className={styles.header}>
|
||
|
|
<h1>Video tutorials</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className={styles.search}>
|
||
|
|
<label className={`${styles.label} ${styles.input}`} htmlFor='helpSearch'>
|
||
|
|
<MdSearch />
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
value={''}
|
||
|
|
onChange={event => console.log('gang')}
|
||
|
|
className={`${styles.text} ${styles.input}`}
|
||
|
|
placeholder='Search the video library...'
|
||
|
|
type='text'
|
||
|
|
id='helpSearch'
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className={styles.videos}>
|
||
|
|
{
|
||
|
|
videos.map((video, index) => {
|
||
|
|
return (
|
||
|
|
<li key={index}>
|
||
|
|
<iframe
|
||
|
|
src={`https://www.youtube.com/embed/${video.id}`}
|
||
|
|
frameBorder='0'
|
||
|
|
/>
|
||
|
|
<section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
|
||
|
|
<h2>{video.title}</h2>
|
||
|
|
</section>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Help.propTypes = {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Help
|