@bghitcode/bghitapp 1.0.0

package/src-tauri/src/inject/fullscreen.js

@@ -0,0 +1,253 @@
+// Polyfill for HTML5 Fullscreen API in Tauri webview.
+// Bridges the standard requestFullscreen / exitFullscreen DOM API to Tauri's
+// native window fullscreen so video sites (YouTube, Vimeo, Bilibili, etc.) can
+// go true fullscreen on their player buttons.
+//
+// Split out from component.js so a future CLI flag (or custom.js override)
+// can short-circuit the polyfill for apps that don't need video fullscreen.
+(function () {
+  if (window.__BGHITAPP_FULLSCREEN_POLYFILL__) return;
+  window.__BGHITAPP_FULLSCREEN_POLYFILL__ = true;
+
+  function initFullscreenPolyfill() {
+    if (!window.__TAURI__ || !document.head) {
+      setTimeout(initFullscreenPolyfill, 100);
+      return;
+    }
+
+    const appWindow = window.__TAURI__.window.getCurrentWindow();
+    let fullscreenElement = null;
+    let actualFullscreenElement = null;
+    let originalStyles = null;
+    let originalParent = null;
+    let originalNextSibling = null;
+    let wasInBody = false;
+    let monitorId = null;
+
+    if (!document.getElementById("bghitapp-fullscreen-style")) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "bghitapp-fullscreen-style";
+      styleEl.textContent = `
+      body.bghitapp-fullscreen-active {
+        overflow: hidden !important;
+      }
+      .bghitapp-fullscreen-element {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        max-width: 100vw !important;
+        max-height: 100vh !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        z-index: 2147483647 !important;
+        background: #000 !important;
+        object-fit: contain !important;
+      }
+      .bghitapp-fullscreen-element video {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: contain !important;
+      }
+    `;
+      document.head.appendChild(styleEl);
+    }
+
+    function startFullscreenMonitor() {
+      if (monitorId) return;
+      monitorId = setInterval(() => {
+        appWindow
+          .isFullscreen()
+          .then((isFullscreen) => {
+            if (fullscreenElement && !isFullscreen) {
+              exitFullscreen();
+            }
+          })
+          .catch(() => {});
+      }, 500);
+    }
+
+    function stopFullscreenMonitor() {
+      if (!monitorId) return;
+      clearInterval(monitorId);
+      monitorId = null;
+    }
+
+    function findMediaElement() {
+      const videos = document.querySelectorAll("video");
+      if (videos.length > 0) {
+        let largestVideo = videos[0];
+        let maxArea = 0;
+        videos.forEach((video) => {
+          const rect = video.getBoundingClientRect();
+          const area = rect.width * rect.height;
+          if (area > maxArea || !video.paused) {
+            maxArea = area;
+            largestVideo = video;
+          }
+        });
+        return largestVideo;
+      }
+      return null;
+    }
+
+    function enterFullscreen(element) {
+      fullscreenElement = element;
+
+      let targetElement = element;
+      if (element === document.documentElement || element === document.body) {
+        const mediaElement = findMediaElement();
+        if (mediaElement) {
+          targetElement = mediaElement;
+          actualFullscreenElement = mediaElement;
+        } else {
+          actualFullscreenElement = element;
+        }
+      } else {
+        actualFullscreenElement = element;
+      }
+
+      originalStyles = {
+        position: targetElement.style.position,
+        top: targetElement.style.top,
+        left: targetElement.style.left,
+        width: targetElement.style.width,
+        height: targetElement.style.height,
+        maxWidth: targetElement.style.maxWidth,
+        maxHeight: targetElement.style.maxHeight,
+        margin: targetElement.style.margin,
+        padding: targetElement.style.padding,
+        zIndex: targetElement.style.zIndex,
+        background: targetElement.style.background,
+        objectFit: targetElement.style.objectFit,
+      };
+
+      wasInBody = targetElement.parentNode === document.body;
+      if (!wasInBody) {
+        originalParent = targetElement.parentNode;
+        originalNextSibling = targetElement.nextSibling;
+      }
+
+      targetElement.classList.add("bghitapp-fullscreen-element");
+      document.body.classList.add("bghitapp-fullscreen-active");
+
+      if (!wasInBody) {
+        document.body.appendChild(targetElement);
+      }
+
+      appWindow.setFullscreen(true).then(() => {
+        startFullscreenMonitor();
+        const event = new Event("fullscreenchange", { bubbles: true });
+        document.dispatchEvent(event);
+        element.dispatchEvent(event);
+
+        const webkitEvent = new Event("webkitfullscreenchange", {
+          bubbles: true,
+        });
+        document.dispatchEvent(webkitEvent);
+        element.dispatchEvent(webkitEvent);
+      });
+
+      return Promise.resolve();
+    }
+
+    function exitFullscreen() {
+      if (!fullscreenElement) {
+        return Promise.resolve();
+      }
+
+      stopFullscreenMonitor();
+
+      const exitingElement = fullscreenElement;
+      const targetElement = actualFullscreenElement;
+
+      targetElement.classList.remove("bghitapp-fullscreen-element");
+      document.body.classList.remove("bghitapp-fullscreen-active");
+
+      if (originalStyles) {
+        Object.keys(originalStyles).forEach((key) => {
+          targetElement.style[key] = originalStyles[key];
+        });
+      }
+
+      if (!wasInBody && originalParent) {
+        if (
+          originalNextSibling &&
+          originalNextSibling.parentNode === originalParent
+        ) {
+          originalParent.insertBefore(targetElement, originalNextSibling);
+        } else if (originalParent.isConnected) {
+          originalParent.appendChild(targetElement);
+        }
+      }
+
+      fullscreenElement = null;
+      actualFullscreenElement = null;
+      originalStyles = null;
+      originalParent = null;
+      originalNextSibling = null;
+      wasInBody = false;
+
+      return appWindow.setFullscreen(false).then(() => {
+        const event = new Event("fullscreenchange", { bubbles: true });
+        document.dispatchEvent(event);
+        exitingElement.dispatchEvent(event);
+
+        const webkitEvent = new Event("webkitfullscreenchange", {
+          bubbles: true,
+        });
+        document.dispatchEvent(webkitEvent);
+        exitingElement.dispatchEvent(webkitEvent);
+      });
+    }
+
+    Object.defineProperty(document, "fullscreenEnabled", {
+      get: () => true,
+      configurable: true,
+    });
+    Object.defineProperty(document, "webkitFullscreenEnabled", {
+      get: () => true,
+      configurable: true,
+    });
+
+    Object.defineProperty(document, "fullscreenElement", {
+      get: () => fullscreenElement,
+      configurable: true,
+    });
+    Object.defineProperty(document, "webkitFullscreenElement", {
+      get: () => fullscreenElement,
+      configurable: true,
+    });
+    Object.defineProperty(document, "webkitCurrentFullScreenElement", {
+      get: () => fullscreenElement,
+      configurable: true,
+    });
+
+    Element.prototype.requestFullscreen = function () {
+      return enterFullscreen(this);
+    };
+    Element.prototype.webkitRequestFullscreen = function () {
+      return enterFullscreen(this);
+    };
+    Element.prototype.webkitRequestFullScreen = function () {
+      return enterFullscreen(this);
+    };
+
+    document.exitFullscreen = exitFullscreen;
+    document.webkitExitFullscreen = exitFullscreen;
+    document.webkitCancelFullScreen = exitFullscreen;
+
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && fullscreenElement) {
+          exitFullscreen();
+        }
+      },
+      true,
+    );
+  }
+
+  initFullscreenPolyfill();
+})();

