ash/WebStudio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prettier than ever!

Browse source
This commit is contained in:
Matthew Stratford 2020-04-20 15:22:14 +01:00
parent 19efe36667
commit 3b4d8bc0e9
1 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/navbar/index.tsx
View file

@ -2,7 +2,12 @@ import React, { useRef, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import Clock from "react-live-clock"; import Clock from "react-live-clock";
import { FaCircle, FaRegClock, FaRegUser, FaBroadcastTower } from "react-icons/fa"; import {
FaCircle,
FaRegClock,
FaRegUser,
FaBroadcastTower,
} from "react-icons/fa";
import { RootState } from "../rootReducer"; import { RootState } from "../rootReducer";
@ -77,7 +82,12 @@ export function NavBar() {
</div> </div>
</li> </li>
<li <li
className={"btn rounded-0 pt-2 pb-1 nav-item nav-link " + (broadcastState.stage !== "NOT_REGISTERED" ? "btn-danger active" : "btn-outline-light")} className={
"btn rounded-0 pt-2 pb-1 nav-item nav-link " +
(broadcastState.stage !== "NOT_REGISTERED"
? "btn-danger active"
: "btn-outline-light")
}
onClick={() => { onClick={() => {
switch (broadcastState.stage) { switch (broadcastState.stage) {
case "NOT_REGISTERED": case "NOT_REGISTERED":
@ -89,24 +99,32 @@ export function NavBar() {
} }
}} }}
> >
<FaBroadcastTower size={17}/> <FaBroadcastTower size={17} />
&nbsp; &nbsp;
{broadcastState.stage === "NOT_REGISTERED" && "Register for show"} {broadcastState.stage === "NOT_REGISTERED" && "Register for show"}
{broadcastState.stage === "REGISTERED" && "Cancel registration"} {broadcastState.stage === "REGISTERED" && "Cancel registration"}
</li> </li>
{settings.enableRecording && ( {settings.enableRecording && (
<li className={"btn rounded-0 pt-2 pb-1 nav-item nav-link " + (broadcastState.recordingState === "CONNECTED" ? "btn-outline-danger active" : "btn-outline-warning") } <li
onClick={() => className={
dispatch( "btn rounded-0 pt-2 pb-1 nav-item nav-link " +
broadcastState.recordingState === "NOT_CONNECTED" (broadcastState.recordingState === "CONNECTED"
? BroadcastState.startRecording() ? "btn-outline-danger active"
: BroadcastState.stopRecording() : "btn-outline-warning")
) }
} onClick={() =>
> dispatch(
<FaCircle size={17} /> broadcastState.recordingState === "NOT_CONNECTED"
&nbsp; ? BroadcastState.startRecording()
Rec: {broadcastState.recordingState === "CONNECTED" ? "Recording" : "Not Recording"} : BroadcastState.stopRecording()
)
}
>
<FaCircle size={17} />
&nbsp; Rec:{" "}
{broadcastState.recordingState === "CONNECTED"
? "Recording"
: "Not Recording"}
</li> </li>
)} )}
<span className="navbar-brand divider ml-3 mr-2 mt-2 mb-0"></span> <span className="navbar-brand divider ml-3 mr-2 mt-2 mb-0"></span>