change(ui) - hide back button based on url query param iframe=true
This commit is contained in:
Shekar Siri
parent
c44bb5da79
commit
0e31fe43af
2 changed files with 136 additions and 118 deletions
|
|
@ -1,4 +1,6 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false
|
||||
"useTabs": false,
|
||||
"printWidth": 150,
|
||||
"singleQuote": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,132 +17,148 @@ import AssistTabs from '../Assist/components/AssistTabs';
|
|||
const SESSIONS_ROUTE = sessionsRoute();
|
||||
const ASSIST_ROUTE = assistRoute();
|
||||
|
||||
@connectPlayer(state => ({
|
||||
width: state.width,
|
||||
height: state.height,
|
||||
live: state.live,
|
||||
loading: state.cssLoading || state.messagesLoading,
|
||||
showEvents: state.showEvents,
|
||||
}), { toggleEvents })
|
||||
@connect((state, props) => {
|
||||
const isAssist = window.location.pathname.includes('/assist/');
|
||||
const session = state.getIn([ 'sessions', 'current' ]);
|
||||
@connectPlayer(
|
||||
(state) => ({
|
||||
width: state.width,
|
||||
height: state.height,
|
||||
live: state.live,
|
||||
loading: state.cssLoading || state.messagesLoading,
|
||||
showEvents: state.showEvents,
|
||||
}),
|
||||
{ toggleEvents }
|
||||
)
|
||||
@connect(
|
||||
(state, props) => {
|
||||
const isAssist = window.location.pathname.includes('/assist/');
|
||||
const session = state.getIn(['sessions', 'current']);
|
||||
|
||||
return {
|
||||
isAssist,
|
||||
session,
|
||||
sessionPath: state.getIn([ 'sessions', 'sessionPath' ]),
|
||||
loading: state.getIn([ 'sessions', 'toggleFavoriteRequest', 'loading' ]),
|
||||
disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]) || props.loading,
|
||||
local: state.getIn(['sessions', 'timezone']),
|
||||
funnelRef: state.getIn(['funnels', 'navRef']),
|
||||
siteId: state.getIn([ 'site', 'siteId' ]),
|
||||
metaList: state.getIn(['customFields', 'list']).map(i => i.key),
|
||||
closedLive: !!state.getIn([ 'sessions', 'errors' ]) || (isAssist && !session.live),
|
||||
}
|
||||
}, {
|
||||
toggleFavorite, setSessionPath
|
||||
})
|
||||
return {
|
||||
isAssist,
|
||||
session,
|
||||
sessionPath: state.getIn(['sessions', 'sessionPath']),
|
||||
loading: state.getIn(['sessions', 'toggleFavoriteRequest', 'loading']),
|
||||
disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']) || props.loading,
|
||||
local: state.getIn(['sessions', 'timezone']),
|
||||
funnelRef: state.getIn(['funnels', 'navRef']),
|
||||
siteId: state.getIn(['site', 'siteId']),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i) => i.key),
|
||||
closedLive: !!state.getIn(['sessions', 'errors']) || (isAssist && !session.live),
|
||||
};
|
||||
},
|
||||
{
|
||||
toggleFavorite,
|
||||
setSessionPath,
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
export default class PlayerBlockHeader extends React.PureComponent {
|
||||
getDimension = (width, height) => {
|
||||
return width && height ? (
|
||||
<div className="flex items-center">
|
||||
{ width || 'x' } <Icon name="close" size="12" className="mx-1" /> { height || 'x' }
|
||||
</div>
|
||||
) : <span className="">Resolution N/A</span>;
|
||||
}
|
||||
state = {
|
||||
hideBack: false,
|
||||
};
|
||||
|
||||
backHandler = () => {
|
||||
const { history, siteId, sessionPath, isAssist } = this.props;
|
||||
if (sessionPath.pathname === history.location.pathname || sessionPath.pathname.includes("/session/") || isAssist) {
|
||||
history.push(withSiteId(isAssist ? ASSIST_ROUTE: SESSIONS_ROUTE, siteId));
|
||||
} else {
|
||||
history.push(sessionPath ? sessionPath.pathname + sessionPath.search : withSiteId(SESSIONS_ROUTE, siteId));
|
||||
componentDidMount() {
|
||||
const { location } = this.props;
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
this.setState({ hideBack: queryParams.has('iframe') && queryParams.get('iframe') === 'true' });
|
||||
}
|
||||
}
|
||||
|
||||
toggleFavorite = () => {
|
||||
const { session } = this.props;
|
||||
this.props.toggleFavorite(session.sessionId);
|
||||
}
|
||||
getDimension = (width, height) => {
|
||||
return width && height ? (
|
||||
<div className="flex items-center">
|
||||
{width || 'x'} <Icon name="close" size="12" className="mx-1" /> {height || 'x'}
|
||||
</div>
|
||||
) : (
|
||||
<span className="">Resolution N/A</span>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
session,
|
||||
fullscreen,
|
||||
metaList,
|
||||
closedLive = false,
|
||||
siteId,
|
||||
isAssist,
|
||||
setActiveTab,
|
||||
activeTab,
|
||||
showEvents,
|
||||
toggleEvents,
|
||||
} = this.props;
|
||||
// const _live = isAssist;
|
||||
backHandler = () => {
|
||||
const { history, siteId, sessionPath, isAssist } = this.props;
|
||||
if (sessionPath.pathname === history.location.pathname || sessionPath.pathname.includes('/session/') || isAssist) {
|
||||
history.push(withSiteId(isAssist ? ASSIST_ROUTE : SESSIONS_ROUTE, siteId));
|
||||
} else {
|
||||
history.push(sessionPath ? sessionPath.pathname + sessionPath.search : withSiteId(SESSIONS_ROUTE, siteId));
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
sessionId,
|
||||
userId,
|
||||
userNumericHash,
|
||||
live,
|
||||
metadata,
|
||||
} = session;
|
||||
let _metaList = Object.keys(metadata).filter(i => metaList.includes(i)).map(key => {
|
||||
const value = metadata[key];
|
||||
return { label: key, value };
|
||||
});
|
||||
toggleFavorite = () => {
|
||||
const { session } = this.props;
|
||||
this.props.toggleFavorite(session.sessionId);
|
||||
};
|
||||
|
||||
const TABS = [ this.props.tabs.EVENTS, this.props.tabs.HEATMAPS ].map(tab => ({ text: tab, key: tab }));
|
||||
return (
|
||||
<div className={ cn(stl.header, "flex justify-between", { "hidden" : fullscreen}) }>
|
||||
<div className="flex w-full items-center" >
|
||||
<div className='flex items-center h-full' onClick={this.backHandler}>
|
||||
<BackLink label="Back" className="h-full" />
|
||||
<div className={ stl.divider } />
|
||||
</div>
|
||||
<UserCard
|
||||
className=""
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
{ isAssist && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
|
||||
render() {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
session,
|
||||
fullscreen,
|
||||
metaList,
|
||||
closedLive = false,
|
||||
siteId,
|
||||
isAssist,
|
||||
setActiveTab,
|
||||
activeTab,
|
||||
showEvents,
|
||||
toggleEvents,
|
||||
} = this.props;
|
||||
// const _live = isAssist;
|
||||
|
||||
<div className={cn("ml-auto flex items-center h-full", { 'hidden' : closedLive })}>
|
||||
{ live && !isAssist && (
|
||||
<>
|
||||
<div className={cn(stl.liveSwitchButton, 'pr-4')}>
|
||||
<Link to={withSiteId(liveSessionRoute(sessionId), siteId)}>
|
||||
This Session is Now Continuing Live
|
||||
</Link>
|
||||
const { hideBack } = this.state;
|
||||
|
||||
const { sessionId, userId, userNumericHash, live, metadata } = session;
|
||||
let _metaList = Object.keys(metadata)
|
||||
.filter((i) => metaList.includes(i))
|
||||
.map((key) => {
|
||||
const value = metadata[key];
|
||||
return { label: key, value };
|
||||
});
|
||||
|
||||
const TABS = [this.props.tabs.EVENTS, this.props.tabs.HEATMAPS].map((tab) => ({ text: tab, key: tab }));
|
||||
return (
|
||||
<div className={cn(stl.header, 'flex justify-between', { hidden: fullscreen })}>
|
||||
<div className="flex w-full items-center">
|
||||
{!hideBack && (
|
||||
<div className="flex items-center h-full" onClick={this.backHandler}>
|
||||
<BackLink label="Back" className="h-full" />
|
||||
<div className={stl.divider} />
|
||||
</div>
|
||||
)}
|
||||
<UserCard className="" width={width} height={height} />
|
||||
{isAssist && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
|
||||
|
||||
<div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
|
||||
{live && !isAssist && (
|
||||
<>
|
||||
<div className={cn(stl.liveSwitchButton, 'pr-4')}>
|
||||
<Link to={withSiteId(liveSessionRoute(sessionId), siteId)}>This Session is Now Continuing Live</Link>
|
||||
</div>
|
||||
{_metaList.length > 0 && <div className={stl.divider} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{_metaList.length > 0 && (
|
||||
<div className="border-l h-full flex items-center px-2">
|
||||
<SessionMetaList className="" metaList={_metaList} maxLength={2} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAssist && <AssistActions userId={userId} />}
|
||||
</div>
|
||||
</div>
|
||||
{_metaList.length > 0 && <div className={ stl.divider } />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{_metaList.length > 0 && (
|
||||
<div className="border-l h-full flex items-center px-2">
|
||||
<SessionMetaList className="" metaList={_metaList} maxLength={2} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ isAssist && <AssistActions userId={userId} /> }
|
||||
</div>
|
||||
</div>
|
||||
{!isAssist && (
|
||||
<div className="relative border-l" style={{ minWidth: '270px' }}>
|
||||
<Tabs
|
||||
tabs={ TABS }
|
||||
active={ activeTab }
|
||||
onClick={ (tab) => { setActiveTab(tab); !showEvents && toggleEvents(true) } }
|
||||
border={ false }
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{!isAssist && (
|
||||
<div className="relative border-l" style={{ minWidth: '270px' }}>
|
||||
<Tabs
|
||||
tabs={TABS}
|
||||
active={activeTab}
|
||||
onClick={(tab) => {
|
||||
setActiveTab(tab);
|
||||
!showEvents && toggleEvents(true);
|
||||
}}
|
||||
border={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue