change(ui): fix docs, fix overlay waiting text

frontend/app/components/Client/Integrations/AssistDoc/AssistNpm.tsx

@@ -12,9 +12,9 @@ function AssistNpm(props) {
         label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
-        {`import Tracker from '@openreplay/tracker';
+        {`import OpenReplay from '@openreplay/tracker';
 import trackerAssist from '@openreplay/tracker-assist';
-const tracker = new Tracker({
+const tracker = new OpenReplay({
   projectKey: '${props.projectKey}',
 });
 tracker.start();
@@ -24,7 +24,7 @@ tracker.use(trackerAssist(options)); // check the list of available options belo
         second={
           <Highlight className="js">
         {`import OpenReplay from '@openreplay/tracker/cjs';
-import trackerFetch from '@openreplay/tracker-assist/cjs';
+import trackerAssist from '@openreplay/tracker-assist/cjs';
 const tracker = new OpenReplay({
   projectKey: '${props.projectKey}'
 });
@@ -50,4 +50,4 @@ function MyApp() {
   );
 }
 
-export default AssistNpm;
+export default AssistNpm;

frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js

@@ -29,7 +29,7 @@ const AxiosDoc = (props) => {
                     label="Server-Side-Rendered (SSR)?"
                     first={
                         <Highlight className="js">
-                            {`import tracker from '@openreplay/tracker';
+                            {`import OpenReplay from '@openreplay/tracker';
 import trackerAxios from '@openreplay/tracker-axios';
 const tracker = new OpenReplay({
   projectKey: '${projectKey}'

frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js

@@ -26,7 +26,7 @@ const FetchDoc = (props) => {
                     label="Server-Side-Rendered (SSR)?"
                     first={
                         <Highlight className="js">
-                            {`import tracker from '@openreplay/tracker';
+                            {`import OpenReplay from '@openreplay/tracker';
 import trackerFetch from '@openreplay/tracker-fetch';
 //...
 const tracker = new OpenReplay({

frontend/app/components/Session_/Player/Overlay.tsx

@@ -25,7 +25,8 @@ interface Props {
 
   nextId: string,
   togglePlay: () => void,
-  closedLive?: boolean
+  closedLive?: boolean,
+  livePlay?: boolean,
 }
 
 function Overlay({
@@ -42,20 +43,21 @@ function Overlay({
   activeTargetIndex,
   nextId,
   togglePlay,
-  closedLive
+  closedLive,
+  livePlay,
 }: Props) {
   const showAutoplayTimer = !live && completed && autoplay && nextId
   const showPlayIconLayer = !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
-  const showLiveStatusText = live && liveStatusText && !loading;
+  const showLiveStatusText = live && livePlay && liveStatusText && !loading;
 
   return (
     <>
       { showAutoplayTimer && <AutoplayTimer /> }
-      { showLiveStatusText && 
+      { showLiveStatusText &&
         <LiveStatusText text={liveStatusText} concetionStatus={closedLive ? ConnectionStatus.Closed : concetionStatus} />
       }
       { messagesLoading && <Loader /> }
-      { showPlayIconLayer && 
+      { showPlayIconLayer &&
         <PlayIconLayer playing={playing} togglePlay={togglePlay} />
       }
       { markedTargets && <ElementsMarker targets={ markedTargets } activeIndex={activeTargetIndex}/>
@@ -77,4 +79,5 @@ export default connectPlayer(state => ({
   concetionStatus: state.peerConnectionStatus,
   markedTargets: state.markedTargets,
   activeTargetIndex: state.activeTargetIndex,
+  livePlay: state.livePlay,
 }))(Overlay);

frontend/app/components/Session_/Player/Overlay/LiveStatusText.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import stl from './LiveStatusText.module.css';
 import ovStl from './overlay.module.css';
 import { ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
 import { Loader } from 'UI';
@@ -64,9 +63,9 @@ export default function LiveStatusText({ text, concetionStatus }: Props) {
             <div className="text-sm">Something wrong just happened. Try refreshing the page.</div>
           </div>
         )
-    } 
+    }
   }
   return <div className={ovStl.overlay}>
     { renderView()}
   </div>
-}
+}

frontend/app/components/Session_/Player/Overlay/overlay.module.css

@@ -8,4 +8,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  text-shadow:1px 0 0 white,0 1px 0 white,-1px 0 0 white,0 -1px 0 white;
 }

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

@@ -84,7 +84,6 @@ export default class Player extends React.PureComponent {
       fullscreen,
       fullscreenOff,
       nextId,
-      live,
       closedLive,
       bottomBlock,
       activeTab