From e9d5dbeef2bf1dab9dfb863d970b70b3074e3d0a Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu>
Date: Wed, 2 Nov 2022 14:56:20 -0400
Subject: add basic heartbeat functinality througha ping/pong api cycle

---
 src/client/views/MainView.tsx | 158 ++++++++++++++++++++++++------------------
 1 file changed, 91 insertions(+), 67 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9648a7807..5be5c3588 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -66,6 +66,7 @@ import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
 import 'browndash-components/dist/styles/global.min.css';
+import { PingManager } from '../util/PingManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -143,75 +144,96 @@ export class MainView extends React.Component {
     componentDidMount() {
         document.getElementById('root')?.addEventListener('scroll', e => (ele => (ele.scrollLeft = ele.scrollTop = 0))(document.getElementById('root')!));
         const ele = document.getElementById('loader');
-        const prog = document.getElementById('dash-progress');
-        if (ele && prog) {
-            // remove from DOM
-            setTimeout(() => {
-                clearTimeout();
-                prog.style.transition = '1s';
-                prog.style.width = '100%';
-            }, 0);
-            setTimeout(() => (ele.outerHTML = ''), 1000);
-        }
-        this._sidebarContent.proto = undefined;
-        if (!MainView.Live) {
-            DocServer.setPlaygroundFields([
-                'dataTransition',
-                'viewTransition',
-                'treeViewOpen',
-                'showSidebar',
-                'itemIndex', // for changing slides in presentations
-                'sidebarWidthPercent',
-                'currentTimecode',
-                'timelineHeightPercent',
-                'presStatus',
-                'panX',
-                'panY',
-                'overlayX',
-                'overlayY',
-                'fitWidth',
-                'nativeWidth',
-                'nativeHeight',
-                'text-scrollHeight',
-                'text-height',
-                'hideMinimap',
-                'viewScale',
-                'scrollTop',
-                'hidden',
-                'curPage',
-                'viewType',
-                'chromeHidden',
-                'currentFrame',
-                'width',
-                'height',
-                'nativeWidth',
-            ]); // can play with these fields on someone else's
+        console.log(PingManager.Instance);
+
+        const wrapper = () => {
+            const prog = document.getElementById('dash-progress');
+            if (ele && prog) {
+                // remove from DOM
+                setTimeout(() => {
+                    clearTimeout();
+                    prog.style.transition = '1s';
+                    prog.style.width = '100%';
+                }, 0);
+                setTimeout(() => (ele.outerHTML = ''), 1000);
+            }
+            this._sidebarContent.proto = undefined;
+            if (!MainView.Live) {
+                DocServer.setPlaygroundFields([
+                    'dataTransition',
+                    'viewTransition',
+                    'treeViewOpen',
+                    'showSidebar',
+                    'itemIndex', // for changing slides in presentations
+                    'sidebarWidthPercent',
+                    'currentTimecode',
+                    'timelineHeightPercent',
+                    'presStatus',
+                    'panX',
+                    'panY',
+                    'overlayX',
+                    'overlayY',
+                    'fitWidth',
+                    'nativeWidth',
+                    'nativeHeight',
+                    'text-scrollHeight',
+                    'text-height',
+                    'hideMinimap',
+                    'viewScale',
+                    'scrollTop',
+                    'hidden',
+                    'curPage',
+                    'viewType',
+                    'chromeHidden',
+                    'currentFrame',
+                    'width',
+                    'height',
+                    'nativeWidth',
+                ]); // can play with these fields on someone else's
+            }
+            DocServer.GetRefField('rtfProto').then(
+                proto =>
+                    proto instanceof Doc &&
+                    reaction(
+                        () => StrCast(proto.BROADCAST_MESSAGE),
+                        msg => msg && alert(msg)
+                    )
+            );
+
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/iframe_api';
+            const firstScriptTag = document.getElementsByTagName('script')[0];
+            firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
+            window.removeEventListener('keydown', KeyManager.Instance.handle);
+            window.addEventListener('keydown', KeyManager.Instance.handle);
+            window.removeEventListener('keyup', KeyManager.Instance.unhandle);
+            window.addEventListener('keyup', KeyManager.Instance.unhandle);
+            window.addEventListener('paste', KeyManager.Instance.paste as any);
+            document.addEventListener('dash', (e: any) => {
+                // event used by chrome plugin to tell Dash which document to focus on
+                const id = FormattedTextBox.GetDocFromUrl(e.detail);
+                DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.jumpToDocument(doc, false, undefined, []) : null));
+            });
+            document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
+            this.initEventListeners();
         }
-        DocServer.GetRefField('rtfProto').then(
-            proto =>
-                proto instanceof Doc &&
-                reaction(
-                    () => StrCast(proto.BROADCAST_MESSAGE),
-                    msg => msg && alert(msg)
-                )
-        );
 
-        const tag = document.createElement('script');
-        tag.src = 'https://www.youtube.com/iframe_api';
-        const firstScriptTag = document.getElementsByTagName('script')[0];
-        firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
-        window.removeEventListener('keydown', KeyManager.Instance.handle);
-        window.addEventListener('keydown', KeyManager.Instance.handle);
-        window.removeEventListener('keyup', KeyManager.Instance.unhandle);
-        window.addEventListener('keyup', KeyManager.Instance.unhandle);
-        window.addEventListener('paste', KeyManager.Instance.paste as any);
-        document.addEventListener('dash', (e: any) => {
-            // event used by chrome plugin to tell Dash which document to focus on
-            const id = FormattedTextBox.GetDocFromUrl(e.detail);
-            DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.jumpToDocument(doc, false, undefined, []) : null));
-        });
-        document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
-        this.initEventListeners();
+        if (PingManager.Instance.isBeating) {
+            wrapper();
+        } else {
+            console.error('PingManager is not beating', new Date());
+            const dispose = reaction(
+                () => PingManager.Instance.isBeating,
+                isBeating => {
+                    if (isBeating) {
+                        console.log('PingManager is beating', new Date());
+                        wrapper();
+                        dispose();
+                    }
+                }
+            );
+        }
+        
     }
 
     componentWillUnMount() {
@@ -478,6 +500,8 @@ export class MainView extends React.Component {
                 fa.faSquareRootAlt,
                 fa.faVolumeMute,
                 fa.faUserCircle,
+                fa.faHeart,
+                fa.faHeartBroken,
             ]
         );
         this.initAuthenticationRouters();
-- 
cgit v1.2.3-70-g09d2

