-
-
+
+
+
+
+ {/* /row */}
-
+
)
diff --git a/src/components/Opad.css b/src/components/Opad.css
index b98b803..7218d20 100644
--- a/src/components/Opad.css
+++ b/src/components/Opad.css
@@ -1,186 +1,125 @@
.o-pad {
position: relative;
background:white;
- width: 200px;
- height: 200px;
+ width: 19.25vw;
+ height: 19.25vw;
border-radius:50%;
- border: 1px solid black;
+ border: 1px solid #dee2e6;
overflow:hidden;
- &:after {
- content: '';
- position: absolute;
- z-index: 2;
- width: 20%;
- height: 20%;
- top: 50%;
- left: 50%;
- background: #ddd;
- border-radius: 50%;
- border: 1px solid black;
- transform: translate(-50%, -50%);
- display: none;
- transition: all .25s;
- cursor: pointer;
+
+}
+.o-pad div {
+ display:block;
+ position: absolute;
+ width: 50%;
+ height: 50%;
+ text-align: center;
+}
+
+.o-pad div:active{
+ background-color: var(--bs-black);
+}
+
+.o-pad i {
+ transform: rotate(-45deg);
+ position: relative;
+ top: 30%;
+ left: 4%;
+}
+
+.o-pad i:active {
+ color: white;
+}
+
+.up {
+ top: -10%;
+ left: 25%;
+ transform: rotate(45deg);
+
+ &:active:after {
+ border-bottom-color: #333;
+
}
- &:hover:after {
- width: 30%;
- height: 30%;
+ &:active{
+ background-color: #dee2e6;
}
- div {
- display:block;
- position: absolute;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- width: 50%;
- height: 50%;
- text-align: center;
- transform: rotate(45deg);
- border: 1px solid black;
- &:before {
- content: '';
- position: absolute;
- width: 60%;
- height: 60%;
- top: 50%;
- left: 50%;
- background: rgba(255,255,255,0.1);
- border-radius: 50%;
- transform: translate(-50%, -50%);
- transition: all .25s;
- cursor: pointer;
- display: none;
- }
- &:after {
- content: '';
- position: absolute;
- width: 0;
- height: 0;
- border-radius: 5px;
- border-style: solid;
- transform: translate(-50%, -50%) rotate(-45deg);
- transition: all .25s;
- }
- &:active{
- background-color: #dee2e6;
- }
+}
+
+.down {
+ top: 60%;
+ left: 25%;
+ transform: rotate(45deg);
+
+ &:active:after {
+ border-top-color: #333;
}
- div.up {
- bottom: 50%;
- left: 50%;
- transform: translate(-50%, -20%) rotate(45deg);
- border-top-left-radius: 50%;
- z-index:1;
- &:hover {
- background: linear-gradient(315deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.4) 100%);
- }
- &:before {
- left: 57%;
- top: 57%;
- }
- &:after {
- left: 53%;
- top: 53%;
- border-width: 0 13px 19px 13px;
- border-color: transparent transparent black transparent;
- }
- &:active:after {
- border-bottom-color: #333;
-
- }
- &:active{
- background-color: #dee2e6;
- }
+ &:active{
+ background-color: #dee2e6;
}
+}
+
+.left {
+ top: 25%;
+ left: -10%;
+ transform: rotate(45deg);
+ border: 1px solid #dee2e6;
+ border-bottom: 0;
+ border-left: 0;
+ z-index: 1;
+
+ &:active:after {
+ border-right-color:black;
+ }
+ &:active{
+ background-color: #dee2e6;
+ }
+}
- div.down {
- top: 50%;
- left: 50%;
- transform: translate(-50%, 20%) rotate(45deg);
- border-bottom-right-radius: 50%;
- z-index:1;
- &:hover {
- background: linear-gradient(135deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.4) 100%);
- }
- &:before {
- left: 43%;
- top: 43%;
- }
- &:after {
- left: 47%;
- top: 47%;
- border-width: 19px 13px 0px 13px;
- border-color: black transparent transparent transparent;
- }
- &:active:after {
- border-top-color: #333;
- }
- &:active{
- background-color: #dee2e6;
- }
- }
-
- div.left {
- top: 50%;
- right: 50%;
- transform: translate(-20%, -50%) rotate(45deg);
- border-bottom-left-radius: 50%;
- border: none;
- &:hover {
- background: linear-gradient(225deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.4) 100%);
- }
- &:before {
- left: 57%;
- top: 43%;
- }
- &:after {
- left: 53%;
- top: 47%;
- border-width: 13px 19px 13px 0;
- border-color: transparent black transparent transparent;
- }
- &:active:after {
- border-right-color:black;
- }
- &:active{
- background-color: #dee2e6;
- }
- }
+.right {
+ top: 25%;
+ right: -10.25%;
+ transform: rotate(45deg);
- div.right {
- top: 50%;
- left: 50%;
- transform: translate(20%, -50%) rotate(45deg);
- border-top-right-radius: 50%;
- border: none;
- &:hover {
- background: linear-gradient(45deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.4) 100%);
- }
- &:before {
- left: 43%;
- top: 57%;
- }
- &:after {
- left: 47%;
- top: 53%;
- border-width: 13px 0 13px 19px;
- border-color: transparent transparent transparent black;
- }
- &:active:after {
- border-left-color: #333;
- }
- &:active{
- background-color: #dee2e6;
- }
- }
- div.center-button {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 20px;
- height: 20px;
- background-color: black;
- border-radius: 50%;
- z-index: 2;
+ border: 1px solid #dee2e6;
+ border-top: 0;
+ border-right: 0;
+ z-index: 1;
+ &:active:after {
+ border-left-color: #333;
+ }
+ &:active{
+ background-color: #dee2e6;
+ }
+}
+.center-button {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ height: var(--font-size-4) !important;
+ width: var(--font-size-4) !important;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 2;
}
+.center-button i {
+ transform: rotate(0);
+ top: -10%;
+ left: 0;
+
+}
+
+.center-button i:active {
+ color: var(--bs-info)
+}
+@media screen and (min-width: 1200px) {
+ .center-button{
+ height: var(--font-size-5) !important;
+ width: var(--font-size-5) !important;
+ line-height: 0;
+ }
+}
+
+
+
+
-}
\ No newline at end of file
diff --git a/src/components/Opad.js b/src/components/Opad.js
index 2992020..e83ed99 100644
--- a/src/components/Opad.js
+++ b/src/components/Opad.js
@@ -10,15 +10,25 @@ const OPad = ({centerButton, upJoin, downJoin, leftJoin, rightJoin, centerJoin})
};
return (
-
+
+
sendSignal(upJoin, "Up")}>
+
+
+
sendSignal(rightJoin, "Right")}>
+
+
+
sendSignal(leftJoin, "Left")}>
+
+
+
sendSignal(downJoin, "Down")}>
+
+
+
+ {centerButton &&
+
sendSignal(centerJoin, "Center")}>
+
+
}
+
);
};
diff --git a/src/components/SourceMenus.js b/src/components/SourceMenus.js
index b088aee..dcbd92f 100644
--- a/src/components/SourceMenus.js
+++ b/src/components/SourceMenus.js
@@ -8,15 +8,17 @@ import './SourceMenus.css';
const SourceMenus = () => {
const [selectedButton, setSelectedButton] = useState(false);
const [inputSelected1, setInputSelected1] = useState('');
- const [source1, setSource1] = useState('');
+ const [source1, setSource1] = useState(0);
const [inputSelected2, setInputSelected2] = useState('');
- const [source2, setSource2] = useState('');
+ const [source2, setSource2] = useState(0);
const [showDesktop, setShowDesktop] = useState(false);
const [showLaptop, setShowLaptop] = useState(false);
const [showWireless, setShowWireless] = useState(false);
const [showBluray, setShowBluray] = useState(false);
const [showDocCam, setShowDocCam] = useState(false);
- const [showConfCall, setShowConfCall] = useState(false);
+ const [showConfCall, setShowConfCall] = useState(true);
+ const [hasDisplay2, setHasDisplay2] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
window.CrComLib.subscribeState('b', '211', value=> setShowDesktop(value));
@@ -25,8 +27,20 @@ const SourceMenus = () => {
window.CrComLib.subscribeState('b', '214', value=> setShowBluray(value));
window.CrComLib.subscribeState('b', '215', value=> setShowDocCam(value));
window.CrComLib.subscribeState('b', '217', value=> setShowConfCall(value));
+ window.CrComLib.subscribeState('n', '51', value => setSource1(value));
+ window.CrComLib.subscribeState('n', '52', value => setSource2(value));
+ window.CrComLib.subscribeState('b', '36', value => setHasDisplay2(value))
}, []);
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ const spinner = document.getElementById('loading-spinner');
+ if (spinner) {
+ spinner.style.display= 'none'
+ }
+ }, 2000);
+ return () => clearTimeout(timer);
+ })
const handleSourceSelected1 = (joinNumber,sourceId) => {
setSelectedButton(true);
@@ -36,14 +50,14 @@ const SourceMenus = () => {
setSource1(sourceId);
window.CrComLib.publishEvent('b', `${joinNumber}`, true);
window.CrComLib.publishEvent('b', `${joinNumber}`, false);
- console.log("signal sent to join number:" + `${joinNumber}`)
+ console.log(`signal sent to join number: ${joinNumber}`)
} else {
- console.log('transfering signal from: ' +`${inputSelected1}`+ ' to ' + `${joinNumber}` )
+ console.log(`transfering signal from: ${inputSelected1} to ${joinNumber}` )
setInputSelected1(`${joinNumber}`);
setSource1(sourceId);
window.CrComLib.publishEvent('b', `${joinNumber}`, true);
window.CrComLib.publishEvent('b', `${joinNumber}`, false);
- console.log("signal sent to join number:" + `${joinNumber}`)
+ console.log(`signal sent to join number: ${joinNumber}`)
}
}
}
@@ -55,150 +69,123 @@ const SourceMenus = () => {
setSource2(sourceId);
window.CrComLib.publishEvent('b', `${joinNumber}`, true);
window.CrComLib.publishEvent('b', `${joinNumber}`, false);
- console.log("signal sent to join number:" + `${joinNumber}`)
+ console.log(`signal sent to join number: ${joinNumber}`)
} else {
- console.log('transfering signal from: ' +`${inputSelected2}`+ ' to ' + `${joinNumber}` )
+ console.log(`transfering signal from: ${inputSelected2} to ${joinNumber}` )
setInputSelected2(`${joinNumber}`);
setSource2(sourceId);
window.CrComLib.publishEvent('b', `${joinNumber}`, true);
window.CrComLib.publishEvent('b', `${joinNumber}`, false);
- console.log("signal sent to join number:" + `${joinNumber}`)
+ console.log(`signal sent to join number: ${joinNumber}`)
}
}
}
- const toggleDisplay = (display) => {
- window.CrComLib.publishEvent('b', `${display}`, true);
- window.CrComLib.publishEvent('b', `${display}`, false);
- console.log('source sent to projector')
- }
+ // const toggleDisplay = (display) => {
+ // window.CrComLib.publishEvent('b', `${display}`, true);
+ // window.CrComLib.publishEvent('b', `${display}`, false);
+ // console.log('source sent to projector')
+ // }
return (
-
-
toggleDisplay('18')}>
-
handleSourceSelected1('200', 'PC')}>
-
-
Resident Computer
-
-
-
-
handleSourceSelected1('201', 'Laptop')}>
-
-
Laptop and Other Devices
-
-
-
-
handleSourceSelected1('202', 'Wireless')}>
-
-
-
Wireless with Solstice
-
-
-
-
handleSourceSelected1('205', 'ConfCall')}>
-
-
-
Conference Call
-
-
-
-
handleSourceSelected1('204', 'DocCam')}>
-
-
-
Document Camera
-
-
+
+ {!showLaptop ?
-
-
handleSourceSelected1('203', 'BluRay')}>
-
-
-
Blu-Ray
+
-
-
+ :
+
+ {/* Source Select Menu Left */}
+
+ {showDesktop &&
+
}
+ {showLaptop &&
+
}
+ {showWireless &&
+
}
+ {showConfCall &&
+
}
+ {showDocCam &&
+
}
+ {showBluray &&
+
}
-
-
-
-
-
-
-
-
toggleDisplay('18')}>
-
handleSourceSelected2('200', 'PC')}>
-
-
-
-
Resident Computer
-
-
-
-
handleSourceSelected2('201', 'Laptop')}>
-
-
-
-
Laptop and Other Devices
-
-
-
handleSourceSelected2('202', 'Wireless')}>
-
-
-
-
Wireless with Solstice
-
-
-
handleSourceSelected2('205', 'ConfCall')}>
-
-
-
-
Conference Call
-
-
-
handleSourceSelected2('204', 'DocCam')}>
-
-
-
-
Document Camera
-
-
-
-
-
handleSourceSelected2('203', 'BluRay')}>
-
-
-
-
Blu-Ray
-
-
-
+
+ {/* Display Area Left */}
+
+
+ {/* Display Area Right */}
+ {hasDisplay2 &&
+
+
+
}
+ {/* Source Select Menu Right */}
+ {
+ hasDisplay2 ?
+
+ {showDesktop &&
+
}
+ {showLaptop &&
+
}
+ {showWireless &&
+
}
+ {showConfCall &&
+
}
+ {showDocCam &&
+
}
+ {showBluray &&
+
}
+
:
}
+
}
-
-
-
);
};
diff --git a/src/components/VolumeControl.css b/src/components/VolumeControl.css
index cdf85df..826f1ac 100644
--- a/src/components/VolumeControl.css
+++ b/src/components/VolumeControl.css
@@ -1,36 +1,30 @@
-/* styles.css */
-
-.volumeComponent {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
-
- .controls {
- margin-bottom: 10px;
- }
-
- .square {
- width: 25px;
- height: 25px;
+ .square {
+ width: 3vw;
+ height: 3vw;
margin: 2px;
display: inline-block;
- background-color: gray; /* Default color for unfilled squares */
+ background-color: var(--bs-gray-400); /* Default color for unfilled squares */
}
.square.filled {
- background-color: green; /* Default color for filled squares */
+ background-color: var(--bs-success); /* Default color for filled squares */
}
.square.filled:nth-child(-n + 12) {
- background-color: green; /* Green for the first 12 filled squares */
+ background-color: var(--bs-success); /* Green for the first 12 filled squares */
}
.square.filled:nth-child(n + 13):nth-child(-n + 17) {
- background-color: yellow; /* Yellow for the next 5 filled squares */
+ background-color: var(--bs-warning); /* Yellow for the next 5 filled squares */
}
.square.filled:nth-child(n + 18) {
- background-color: red; /* Red for the last 3 filled squares */
+ background-color: var(--bs-danger); /* Red for the last 3 filled squares */
+ }
+
+ .volumeButton {
+ height: 7vw;
+ width: 7vw;
}
+
\ No newline at end of file
diff --git a/src/components/VolumeControl.js b/src/components/VolumeControl.js
index bcf4da5..1e34f45 100644
--- a/src/components/VolumeControl.js
+++ b/src/components/VolumeControl.js
@@ -1,45 +1,86 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
import CrComLib from "@crestron/ch5-crcomlib";
import {Button} from 'react-bootstrap';
import AddIcon from './Icons/plus.svg';
import RemoveIcon from './Icons/dash.svg';
import './VolumeControl.css'
-const VolumeControl = ({initialVolume, plusJoin, minusJoin, isMuted}) => {
+const VolumeControl = ({initialVolume, plusJoin, minusJoin, isMuted, volumeJoin}) => {
const [volume, setVolume] = useState(0);
+ const [pressInterval, setPressInterval] = useState(null);
+ const holdTimeoutRef = useRef(null);
useEffect(() => {
// Map decibels to the volume range (0 to 20)
- const mappedVolume = Math.round((initialVolume + 30) * (20 / 60));
- setVolume(mappedVolume);
- }, [initialVolume]);
+ // const mappedVolume = Math.round((initialVolume * 20) / 65535);
+
+ setVolume(initialVolume);
+ console.log('initial volume:', initialVolume);
+ }, []);
const handleIncreaseVolume = () => {
if (volume < 20) {
setVolume((prevVolume) => prevVolume + 1);
+ // const volumeLevel = Math.round((volume * 65535) / 20);
window.CrComLib.publishEvent('b', `${plusJoin}`, true);
window.CrComLib.publishEvent('b', `${plusJoin}`, false);
- console.log('volume increased')
+ // window.CrComLib.publishEvent('n', `${volumeJoin}`, volume);
+ console.log('volume increased', volume, 'initial volume:', initialVolume);
+
}
};
const handleDecreaseVolume = () => {
if (volume > 0) {
setVolume((prevVolume) => prevVolume - 1);
+ // const volumeLevel = Math.round((volume * 65535) / 20);
window.CrComLib.publishEvent('b', `${minusJoin}`, true);
window.CrComLib.publishEvent('b', `${minusJoin}`, false);
- console.log('volume decreased')
+ // window.CrComLib.publishEvent('n', `${volumeJoin}`, volume);
+ console.log('volume decreased', volume, 'initial volume:', initialVolume)
}
};
+ const handleDecreaseOnClick = () => {
+ handleDecreaseVolume();
+ window.CrComLib.publishEvent('b', `${minusJoin}`, false);
+ }
+ const handleDecreaseOnMouseDown = () => {
+ clearInterval(pressInterval);
+ setPressInterval(setInterval(handleDecreaseVolume, 200));
+ }
+ const handleDecreaseOnMouseUp = () => {
+ if (pressInterval !== null) {
+ clearInterval(pressInterval);
+ setPressInterval(null);
+ window.CrComLib.publishEvent('b', `${minusJoin}`, false);
+ }
+ }
+ const handleIncreaseOnClick = () => {
+ handleIncreaseVolume();
+ window.CrComLib.publishEvent('b', `${plusJoin}`, false);
+ }
+ const handleIncreaseOnMouseDown = () => {
+ clearInterval(pressInterval)
+ setPressInterval(setInterval(handleIncreaseVolume, 200));
+ }
+ const handleIncreaseOnMouseUp = () => {
+ if (pressInterval !== null) {
+ clearInterval(pressInterval);
+ setPressInterval(null);
+ window.CrComLib.publishEvent('b', `${plusJoin}`, false);
+ }
+
+ }
+
useEffect(() => {
// Map decibels to the volume range (0 to 20)
if (!isMuted){
- const mappedVolume = Math.round((initialVolume + 30) * (20 / 60));
- setVolume(mappedVolume);
+ // const mappedVolume = Math.round((initialVolume * 20) / 65535);
+ setVolume(initialVolume);
}
- }, [initialVolume]);
+ }, []);
const renderSquares = () => {
@@ -56,21 +97,34 @@ const VolumeControl = ({initialVolume, plusJoin, minusJoin, isMuted}) => {
};
return (
-
-
+
+
-
{renderSquares()}
-
+
+
{renderSquares()}
+
-
+
);
};
diff --git a/src/components/WelcomePage.css b/src/components/WelcomePage.css
deleted file mode 100644
index fadfa4a..0000000
--- a/src/components/WelcomePage.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.bigger-image{
- max-width: 1000px;
-}
\ No newline at end of file
diff --git a/src/components/WelcomePage.js b/src/components/WelcomePage.js
index 40e85f5..ca1e2a3 100644
--- a/src/components/WelcomePage.js
+++ b/src/components/WelcomePage.js
@@ -1,46 +1,35 @@
import logo from "./Icons/Northwestern_purple.svg"
import Header from './Header';
-import React from 'react';
+import React, {useMemo, useEffect, useState} from 'react';
import { useNavigate } from 'react-router-dom';
-import './WelcomePage.css'
-function WelcomePage() {
+function WelcomePage({programStarted, setProgramStarted}) {
const navigate = useNavigate();
-
+
const handleClick = () => {
- window.CrComLib.publishEvent('b','1', true);
- window.CrComLib.publishEvent('b','1', false);
- console.log("Signal sent to processor");
- navigate('/HomePage')
- };
-
+ setProgramStarted(!programStarted);
+ window.CrComLib.publishEvent('b','1', true);
+ window.CrComLib.publishEvent('b','1', false);
+ console.log("Signal sent to processor");
+ // navigate('/HomePage')
+};
return (
-
+
-
+
-
-
+
+
-
-
+
-
-
Touch anywhere to get started.
-
-
-
);
};
diff --git a/src/custom.css b/src/custom.css
index f609a41..f96a6fb 100644
--- a/src/custom.css
+++ b/src/custom.css
@@ -4,7 +4,6 @@
}
/* For input messages */
-
.inputMessageArea {
min-height: 50vh;
}
@@ -13,9 +12,441 @@
.displayAreaRoundIcon {
height: 2.75em;
width: 2.75em;
- background-color: #dee2e6;
}
.displayAreaRoundIcon i {
font-size: 1.75em;
+}
+
+/* Conference Call Dialpad */
+.dialpadButton {
+ height: 7.75vw;
+ width: 7.75vw;
+}
+
+/* Mute Buttons */
+.muteIcon {
+ width: 10vw;
+ height: 10vw;
+}
+
+
+:root {
+/* Custom Responsive Font Sizes */
+ /* size 0 xs */
+ --font-size-0: clamp(0.64rem, -0.01vw + 0.64rem, 0.63rem);
+ /* size 1 small */
+ --font-size-1: clamp(0.8rem, 0.08vw + 0.78rem, 0.84rem);
+ /* size 2 base */
+ --font-size-2: clamp(1rem, 0.23vw + 0.94rem, 1.13rem);
+ /* size 3 medium */
+ --font-size-3: clamp(1.25rem, 0.45vw + 1.14rem, 1.5rem);
+ /* size 4 large */
+ --font-size-4: clamp(1.56rem, 0.79vw + 1.36rem, 2rem);
+ /* size 5 xl */
+ --font-size-5: clamp(1.95rem, 1.29vw + 1.63rem, 2.66rem);
+ /* size 6 xxl */
+ --font-size-6: clamp(2.44rem, 2.02vw + 1.94rem, 3.55rem);
+ /* size 7 xxxl */
+ --font-size-7: clamp(3.05rem, 3.06vw + 2.29rem, 4.73rem);
+}
+/* Custom Responsive Font Size Classes (XS breakpoint) */
+.font-size-0 {
+ font-size: var(--font-size-0) !important;
+ line-height: var(--font-size-1)!important;
+}
+
+.font-size-1 {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important;
+}
+
+.font-size-2 {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important;
+}
+
+.font-size-3 {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important;
+}
+
+.font-size-4 {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important;
+}
+
+.font-size-5 {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important;
+}
+
+.font-size-6 {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important;
+}
+
+.font-size-7 {
+ font-size: var(--font-size-7) !important;
+}
+
+body {
+ font-size: var(--font-size-3)!important;
+ line-height: var(--font-size-3)!important;
+}
+
+.headerRow {
+ height: 14.5vh;
+}
+
+.footerRow {
+ height: 19.5vh;
+}
+
+.bodyContainer {
+ height: 66vh;
+}
+
+.contentArea {
+ height: 35vh;
+}
+
+.sourceStatus {
+ height: 11vh;
+}
+
+.contentAreaButtonRow {
+ height: 20vh;
+}
+
+.circleIcon {
+ width: 7vw;
+ height: 7vw;
+}
+
+.sourceSelectMenu button {
+ line-height: var(--font-size-2)!important;
+ border-radius: 0;
+}
+
+.sourceSelectButtonLeft {
+ padding-right:.6em!important;
+}
+
+.sourceSelectActiveLeft {
+ border-right: .6em solid var(--bs-primary) !important;
+ padding-right:0!important;
+}
+
+.sourceSelectButtonRight {
+ padding-left:.6em!important;
+}
+
+.sourceSelectActiveRight {
+ border-left: .6em solid var(--bs-primary) !important;
+ padding-left:0!important;
+}
+
+.modal-header, .modal-header button {
+ background-color:#E2DDEC!important;
+}
+
+/* Switches */
+.form-check-input, .form-check-input:checked {
+ border-color: var(--bs-border-color)!important;
+ background-color: #fff;
+}
+.form-switch .form-check-input {
+ transition:none;
+}
+.customSwitchCheck {
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23007FA4%27/%3e%3c/svg%3e")!important;
+ background-position: right center;
+ background-image: var(--bs-form-switch-bg)!important;
+}
+
+.mediumSwitch {
+ transform: scale(1.25);
+}
+
+.largeSwitch {
+ transform: scale(2.25);
+}
+
+/* BluRay Media Buttons */
+.blurayControls {
+ width: 10vw;
+ height: 10vw;
+}
+
+.btn.blurayControls:active {
+ background-color: var(--bs-black);
+ color: var(--bs-white);
+}
+
+/* Camera Control Presets */
+.presetButton {
+ font-size: var(--font-size-2);
+}
+
+.btn-info:active {
+ background-color: #a8d2de !important;
+}
+
+/* Disable btn hover styles for touchscreen device */
+@media (hover: none) {
+ .btn-info:hover {
+ background-color: var(--bs-btn-bg);
+ }
+
+ .btn-gray:hover {
+ background-color: var(--bs-btn-bg);
+ }
+}
+
+@media (hover: hover) {
+ /* Enable bluray hover styles for desktop/pointer devices */
+ .blurayControls:hover {
+ background-color: var(--bs-gray-300);
+ }
+
+ /* Enable opad hover styles for desktop/pointer devices */
+ .o-pad div:hover{
+ background-color: var(--bs-gray-300);
+ }
+}
+
+
+/* Media Queries */
+
+/* XXL Breakpoint */
+@media screen and (min-width: 1400px) {
+
+ /* Custom Responsive Font Size Classes */
+ .font-size-0-xxl {
+ font-size: var(--font-size-0) !important;
+ line-height: var(--font-size-1)!important;
+ }
+
+ .font-size-1-xxl {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important;
+ }
+
+ .font-size-2-xxl {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important;
+ }
+
+ .font-size-3-xxl {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important;
+ }
+
+ .font-size-4-xxl {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important;
+ }
+
+ .font-size-5-xxl {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important;
+ }
+
+ .font-size-6-xxl {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important;
+ }
+
+ .font-size-7-xxl {
+ font-size: var(--font-size-7) !important;
+ }
+}
+
+/* XL Breakpoint */
+@media screen and (min-width: 1200px) {
+
+ body {
+ font-size: var(--font-size-4);
+ line-height: var(--font-size-5);
+ }
+ .sourceSelectMenu button {
+ line-height: var(--font-size-3) !important;
+ }
+ /* Camera Control Presets */
+ .presetButton {
+ font-size: var(--font-size-4);
+ line-height: var(--font-size-5);
+ }
+
+ /* Custom Responsive Font Size Classes */
+ .font-size-0-xl {
+ font-size: var(--font-size-0)!important;
+ line-height: var(--font-size-1)!important;
+ }
+
+ .font-size-1-xl {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important;
+ }
+
+ .font-size-2-xl {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important;
+ }
+
+ .font-size-3-xl {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important;
+ }
+
+ .font-size-4-xl {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important;
+ }
+
+ .font-size-5-xl {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important;
+ }
+
+ .font-size-6-xl {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important;
+ }
+
+ .font-size-7-xl {
+ font-size: var(--font-size-7) !important;
+ }
+}
+
+/* Large Breakpoint */
+@media screen and (min-width: 992px) {
+
+ /* Custom Responsive Font Size Classes */
+ .font-size-0-lg {
+ font-size: var(--font-size-0) !important;
+ line-height: var(--font-size-1)!important;
+ }
+
+ .font-size-1-lg {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important;
+ }
+
+ .font-size-2-lg {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important;
+ }
+
+ .font-size-3-lg {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important;
+ }
+
+ .font-size-4-lg {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important;
+ }
+
+ .font-size-5-lg {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important;
+ }
+
+ .font-size-6-lg {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important;
+ }
+
+ .font-size-7-lg {
+ font-size: var(--font-size-7) !important;
+ }
+}
+
+/* Medium Breakpoint */
+@media screen and (min-width: 768px) {
+
+ /* Custom Responsive Font Size Classes */
+ .font-size-0-md {
+ font-size: var(--font-size-0) !important;
+ line-height: var(--font-size-1)!important;
+ }
+
+ .font-size-1-md {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important
+ }
+
+ .font-size-2-md {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important
+ }
+
+ .font-size-3-md {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important
+ }
+
+ .font-size-4-md {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important
+ }
+
+ .font-size-5-md {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important
+ }
+
+ .font-size-6-md {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important
+ }
+
+ .font-size-7-md {
+ font-size: var(--font-size-7) !important;
+ }
+}
+
+/* Small Breakpoint */
+@media screen and (min-width: 576px) {
+ /* Custom Responsive Font Size Classes */
+ .font-size-0-sm {
+ font-size: var(--font-size-0) !important;
+ line-height: var(--font-size-1)!important;
+ }
+
+ .font-size-1-sm {
+ font-size: var(--font-size-1) !important;
+ line-height: var(--font-size-2)!important;
+ }
+
+ .font-size-2-sm {
+ font-size: var(--font-size-2) !important;
+ line-height: var(--font-size-3)!important;
+ }
+
+ .font-size-3-sm {
+ font-size: var(--font-size-3) !important;
+ line-height: var(--font-size-4)!important;
+ }
+
+ .font-size-4-sm {
+ font-size: var(--font-size-4) !important;
+ line-height: var(--font-size-5)!important;
+ }
+
+ .font-size-5-sm {
+ font-size: var(--font-size-5) !important;
+ line-height: var(--font-size-6)!important;
+ }
+
+ .font-size-6-sm {
+ font-size: var(--font-size-6) !important;
+ line-height: var(--font-size-7)!important;
+ }
+
+ .font-size-7-sm {
+ font-size: var(--font-size-7) !important;
+ }
}
\ No newline at end of file
diff --git a/src/custom.scss b/src/custom.scss
new file mode 100644
index 0000000..575011a
--- /dev/null
+++ b/src/custom.scss
@@ -0,0 +1,65 @@
+// Import Google Fonts
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100;300;400;700;900&display=swap');
+
+// Bootstrap Variable Overrides
+$font-size-base: 2rem;
+$enable-shadows: true;
+$enable-gradients: true;
+$enable-responsive-font-sizes: true;
+$purple: #654C94;
+$primary: $purple;
+$secondary: #E2DDEC;
+$font-family-sans-serif: "Roboto Flex", sans-serif;
+$grid-gutter-width: 32px;
+$black: #342F2E;
+$red: #EF553F;
+$yellow: #FFC520;
+$green: #58B947;
+$cyan: #007FA4;
+
+//Change Switch Colors
+$form-switch-color: $cyan;
+$form-switch-focus-color: $cyan;
+$form-switch-checked-color: $cyan;
+
+
+// Import Bootstrap
+@import '~bootstrap/scss/bootstrap.scss';
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Generate BG utility classes for all colors
+@each $color, $value in $colors {
+ .bg-#{$color} {
+ background-color: $value !important;
+ }
+}
+
+// Generate BG shades for all grays
+@each $key, $value in $grays {
+ .bg-gray-#{$key} {
+ background-color: $value !important;
+ }
+}
+
+// Custom Button
+.btn-gray {
+ --bs-btn-font-weight: 500;
+ --bs-btn-color: var(--bs-black);
+ --bs-btn-bg: var(--bs-gray-300);
+ --bs-btn-border-color: var(--bs-gray-300);
+ --bs-btn-border-radius: .5rem;
+ --bs-btn-hover-color: var(--bs-black);
+ --bs-btn-hover-bg: var(--bs-gray-300);
+ --bs-btn-hover-border-color: var(--bs-gray-300);
+ --bs-btn-focus-shadow-rgb: var(--bs-gray-300-rgb);
+ --bs-btn-active-color: var(--bs-white);
+ --bs-btn-active-bg: #{shade-color($gray-300, 50%)};
+ --bs-btn-active-border-color: #{shade-color($gray-300, 50%)};
+ }
+
+// Import Bootstrap Icons
+@import '~bootstrap-icons/font/bootstrap-icons.scss'
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..626f80a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-body {
+/* body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,4 +10,4 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
-}
+} */
diff --git a/src/index.js b/src/index.js
index 91af97e..9725c7f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './bootstrap.css';
+import "bootstrap/dist/js/bootstrap.min.js";
+import './custom.scss';
import './custom.css';
import './index.css'
import App from './App';
- 
- 
+
+ 
- 
+ {hasMics &&
+ 
- 
+ }
- 
- 
- 
-