Split navbar up into two sections (WIP)
This commit is contained in:
Matthew Stratford
parent
6e89ad1608
commit
438a5593cb
4 changed files with 241 additions and 96 deletions
|
|
@ -84,6 +84,8 @@
|
|||
"react-live-clock": "^4.0.5",
|
||||
"react-modal": "^3.11.2",
|
||||
"react-redux": "^7.1.3",
|
||||
"react-scripts": "3.4.1",
|
||||
"react-stopwatch": "^2.0.4",
|
||||
"reactstrap": "^8.4.1",
|
||||
"redux": "^4.0.4",
|
||||
"redux-persist": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Clock from "react-live-clock";
|
||||
import Stopwatch from 'react-stopwatch';
|
||||
|
||||
import {
|
||||
FaCircle,
|
||||
FaRegClock,
|
||||
FaRegUser,
|
||||
FaBroadcastTower,
|
||||
FaSpinner
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { RootState } from "../rootReducer";
|
||||
|
|
@ -41,7 +43,7 @@ function nicifyConnectionState(state: ConnectionStateEnum): string {
|
|||
}
|
||||
}
|
||||
|
||||
export function NavBar() {
|
||||
export function NavBarMain() {
|
||||
const dispatch = useDispatch();
|
||||
const sessionState = useSelector((state: RootState) => state.session);
|
||||
const broadcastState = useSelector((state: RootState) => state.broadcast);
|
||||
|
|
@ -77,88 +79,9 @@ export function NavBar() {
|
|||
<img className="logo-webstudio" src={appLogo} alt="Web Studio Logo" />
|
||||
<img className="logo-myradio" src={myradioLogo} alt="MyRadio Logo" />
|
||||
</a>
|
||||
<div className="nav-item nav-link" id="timelord">
|
||||
<a
|
||||
href="http://ury.org.uk/timelord/"
|
||||
target="_blank"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
let w = window.open(
|
||||
"http://ury.org.uk/timelord/",
|
||||
"URY - Timelord",
|
||||
"resizable,status"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div className="time">
|
||||
<Clock
|
||||
format={"HH:mm:ss"}
|
||||
ticking={true}
|
||||
timezone={"europe/london"}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="nav navbar-nav navbar-right">
|
||||
<li className="nav-item">
|
||||
<VUMeter width={250} height={40} source="master" range={[-40, 3]} />
|
||||
</li>
|
||||
|
||||
<li className="nav-item" style={{ color: "white" }}>
|
||||
<div className="nav-link">
|
||||
<b>{nicifyConnectionState(broadcastState.connectionState)}</b>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link connect"
|
||||
onClick={() => {
|
||||
setConnectButtonAnimating(true);
|
||||
switch (broadcastState.stage) {
|
||||
case "NOT_REGISTERED":
|
||||
dispatch(BroadcastState.goOnAir());
|
||||
break;
|
||||
case "REGISTERED":
|
||||
dispatch(BroadcastState.cancelTimeslot());
|
||||
break;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{connectButtonAnimating ? (
|
||||
<span className="dot-pulse mr-2" />
|
||||
) : (
|
||||
<>
|
||||
<FaBroadcastTower size={17} className="mr-2" />
|
||||
{broadcastState.stage === "NOT_REGISTERED" && "Register for show"}
|
||||
{broadcastState.stage === "REGISTERED" && "Cancel registration"}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
{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")
|
||||
}
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
broadcastState.recordingState === "NOT_CONNECTED"
|
||||
? BroadcastState.startRecording()
|
||||
: BroadcastState.stopRecording()
|
||||
)
|
||||
}
|
||||
>
|
||||
<FaCircle size={17} />
|
||||
Rec:{" "}
|
||||
{broadcastState.recordingState === "CONNECTED"
|
||||
? "Recording"
|
||||
: "Not Recording"}
|
||||
</li>
|
||||
)}
|
||||
<span className="navbar-brand divider ml-3 mr-2 mt-2 mb-0"></span>
|
||||
<li className="nav-item dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
|
|
@ -201,7 +124,7 @@ export function NavBar() {
|
|||
</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item dropdown">
|
||||
<li className="nav-item navbar-profile dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href={MYRADIO_NON_API_BASE + "/Profile/default/"}
|
||||
|
|
@ -236,6 +159,123 @@ export function NavBar() {
|
|||
);
|
||||
}
|
||||
|
||||
export function NavBarWebStudio() {
|
||||
const dispatch = useDispatch();
|
||||
const sessionState = useSelector((state: RootState) => state.session);
|
||||
const broadcastState = useSelector((state: RootState) => state.broadcast);
|
||||
const settings = useSelector((state: RootState) => state.settings);
|
||||
const redirect_url = encodeURIComponent(window.location.toString());
|
||||
|
||||
const [connectButtonAnimating, setConnectButtonAnimating] = useState(false);
|
||||
|
||||
const prevRegistrationStage = useRef(broadcastState.stage);
|
||||
useEffect(() => {
|
||||
if (broadcastState.stage !== prevRegistrationStage.current) {
|
||||
setConnectButtonAnimating(false);
|
||||
}
|
||||
prevRegistrationStage.current = broadcastState.stage;
|
||||
}, [broadcastState.stage]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className="nav navbar-nav navbar-left">
|
||||
<li
|
||||
className="btn rounded-0 pt-2 pb-1 nav-link nav-item"
|
||||
id="timelord"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.open(
|
||||
"http://ury.org.uk/timelord/",
|
||||
"URY - Timelord",
|
||||
"resizable,status"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Clock
|
||||
format={"HH:mm:ss"}
|
||||
ticking={true}
|
||||
timezone={"europe/london"}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul className="nav navbar-nav navbar-right mr-0 pr-0">
|
||||
|
||||
<li className="nav-item" style={{ color: "white" }}>
|
||||
<div className="nav-link">
|
||||
<b>{nicifyConnectionState(broadcastState.connectionState)}</b>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link connect"
|
||||
onClick={() => {
|
||||
setConnectButtonAnimating(true);
|
||||
switch (broadcastState.stage) {
|
||||
case "NOT_REGISTERED":
|
||||
dispatch(BroadcastState.goOnAir());
|
||||
break;
|
||||
case "REGISTERED":
|
||||
dispatch(BroadcastState.cancelTimeslot());
|
||||
break;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{connectButtonAnimating ? (
|
||||
<>
|
||||
<FaBroadcastTower size={17} className="mr-2" />
|
||||
<FaSpinner size={17} className="nav-spin mr-2" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FaBroadcastTower size={17} className="mr-2" />
|
||||
{broadcastState.stage === "NOT_REGISTERED" && "Register"}
|
||||
{broadcastState.stage === "REGISTERED" && "Stop"}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
{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")
|
||||
}
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
broadcastState.recordingState === "NOT_CONNECTED"
|
||||
? BroadcastState.startRecording()
|
||||
: BroadcastState.stopRecording()
|
||||
)
|
||||
}
|
||||
>
|
||||
<FaCircle size={17}
|
||||
className={
|
||||
broadcastState.recordingState === "CONNECTED" ? "rec-blink" : "rec-stop"}
|
||||
/>
|
||||
{" "}
|
||||
{broadcastState.recordingState === "CONNECTED"
|
||||
? <Stopwatch
|
||||
seconds={0}
|
||||
minutes={0}
|
||||
hours={0}
|
||||
render={({ formatted }) => {
|
||||
return (
|
||||
<span>{formatted}</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
: "Record"}
|
||||
</li>
|
||||
)}
|
||||
<li className="nav-item px-2 nav-vu">
|
||||
<VUMeter width={235} height={40} source="master" range={[-40, 3]} />
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertBar() {
|
||||
const state = useSelector((state: RootState) => state.navbar.currentAlert);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
|
@ -271,12 +311,11 @@ function AlertBar() {
|
|||
}
|
||||
|
||||
export function CombinedNavAlertBar() {
|
||||
// TODO
|
||||
return (
|
||||
<>
|
||||
<AlertBar />
|
||||
<header className="navbar navbar-ury navbar-expand-md p-0 bd-navbar">
|
||||
<nav className="container-fluid">
|
||||
<nav className="container-fluid px-0">
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
|
|
@ -288,7 +327,23 @@ export function CombinedNavAlertBar() {
|
|||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<NavBar />
|
||||
<NavBarMain />
|
||||
</nav>
|
||||
</header>
|
||||
<header className="navbar navbar-webstudio navbar-expand-md p-0 bd-navbar">
|
||||
<nav className="container-fluid px-0">
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#collapsed"
|
||||
aria-controls="collapsed"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<NavBarWebStudio />
|
||||
</nav>
|
||||
</header>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
/* Stuff to get the nav to collapse at 991px (when the menu collapses)
|
||||
* Taken from http://stackoverflow.com/a/36289507/995325 */
|
||||
|
||||
$dot-color: #fff;
|
||||
@import "~three-dots/sass/three-dots";
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.navbar-header {
|
||||
float: none;
|
||||
|
|
@ -42,6 +39,37 @@ $dot-color: #fff;
|
|||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-webstudio {
|
||||
background-color: #2d425f;
|
||||
border-color: #2d425f;
|
||||
border: none;
|
||||
max-height: 7vh;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
.nav-vu {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.nav-spin {
|
||||
animation-name: spin;
|
||||
animation-duration: 2000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
/** MyRadio bootstrap navbar overides taken from http://work.smarchal.com/twbscolor/css/2D425F2D425Fffffffe1e1e11 **/
|
||||
|
||||
.navbar-ury {
|
||||
|
|
@ -246,14 +274,7 @@ $dot-color: #fff;
|
|||
#timelord {
|
||||
background: black;
|
||||
border: red 1px solid;
|
||||
padding: 0.2rem;
|
||||
margin: auto 0;
|
||||
color: white;
|
||||
width: 100%;
|
||||
max-width: 40vw;
|
||||
height: 100%;
|
||||
max-height: 36.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#timelord a {
|
||||
|
|
@ -267,5 +288,5 @@ $dot-color: #fff;
|
|||
}
|
||||
|
||||
.nav-link.connect {
|
||||
min-width: 80px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
|
|
|||
69
yarn.lock
69
yarn.lock
|
|
@ -7185,7 +7185,7 @@ ms@2.1.1:
|
|||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
|
||||
integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
|
||||
|
||||
ms@^2.1.1:
|
||||
ms@2.1.2, ms@^2.1.1, ms@^2.1.2:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
|
||||
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
|
||||
|
|
@ -9111,6 +9111,73 @@ react-redux@^7.1.1, react-redux@^7.1.3:
|
|||
prop-types "^15.7.2"
|
||||
react-is "^16.9.0"
|
||||
|
||||
react-scripts@3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
|
||||
integrity sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==
|
||||
dependencies:
|
||||
"@babel/core" "7.9.0"
|
||||
"@svgr/webpack" "4.3.3"
|
||||
"@typescript-eslint/eslint-plugin" "^2.10.0"
|
||||
"@typescript-eslint/parser" "^2.10.0"
|
||||
babel-eslint "10.1.0"
|
||||
babel-jest "^24.9.0"
|
||||
babel-loader "8.1.0"
|
||||
babel-plugin-named-asset-import "^0.3.6"
|
||||
babel-preset-react-app "^9.1.2"
|
||||
camelcase "^5.3.1"
|
||||
case-sensitive-paths-webpack-plugin "2.3.0"
|
||||
css-loader "3.4.2"
|
||||
dotenv "8.2.0"
|
||||
dotenv-expand "5.1.0"
|
||||
eslint "^6.6.0"
|
||||
eslint-config-react-app "^5.2.1"
|
||||
eslint-loader "3.0.3"
|
||||
eslint-plugin-flowtype "4.6.0"
|
||||
eslint-plugin-import "2.20.1"
|
||||
eslint-plugin-jsx-a11y "6.2.3"
|
||||
eslint-plugin-react "7.19.0"
|
||||
eslint-plugin-react-hooks "^1.6.1"
|
||||
file-loader "4.3.0"
|
||||
fs-extra "^8.1.0"
|
||||
html-webpack-plugin "4.0.0-beta.11"
|
||||
identity-obj-proxy "3.0.0"
|
||||
jest "24.9.0"
|
||||
jest-environment-jsdom-fourteen "1.0.1"
|
||||
jest-resolve "24.9.0"
|
||||
jest-watch-typeahead "0.4.2"
|
||||
mini-css-extract-plugin "0.9.0"
|
||||
optimize-css-assets-webpack-plugin "5.0.3"
|
||||
pnp-webpack-plugin "1.6.4"
|
||||
postcss-flexbugs-fixes "4.1.0"
|
||||
postcss-loader "3.0.0"
|
||||
postcss-normalize "8.0.1"
|
||||
postcss-preset-env "6.7.0"
|
||||
postcss-safe-parser "4.0.1"
|
||||
react-app-polyfill "^1.0.6"
|
||||
react-dev-utils "^10.2.1"
|
||||
resolve "1.15.0"
|
||||
resolve-url-loader "3.1.1"
|
||||
sass-loader "8.0.2"
|
||||
semver "6.3.0"
|
||||
style-loader "0.23.1"
|
||||
terser-webpack-plugin "2.3.5"
|
||||
ts-pnp "1.1.6"
|
||||
url-loader "2.3.0"
|
||||
webpack "4.42.0"
|
||||
webpack-dev-server "3.10.3"
|
||||
webpack-manifest-plugin "2.2.0"
|
||||
workbox-webpack-plugin "4.3.1"
|
||||
optionalDependencies:
|
||||
fsevents "2.1.2"
|
||||
|
||||
react-stopwatch@^2.0.4:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-stopwatch/-/react-stopwatch-2.0.4.tgz#b76e25bbcee0da62cfe58facd7b36c85404366bf"
|
||||
integrity sha512-FBF5MS3ODWbGWi7f5wkspMuazZFBZTdUZ2Qgjct7k6tnicHTuUdY1v//MmB3PKmFDX5wrtU++DhTO3ARGVr2wQ==
|
||||
dependencies:
|
||||
ms "^2.1.2"
|
||||
|
||||
react-transition-group@^2.3.1:
|
||||
version "2.9.0"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
|
||||
|
|
|
|||
Loading…
Reference in a new issue