diff --git a/frontend/app/components/Session_/Player/Controls/controls.module.css b/frontend/app/components/Session_/Player/Controls/controls.module.css index c27cb74da..ccbf6e0bb 100644 --- a/frontend/app/components/Session_/Player/Controls/controls.module.css +++ b/frontend/app/components/Session_/Player/Controls/controls.module.css @@ -15,7 +15,7 @@ display: flex; justify-content: space-between; align-items: center; - height: 65px; + height: 55px; padding-left: 10px; padding-right: 0; } diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index d3a931088..047fdb79c 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -11,39 +11,33 @@ import BugReportModal from './BugReport/BugReportModal'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import AutoplayToggle from 'Shared/AutoplayToggle'; -import { connect } from 'react-redux' +import { connect } from 'react-redux'; +import cn from 'classnames'; -const localhostWarn = (project) => project + '_localhost_warn' +const localhostWarn = (project) => project + '_localhost_warn'; function SubHeader(props) { - const localhostWarnKey = localhostWarn(props.siteId) - const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1' + const localhostWarnKey = localhostWarn(props.siteId); + const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1'; const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn); const { player, store } = React.useContext(PlayerContext); - const { - width, - height, - endTime, - tabStates, - currentTab, - tabs, - } = store.get(); + const { width, height, endTime, tabStates, currentTab, tabs } = store.get(); - const currentLocation = tabStates[currentTab]?.location || '' - const resourceList = tabStates[currentTab]?.resourceList || [] - const exceptionsList = tabStates[currentTab]?.exceptionsList || [] - const eventsList = tabStates[currentTab]?.eventsList || [] - const graphqlList = tabStates[currentTab]?.graphqlList || [] - const fetchList = tabStates[currentTab]?.fetchList || [] + const currentLocation = tabStates[currentTab]?.location || ''; + const resourceList = tabStates[currentTab]?.resourceList || []; + const exceptionsList = tabStates[currentTab]?.exceptionsList || []; + const eventsList = tabStates[currentTab]?.eventsList || []; + const graphqlList = tabStates[currentTab]?.graphqlList || []; + const fetchList = tabStates[currentTab]?.fetchList || []; const enabledIntegration = useMemo(() => { const { integrations } = props; if (!integrations || !integrations.size) { return false; } - + return integrations.some((i) => i.token); - }) + }); const mappedResourceList = resourceList .filter((r) => r.isRed || r.isYellow) @@ -75,105 +69,109 @@ function SubHeader(props) { const showWarning = location && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(location) && showWarningModal; const closeWarning = () => { - localStorage.setItem(localhostWarnKey, '1') - setWarning(false) - } + localStorage.setItem(localhostWarnKey, '1'); + setWarning(false); + }; return ( -
- {showWarning ? ( -
- Some assets may load incorrectly on localhost. - - Learn More - -
- -
-
- ) : null} - {location && ( - <> + <> +
+ {showWarning ? (
- - - {location} - -
- - )} - {tabs.map((tab, i) => ( -
player.changeTab(tab)} - className={ - currentTab === tab - ? 'outline-active-blue-border outline m-2 cursor-pointer' - : 'm-2 cursor-pointer' - } - > - Tab {i+1} -
- ))} -
- - - {enabledIntegration && } - - + Some assets may load incorrectly on localhost. + + Learn More + +
+
- } - /> - , - }, - { - key: 2, - component: , - }, - ]} - /> +
+ ) : null} + {tabs.map((tab, i) => ( +
player.changeTab(tab)} + className={cn( + 'self-end py-1 px-4 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' + )} + > + Tab {i + 1} +
+ ))} +
+ + + {enabledIntegration && } + + +
+ } + /> + , + }, + { + key: 2, + component: , + }, + ]} + /> -
- +
+ +
-
+ {location && ( +
+
+ + + + {location} + + +
+
+ )} + ); } export default connect((state) => ({ siteId: state.getIn(['site', 'siteId']), - integrations: state.getIn([ 'issues', 'list' ]) + integrations: state.getIn(['issues', 'list']), }))(observer(SubHeader)); diff --git a/frontend/app/player/web/messages/MFileReader.ts b/frontend/app/player/web/messages/MFileReader.ts index e1ce5969b..5d806135b 100644 --- a/frontend/app/player/web/messages/MFileReader.ts +++ b/frontend/app/player/web/messages/MFileReader.ts @@ -23,6 +23,7 @@ export default class MFileReader extends RawMessageReader { const skipIndexes = this.readCustomIndex(this.buf.slice(0, 8)) === 72057594037927940 || this.readCustomIndex(this.buf.slice(0, 9)) === 72057594037927940 + console.log(this.readCustomIndex(this.buf.slice(0, 8)), this.readCustomIndex(this.buf.slice(0, 9))) if (skipIndexes) { this.noIndexes = true this.skip(8) diff --git a/tracker/tracker/src/common/messages.gen.ts b/tracker/tracker/src/common/messages.gen.ts index 4616f8a3c..4eb2a22a1 100644 --- a/tracker/tracker/src/common/messages.gen.ts +++ b/tracker/tracker/src/common/messages.gen.ts @@ -549,5 +549,5 @@ export type TabData = [ ] -type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequest | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData +type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequest | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData export default Message diff --git a/tracker/tracker/src/main/modules/tabs.ts b/tracker/tracker/src/main/modules/tabs.ts index f35000061..58c6d4efa 100644 --- a/tracker/tracker/src/main/modules/tabs.ts +++ b/tracker/tracker/src/main/modules/tabs.ts @@ -9,7 +9,5 @@ export default function (app: App): void { } } - if (document.hidden !== undefined) { - app.attachEventListener(document, 'visibilitychange', changeTab as EventListener, false, false) - } + app.attachEventListener(window, 'focus', changeTab as EventListener, false, false) }