Merge pull request #90 from openreplay/dev

change(ui) - assist changes
2021-07-14 22:27:54 +05:30 · 2021-07-14 22:27:54 +05:30 · 97b662cabc
commit 97b662cabc
parent 7a4a1cd11f b3fbbe2085
5 changed files with 74 additions and 35 deletions
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@ -20,7 +20,7 @@ const ScreenWrapper = withOverlay()(React.memo(() => <div className={ stl.screen
  loading: state.messagesLoading,
  disconnected: state.disconnected,
  disabled: state.cssLoading || state.messagesLoading || state.inspectorMode,
-  removeOverlay: !state.messagesLoading && state.inspectorMode,
+  removeOverlay: !state.messagesLoading && state.inspectorMode || state.live,
  completed: state.completed,
  autoplay: state.autoplay,
  live: state.live,
@ -132,7 +132,7 @@ export default class Player extends React.PureComponent {
        }
        {!live && !fullscreen && <EventsToggleButton /> }
        <div className="relative flex-1">
-          { !removeOverlay && 
+          { (!removeOverlay || live && liveStatusText) && 
            <div 
              className={ stl.overlay }
              onClick={ disabled ? null : this.togglePlay }
@ -141,13 +141,15 @@ export default class Player extends React.PureComponent {
                ? <span className={stl.liveStatusText}>{liveStatusText}</span>
                : <Loader loading={ loading } />
              }
-              <div 
-                className={ cn(stl.iconWrapper, { 
-                  [ stl.zoomIcon ]: showPlayOverlayIcon 
-                }) } 
-              >
-                <div className={ playing ? stl.playIcon : stl.pauseIcon } />
-              </div>
+              { !live && 
+                <div 
+                  className={ cn(stl.iconWrapper, { 
+                    [ stl.zoomIcon ]: showPlayOverlayIcon 
+                  }) } 
+                >
+                  <div className={ playing ? stl.playIcon : stl.pauseIcon } />
+                </div>
+              }
            </div>
          }
          { completed && autoplay && nextId && <AutoplayTimer /> }
--- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts
+++ b/frontend/app/player/MessageDistributor/managers/AssistManager.ts
@ -120,6 +120,7 @@ export default class AssistManager {

  private peer: Peer | null = null;
  connectionAttempts: number = 0;
+  private peeropened: boolean = false;
  connect() {
    if (this.peer != null) {
      console.error("AssistManager: trying to connect more than once");
@ -138,7 +139,8 @@ export default class AssistManager {
      peer.on('error', e => {
        if (e.type === 'peer-unavailable') {
          if (this.peer && this.connectionAttempts++ < MAX_RECONNECTION_COUNT) {
-            update({ peerConnectionStatus: ConnectionStatus.Connecting })
+            update({ peerConnectionStatus: ConnectionStatus.Connecting });
+            console.log("peerunavailable")
            this.connectToPeer();
          } else {
            update({ peerConnectionStatus: ConnectionStatus.Disconnected });
@ -149,7 +151,10 @@ export default class AssistManager {
          update({ peerConnectionStatus: ConnectionStatus.Error })
        }
      })
-      peer.on("open", me => {
+      peer.on("open", () => {
+        if (this.peeropened) { return; }
+        this.peeropened = true;
+        console.log('peeropen')
        this.connectToPeer();        
      });
    });
@ -164,16 +169,19 @@ export default class AssistManager {
    const conn = this.peer.connect(id, { serialization: 'json', reliable: true});

    conn.on('open', () => {
+      window.addEventListener("beforeunload", ()=>conn.send("unload"));
      console.log("peer connected")
      
      let i = 0;
      let firstMessage = true;
+
+      update({ peerConnectionStatus: ConnectionStatus.Connected })
+
      conn.on('data', (data) => {
        if (!Array.isArray(data)) { return this.handleCommand(data); }
        if (firstMessage) {
          firstMessage = false;
          this.md.setMessagesLoading(false);
-          update({ peerConnectionStatus: ConnectionStatus.Connected })
        }

        let time = 0;
@ -228,11 +236,11 @@ export default class AssistManager {
      this.connectToPeer();
    }

-    this.dataCheckIntervalID = setInterval(() => {
-      if (!this.dataConnection && getState().peerConnectionStatus === ConnectionStatus.Connected) {
-        onDataClose();
-      }
-    }, 3000);
+    // this.dataCheckIntervalID = setInterval(() => {
+    //   if (!this.dataConnection && getState().peerConnectionStatus === ConnectionStatus.Connected) {
+    //     onDataClose();
+    //   }
+    // }, 3000);
    conn.on('close', onDataClose);// Does it work ?
    conn.on("error", (e) => {
      console.log("PeerJS connection error", e);
@ -355,10 +363,13 @@ export default class AssistManager {
    console.log('clearing', this.peerID)
    this.initiateCallEnd();
    this.dataCheckIntervalID && clearInterval(this.dataCheckIntervalID);
-    this.dataConnection?.close();
-    console.log("destroying peer...")
-    this.peer?.destroy();
-    this.peer = null;
+    if (this.peer) {
+      this.peer.connections[this.peerID]?.forEach(c => c.open && c.close());
+      console.log("destroying peer...")
+      this.peer.disconnect();
+      this.peer.destroy();
+      this.peer = null;
+    }
  }
 }

--- a/scripts/helm/roles/openreplay/templates/postgresql.yaml
+++ b/scripts/helm/roles/openreplay/templates/postgresql.yaml
@ -1,5 +1,3 @@
-image:
-  tag: 13.3.0-debian-10-r53
 {% if db_resource_override.postgresql %}
 {{ db_resource_override.postgresql|to_nice_yaml(indent=2) }}
 {% else %}
--- a/tracker/tracker-assist/src/CallWindow.ts
+++ b/tracker/tracker-assist/src/CallWindow.ts
@ -4,6 +4,7 @@ export default class CallWindow {
  private iframe: HTMLIFrameElement;
  private vRemote: HTMLVideoElement | null = null;
  private vLocal: HTMLVideoElement | null = null;
+  private aRemote: HTMLAudioElement | null = null;
  private audioBtn: HTMLAnchorElement | null = null;
  private videoBtn: HTMLAnchorElement | null = null;
  private userNameSpan: HTMLSpanElement | null = null;
@ -12,14 +13,16 @@ export default class CallWindow {
  constructor(endCall: () => void) {
    const iframe = this.iframe = document.createElement('iframe');
    Object.assign(iframe.style, {
-      position: "absolute",
+      position: "fixed",
      zIndex: 2147483647 - 1,
      //borderRadius: ".25em .25em .4em .4em",
      //border: "4px rgba(0, 0, 0, .7)",
      border: "none",
      bottom: "10px",
      right: "10px",
-      display: "none",
+      background: "white",
+      height: "200px",
+      width: "200px",
    });
    //iframe.src = "//static.openreplay.com/tracker-assist/index.html";
    iframe.onload = () => {
@ -33,9 +36,12 @@ export default class CallWindow {
      .then(r => r.text())
      .then((text) => {
        iframe.onload = () => {
-          iframe.style.display = "block";
+          doc.body.removeChild(doc.body.children[0]); //?!!>R#
+          const assistSection = doc.getElementById("or-assist")
+          assistSection && assistSection.removeAttribute("style");
          iframe.style.height = doc.body.scrollHeight + 'px';
          iframe.style.width = doc.body.scrollWidth + 'px';
+          iframe.onload = null;
        }

        text = text.replace(/href="css/g, "href=\"https://static.openreplay.com/tracker-assist/css")
@ -46,6 +52,7 @@ export default class CallWindow {
        
        this.vLocal = doc.getElementById("video-local") as HTMLVideoElement;
        this.vRemote = doc.getElementById("video-remote") as HTMLVideoElement;
+        this.aRemote  = doc.getElementById("audio-remote") as HTMLAudioElement;
        this._trySetStreams();
        this.vLocal.parentElement && this.vLocal.parentElement.classList.add("d-none");

@ -76,6 +83,8 @@ export default class CallWindow {
        doc.body.setAttribute("draggable", "true");
        doc.body.ondragstart = (e) => {
          if (!e.dataTransfer || !e.target) { return; }
+          //@ts-ignore
+          if (!e.target.classList || !e.target.classList.contains("card-header")) { return; }
          e.dataTransfer.setDragImage(doc.body, e.clientX, e.clientY);
        };
        doc.body.ondragend = e => {
@ -99,8 +108,11 @@ export default class CallWindow {
    if (this.vRemote && this.remoteStream) {
      this.vRemote.srcObject = this.remoteStream;
    }
-    if (this.vLocal && this.localStream) {
-      this.vLocal.srcObject = this.localStream;
+    if (this.aRemote && this.localStream) {
+      this.aRemote.srcObject = this.localStream;
+    }
+    if (this.vLocal && this.videoStream) {
+      this.vLocal.srcObject = this.videoStream;
    }
  }
  setRemoteStream(rStream: MediaStream) {
@ -144,12 +156,9 @@ export default class CallWindow {
      this.audioBtn.childNodes[1].textContent = "Unmute";
    }
  }
-  toggleVideo() {
-    let enabled = true;
-    this.localStream?.getVideoTracks().forEach(track => {
-      enabled = enabled && !track.enabled;
-      track.enabled = enabled;
-    });
+
+  private videoStream: MediaStream | null = null;
+  private _toggleVideoUI(enabled) {
    if (!this.videoBtn || !this.vLocal || !this.vLocal.parentElement) { return; } 
    if (enabled) {
      this.vLocal.parentElement.classList.remove("d-none");
@ -162,7 +171,26 @@ export default class CallWindow {
    }
  }

+  toggleVideo() {
+    if (this.videoStream === null) {
+      navigator.mediaDevices.getUserMedia({video:true, audio:false}).then(vd => {
+        this.videoStream = vd;
+        this._trySetStreams();
+        this._toggleVideoUI(true);
+      });
+      return;
+    }
+    let enabled = true;
+    this.videoStream?.getVideoTracks().forEach(track => {
+      enabled = enabled && !track.enabled;
+      track.enabled = enabled;
+    });
+    this._toggleVideoUI(enabled);
+    
+  }
+
  remove() {
+    this.videoStream?.getTracks().forEach(t => t.stop());
    clearInterval(this.tsInterval);
    if (this.iframe.parentElement) {
      document.body.removeChild(this.iframe);   
--- a/tracker/tracker-assist/src/index.ts
+++ b/tracker/tracker-assist/src/index.ts
@ -116,7 +116,7 @@ export default function(opts: Partial<Options> = {})  {
          const mouse = new Mouse();
          let callUI;

-          navigator.mediaDevices.getUserMedia({video:true, audio:true})
+          navigator.mediaDevices.getUserMedia({video:false, audio:true})
          .then(lStream => {
            const onCallEnd = () => {
              console.log("on callend", call.open)