jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): subscribe tabs to store

Browse source
This commit is contained in:
nick-delirium 2023-07-06 15:59:20 +02:00
parent 62c560c3f1
commit 286a2fe825
2 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx
View file

@ -8,9 +8,8 @@ function SubHeader() {
const { store } = React.useContext(PlayerContext);
const { location: currentLocation = 'loading...' } = store.get();
const location = currentLocation.length > 70
? `${currentLocation.slice(0, 70)}...`
: currentLocation;
const location =
currentLocation.length > 70 ? `${currentLocation.slice(0, 70)}...` : currentLocation;
return (
<>

16
frontend/app/components/Session/Player/SharedComponents/SessionTabs.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { observer } from 'mobx-react-lite';
import cn from 'classnames';
import Tab from './Tab';
import { PlayerContext } from 'Components/Session/playerContext';
import { useModal } from 'Components/Modal';
interface Props {
tabs: { tab: string, idx: number}[];
tabs: { tab: string; idx: number }[];
currentTab: string;
changeTab: (tab: string) => void;
hideModal: () => void;
@ -38,13 +39,18 @@ function SessionTabs() {
const { showModal, hideModal } = useModal();
const { player, store } = React.useContext(PlayerContext);
const { tabs = new Set('back-compat'), currentTab } = store.get();
const tabsArr = Array.from(tabs).map((tab, idx) => ({ tab, idx }));
const shouldTruncate = tabsArr.length > 10;
const actualTabs = shouldTruncate ? tabsArr.slice(0, 10) : tabsArr;
const shownTabs = actualTabs.findIndex(el => el.tab === currentTab) !== -1
? actualTabs
: actualTabs.concat({ tab: currentTab, idx: tabsArr.findIndex(tEl => tEl.tab === currentTab) });
const shownTabs =
actualTabs.findIndex((el) => el.tab === currentTab) !== -1
? actualTabs
: actualTabs.concat({
tab: currentTab,
idx: tabsArr.findIndex((tEl) => tEl.tab === currentTab),
});
const changeTab = (tab: string) => {
player.changeTab(tab);
};
@ -89,4 +95,4 @@ function SessionTabs() {
);
}
export default SessionTabs;
export default observer(SessionTabs);