Skip to content

Instantly share code, notes, and snippets.

@abranhe
Forked from dabit3/reactstreaming.js
Created June 18, 2021 02:30
Show Gist options
  • Save abranhe/5f44693d57154ff24925a8145a4cb16c to your computer and use it in GitHub Desktop.
Save abranhe/5f44693d57154ff24925a8145a4cb16c to your computer and use it in GitHub Desktop.
React Streaming code from live broadcast
import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReactPlayer from 'react-player'
import { HashRouter, Link, Switch, Route } from 'react-router-dom'
import AuthComponent from './AuthComponent'
import { Auth, API } from 'aws-amplify'
import { createComment as CreateComment } from './graphql/mutations'
import { listComments as ListComments } from './graphql/queries'
import { onCreateComment as OnCreateComment } from './graphql/subscriptions'
const streamUrl = "https://5ab61782dc20.us-east-1.playback.live-video.net/api/video/v1/us-east-1.557458351015.channel.l6pYjS72ScW9.m3u8"
function Router() {
return (
<HashRouter>
<nav>
<Link to="/">Stream</Link>
<Link to="/auth">Profile</Link>
</nav>
<Switch>
<Route exact path="/">
<App />
</Route>
<Route exact path="/auth">
<AuthComponent />
</Route>
</Switch>
</HashRouter>
)
}
const initialState = {
comments: []
}
function reducer(state, action) {
switch(action.type) {
case "SET_COMMENTS":
return {
...state, comments: action.comments
}
case "ADD_COMMENT":
return {
...state, comments: [...state.comments, action.comment]
}
default:
return state
}
}
function App() {
const [user, setUser] = React.useState(null)
const [inputValue, setInput] = React.useState('')
const [state, dispatch] = React.useReducer(reducer, initialState)
React.useEffect(() => {
Auth.currentAuthenticatedUser()
.then(currentUser => setUser(currentUser))
.catch(err => console.log({ err }))
fetchComments()
subscribe()
}, [])
function subscribe() {
API.graphql({
query: OnCreateComment
})
.subscribe({
next: async commentData => {
console.log({ commentData })
const { value: { data } } = commentData
try {
const user = await Auth.currentAuthenticatedUser()
console.log({ user })
if (user.username === data.onCreateComment.owner) {
return
}
dispatch({ type: "ADD_COMMENT", comment: data.onCreateComment })
} catch (err) {
console.log("err: ", err)
dispatch({ type: "ADD_COMMENT", comment: data.onCreateComment })
}
}
})
}
async function fetchComments() {
const commentData = await API.graphql({
query: ListComments
})
dispatch({ type: "SET_COMMENTS" , comments: commentData.data.listComments.items })
}
async function createComment() {
if (!inputValue) return
const message = inputValue
setInput('')
dispatch({
type: "ADD_COMMENT", comment: { message, owner: user.username }
})
await API.graphql({
query: CreateComment,
variables: {
input: { message },
},
authMode: "AMAZON_COGNITO_USER_POOLS"
})
}
function onChange(e) {
e.persist()
setInput(e.target.value)
}
return (
<div className="App">
<div style={{ display: "flex"}}>
<div style={{ width: 900, border: "1px solid black" }}>
<ReactPlayer
url={streamUrl}
width="100%"
height="100%"
playing
/>
</div>
<div style={{ width: 300, border: "1px solid black" }}>
{
user && (
<div>
<input value={inputValue} onChange={onChange} placeholder="comment" />
<button
onClick={createComment}
>Create Comment</button>
</div>
)
}
{
state.comments.map((comment, index) => (
<div key={index}>
<p>{comment.message}</p>
<span>From: {comment.owner}</span>
</div>
))
}
</div>
</div>
</div>
);
}
export default Router;
// AuthComponent
import React from 'react'
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
import { Auth } from 'aws-amplify'
function AuthComponent() {
const [user, updateUser] = React.useState(null)
React.useEffect(() => {
Auth.currentAuthenticatedUser()
.then(currentUser => updateUser(currentUser))
.catch(err => console.log({ err }))
}, [])
return (
<div>
{
user && <h3>Hello {user.username}</h3>
}
<AmplifySignOut />
</div>
)
}
export default withAuthenticator(AuthComponent)
/* schema.graphql */
/*
type Comment @model
@auth(
rules: [
{ allow: owner },
{ allow: public, operations: [read] },
{ allow: private, operations: [read] }
]
)
{
id: ID!
message: String!
owner: String
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment