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.

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/change device during call #212

Merged
merged 51 commits into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
d5c1438
feat: added a calls-page for desktop to redirect to, direct-link used…
malmen237 Nov 29, 2024
94f6f58
feat: added global call-state to handle everything to do with individ…
malmen237 Nov 29, 2024
d12eb50
feat: modyfied error-state to separate between call-errors and genera…
malmen237 Nov 29, 2024
3543a2d
fix: updated the exit-calls to match current multiple-calls structure
malmen237 Nov 29, 2024
6d570f4
fix: updated the copy-link for new productions to fit current structure
malmen237 Nov 29, 2024
4088d18
fix: updated to also fit when adding additional call and modified to …
malmen237 Nov 29, 2024
d7b6798
fix: updated to new state-structure fot direct-linking to work
malmen237 Nov 29, 2024
2a0f575
fix: updated to new state-structure for multiple calls
malmen237 Nov 29, 2024
39a7417
fix: updated to new state-structure for multiple calls and removed re…
malmen237 Nov 29, 2024
f5c0ba6
feat: changed to peerconnection-ref to allow flexibility, updated to …
malmen237 Nov 29, 2024
ed9180a
fix: project updates and installations
malmen237 Nov 29, 2024
0a63b69
feat: added return to main if no calls, no exit-call if single-call o…
malmen237 Nov 29, 2024
70a3e30
Update src/components/production-line/production-line.tsx
malmen237 Dec 2, 2024
f5a8b5c
fix: added saved-prod-id when manually adding id, removed unused call…
malmen237 Nov 29, 2024
cd0ced0
feat: added local-storage-hook, minor lint-fix
malmen237 Dec 2, 2024
98e5382
fix: updated uuid to crypto-randomuuid
malmen237 Dec 5, 2024
5bc5117
fix: removed unused peerconnection from callstate
malmen237 Dec 5, 2024
d6d7010
feat: added storage-ts instead of local-storage and reinstalled yarn
malmen237 Dec 5, 2024
ee7472c
fix: removed unnecessary check for call-id in state-reducer
malmen237 Dec 5, 2024
888f49e
fix: removed duplicate id from callstate
malmen237 Dec 5, 2024
0860a2a
feat: added confirmation-modal to all leave-call-buttons
malmen237 Dec 5, 2024
b928154
test: updated code to allow multiple calls on mobile
malmen237 Dec 9, 2024
82879c8
fix: added reset to confirmation-modal on header
malmen237 Dec 10, 2024
4676b01
fix: added a close-join-line-view when line has been added
malmen237 Dec 10, 2024
964b878
fix: updated verify-modal to ask yes or no
malmen237 Dec 10, 2024
6af4a9c
fix: moved the navigation-hook-call from the landing-page to the join…
malmen237 Dec 10, 2024
a2ba531
fix: removed old solution left during testing
malmen237 Dec 10, 2024
e3972ab
fix: added comments and solution from pr with device-change
malmen237 Dec 10, 2024
63a4d29
fix: removed boolean that blocked single-line-remove-btn from mobile
malmen237 Dec 10, 2024
ef15f8e
fix: made modal more visable
malmen237 Dec 10, 2024
dc659dc
feat: moved symphony-connection-items into own component and added va…
malmen237 Dec 13, 2024
c4d153c
fix: removed peerconnection-changes from use-rtcconnection
malmen237 Dec 13, 2024
13c8c4c
feat: added refresh-icon and styling
malmen237 Nov 18, 2024
a8c9168
feat: added a reset to the audio-inputs, to be able to make a new con…
malmen237 Nov 18, 2024
f981d76
feat: manual refresh of devices-fetch added
malmen237 Nov 18, 2024
0ce2839
feat: manual refresh of devices-fetch added
malmen237 Nov 18, 2024
171dc31
feat: added device-reload and change-option to call
malmen237 Nov 18, 2024
7f798af
feat: updated to rtc-peerconnection-ref to make it changeable
malmen237 Nov 18, 2024
9d1f06d
feat: added warning to firefox-user, that refetch devices won't work
malmen237 Nov 19, 2024
be42ce1
fix: added output as a dependency in use-effect, to trigger input re-run
malmen237 Nov 20, 2024
db8413e
test: added console-logs for debugging deployed mobile-call
malmen237 Dec 2, 2024
2514710
fix: added a generic audio-stream request to reset permission
malmen237 Dec 4, 2024
3642cff
fix: removed dev console-logs
malmen237 Dec 4, 2024
d287625
feat: made reload button into a component
malmen237 Dec 4, 2024
c91dd7f
feat: added reload button to device-change and blocked save when no d…
malmen237 Dec 4, 2024
09e7ccd
fix: updated return on rtc-connection-events-hook
malmen237 Dec 5, 2024
8d2ff6f
fix: removed unused callstate-properties
malmen237 Dec 16, 2024
cc1c6b7
fix: removed modified rtc-connection-solutions
malmen237 Dec 16, 2024
6c3a9ae
fix: adapted change-device to new callstate-setup
malmen237 Dec 16, 2024
928ed84
Merge branch 'development' into feat/change-device-during-call
malmen237 Dec 16, 2024
7faab71
fix: resolved ts-merge-error
malmen237 Dec 16, 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
3 changes: 3 additions & 0 deletions src/assets/icons/icon.tsx
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 RefreshSvg from "./refresh.svg?react";
import Settings from "./settings.svg?react";
import ChevronDown from "./chevron_down.svg?react";
import ChevronUp from "./chevron_up.svg?react";
Expand All @@ -33,6 +34,8 @@ export const StepLeftIcon = () => <StepLeftSvg />;

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

export const RefreshIcon = () => <RefreshSvg />;

export const SettingsIcon = () => <Settings />;

