diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx index 6fa882fc5..3ac938eb0 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx +++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx @@ -19,7 +19,7 @@ function SubHeader() { return ( <>
- {tabs.map((tab, i) => ( + {Array.from(tabs).map((tab, i) => ( diff --git a/frontend/app/components/Session/Player/SharedComponents/Tab.tsx b/frontend/app/components/Session/Player/SharedComponents/Tab.tsx index 8586fb2f1..d1a80bd22 100644 --- a/frontend/app/components/Session/Player/SharedComponents/Tab.tsx +++ b/frontend/app/components/Session/Player/SharedComponents/Tab.tsx @@ -15,10 +15,11 @@ function Tab({ i, tab, currentTab, changeTab }: Props) { style={{ marginBottom: '-2px' }} onClick={() => changeTab?.(tab)} className={cn( - 'self-end py-1 px-4 cursor-pointer', + 'self-end py-1 px-4 text-sm', + changeTab && 'cursor-pointer', currentTab === tab ? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold' - : 'cursor-pointer border-gray-light !border-b !border-t-0 !border-l-0 !border-r-0' + : 'cursor-pointer border-gray-light !border-b !border-t-transparent !border-l-transparent !border-r-transparent' )} > Tab {i + 1} diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js index 21d425e73..499b63c5e 100644 --- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js +++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js @@ -130,18 +130,22 @@ class EventGroupWrapper extends React.Component { } } -function TabChange({ from, to }) { return ( -
- Tab change: - - {from} - - - - {to} - -
-) +function TabChange({ from, to }) { + if (!from) { + return null; + } + return ( +
+ Tab change: + + {from} + + + + {to} + +
+ ) } export default EventGroupWrapper; diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 1a9322188..d088d7ea5 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -101,7 +101,7 @@ function SubHeader(props) {
) : null} - {tabs.map((tab, i) => ( + {Array.from(tabs).map((tab, i) => ( { this.list.push(m); } + unshift(m: T): void { + this.list.unshift(m) + } + insert(m: T): void { let index = this.list.findIndex(om => om.time > m.time) if (index === -1) { @@ -130,30 +134,6 @@ export default class ListWalker { return changed ? this.list[ this.p - 1 ] : null; } - moveGetLastDebug(t: number, index?: number): T | null { - let key: string = "time"; //TODO - let val = t; - if (index) { - key = "_index"; - val = index; - } - - let changed = false; - while (this.p < this.length && this.list[this.p][key] <= val) { - this.moveNext() - changed = true; - } - while (this.p > 0 && this.list[ this.p - 1 ][key] > val) { - this.movePrev() - changed = true; - } - - // console.log(this.list[this.p - 1]) - return changed ? this.list[ this.p - 1 ] : null; - } - - - /** * Moves over the messages starting from the current+1 to the last one with the time <= t * applying callback on each of them diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index 1a05a77c6..8e5bbddc8 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -49,7 +49,7 @@ export interface State extends ScreenState { firstVisualEvent: number; messagesProcessed: boolean; currentTab: string; - tabs: string[]; + tabs: Set; tabChangeEvents: { tabId: string; timestamp: number; tabName: string }[]; } @@ -75,7 +75,7 @@ export default class MessageManager { messagesProcessed: false, messagesLoading: false, currentTab: '', - tabs: [], + tabs: new Set(), tabChangeEvents: [], }; @@ -179,8 +179,8 @@ export default class MessageManager { // Moving mouse and setting :hover classes on ready view this.mouseMoveManager.move(t); const lastClick = this.clickManager.moveGetLast(t); + // getting clicks happened during last 600ms if (!!lastClick && t - lastClick.time < 600) { - // happened during last 600ms this.screen.cursor.click(); } const lastThrashing = this.mouseThrashingManager.moveGetLast(t); @@ -188,19 +188,22 @@ export default class MessageManager { this.screen.cursor.shake(); } - const activeTabs = this.state.get().tabs; - if (tabId && !activeTabs.includes(tabId)) { - this.state.update({ tabs: activeTabs.concat(tabId) }); - } - if (tabId && this.activeTab !== tabId) { - this.state.update({ currentTab: tabId }); - this.activeTab = tabId; + if (tabId) { + if (this.activeTab !== tabId) { + this.state.update({ currentTab: tabId }); + this.activeTab = tabId; + } + const activeTabs = this.state.get().tabs; + if (activeTabs.length !== this.activeTabManager.tabInstances.size) { + this.state.update({ tabs: this.activeTabManager.tabInstances }); + } } if (this.tabs[this.activeTab]) { this.tabs[this.activeTab].move(t); } else { + // should we add ui error here? console.error( 'missing tab state', this.tabs, @@ -276,11 +279,11 @@ export default class MessageManager { switch (msg.tp) { case MType.CreateDocument: if (!this.firstVisualEventSet) { - this.activeTabManager.append({ tp: MType.TabChange, tabId: msg.tabId, time: 0 }); + this.activeTabManager.unshift({ tp: MType.TabChange, tabId: msg.tabId, time: 0 }); this.state.update({ firstVisualEvent: msg.time, currentTab: msg.tabId, - tabs: [msg.tabId], + tabs: new Set([msg.tabId]), }); this.firstVisualEventSet = true; } diff --git a/frontend/app/player/web/managers/ActiveTabManager.ts b/frontend/app/player/web/managers/ActiveTabManager.ts index e9bc9a960..703ffbdf5 100644 --- a/frontend/app/player/web/managers/ActiveTabManager.ts +++ b/frontend/app/player/web/managers/ActiveTabManager.ts @@ -3,16 +3,21 @@ import type { TabChange } from '../messages'; export default class ActiveTabManager extends ListWalker { currentTime = 0; + tabInstances: Set = new Set(); moveReady(t: number): Promise { - if (t < this.currentTime) { this.reset() } this.currentTime = t - const msg = this.moveGetLastDebug(t) - // console.log('move', t, msg, this.list) + const msg = this.moveGetLast(t) - return Promise.resolve(msg?.tabId || null) + if (msg) { + const ids = this.listNow.map(m => m.tabId); + this.tabInstances = new Set(ids) + return Promise.resolve(msg.tabId) + } else { + return Promise.resolve(null); + } } -} \ No newline at end of file +}