)
}
return (
Sign In
error
{values.error}
)
}
Submit
)
}
================================================
FILE: client/auth/api-auth.js
================================================
const signin = async (user) => {
try {
let response = await fetch('/auth/signin/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify(user)
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const signout = async () => {
try {
let response = await fetch('/auth/signout/', { method: 'GET' })
return await response.json()
} catch(err) {
console.log(err)
}
}
export {
signin,
signout
}
================================================
FILE: client/auth/auth-helper.js
================================================
import { signout } from './api-auth.js'
const auth = {
isAuthenticated() {
if (typeof window == "undefined")
return false
if (sessionStorage.getItem('jwt'))
return JSON.parse(sessionStorage.getItem('jwt'))
else
return false
},
authenticate(jwt, cb) {
if (typeof window !== "undefined")
sessionStorage.setItem('jwt', JSON.stringify(jwt))
cb()
},
clearJWT(cb) {
if (typeof window !== "undefined")
sessionStorage.removeItem('jwt')
cb()
//optional
signout().then((data) => {
document.cookie = "t=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
})
}
}
export default auth
================================================
FILE: client/core/Home.js
================================================
import React, {useState, useEffect} from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import Typography from '@material-ui/core/Typography'
import MediaList from '../media/MediaList'
import {listPopular} from '../media/api-media.js'
const useStyles = makeStyles(theme => ({
card: {
margin: `${theme.spacing(5)}px 30px`
},
title: {
padding:`${theme.spacing(3)}px ${theme.spacing(2.5)}px 0px`,
color: theme.palette.text.secondary,
fontSize: '1em'
},
media: {
minHeight: 330
}
}))
export default function Home(){
const classes = useStyles()
const [media, setMedia] = useState([])
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
listPopular(signal).then((data) => {
if (data.error) {
console.log(data.error)
} else {
setMedia(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [])
return (
Popular Videos
)
}
================================================
FILE: client/core/Menu.js
================================================
import React from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton'
import HomeIcon from '@material-ui/icons/Home'
import AddBoxIcon from '@material-ui/icons/AddBox'
import Button from '@material-ui/core/Button'
import auth from './../auth/auth-helper'
import {Link, withRouter} from 'react-router-dom'
const isActive = (history, path) => {
if (history.location.pathname == path)
return {color: '#f99085'}
else
return {color: '#efdcd5'}
}
const Menu = withRouter(({history}) => (
MERN Mediastream
{
!auth.isAuthenticated() && (
Sign up
Sign In
)
}
{
auth.isAuthenticated() && (
My Profile
{
auth.signout(() => history.push('/'))
}}>Sign out
)
}
))
export default Menu
================================================
FILE: client/main.js
================================================
import React from 'react'
import { hydrate } from 'react-dom'
import App from './App'
hydrate(
{"Delete "+props.mediaTitle}
Confirm to delete {props.mediaTitle} from your account.
Cancel
Confirm
)
}
DeleteMedia.propTypes = {
mediaId: PropTypes.string.isRequired,
mediaTitle: PropTypes.string.isRequired
}
================================================
FILE: client/media/EditMedia.js
================================================
import React, {useState, useEffect} from 'react'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import Typography from '@material-ui/core/Typography'
import Icon from '@material-ui/core/Icon'
import { makeStyles } from '@material-ui/core/styles'
import auth from './../auth/auth-helper'
import {read, update} from './api-media.js'
import {Redirect} from 'react-router-dom'
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 500,
margin: 'auto',
textAlign: 'center',
marginTop: theme.spacing(5),
paddingBottom: theme.spacing(2)
},
title: {
margin: theme.spacing(2),
color: theme.palette.protectedTitle,
fontSize: '1em'
},
error: {
verticalAlign: 'middle'
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 300
},
submit: {
margin: 'auto',
marginBottom: theme.spacing(2)
},
input: {
display: 'none'
},
filename:{
marginLeft:'10px'
}
}))
export default function EditProfile({ match }) {
const classes = useStyles()
const [media, setMedia] = useState({title: '', description:'', genre:''})
const [redirect, setRedirect] = useState(false)
const [error, setError] = useState('')
const jwt = auth.isAuthenticated()
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
read({mediaId: match.params.mediaId}).then((data) => {
if (data.error) {
setError(data.error)
} else {
setMedia(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [match.params.mediaId])
const clickSubmit = () => {
const jwt = auth.isAuthenticated()
update({
mediaId: media._id
}, {
t: jwt.token
}, media).then((data) => {
if (data.error) {
setError(data.error)
} else {
setRedirect(true)
}
})
}
const handleChange = name => event => {
let updatedMedia = {...media}
updatedMedia[name] = event.target.value
setMedia(updatedMedia)
}
if (redirect) {
return (
Edit Video Details
error
{error}
)
}
Submit
)
}
================================================
FILE: client/media/Media.js
================================================
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardHeader from '@material-ui/core/CardHeader'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
import ListItemText from '@material-ui/core/ListItemText'
import IconButton from '@material-ui/core/IconButton'
import Edit from '@material-ui/icons/Edit'
import Avatar from '@material-ui/core/Avatar'
import auth from './../auth/auth-helper'
import {Link} from 'react-router-dom'
import Divider from '@material-ui/core/Divider'
import DeleteMedia from './DeleteMedia'
import MediaPlayer from './MediaPlayer'
const useStyles = makeStyles(theme => ({
card: {
padding:'20px'
},
header: {
padding:'0px 16px 16px 12px'
},
action: {
margin: '24px 20px 0px 0px',
display: 'inline-block',
fontSize: '1.15em',
color: theme.palette.secondary.dark
},
avatar: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.light
}
}))
export default function Media(props) {
const classes = useStyles()
const mediaUrl = props.media._id
? `/api/media/video/${props.media._id}`
: null
const nextUrl = props.nextUrl
return (
{props.media.views + ' views'}
}
subheader={props.media.genre}
/>
{props.media.postedBy.name && props.media.postedBy.name[0]}
)
}
)
}
Media.propTypes = {
media: PropTypes.object,
nextUrl: PropTypes.string,
handleAutoplay: PropTypes.func.isRequired
}
================================================
FILE: client/media/MediaList.js
================================================
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import GridList from '@material-ui/core/GridList'
import GridListTileBar from '@material-ui/core/GridListTileBar'
import GridListTile from '@material-ui/core/GridListTile'
import {Link} from 'react-router-dom'
import ReactPlayer from 'react-player'
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
background: theme.palette.background.paper,
textAlign: 'left',
padding: '8px 16px'
},
gridList: {
width: '100%',
minHeight: 180,
padding: '0px 0 10px'
},
title: {
padding:`${theme.spacing(3)}px ${theme.spacing(2.5)}px ${theme.spacing(2)}px`,
color: theme.palette.openTitle,
width: '100%'
},
tile: {
textAlign: 'center',
maxHeight: '100%'
},
tileBar: {
backgroundColor: 'rgba(0, 0, 0, 0.72)',
textAlign: 'left',
height: '55px'
},
tileTitle: {
fontSize:'1.1em',
marginBottom:'5px',
color:'rgb(193, 173, 144)',
display:"block"
},
tileGenre: {
float: 'right',
color:'rgb(193, 182, 164)',
marginRight: '8px'
}
}))
export default function MediaList(props) {
const classes = useStyles()
return (
{props.media.map((tile, i) => (
{tile.title} }
subtitle={
{tile.views} views
{tile.genre}
}
/>
))}
)
}
MediaList.propTypes = {
media: PropTypes.array.isRequired
}
================================================
FILE: client/media/MediaPlayer.js
================================================
import React, {useState, useEffect, useRef} from 'react'
import { findDOMNode } from 'react-dom'
import screenfull from 'screenfull'
import IconButton from '@material-ui/core/IconButton'
import Icon from '@material-ui/core/Icon'
import PropTypes from 'prop-types'
import {makeStyles} from '@material-ui/core/styles'
import { Link } from 'react-router-dom'
import ReactPlayer from 'react-player'
import LinearProgress from '@material-ui/core/LinearProgress'
const useStyles = makeStyles(theme => ({
flex:{
display:'flex'
},
primaryDashed: {
background: 'none',
backgroundColor: theme.palette.secondary.main
},
primaryColor: {
backgroundColor: '#6969694f'
},
dashed: {
animation: 'none'
},
controls:{
position: 'relative',
backgroundColor: '#ababab52'
},
rangeRoot: {
position: 'absolute',
width: '100%',
top: '-7px',
zIndex: '3456',
'-webkit-appearance': 'none',
backgroundColor: 'rgba(0,0,0,0)'
},
videoError: {
width: '100%',
textAlign: 'center',
color: theme.palette.primary.light
}
}))
export default function MediaPlayer(props) {
const classes = useStyles()
const [playing, setPlaying] = useState(false)
const [volume, setVolume] = useState(0.8)
const [muted, setMuted] = useState(false)
const [duration, setDuration] = useState(0)
const [seeking, setSeeking] = useState(false)
const [playbackRate, setPlaybackRate] = useState(1.0)
const [loop, setLoop] = useState(false)
const [fullscreen, setFullscreen] = useState(false)
const [videoError, setVideoError] = useState(false)
let playerRef = useRef(null)
const [values, setValues] = useState({
played: 0, loaded: 0, ended: false
})
useEffect(() => {
if (screenfull.enabled) {
screenfull.on('change', () => {
let fullscreen = screenfull.isFullscreen ? true : false
setFullscreen(fullscreen)
})
}
}, [])
useEffect(() => {
setVideoError(false)
}, [props.srcUrl])
const changeVolume = e => {
setVolume(parseFloat(e.target.value))
}
const toggleMuted = () => {
setMuted(!muted)
}
const playPause = () => {
setPlaying(!playing)
}
const onLoop = () => {
setLoop(!loop)
}
const onProgress = progress => {
// We only want to update time slider if we are not currently seeking
if (!seeking) {
setValues({...values, played:progress.played, loaded: progress.loaded})
}
}
const onClickFullscreen = () => {
screenfull.request(findDOMNode(playerRef))
}
const onEnded = () => {
if(loop){
setPlaying(true)
} else{
props.handleAutoplay(()=>{
setValues({...values, ended:true})
setPlaying(false)
})
}
}
const onDuration = (duration) => {
setDuration(duration)
}
const onSeekMouseDown = e => {
setSeeking(true)
}
const onSeekChange = e => {
setValues({...values, played:parseFloat(e.target.value), ended: parseFloat(e.target.value) >= 1})
}
const onSeekMouseUp = e => {
setSeeking(false)
playerRef.seekTo(parseFloat(e.target.value))
}
const ref = player => {
playerRef = player
}
const format = (seconds) => {
const date = new Date(seconds * 1000)
const hh = date.getUTCHours()
let mm = date.getUTCMinutes()
const ss = ('0' + date.getUTCSeconds()).slice(-2)
if (hh) {
mm = ('0' + date.getUTCMinutes()).slice(-2)
return `${hh}:${mm}:${ss}`
}
return `${mm}:${ss}`
}
const showVideoError = e => {
console.log(e)
setVideoError(true)
}
return (
)
}
MediaPlayer.propTypes = {
srcUrl: PropTypes.string,
nextUrl: PropTypes.string,
handleAutoplay: PropTypes.func.isRequired
}
================================================
FILE: client/media/NewMedia.js
================================================
import React, {useState} from 'react'
import auth from './../auth/auth-helper'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import Typography from '@material-ui/core/Typography'
import FileUpload from '@material-ui/icons/AddToQueue'
import Icon from '@material-ui/core/Icon'
import {makeStyles} from '@material-ui/core/styles'
import {create} from './api-media.js'
import {Redirect} from 'react-router-dom'
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 500,
margin: 'auto',
textAlign: 'center',
marginTop: theme.spacing(5),
paddingBottom: theme.spacing(2)
},
title: {
margin: theme.spacing(2),
color: theme.palette.protectedTitle,
fontSize: '1em'
},
error: {
verticalAlign: 'middle'
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 300
},
submit: {
margin: 'auto',
marginBottom: theme.spacing(2)
},
input: {
display: 'none'
},
filename:{
marginLeft:'10px'
}
}))
export default function NewMedia(){
const classes = useStyles()
const [values, setValues] = useState({
title: '',
video: '',
description: '',
genre: '',
redirect: false,
error: '',
mediaId: ''
})
const jwt = auth.isAuthenticated()
const clickSubmit = () => {
let mediaData = new FormData()
values.title && mediaData.append('title', values.title)
values.video && mediaData.append('video', values.video)
values.description && mediaData.append('description', values.description)
values.genre && mediaData.append('genre', values.genre)
create({
userId: jwt.user._id
}, {
t: jwt.token
}, mediaData).then((data) => {
if (data.error) {
setValues({...values, error: data.error})
} else {
setValues({...values, error: '', mediaId: data._id, redirect: true})
}
})
}
const handleChange = name => event => {
const value = name === 'video'
? event.target.files[0]
: event.target.value
setValues({...values, [name]: value })
}
if (values.redirect) {
return (
New Video
Upload
{values.video ? values.video.name : ''}
error
{values.error}
)
}
Submit
)
}
================================================
FILE: client/media/PlayMedia.js
================================================
import React, {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import {makeStyles} from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import {read, listRelated} from './api-media.js'
import Media from './Media'
import RelatedMedia from './RelatedMedia'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import Switch from '@material-ui/core/Switch'
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
margin: 30,
},
toggle: {
float: 'right',
marginRight: '30px',
marginTop:' 10px'
}
}))
export default function PlayMedia(props) {
const classes = useStyles()
let [media, setMedia] = useState({postedBy: {}})
let [relatedMedia, setRelatedMedia] = useState([])
const [autoPlay, setAutoPlay] = useState(false)
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
read({mediaId: props.match.params.mediaId}, signal).then((data) => {
if (data && data.error) {
console.log(data.error)
} else {
setMedia(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [props.match.params.mediaId])
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
listRelated({
mediaId: props.match.params.mediaId}, signal).then((data) => {
if (data.error) {
console.log(data.error)
} else {
setRelatedMedia(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [props.match.params.mediaId])
const handleChange = (event) => {
setAutoPlay(event.target.checked)
}
const handleAutoplay = (updateMediaControls) => {
let playList = relatedMedia
let playMedia = playList[0]
if(!autoPlay || playList.length == 0 )
return updateMediaControls()
if(playList.length > 1){
playList.shift()
setMedia(playMedia)
setRelatedMedia(playList)
}else{
listRelated({
mediaId: playMedia._id}).then((data) => {
if (data.error) {
console.log(data.error)
} else {
setMedia(playMedia)
setRelatedMedia(data)
}
})
}
}
//render SSR data
if (props.data && props.data[0] != null) {
media = props.data[0]
relatedMedia = []
}
const nextUrl = relatedMedia.length > 0
? `/media/${relatedMedia[0]._id}` : ''
return (
{relatedMedia.length > 0
&& (
)
}
)
}
================================================
FILE: client/media/RelatedMedia.js
================================================
import React from 'react'
import PropTypes from 'prop-types'
import {makeStyles} from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import Typography from '@material-ui/core/Typography'
import {Link} from 'react-router-dom'
import Divider from '@material-ui/core/Divider'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import ReactPlayer from 'react-player'
const useStyles = makeStyles(theme => ({
root: theme.mixins.gutters({
paddingBottom: 24,
backgroundColor: '#80808024'
}),
title: {
margin: `${theme.spacing(3)}px ${theme.spacing(1)}px ${theme.spacing(2)}px`,
color: theme.palette.openTitle,
fontSize: '1em'
},
card: {
width: '100%',
display: 'inline-flex'
},
details: {
display: 'inline-block',
width: "100%"
},
content: {
flex: '1 0 auto',
padding: '16px 8px 0px'
},
controls: {
marginTop: '8px'
},
date: {
color: 'rgba(0, 0, 0, 0.4)'
},
mediaTitle: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '130px',
fontSize: '1em',
marginBottom: '5px'
},
subheading: {
color: 'rgba(88, 114, 128, 0.67)'
},
views: {
display: 'inline',
lineHeight: '3',
paddingLeft: '8px',
color: theme.palette.text.secondary
}
}))
export default function RelatedMedia(props) {
const classes = useStyles()
return (
Up Next
{props.media.map((item, i) => {
return
{item.title}
{item.genre}
{(new Date(item.created)).toDateString()}
{item.views} views
)
}
RelatedMedia.propTypes = {
media: PropTypes.array.isRequired
}
================================================
FILE: client/media/api-media.js
================================================
import config from '../../config/config'
const create = async (params, credentials, media) => {
try {
let response = await fetch('/api/media/new/'+ params.userId, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer ' + credentials.t
},
body: media
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const listPopular = async (signal) => {
try {
let response = await fetch('/api/media/popular', {
method: 'GET',
signal: signal,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const listByUser = async (params) => {
try {
let response = await fetch('/api/media/by/'+ params.userId, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const read = async (params, signal) => {
try {
let response = await fetch(config.serverUrl +'/api/media/' + params.mediaId, {
method: 'GET',
signal: signal
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const update = async (params, credentials, media) => {
try {
let response = await fetch('/api/media/' + params.mediaId, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + credentials.t
},
body: JSON.stringify(media)
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const remove = async (params, credentials) => {
try {
let response = await fetch('/api/media/' + params.mediaId, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + credentials.t
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const listRelated = async (params, signal) => {
try {
let response = await fetch('/api/media/related/'+ params.mediaId, {
method: 'GET',
signal: signal,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
export {
create,
listPopular,
listByUser,
read,
update,
remove,
listRelated
}
================================================
FILE: client/routeConfig.js
================================================
import PlayMedia from './media/PlayMedia'
import { read } from './media/api-media.js'
const routes = [
{
path: '/media/:mediaId',
component: PlayMedia,
loadData: (params) => read(params)
}
]
export default routes
================================================
FILE: client/theme.js
================================================
import { createMuiTheme } from '@material-ui/core/styles'
import { red, brown } from '@material-ui/core/colors'
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: {
light: '#f05545',
main: '#b71c1c',
dark: '#7f0000',
contrastText: '#fff',
},
secondary: {
light: '#fbfffc',
main: '#c8e6c9',
dark: '#97b498',
contrastText: '#37474f',
},
openTitle: red['500'],
protectedTitle: brown['300'],
type: 'light'
},
})
export default theme
================================================
FILE: client/user/DeleteUser.js
================================================
import React, {useState} from 'react'
import PropTypes from 'prop-types'
import IconButton from '@material-ui/core/IconButton'
import Button from '@material-ui/core/Button'
import DeleteIcon from '@material-ui/icons/Delete'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import auth from './../auth/auth-helper'
import {remove} from './api-user.js'
import {Redirect} from 'react-router-dom'
export default function DeleteUser(props) {
const [open, setOpen] = useState(false)
const [redirect, setRedirect] = useState(false)
const jwt = auth.isAuthenticated()
const clickButton = () => {
setOpen(true)
}
const deleteAccount = () => {
remove({
userId: props.userId
}, {t: jwt.token}).then((data) => {
if (data && data.error) {
console.log(data.error)
} else {
auth.clearJWT(() => console.log('deleted'))
setRedirect(true)
}
})
}
const handleRequestClose = () => {
setOpen(false)
}
if (redirect) {
return
{"Delete Account"}
Confirm to delete your account.
Cancel
Confirm
)
}
DeleteUser.propTypes = {
userId: PropTypes.string.isRequired
}
================================================
FILE: client/user/EditProfile.js
================================================
import React, {useState, useEffect} from 'react'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import Typography from '@material-ui/core/Typography'
import Icon from '@material-ui/core/Icon'
import { makeStyles } from '@material-ui/core/styles'
import auth from './../auth/auth-helper'
import {read, update} from './api-user.js'
import {Redirect} from 'react-router-dom'
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 600,
margin: 'auto',
textAlign: 'center',
marginTop: theme.spacing(5),
paddingBottom: theme.spacing(2)
},
title: {
margin: theme.spacing(2),
color: theme.palette.protectedTitle
},
error: {
verticalAlign: 'middle'
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 300
},
submit: {
margin: 'auto',
marginBottom: theme.spacing(2)
}
}))
export default function EditProfile({ match }) {
const classes = useStyles()
const [values, setValues] = useState({
name: '',
password: '',
email: '',
open: false,
error: '',
redirectToProfile: false
})
const jwt = auth.isAuthenticated()
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
read({
userId: match.params.userId
}, {t: jwt.token}, signal).then((data) => {
if (data && data.error) {
setValues({...values, error: data.error})
} else {
setValues({...values, name: data.name, email: data.email})
}
})
return function cleanup(){
abortController.abort()
}
}, [match.params.userId])
const clickSubmit = () => {
const user = {
name: values.name || undefined,
email: values.email || undefined,
password: values.password || undefined
}
update({
userId: match.params.userId
}, {
t: jwt.token
}, user).then((data) => {
if (data && data.error) {
setValues({...values, error: data.error})
} else {
setValues({...values, userId: data._id, redirectToProfile: true})
}
})
}
const handleChange = name => event => {
setValues({...values, [name]: event.target.value})
}
if (values.redirectToProfile) {
return (
Edit Profile
error
{values.error}
)
}
Submit
)
}
================================================
FILE: client/user/Profile.js
================================================
import React, { useState, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
import ListItemText from '@material-ui/core/ListItemText'
import Avatar from '@material-ui/core/Avatar'
import IconButton from '@material-ui/core/IconButton'
import Typography from '@material-ui/core/Typography'
import Edit from '@material-ui/icons/Edit'
import Person from '@material-ui/icons/Person'
import Divider from '@material-ui/core/Divider'
import DeleteUser from './DeleteUser'
import auth from './../auth/auth-helper'
import {read} from './api-user.js'
import {Redirect, Link} from 'react-router-dom'
import {listByUser} from '../media/api-media.js'
import MediaList from '../media/MediaList'
const useStyles = makeStyles(theme => ({
root: theme.mixins.gutters({
maxWidth: 600,
margin: 'auto',
padding: theme.spacing(3),
marginTop: theme.spacing(5)
}),
title: {
marginTop: theme.spacing(3),
color: theme.palette.protectedTitle
},
avatar: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.light
}
}))
export default function Profile({ match }) {
const classes = useStyles()
const [user, setUser] = useState({})
const [redirectToSignin, setRedirectToSignin] = useState(false)
const jwt = auth.isAuthenticated()
const [media, setMedia] = useState([])
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
read({
userId: match.params.userId
}, {t: jwt.token}, signal).then((data) => {
if (data && data.error) {
setRedirectToSignin(true)
} else {
setUser(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [match.params.userId])
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
listByUser({
userId: match.params.userId
}, {t: jwt.token}, signal).then((data) => {
if (data && data.error) {
setRedirectToSignin(true)
} else {
setMedia(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [match.params.userId])
if (redirectToSignin) {
return
Profile
{user.name && user.name[0]}
{
auth.isAuthenticated().user && auth.isAuthenticated().user._id == user._id &&
(
)
}
)
}
================================================
FILE: client/user/Signup.js
================================================
import React, {useState} from 'react'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import Typography from '@material-ui/core/Typography'
import Icon from '@material-ui/core/Icon'
import { makeStyles } from '@material-ui/core/styles'
import {create} from './api-user.js'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import {Link} from 'react-router-dom'
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 600,
margin: 'auto',
textAlign: 'center',
marginTop: theme.spacing(5),
paddingBottom: theme.spacing(2)
},
error: {
verticalAlign: 'middle'
},
title: {
marginTop: theme.spacing(2),
color: theme.palette.openTitle
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 300
},
submit: {
margin: 'auto',
marginBottom: theme.spacing(2)
}
}))
export default function Signup() {
const classes = useStyles()
const [values, setValues] = useState({
name: '',
password: '',
email: '',
open: false,
error: ''
})
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value })
}
const clickSubmit = () => {
const user = {
name: values.name || undefined,
email: values.email || undefined,
password: values.password || undefined
}
create(user).then((data) => {
if (data.error) {
setValues({ ...values, error: data.error})
} else {
setValues({ ...values, error: '', open: true})
}
})
}
return (
Sign Up
error
{values.error} )
}
Submit
New Account
New account successfully created.
Sign In
)
}
================================================
FILE: client/user/Users.js
================================================
import React, {useState, useEffect} from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
import ListItemText from '@material-ui/core/ListItemText'
import Avatar from '@material-ui/core/Avatar'
import IconButton from '@material-ui/core/IconButton'
import Typography from '@material-ui/core/Typography'
import ArrowForward from '@material-ui/icons/ArrowForward'
import Person from '@material-ui/icons/Person'
import {Link} from 'react-router-dom'
import {list} from './api-user.js'
const useStyles = makeStyles(theme => ({
root: theme.mixins.gutters({
padding: theme.spacing(1),
margin: theme.spacing(5)
}),
title: {
margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
color: theme.palette.openTitle
}
}))
export default function Users() {
const classes = useStyles()
const [users, setUsers] = useState([])
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
list(signal).then((data) => {
if (data && data.error) {
console.log(data.error)
} else {
setUsers(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [])
return (
All Users
{users.map((item, i) => {
return
})
}
)
}
================================================
FILE: client/user/api-user.js
================================================
const create = async (user) => {
try {
let response = await fetch('/api/users/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const list = async (signal) => {
try {
let response = await fetch('/api/users/', {
method: 'GET',
signal: signal,
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const read = async (params, credentials, signal) => {
try {
let response = await fetch('/api/users/' + params.userId, {
method: 'GET',
signal: signal,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + credentials.t
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const update = async (params, credentials, user) => {
try {
let response = await fetch('/api/users/' + params.userId, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + credentials.t
},
body: JSON.stringify(user)
})
return await response.json()
} catch(err) {
console.log(err)
}
}
const remove = async (params, credentials) => {
try {
let response = await fetch('/api/users/' + params.userId, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + credentials.t
}
})
return await response.json()
} catch(err) {
console.log(err)
}
}
export {
create,
list,
read,
update,
remove
}
================================================
FILE: config/config.js
================================================
const config = {
env: process.env.NODE_ENV || 'development',
port: process.env.PORT || 3000,
jwtSecret: process.env.JWT_SECRET || "YOUR_secret_key",
mongoUri: process.env.MONGODB_URI ||
process.env.MONGO_HOST ||
'mongodb://' + (process.env.IP || 'localhost') + ':' +
(process.env.MONGO_PORT || '27017') +
'/mernproject',
serverUrl: process.env.serverUrl || 'http://localhost:3000'
}
export default config
================================================
FILE: nodemon.json
================================================
{
"verbose": false,
"watch": [
"./server"
],
"exec": "webpack --mode=development --config webpack.config.server.js && node ./dist/server.generated.js"
}
================================================
FILE: package.json
================================================
{
"name": "mern-mediastream",
"version": "2.0.0",
"description": "A MERN stack based media streaming application",
"author": "Shama Hoque",
"license": "MIT",
"keywords": [
"react",
"express",
"mongodb",
"node",
"mern"
],
"repository": {
"type": "git",
"url": "https://github.com/shamahoque/mern-mediastream.git"
},
"homepage": "https://github.com/shamahoque/mern-mediastream",
"main": "./dist/server.generated.js",
"scripts": {
"development": "nodemon",
"build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js",
"start": "NODE_ENV=production node ./dist/server.generated.js"
},
"engines": {
"node": "13.12.0",
"npm": "6.14.4"
},
"devDependencies": {
"@babel/core": "7.9.0",
"@babel/preset-env": "7.9.0",
"@babel/preset-react": "7.9.4",
"babel-loader": "8.1.0",
"file-loader": "6.0.0",
"nodemon": "2.0.2",
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"webpack-dev-middleware": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-node-externals": "1.7.2"
},
"dependencies": {
"@hot-loader/react-dom": "16.13.0",
"@material-ui/core": "4.9.8",
"@material-ui/icons": "4.9.1",
"body-parser": "1.19.0",
"compression": "1.7.4",
"cookie-parser": "1.4.5",
"cors": "2.8.5",
"express": "4.17.1",
"express-jwt": "5.3.1",
"formidable": "1.2.2",
"helmet": "3.22.0",
"isomorphic-fetch": "2.2.1",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.15",
"mongoose": "5.9.7",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-hot-loader": "4.12.20",
"react-player": "1.15.3",
"react-router": "5.1.2",
"react-router-config": "5.1.1",
"react-router-dom": "5.1.2",
"screenfull": "5.0.2"
}
}
================================================
FILE: server/controllers/auth.controller.js
================================================
import User from '../models/user.model'
import jwt from 'jsonwebtoken'
import expressJwt from 'express-jwt'
import config from './../../config/config'
const signin = async (req, res) => {
try {
let user = await User.findOne({
"email": req.body.email
})
if (!user)
return res.status('401').json({
error: "User not found"
})
if (!user.authenticate(req.body.password)) {
return res.status('401').send({
error: "Email and password don't match."
})
}
const token = jwt.sign({
_id: user._id
}, config.jwtSecret)
res.cookie("t", token, {
expire: new Date() + 9999
})
return res.json({
token,
user: {
_id: user._id,
name: user.name,
email: user.email
}
})
} catch (err) {
return res.status('401').json({
error: "Could not sign in"
})
}
}
const signout = (req, res) => {
res.clearCookie("t")
return res.status('200').json({
message: "signed out"
})
}
const requireSignin = expressJwt({
secret: config.jwtSecret,
userProperty: 'auth'
})
const hasAuthorization = (req, res, next) => {
const authorized = req.profile && req.auth && req.profile._id == req.auth._id
if (!(authorized)) {
return res.status('403').json({
error: "User is not authorized"
})
}
next()
}
export default {
signin,
signout,
requireSignin,
hasAuthorization
}
================================================
FILE: server/controllers/media.controller.js
================================================
import Media from '../models/media.model'
import extend from 'lodash/extend'
import errorHandler from './../helpers/dbErrorHandler'
import formidable from 'formidable'
import fs from 'fs'
//media streaming
import mongoose from 'mongoose'
let gridfs = null
mongoose.connection.on('connected', () => {
gridfs = new mongoose.mongo.GridFSBucket(mongoose.connection.db)
})
const create = (req, res) => {
let form = new formidable.IncomingForm()
form.keepExtensions = true
form.parse(req, async (err, fields, files) => {
if (err) {
return res.status(400).json({
error: "Video could not be uploaded"
})
}
let media = new Media(fields)
media.postedBy= req.profile
if(files.video){
let writestream = gridfs.openUploadStream(media._id, {
contentType: files.video.type || 'binary/octet-stream'})
fs.createReadStream(files.video.path).pipe(writestream)
}
try {
let result = await media.save()
res.status(200).json(result)
}
catch (err){
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
})
}
const mediaByID = async (req, res, next, id) => {
try{
let media = await Media.findById(id).populate('postedBy', '_id name').exec()
if (!media)
return res.status('400').json({
error: "Media not found"
})
req.media = media
let files = await gridfs.find({filename:media._id}).toArray()
if (!files[0]) {
return res.status(404).send({
error: 'No video found'
})
}
req.file = files[0]
next()
}catch(err) {
return res.status(404).send({
error: 'Could not retrieve media file'
})
}
}
const video = (req, res) => {
const range = req.headers["range"]
if (range && typeof range === "string") {
const parts = range.replace(/bytes=/, "").split("-")
const partialstart = parts[0]
const partialend = parts[1]
const start = parseInt(partialstart, 10)
const end = partialend ? parseInt(partialend, 10) : req.file.length - 1
const chunksize = (end - start) + 1
res.writeHead(206, {
'Accept-Ranges': 'bytes',
'Content-Length': chunksize,
'Content-Range': 'bytes ' + start + '-' + end + '/' + req.file.length,
'Content-Type': req.file.contentType
})
let downloadStream = gridfs.openDownloadStream(req.file._id, {start, end: end+1})
downloadStream.pipe(res)
downloadStream.on('error', () => {
res.sendStatus(404)
})
downloadStream.on('end', () => {
res.end()
})
} else {
res.header('Content-Length', req.file.length)
res.header('Content-Type', req.file.contentType)
let downloadStream = gridfs.openDownloadStream(req.file._id)
downloadStream.pipe(res)
downloadStream.on('error', () => {
res.sendStatus(404)
})
downloadStream.on('end', () => {
res.end()
})
}
}
const listPopular = async (req, res) => {
try{
let media = await Media.find({}).limit(9)
.populate('postedBy', '_id name')
.sort('-views')
.exec()
res.json(media)
} catch(err){
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const listByUser = async (req, res) => {
try{
let media = await Media.find({postedBy: req.profile._id})
.populate('postedBy', '_id name')
.sort('-created')
.exec()
res.json(media)
} catch(err){
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const read = (req, res) => {
return res.json(req.media)
}
const incrementViews = async (req, res, next) => {
try {
await Media.findByIdAndUpdate(req.media._id, {$inc: {"views": 1}}, {new: true}).exec()
next()
} catch(err){
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const update = async (req, res) => {
try {
let media = req.media
media = extend(media, req.body)
media.updated = Date.now()
await media.save()
res.json(media)
} catch(err){
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const isPoster = (req, res, next) => {
let isPoster = req.media && req.auth && req.media.postedBy._id == req.auth._id
if(!isPoster){
return res.status('403').json({
error: "User is not authorized"
})
}
next()
}
const remove = async (req, res) => {
try {
let media = req.media
let deletedMedia = await media.remove()
gridfs.delete(req.file._id)
res.json(deletedMedia)
} catch(err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const listRelated = async (req, res) => {
try {
let media = await Media.find({ "_id": { "$ne": req.media }, "genre": req.media.genre})
.limit(4)
.sort('-views')
.populate('postedBy', '_id name')
.exec()
res.json(media)
} catch (err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
export default {
create,
mediaByID,
video,
listPopular,
listByUser,
read,
incrementViews,
update,
isPoster,
remove,
listRelated
}
================================================
FILE: server/controllers/user.controller.js
================================================
import User from '../models/user.model'
import extend from 'lodash/extend'
import errorHandler from './../helpers/dbErrorHandler'
const create = async (req, res) => {
const user = new User(req.body)
try {
await user.save()
return res.status(200).json({
message: "Successfully signed up!"
})
} catch (err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
/**
* Load user and append to req.
*/
const userByID = async (req, res, next, id) => {
try {
let user = await User.findById(id)
if (!user)
return res.status('400').json({
error: "User not found"
})
req.profile = user
next()
} catch (err) {
return res.status('400').json({
error: "Could not retrieve user"
})
}
}
const read = (req, res) => {
req.profile.hashed_password = undefined
req.profile.salt = undefined
return res.json(req.profile)
}
const list = async (req, res) => {
try {
let users = await User.find().select('name email updated created')
res.json(users)
} catch (err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const update = async (req, res) => {
try {
let user = req.profile
user = extend(user, req.body)
user.updated = Date.now()
await user.save()
user.hashed_password = undefined
user.salt = undefined
res.json(user)
} catch (err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
const remove = async (req, res) => {
try {
let user = req.profile
let deletedUser = await user.remove()
deletedUser.hashed_password = undefined
deletedUser.salt = undefined
res.json(deletedUser)
} catch (err) {
return res.status(400).json({
error: errorHandler.getErrorMessage(err)
})
}
}
export default {
create,
userByID,
read,
list,
remove,
update
}
================================================
FILE: server/devBundle.js
================================================
import config from './../config/config'
import webpack from 'webpack'
import webpackMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import webpackConfig from './../webpack.config.client.js'
const compile = (app) => {
if(config.env === "development"){
const compiler = webpack(webpackConfig)
const middleware = webpackMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath
})
app.use(middleware)
app.use(webpackHotMiddleware(compiler))
}
}
export default {
compile
}
================================================
FILE: server/express.js
================================================
import express from 'express'
import path from 'path'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import compress from 'compression'
import cors from 'cors'
import helmet from 'helmet'
import Template from './../template'
import userRoutes from './routes/user.routes'
import authRoutes from './routes/auth.routes'
import mediaRoutes from './routes/media.routes'
// modules for server side rendering
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import MainRouter from './../client/MainRouter'
import { StaticRouter } from 'react-router-dom'
import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles'
import theme from './../client/theme'
//end
//For SSR with data
import { matchRoutes } from 'react-router-config'
import routes from './../client/routeConfig'
import 'isomorphic-fetch'
//end
//comment out before building for production
import devBundle from './devBundle'
const CURRENT_WORKING_DIR = process.cwd()
const app = express()
//comment out before building for production
devBundle.compile(app)
//For SSR with data
const loadBranchData = (location) => {
const branch = matchRoutes(routes, location)
const promises = branch.map(({ route, match }) => {
return route.loadData
? route.loadData(branch[0].match.params)
: Promise.resolve(null)
})
return Promise.all(promises)
}
// parse body params and attache them to req.body
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cookieParser())
app.use(compress())
// secure apps by setting various HTTP headers
app.use(helmet())
// enable CORS - Cross Origin Resource Sharing
app.use(cors())
app.use('/dist', express.static(path.join(CURRENT_WORKING_DIR, 'dist')))
// mount routes
app.use('/', userRoutes)
app.use('/', authRoutes)
app.use('/', mediaRoutes)
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
loadBranchData(req.url).then(data => {
const markup = ReactDOMServer.renderToString(
sheets.collect(
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
}).catch(err => {
res.status(500).send({"error": "Could not load React view with data"})
})
})
// Catch unauthorised errors
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
res.status(401).json({"error" : err.name + ": " + err.message})
}else if (err) {
res.status(400).json({"error" : err.name + ": " + err.message})
console.log(err)
}
})
export default app
================================================
FILE: server/helpers/dbErrorHandler.js
================================================
'use strict'
/**
* Get unique error field name
*/
const getUniqueErrorMessage = (err) => {
let output
try {
let fieldName = err.message.substring(err.message.lastIndexOf('.$') + 2, err.message.lastIndexOf('_1'))
output = fieldName.charAt(0).toUpperCase() + fieldName.slice(1) + ' already exists'
} catch (ex) {
output = 'Unique field already exists'
}
return output
}
/**
* Get the error message from error object
*/
const getErrorMessage = (err) => {
let message = ''
if (err.code) {
switch (err.code) {
case 11000:
case 11001:
message = getUniqueErrorMessage(err)
break
default:
message = 'Something went wrong'
}
} else {
for (let errName in err.errors) {
if (err.errors[errName].message) message = err.errors[errName].message
}
}
return message
}
export default {getErrorMessage}
================================================
FILE: server/models/media.model.js
================================================
import mongoose from 'mongoose'
const MediaSchema = new mongoose.Schema({
title: {
type: String,
required: 'title is required'
},
description: String,
genre: String,
views: {type: Number, default: 0},
postedBy: {type: mongoose.Schema.ObjectId, ref: 'User'},
created: {
type: Date,
default: Date.now
},
updated: {
type: Date
}
})
export default mongoose.model('Media', MediaSchema)
================================================
FILE: server/models/user.model.js
================================================
import mongoose from 'mongoose'
import crypto from 'crypto'
const UserSchema = new mongoose.Schema({
name: {
type: String,
trim: true,
required: 'Name is required'
},
email: {
type: String,
trim: true,
unique: 'Email already exists',
match: [/.+\@.+\..+/, 'Please fill a valid email address'],
required: 'Email is required'
},
hashed_password: {
type: String,
required: "Password is required"
},
salt: String,
updated: Date,
created: {
type: Date,
default: Date.now
}
})
UserSchema
.virtual('password')
.set(function(password) {
this._password = password
this.salt = this.makeSalt()
this.hashed_password = this.encryptPassword(password)
})
.get(function() {
return this._password
})
UserSchema.path('hashed_password').validate(function(v) {
if (this._password && this._password.length < 6) {
this.invalidate('password', 'Password must be at least 6 characters.')
}
if (this.isNew && !this._password) {
this.invalidate('password', 'Password is required')
}
}, null)
UserSchema.methods = {
authenticate: function(plainText) {
return this.encryptPassword(plainText) === this.hashed_password
},
encryptPassword: function(password) {
if (!password) return ''
try {
return crypto
.createHmac('sha1', this.salt)
.update(password)
.digest('hex')
} catch (err) {
return ''
}
},
makeSalt: function() {
return Math.round((new Date().valueOf() * Math.random())) + ''
}
}
export default mongoose.model('User', UserSchema)
================================================
FILE: server/routes/auth.routes.js
================================================
import express from 'express'
import authCtrl from '../controllers/auth.controller'
const router = express.Router()
router.route('/auth/signin')
.post(authCtrl.signin)
router.route('/auth/signout')
.get(authCtrl.signout)
export default router
================================================
FILE: server/routes/media.routes.js
================================================
import express from 'express'
import userCtrl from '../controllers/user.controller'
import authCtrl from '../controllers/auth.controller'
import mediaCtrl from '../controllers/media.controller'
const router = express.Router()
router.route('/api/media/new/:userId')
.post(authCtrl.requireSignin, mediaCtrl.create)
router.route('/api/media/video/:mediaId')
.get(mediaCtrl.video)
router.route('/api/media/popular')
.get(mediaCtrl.listPopular)
router.route('/api/media/related/:mediaId')
.get(mediaCtrl.listRelated)
router.route('/api/media/by/:userId')
.get(mediaCtrl.listByUser)
router.route('/api/media/:mediaId')
.get( mediaCtrl.incrementViews, mediaCtrl.read)
.put(authCtrl.requireSignin, mediaCtrl.isPoster, mediaCtrl.update)
.delete(authCtrl.requireSignin, mediaCtrl.isPoster, mediaCtrl.remove)
router.param('userId', userCtrl.userByID)
router.param('mediaId', mediaCtrl.mediaByID)
export default router
================================================
FILE: server/routes/user.routes.js
================================================
import express from 'express'
import userCtrl from '../controllers/user.controller'
import authCtrl from '../controllers/auth.controller'
const router = express.Router()
router.route('/api/users')
.get(userCtrl.list)
.post(userCtrl.create)
router.route('/api/users/:userId')
.get(authCtrl.requireSignin, userCtrl.read)
.put(authCtrl.requireSignin, authCtrl.hasAuthorization, userCtrl.update)
.delete(authCtrl.requireSignin, authCtrl.hasAuthorization, userCtrl.remove)
router.param('userId', userCtrl.userByID)
export default router
================================================
FILE: server/server.js
================================================
import config from './../config/config'
import app from './express'
import mongoose from 'mongoose'
// Connection URL
mongoose.Promise = global.Promise
mongoose.connect(config.mongoUri, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true, useFindAndModify: false })
mongoose.connection.on('error', () => {
throw new Error(`unable to connect to database: ${config.mongoUri}`)
})
app.listen(config.port, (err) => {
if (err) {
console.log(err)
}
console.info('Server started on port %s.', config.port)
})
================================================
FILE: template.js
================================================
export default ({markup, css}) => {
return `
MERN Mediastream
${markup}
`
}
================================================
FILE: webpack.config.client.js
================================================
const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()
const config = {
name: "browser",
mode: "development",
devtool: 'eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.join(CURRENT_WORKING_DIR, 'client/main.js')
],
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}, plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
module.exports = config
================================================
FILE: webpack.config.client.production.js
================================================
const path = require('path')
const CURRENT_WORKING_DIR = process.cwd()
const config = {
mode: "production",
entry: [
path.join(CURRENT_WORKING_DIR, 'client/main.js')
],
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist'),
filename: 'bundle.js',
publicPath: "/dist/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}
}
module.exports = config
================================================
FILE: webpack.config.server.js
================================================
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const CURRENT_WORKING_DIR = process.cwd()
const config = {
name: "server",
entry: [ path.join(CURRENT_WORKING_DIR , './server/server.js') ],
target: "node",
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist/'),
filename: "server.generated.js",
publicPath: '/dist/',
libraryTarget: "commonjs2"
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'babel-loader' ]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}
}
module.exports = config