export const ChevronDownIcon = () => <ChevronDown />;
Expand Down
5 changes: 5 additions & 0 deletions src/assets/icons/refresh.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/bowser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Bowser from "bowser";

const deviceInfo = Bowser.parse(window.navigator.userAgent);
const browser = Bowser.getParser(window.navigator.userAgent);
const browserName = browser.getBrowserName();

// platform type, can be either "desktop", "tablet" or "mobile"
export const isMobile = deviceInfo.platform.type === "mobile";
Expand All @@ -13,3 +14,5 @@ export const isValidBrowser = browser.satisfies({
safari: ">=16.4",
samsung: ">=21",
});

export const isBrowserFirefox = browserName.toLowerCase() === "firefox";
106 changes: 76 additions & 30 deletions src/components/landing-page/join-production.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ import { uniqBy } from "../../helpers.ts";
import { FormInputWithLoader } from "./form-input-with-loader.tsx";
import { useStorage } from "../accessing-local-storage/access-local-storage.ts";
import { useNavigateToProduction } from "./use-navigate-to-production.ts";
import { useFetchDevices } from "../../use-fetch-devices.ts";
import { useDevicePermissions } from "../../use-device-permission.ts";
import { Modal } from "../modal/modal.tsx";
import { ReloadDevicesButton } from "../reload-devices-button.tsx/reload-devices-button.tsx";

type FormValues = TJoinProductionOptions;

Expand All @@ -35,6 +39,11 @@ const ButtonWrapper = styled.div`
margin: 2rem 0 2rem 0;
`;

const FormWithBtn = styled.div`
display: flex;
justify-content: space-between;
`;

type TProps = {
preSelected?: {
preSelectedProductionId: string;
Expand All @@ -53,6 +62,9 @@ export const JoinProduction = ({
const [joinProductionOptions, setJoinProductionOptions] =
useState<TJoinProductionOptions | null>(null);
const { readFromStorage, writeToStorage } = useStorage("username");
const [refresh, setRefresh] = useState<number>(0);
const [firefoxWarningModalOpen, setFirefoxWarningModalOpen] = useState(false);

const {
formState: { errors, isValid },
register,
Expand All @@ -71,9 +83,18 @@ export const JoinProduction = ({
keepErrors: true, // input errors will be retained with value update
},
});
const { permission } = useDevicePermissions({
continueToApp: true,
});

const [{ devices, selectedProductionId }, dispatch] = useGlobalState();

useFetchDevices({
dispatch,
permission,
refresh,
});

const {
error: productionFetchError,
production,
Expand Down Expand Up @@ -150,8 +171,6 @@ export const JoinProduction = ({
payload: {
id: uuid,
callState: {
production: null,
reloadProductionList: false,
devices: null,
joinProductionOptions: payload,
mediaStreamInput: null,
Expand Down Expand Up @@ -236,38 +255,65 @@ export const JoinProduction = ({
/>
<FormLabel>
<DecorativeLabel>Input</DecorativeLabel>
<FormSelect
// eslint-disable-next-line
{...register(`audioinput`)}
>
{inputDevices.length > 0 ? (
inputDevices.map((device) => (
<option key={device.deviceId} value={device.deviceId}>
{device.label}
</option>
))
) : (
<option value="no-device">No device available</option>
)}
</FormSelect>
</FormLabel>
<FormLabel>
<DecorativeLabel>Output</DecorativeLabel>
{outputDevices.length > 0 ? (
<FormWithBtn>
<FormSelect
// eslint-disable-next-line
{...register(`audiooutput`)}
{...register(`audioinput`)}
>
{outputDevices.map((device) => (
<option key={device.deviceId} value={device.deviceId}>
{device.label}
</option>
))}
{inputDevices.length > 0 ? (
inputDevices.map((device) => (
<option key={device.deviceId} value={device.deviceId}>
{device.label}
</option>
))
) : (
<option value="no-device">No device available</option>
)}
</FormSelect>
) : (
<StyledWarningMessage>
Controlled by operating system
</StyledWarningMessage>
<ReloadDevicesButton
handleReloadDevices={() => setRefresh((prev) => prev + 1)}
devices={devices}
isDummy
/>
</FormWithBtn>
</FormLabel>
<FormLabel>
<DecorativeLabel>Output</DecorativeLabel>
<FormWithBtn>
{outputDevices.length > 0 ? (
<FormSelect
// eslint-disable-next-line
{...register(`audiooutput`)}
>
{outputDevices.map((device) => (
<option key={device.deviceId} value={device.deviceId}>
{device.label}
</option>
))}
</FormSelect>
) : (
<StyledWarningMessage>
Controlled by operating system
</StyledWarningMessage>
)}
<ReloadDevicesButton
handleReloadDevices={() => setRefresh((prev) => prev + 1)}
setFirefoxWarningModalOpen={() =>
setFirefoxWarningModalOpen(true)
}
devices={devices}
/>
</FormWithBtn>
{firefoxWarningModalOpen && (
<Modal onClose={() => setFirefoxWarningModalOpen(false)}>
<DisplayContainerHeader>
Reset permissions
</DisplayContainerHeader>
<p>
To reload devices Firefox needs the permission to be manually
reset, please remove permission and reload page instead.
</p>
</Modal>
)}
</FormLabel>
{!preSelected && (
Expand Down
10 changes: 10 additions & 0 deletions src/components/loader/loader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@ const Loading = styled.div`
left: 30%;
}

&.refresh-devices {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0;
margin: 0;
width: 2.5rem;
height: 2.5rem;
}

&.join-production {
border: 0.4rem solid rgba(201, 201, 201, 0.1);
border-top: 0.4rem solid #e2e2e2;
Expand Down
Loading
Loading