Skip to content

Commit

Permalink
Merge pull request #18 from adityathakurxd/fixes-for-launch
Browse files Browse the repository at this point in the history 
[WIP] Fixes for launch
  • Loading branch information
@adityathakurxd
adityathakurxd authored Mar 11, 2024
2 parents e4393d6 + d635641 commit bf775e0
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 34 deletions.
9 changes: 7 additions & 2 deletions app/components/Conference.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { selectPeers, useHMSStore } from '@100mslive/react-sdk'
import { selectPeerCount, selectPeers, useHMSStore } from '@100mslive/react-sdk'
import Peer from '../components/Peer'
import '@tldraw/tldraw/tldraw.css'
import { TldrawLogo } from '../components/TldrawLogo'
Expand All @@ -11,11 +11,12 @@ import { Pagination } from './Pagination'
import { LiveResults } from './LiveResults'
import Footer from './Footer'
import CopyButton from './CopyButton'

import { PeopleIcon } from '@100mslive/react-icons'
const HOST_URL = 'wss://demo-yjs-server-production.up.railway.app'

function Conference() {
const peers = useHMSStore(selectPeers)
const peerCount = useHMSStore(selectPeerCount)
const roomCode = localStorage.getItem('roomCode') ?? ''

const store = useYjsStore({
Expand All @@ -29,6 +30,10 @@ function Conference() {
<div className="conference-component">
<div className="conference-section">
<div className="peers-container">
<div className="peer-count-container">
<PeopleIcon className="peer-count-icon" />
<p className="peer-count-text"> {peerCount}</p>
</div>
{peers?.[peerIndex]?.videoTrack ? <Peer peer={peers[peerIndex]} /> : null}
{peers?.[peerIndex + 1]?.videoTrack ? <Peer peer={peers[peerIndex + 1]} /> : null}

Expand Down
36 changes: 21 additions & 15 deletions app/components/CreatePollButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { useCallback, useState } from 'react'
import { useQuestionContext } from '../context'
import { makeReal } from '../makeReal'
import PollForm from './PollForm'
import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk'
import { ROLES } from './constants'

export function CreatePollButton() {
const editor = useEditor()
Expand All @@ -14,6 +16,8 @@ export function CreatePollButton() {
const [pollFormIsShown, setPollFormIsShown] = useState(false)
const [fetchingQuestion, setFetchingQuestion] = useState(false)
const { questionData, setQuestionData } = useQuestionContext()
const localPeerRoleName = useHMSStore(selectLocalPeerRoleName)
const showCreatePollButton = localPeerRoleName === ROLES.TEACHER

const hidePollFormHandler = () => {
setPollFormIsShown(false)
Expand Down Expand Up @@ -44,21 +48,23 @@ export function CreatePollButton() {
return (
<>
{pollFormIsShown && questionData && <PollForm onClose={hidePollFormHandler} />}
<button
title="Create poll"
className="create-poll-button"
onClick={handleClick}
disabled={fetchingQuestion}
>
{fetchingQuestion ? (
<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
) : (
<>
<span className="create-poll-text">Create Poll</span>
<SparkleIcon style={{ marginRight: -4 }} />
</>
)}
</button>
{showCreatePollButton && (
<button
title="Create poll"
className="create-poll-button"
onClick={handleClick}
disabled={fetchingQuestion}
>
{fetchingQuestion ? (
<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
) : (
<>
<span className="create-poll-text">Create Poll</span>
<SparkleIcon style={{ marginRight: -4 }} />
</>
)}
</button>
)}
</>
)
}
18 changes: 14 additions & 4 deletions app/components/JoinForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use client'
import { ArrowRightIcon, Svg100MsLogoIcon } from '@100mslive/react-icons'
import { ArrowRightIcon, RefreshIcon, Svg100MsLogoIcon } from '@100mslive/react-icons'
import { useHMSActions } from '@100mslive/react-sdk'
import Image from 'next/image'
import { useState, ChangeEvent, FormEvent, useEffect } from 'react'
Expand All @@ -21,6 +21,7 @@ const JoinForm = () => {

const searchParams = useSearchParams()
const roomCodeParam = searchParams.get('room') || ''
const [loading, setLoading] = useState(false)

const handleTabClick = (tab) => {
setActiveTabRole(tab)
Expand All @@ -42,6 +43,7 @@ const JoinForm = () => {
// Type the event parameter
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
setLoading(true)

const { name: userName = '', roomCode = '' } = inputValues

Expand Down Expand Up @@ -97,9 +99,11 @@ const JoinForm = () => {
await hmsActions.join({ userName, authToken })
}
} else {
setLoading(false)
alert('Failed to create a new room')
}
} catch (e) {
setLoading(false)
alert('Failed to join room')
}
}
Expand Down Expand Up @@ -151,9 +155,15 @@ const JoinForm = () => {
</div>
)}

<button type="submit" className="btn-primary primary">
{roomCodeParam ? 'Accept Invite' : 'Join Room'}
<ArrowRightIcon height={20} width={20} style={{ marginLeft: '4px' }} />
<button type="submit" className="btn-primary primary" disabled={loading}>
{loading ? (
<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
) : (
<>
{roomCodeParam ? 'Accept Invite' : 'Join Room'}
<ArrowRightIcon height={20} width={20} style={{ marginLeft: '4px' }} />
</>
)}
</button>
</form>

Expand Down
28 changes: 22 additions & 6 deletions app/components/PollForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { HMSPollQuestionType } from './constants'
import { useQuestionContext } from '../context'
import { makeReal } from '../makeReal'
import { useEditor, useToasts } from '@tldraw/tldraw'
import { toast } from 'react-toastify'
import { RefreshIcon } from '@100mslive/react-icons'

interface PollFormProps {
onClose: () => void
Expand All @@ -17,6 +19,7 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {

const { questionData, setQuestionData } = useQuestionContext()
const [localQuestionData, setLocalQuestionData] = useState(questionData)
const [loading, setLoading] = useState(false)

useEffect(() => {
setLocalQuestionData(questionData)
Expand All @@ -32,8 +35,10 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
},
question
)
setLoading(false)
} catch (e) {
console.error(e)
setLoading(false)
addToast({
icon: 'cross-2',
title: 'Something went wrong',
Expand Down Expand Up @@ -69,11 +74,15 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
skippable: true,
},
])
.catch((err: Error) => console.log(err.message))
.catch((err: Error) => {
console.log(err.message)
toast.error('Failed to add question to poll. Please try again or reach out to the team.')
})

await hmsActions.interactivityCenter
.startPoll(id)
.catch((err: Error) => console.log(err.message))
await hmsActions.interactivityCenter.startPoll(id).catch((err: Error) => {
console.log(err.message)
toast.error('Error starting poll. Please try again or reach out to the team.')
})
onClose()
}

Expand Down Expand Up @@ -121,9 +130,16 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
width: 120,
padding: 8,
}}
onClick={() => regenerateQuestion(localQuestionData.question)}
onClick={() => {
setLoading(true)
regenerateQuestion(localQuestionData.question)
}}
>
Regenerate
{loading ? (
<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
) : (
'Regenerate'
)}
</button>
<button className="primary" onClick={createPollOnClick}>
Launch Poll
Expand Down
71 changes: 65 additions & 6 deletions app/components/PollVotes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use client'
import { HMSPoll, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk'
import { useEffect, useState } from 'react'
import { ProgressBar } from './ProgressBar'
import { toast } from 'react-toastify'

export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
const hmsActions = useHMSActions()
Expand All @@ -9,15 +11,24 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
const [voteCount, setVoteCount] = useState<number[]>([])
const totalCount = voteCount.reduce((sum, value) => (sum += value), 0)
const localPeerId = useHMSStore(selectLocalPeerID)
const showEndPollButton = localPeerId === poll.startedBy
const isPollAuthor = localPeerId === poll.startedBy
const hasVoted = question?.responses?.some((response) => response.peer.peerid === localPeerId)

const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | undefined>()

useEffect(() => {
const newVoteCount = question.options.map(() => 0)
// Option index starts from 1
console.log('Initial Vote Count:', newVoteCount)
console.log('Initial Responses:', responses)
console.log('Question Options:', question.options)

responses?.forEach((response) => {
const count = newVoteCount[response.option - 1] ?? 0
newVoteCount[response.option - 1] = count + 1
})

console.log('Updated Vote Count:', newVoteCount)
console.log('Question Options:', question.options)
setVoteCount(newVoteCount)
}, [responses, question])

Expand All @@ -34,18 +45,36 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
<p style={{ fontWeight: '600', color: 'black' }}>{question?.text}</p>
{question?.options?.map((option, index) => (
<div key={index} style={{ marginBottom: '10px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
<div style={{ display: 'flex', gap: '5px', marginBottom: '4px' }}>
{!isPollAuthor && (
<input
style={{ cursor: 'pointer' }}
type="radio"
value={index}
checked={selectedOptionIndex === index}
onChange={() => setSelectedOptionIndex(index)}
id={'' + index}
/>
)}
<p style={{ color: 'black', fontWeight: '400', fontSize: '14px', margin: 0 }}>
{option.text}
</p>
<p style={{ color: 'black', fontWeight: '400', fontSize: '14px', margin: 0 }}>
<p
style={{
color: 'black',
fontWeight: '400',
fontSize: '14px',
margin: 0,
marginLeft: 'auto',
}}
>
{voteCount[index]} vote{voteCount[index] === 1 ? '' : 's'}
</p>
</div>
<ProgressBar percentage={totalCount ? voteCount[index] / totalCount : 0} />
</div>
))}
{showEndPollButton ? (
{isPollAuthor ? (
<button
style={{
width: '100%',
Expand All @@ -59,7 +88,37 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
>
End poll
</button>
) : null}
) : (
<button
style={{
width: '100%',
textAlign: 'center',
background: 'var(--primary_default)',
color: 'white',
display: 'block',
padding: '0.75rem',
marginTop: '18px',
}}
disabled={hasVoted}
onClick={async () => {
try {
await hmsActions.interactivityCenter
.addResponsesToPoll(poll.id, [
{
questionIndex: poll.questions[0].index,
option: selectedOptionIndex + 1,
},
])
.then(() => toast(`Your vote has been submitted for "${question.text}`))
} catch (err) {
console.log(err.message)
toast.error('Failed to submit vote. Please try again or reach out to the team.')
}
}}
>
Submit
</button>
)}
</div>
)
}
9 changes: 8 additions & 1 deletion app/components/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ export const ProgressBar = ({ percentage = 0 }: { percentage: number }) => {
background: 'var(--surface_bright)',
}}
>
<div className="primary" style={{ width: `${percentage * 100}%`, height: '100%' }} />
<div
style={{
width: `${percentage * 100}%`,
height: '100%',
background: '#2672ed',
minWidth: '10px',
}}
/>
</div>
)
}
20 changes: 20 additions & 0 deletions app/components/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,26 @@
width: 100%;
}

.peer-count-container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 5px;
padding: 0px;
border: solid 1px black;
width: fit-content;
height: 40px;
border-radius: 6px;
}

.peer-count-icon {
padding-left: 5px;
}

.peer-count-text {
padding: 10px 10px 10px 20px;
}

/* You can add more specific styles here */
.tlui-navigation-zone {
display: none;
Expand Down
1 change: 1 addition & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
--on_surface: #f2f1eb;
--white: #fff;
--error_default: #c74e5b;
--primary_default: #1565c0;

background-color: #ffffffde;
}
Expand Down

0 comments on commit bf775e0

Please sign in to comment.