fix: live preview shuts down after 5 seconds of previewing an image o…

…r non html files
phcode-dev · Jan 5, 2024 · 5c5a714 · 5c5a714
1 parent 980883b
commit 5c5a714
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git a/src/LiveDevelopment/BrowserScripts/pageLoaderWorker.js b/src/LiveDevelopment/BrowserScripts/pageLoaderWorker.js
@@ -49,7 +49,7 @@ function _setupBroadcastChannel(broadcastChannel, clientID) {
     _sendOnlineHeartbeat();
     setInterval(()=>{
         _sendOnlineHeartbeat();
-    }, 1000);
+    }, 3000);
 }
 
 function updateTitleAndFavicon(event) {

diff --git a/src/extensions/default/Phoenix-live-preview/StaticServer.js b/src/extensions/default/Phoenix-live-preview/StaticServer.js
@@ -302,8 +302,9 @@ define(function (require, exports, module) {
     }
 
     /**
-     * return a page loader url after stripping the PHCODE_LIVE_PREVIEW_QUERY_PARAM
-     * "https://phcode.live/pageLoader.html?broadcastChannel=PH-697797864197_livePreview&URL=https%3A%2...
+     * return a page loader html with redirect script tag that just redirects the page to the given redirectURL.
+     * Strips the PHCODE_LIVE_PREVIEW_QUERY_PARAM in redirectURL also, indicating this is not a live previewed url.
+     *
      * @param redirectURL
      * @return {string}
      * @private
@@ -469,8 +470,8 @@ define(function (require, exports, module) {
         });
     });
 
-    // If we didn't receive heartbeat message from a tab for 5 seconds, we assume tab closed
-    const TAB_HEARTBEAT_TIMEOUT = 5000; // in millis secs
+    // If we didn't receive heartbeat message from a tab for 10 seconds, we assume tab closed
+    const TAB_HEARTBEAT_TIMEOUT = 10000; // in millis secs
     setInterval(()=>{
         let endTime = new Date();
         for(let tab of livePreviewTabs.keys()){

diff --git a/src/extensions/default/Phoenix-live-preview/main.js b/src/extensions/default/Phoenix-live-preview/main.js
@@ -73,6 +73,33 @@ define(function (require, exports, module) {
     const LOADER_BROADCAST_ID = `live-preview-loader-${Phoenix.PHOENIX_INSTANCE_ID}`;
     const navigatorChannel = new BroadcastChannel(LOADER_BROADCAST_ID);
 
+    const livePreviewTabs = new Map();
+    navigatorChannel.onmessage = (event) => {
+        window.logger.livePreview.log("Live Preview navigator channel: Phoenix received event from tab: ", event);
+        const type = event.data.type;
+        switch (type) {
+        case 'TAB_LOADER_ONLINE':
+            livePreviewTabs.set(event.data.pageLoaderID, {
+                lastSeen: new Date(),
+                URL: event.data.URL
+            });
+            return;
+        default: return; // ignore messages not intended for us.
+        }
+    };
+
+    // If we didn't receive heartbeat message from a tab for 10 seconds, we assume tab closed
+    const TAB_HEARTBEAT_TIMEOUT = 10000; // in millis secs
+    setInterval(()=>{
+        let endTime = new Date();
+        for(let tab of livePreviewTabs.keys()){
+            let timeDiff = endTime - livePreviewTabs.get(tab).lastSeen; // in ms
+            if(timeDiff > TAB_HEARTBEAT_TIMEOUT){
+                livePreviewTabs.delete(tab);
+            }
+        }
+    }, 1000);
+
     ExtensionInterface.registerExtensionInterface(
         ExtensionInterface._DEFAULT_EXTENSIONS_INTERFACE_NAMES.PHOENIX_LIVE_PREVIEW, exports);
 
@@ -136,7 +163,8 @@ define(function (require, exports, module) {
         } else if(visible && explicitClickOnLPIcon) {
             LiveDevelopment.closeLivePreview();
             LiveDevelopment.openLivePreview();
-        } else if(!visible && LiveDevelopment.isActive() && StaticServer.livePreviewTabs.size === 0) {
+        } else if(!visible && LiveDevelopment.isActive()
+            && StaticServer.livePreviewTabs.size === 0 && livePreviewTabs.size === 0) {
             LiveDevelopment.closeLivePreview();
         }
     }
@@ -262,7 +290,7 @@ define(function (require, exports, module) {
     async function _loadPreview(force) {
         // we wait till the first server ready event is received till we render anything. else a 404-page may
         // briefly flash on first load of phoenix as we try to load the page before the server is available.
-        const isPreviewLoadable = serverReady && (panel.isVisible() || StaticServer.livePreviewTabs.size > 0);
+        const isPreviewLoadable = serverReady && (panel.isVisible() || StaticServer.livePreviewTabs.size > 0 || livePreviewTabs.size > 0);
         if(!isPreviewLoadable){
             return;
         }
@@ -325,7 +353,7 @@ define(function (require, exports, module) {
 
     function _activeDocChanged() {
         if(!LiveDevelopment.isActive() && !livePreviewEnabledOnProjectSwitch
-            && (panel.isVisible() || (StaticServer.livePreviewTabs.size > 0))) {
+            && (panel.isVisible() || StaticServer.livePreviewTabs.size > 0 || livePreviewTabs.size > 0)) {
             // we do this only once after project switch if live preview for a doc is not active.
             LiveDevelopment.closeLivePreview();
             LiveDevelopment.openLivePreview();
@@ -407,7 +435,7 @@ define(function (require, exports, module) {
 
         let consecutiveEmptyClientsCount = 0;
         setInterval(()=>{
-            if(StaticServer.livePreviewTabs.size === 0){
+            if(StaticServer.livePreviewTabs.size === 0 && livePreviewTabs.size === 0){
                 consecutiveEmptyClientsCount ++;
             } else {
                 consecutiveEmptyClientsCount = 0;

diff --git a/src/live-preview-loader.html b/src/live-preview-loader.html
@@ -164,10 +164,19 @@
                             dialog.style.display = 'flex';
                         }
                         return;
+                    case 'TAB_LOADER_ONLINE': return; // loop-back message do nothing, this is for phoenix ot process.
                     default:
-                        console.error("Unknown live preivew broadcast message received!: ", event);
+                    console.error("Unknown live preivew broadcast message received!: ", event);
                 }
             }
+            setInterval(()=>{
+                // send page loader heartbeat
+                navigatorChannel.postMessage({
+                    type: 'TAB_LOADER_ONLINE',
+                    pageLoaderID: pageLoaderID,
+                    url: previewURL
+                });
+            }, 3000);
             livePreviewChannel.onmessage = (event) => {
                 _debugLog("Live Preview message channel: Browser received event from Phoenix: ", JSON.stringify(event.data));
                 if(event.data.pageLoaderID && event.data.pageLoaderID !== pageLoaderID){