package/src-tauri/src/inject/offline.js

@@ -0,0 +1,68 @@
+(function() {
+    var TARGET_URL = window.bghitappConfig?.url || window.location.href;
+
+    var OFFLINE_HTML = '<!DOCTYPE html>'
+      + '<html><head><meta charset="utf-8"><style>'
+      + '*{margin:0;padding:0;box-sizing:border-box}'
+      + 'body{display:flex;justify-content:center;align-items:center;height:100vh;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}'
+      + '.card{text-align:center;max-width:400px;padding:40px}'
+      + '.icon{width:64px;height:64px;stroke:#636366;margin-bottom:24px}'
+      + '.heading{font-size:24px;font-weight:700;color:#fff;margin-bottom:8px}'
+      + '.subtext{font-size:16px;color:#AEAEB2;margin-bottom:32px}'
+      + '.retry-btn{display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:44px;padding:0 16px;background:#0A84FF;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}'
+      + '.retry-btn:hover{background:#409CFF}'
+      + '.retry-btn:disabled{background:#636366;cursor:not-allowed}'
+      + '.spinner{display:none;width:20px;height:20px;border:2px solid #FFF;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}'
+      + '.retry-btn.loading .btn-text{display:none}'
+      + '.retry-btn.loading .spinner{display:inline-block}'
+      + '@keyframes spin{to{transform:rotate(360deg)}}'
+      + '</style></head><body>'
+      + '<div class="card">'
+      + '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">'
+      + '<path d="M1 1l22 22"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/>'
+      + '<path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/>'
+      + '<path d="M10.71 5.05A16 16 0 0 1 22.56 9"/>'
+      + '<path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/>'
+      + '<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>'
+      + '<line x1="12" y1="20" x2="12.01" y2="20"/>'
+      + '</svg>'
+      + '<h1 class="heading">No Internet Connection</h1>'
+      + '<p class="subtext">Check your network and try again</p>'
+      + '<button class="retry-btn" onclick="retry()">'
+      + '<span class="btn-text">Retry</span><span class="spinner"></span></button>'
+      + '</div>'
+      + '<script>var cooldown=false;function retry(){if(cooldown)return;cooldown=true;var b=document.querySelector(".retry-btn");b.classList.add("loading");b.disabled=true;setTimeout(function(){var o=localStorage.getItem("bghitapp_original_url");if(o)window.location.href=o;else window.location.reload()},3000)}</'
+      + 'script></body></html>';
+
+    function isOffline() {
+        return !navigator.onLine;
+    }
+
+    function goToOffline() {
+        var href = window.location.href;
+        if (!href.includes('offline.html') && !href.includes('data:text/html')) {
+            localStorage.setItem('bghitapp_original_url', TARGET_URL);
+            document.open();
+            document.write(OFFLINE_HTML);
+            document.close();
+        }
+    }
+
+    function goOnline() {
+        if (window.location.href.includes('data:text/html') || document.querySelector('.retry-btn')) {
+            var original = localStorage.getItem('bghitapp_original_url') || TARGET_URL;
+            window.location.replace(original);
+        }
+    }
+
+    if (isOffline()) {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', goToOffline);
+        } else {
+            goToOffline();
+        }
+    }
+
+    window.addEventListener('offline', goToOffline);
+    window.addEventListener('online', goOnline);
+})();

package/src-tauri/src/inject/splash-transition.js

@@ -0,0 +1,13 @@
+(function() {
+    function onReady() {
+        if (window.__TAURI__ && window.bghitappConfig?.splash) {
+            window.__TAURI__.core.invoke('close_splashscreen');
+        }
+    }
+
+    if (document.readyState === 'complete') {
+        onReady();
+    } else {
+        window.addEventListener('load', onReady);
+    }
+})();