Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: possible to change hotkeys for line #218

Merged
merged 5 commits into from
Nov 20, 2024
Merged

feat: possible to change hotkeys for line #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
13f4b32
feat: possible to change hotkeys for line
Saelmala Nov 19, 2024
3735dc1
fix: cleanup
Saelmala Nov 19, 2024
9e35890
fix: change to common form elements
Saelmala Nov 19, 2024
13d357b
fix: add error on duplicate + keyboard navigation
Saelmala Nov 19, 2024
757dcbf
fixup!
Saelmala Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { handleFetchRequest } from "./handle-fetch-request.ts";

const API_VERSION = import.meta.env.VITE_BACKEND_API_VERSION ?? "api/v1/";
const API_URL =
`${import.meta.env.VITE_BACKEND_URL}${API_VERSION}` ??
`${import.meta.env.VITE_BACKEND_URL}${API_VERSION}` ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this change intentional and needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the ?? was giving an error because the left-hand side statement was not nullish

`${window.location.origin}/${API_VERSION}`;
const API_KEY = import.meta.env.VITE_BACKEND_API_KEY;

Expand Down
3 changes: 3 additions & 0 deletions src/assets/icons/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import UserSvg from "./user.svg?react";
import ConfirmSvg from "./done.svg?react";
import StepLeftSvg from "./chevron_left.svg?react";
import StepRightSvg from "./navigate_next.svg?react";
import Settings from "./settings.svg?react";

export const MicMuted = () => <MicMute />;

Expand All @@ -28,3 +29,5 @@ export const ConfirmIcon = () => <ConfirmSvg />;
export const StepLeftIcon = () => <StepLeftSvg />;

export const StepRightIcon = () => <StepRightSvg />;

export const SettingsIcon = () => <Settings />;
4 changes: 4 additions & 0 deletions src/assets/icons/settings.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 65 additions & 5 deletions src/components/production-line/production-line.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
MicUnmuted,
SpeakerOff,
SpeakerOn,
SettingsIcon,
} from "../../assets/icons/icon.tsx";
import { Spinner } from "../loader/loader.tsx";
import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
Expand All @@ -29,11 +30,19 @@ import { useCheckBadLineData } from "./use-check-bad-line-data.ts";
import { NavigateToRootButton } from "../navigate-to-root-button/navigate-to-root-button.tsx";
import { useAudioCue } from "./use-audio-cue.ts";
import { DisplayWarning } from "../display-box.tsx";
import { SettingsModal, Hotkeys } from "./settings-modal.tsx";

const TempDiv = styled.div`
padding: 0 0 2rem 0;
`;

const HotkeyDiv = styled.div`
padding: 0 0 2rem 0;
flex-direction: row;
display: flex;
align-items: center;
`;

const HeaderWrapper = styled.div`
padding: 2rem;
display: flex;
Expand All @@ -51,6 +60,15 @@ const ButtonIcon = styled.div`
margin: 0 auto;
`;

const SettingsBtn = styled.div`
padding: 0;
margin-left: 1.5rem;
width: 3rem;
cursor: pointer;
color: white;
background: transparent;
`;

const FlexButtonWrapper = styled.div`
width: 50%;
padding: 0 1rem 2rem 1rem;
Expand Down Expand Up @@ -110,6 +128,17 @@ export const ProductionLine: FC = () => {
] = useGlobalState();
const [isInputMuted, setIsInputMuted] = useState(true);
const [isOutputMuted, setIsOutputMuted] = useState(false);
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
const [hotkeys, setHotkeys] = useState<Hotkeys>({
muteHotkey: "m",
speakerHotkey: "n",
pressToTalkHotkey: "t",
});
const [savedHotkeys, setSavedHotkeys] = useState<Hotkeys>({
muteHotkey: "m",
speakerHotkey: "n",
pressToTalkHotkey: "t",
});

const inputAudioStream = useAudioInput({
inputId: joinProductionOptions?.audioinput ?? null,
Expand Down Expand Up @@ -141,6 +170,8 @@ export const ProductionLine: FC = () => {
useLineHotkeys({
muteInput,
isInputMuted,
customKeyMute: savedHotkeys.muteHotkey,
customKeyPress: savedHotkeys.pressToTalkHotkey,
});

const { sessionId, sdpOffer } = useEstablishSession({
Expand Down Expand Up @@ -172,6 +203,7 @@ export const ProductionLine: FC = () => {
useSpeakerHotkeys({
muteOutput,
isOutputMuted,
customKey: savedHotkeys.speakerHotkey,
});

const line = useLinePolling({ joinProductionOptions });
Expand Down Expand Up @@ -207,6 +239,15 @@ export const ProductionLine: FC = () => {
dispatch,
});

const handleSettingsClick = () => {
setIsSettingsModalOpen(!isSettingsModalOpen);
};

const saveHotkeys = () => {
setSavedHotkeys({ ...hotkeys });
setIsSettingsModalOpen(false);
};

// TODO detect if browser back button is pressed and run exit();

return (
Expand Down Expand Up @@ -315,18 +356,37 @@ export const ProductionLine: FC = () => {
inputAudioStream !== "no-device" &&
!isMobile && (
<>
<TempDiv>
<HotkeyDiv>
<strong>Hotkeys</strong>
</TempDiv>
<SettingsBtn onClick={handleSettingsClick}>
<SettingsIcon />
</SettingsBtn>
</HotkeyDiv>
<TempDiv>
<strong>M:</strong> Toggle Input Mute
<strong>{savedHotkeys.muteHotkey.toUpperCase()}: </strong>
Toggle Input Mute
</TempDiv>
<TempDiv>
<strong>N:</strong> Toggle Output Mute
<strong>
{savedHotkeys.speakerHotkey.toUpperCase()}:{" "}
</strong>
Toggle Output Mute
</TempDiv>
<TempDiv>
<strong>T:</strong> Push to Talk
<strong>
{savedHotkeys.pressToTalkHotkey.toUpperCase()}:{" "}
</strong>
Push to Talk
</TempDiv>
{isSettingsModalOpen && (
<SettingsModal
hotkeys={hotkeys}
lineName={line?.name}
setHotkeys={setHotkeys}
onSave={saveHotkeys}
onClose={handleSettingsClick}
/>
)}
</>
)}
</div>
Expand Down
Loading
Loading