fix(ui): bugfixes

frontend/app/components/Session/RightBlock.tsx

@@ -11,7 +11,7 @@ const EventsBlockConnected = connectPlayer(state => ({
   playing: state.playing,
 }))(EventsBlock)
 
-export default function RightBlock(props) {
+function RightBlock(props) {
   const { activeTab } = props;
 
   const renderActiveTab = (tab) => {
@@ -28,3 +28,5 @@ export default function RightBlock(props) {
     </div>
   )
 }
+
+export default React.memo(RightBlock)

frontend/app/components/Session/WebPlayer.js

@@ -35,11 +35,9 @@ function PlayerContent({ live, fullscreen, activeTab }) {
   )
 }
 
-function RightMenu({ showEvents, live, tabs, activeTab, setActiveTab, fullscreen }) {
+function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
-  return showEvents && !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
+  return  !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
 }
-const ConnectedMenu = connectPlayer(state => ({
-  showEvents: state.showEvents}), { toggleEvents })(RightMenu)
 
 function WebPlayer (props) {
   const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, config } = props;
@@ -68,13 +66,14 @@ function WebPlayer (props) {
 
     closeBottomBlock();
   }, [])
+
   return (
     <PlayerProvider>
       <InitLoader className="flex-1">
           <PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
             <div className="flex">
               <div className="w-full"><PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} /></div>
-              {activeTab !== '' && <ConnectedMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
+              {activeTab !== '' && <RightMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
             </div>
       </InitLoader>
     </PlayerProvider>

frontend/app/components/Session_/Network/NetworkContent.js

@@ -38,7 +38,7 @@ const LOAD_TIME_COLOR = "red";
 
 export function renderType(r) { 
   return (
-    <Popup content={ <div className={ stl.popupNameContent }>{ r.type }</div> } >
+    <Popup style={{width: '100%'}} content={ <div className={ stl.popupNameContent }>{ r.type }</div> } >
       <div className={ stl.popupNameTrigger }>{ r.type }</div>
     </Popup>
   );
@@ -46,7 +46,7 @@ export function renderType(r) {
 
 export function renderName(r) { 
   return (
-    <Popup content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
+    <Popup style={{width: '100%'}} content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
       <div className={ stl.popupNameTrigger }>{ r.name }</div> 
     </Popup>
   );
@@ -94,7 +94,7 @@ function renderSize(r) {
   }
 
   return (
-    <Popup content={ content } >
+    <Popup style={{width: '100%'}} content={ content } >
       <div>{ triggerText }</div>
     </Popup>
   );
@@ -118,6 +118,7 @@ export function renderDuration(r) {
 
   return (
     <Popup
+      style={{width: '100%'}}
       content={ tooltipText }
     >
       <div className={ cn(className, stl.duration) } > { text } </div>

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -347,7 +347,7 @@ export default class Controls extends React.Component {
                         onClick={ this.props.toggleSkip }
                         data-disabled={ disabled }
                       >
-                        <span className={ styles.checkIcon } />
+                        {skip && <Icon name="check" size="24" className="mr-1" />}
                         { 'Skip Inactivity' }
                       </button>
                     </div>

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -13,6 +13,8 @@ import CustomDragLayer from './CustomDragLayer';
 import { debounce } from 'App/utils';
 import { Tooltip } from 'react-tippy';
 
+const BOUNDRY = 15
+
 const getPointerIcon = (type) => {
   // exception,
   switch(type) {
@@ -116,7 +118,7 @@ export default class Timeline extends React.PureComponent {
   onDrag = (offset) => {
     const { endTime } = this.props;
 
-    const p = (offset.x - 60) / this.progressRef.current.offsetWidth;
+    const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
     const time = Math.max(Math.round(p * endTime), 0);
     deboucneJump(time);
     if (this.props.playing) {
@@ -147,7 +149,7 @@ export default class Timeline extends React.PureComponent {
     return (
       <div
         className="flex items-center absolute w-full"
-        style={{ top: '-5px', zIndex: 100, padding: '0 15px'}}
+        style={{ top: '-5px', zIndex: 100, padding: `0 ${BOUNDRY}px`}}
       >
         <div
           className={ stl.progress }
@@ -155,7 +157,7 @@ export default class Timeline extends React.PureComponent {
           ref={ this.progressRef }
         >
             <DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} />
-            <CustomDragLayer onDrag={this.onDrag} minX={70} maxX={this.progressRef.current && this.progressRef.current.offsetWidth + 70} />
+            <CustomDragLayer onDrag={this.onDrag} minX={BOUNDRY} maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY} />
             <TimeTracker scale={ scale } />
             { skip && skipIntervals.map(interval =>
               (<div

frontend/app/components/Session_/Player/Controls/controls.module.css

@@ -85,12 +85,6 @@
   }
 }
 
-.checkIcon {
-  @mixin icon check, $gray-dark, 24px;
-  margin-right: 2px;
-  display: none;
-}
-
 .liveTag {
   cursor: pointer;
   user-select: none;

frontend/app/components/Session_/Subheader.js

@@ -48,7 +48,6 @@ function SubHeader(props) {
                         entity="sessions"
                         id={ props.sessionId }
                         showCopyLink={true}
-                        time={props.time}
                         trigger={
                             <div className="flex items-center hover:bg-gray-light-shade rounded-md p-1">
                                 <Icon
@@ -75,6 +74,6 @@ function SubHeader(props) {
     )
 }
 
-const SubH = connectPlayer(state => ({ currentLocation: state.location, time: state.time }))(SubHeader)
+const SubH = connectPlayer(state => ({ currentLocation: state.location }))(SubHeader)
 
 export default React.memo(SubH)

frontend/app/components/Session_/TimeTable/BarRow.js

@@ -39,6 +39,7 @@ const BarRow = ({ resource: { time, ttfb = 0, duration, key }, popup=false, time
     <div key={ key } className={ tableStyles.row } >
       <Popup
         basic
+        style={{ width: '100%' }}
         unmountHTMLWhenHide
         content={ 
           <React.Fragment>
@@ -81,4 +82,4 @@ const BarRow = ({ resource: { time, ttfb = 0, duration, key }, popup=false, time
 
 BarRow.displayName = "BarRow";
 
-export default BarRow;
+export default BarRow;

frontend/app/components/shared/SharePopup/SharePopup.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
+import { connectPlayer } from 'Player'
 import withRequest from 'HOCs/withRequest';
 import { Popup, Dropdown, Icon, Button } from 'UI';
 import styles from './sharePopup.module.css';
@@ -9,6 +10,9 @@ import SessionCopyLink from './SessionCopyLink';
 import Select from 'Shared/Select';
 import { Tooltip } from 'react-tippy';
 
+@connectPlayer(state => ({
+  time: state.time,
+}))
 @connect(state => ({
   channels: state.getIn([ 'slack', 'list' ]),
   tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),