From 4b92a3f9ee931635023cf2e7c1d65504924871b4 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Wed, 5 Oct 2022 23:06:22 +0200
Subject: [PATCH] feat(fullScreenBlocker): make basic blocker work

---
 angular.json                                  |  7 ++-
 electron/main.ts                              | 47 +++++++++++++-
 .../shared-with-frontend/ipc-events.const.ts  |  2 +
 .../form-cfgs/take-a-break-form.const.ts      |  2 +-
 .../take-a-break/take-a-break.service.ts      | 10 +++
 src/static/overlay.html                       | 63 +++++++++++++++++++
 6 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 src/static/overlay.html

diff --git a/angular.json b/angular.json
index e934e6792..6aad6d24e 100644
--- a/angular.json
+++ b/angular.json
@@ -29,7 +29,12 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "preserveSymlinks": true,
-            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.json",
+              "src/static/*.html"
+            ],
             "styles": ["src/styles.scss"],
             "scripts": [],
             "webWorkerTsConfig": "src/tsconfig.worker.json"
diff --git a/electron/main.ts b/electron/main.ts
index 561514987..9b7b63d6d 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -10,7 +10,7 @@ import {
 } from 'electron';
 import * as electronDl from 'electron-dl';
 
-import { info, log } from 'electron-log';
+import { error, info, log } from 'electron-log';
 import { CONFIG } from './CONFIG';
 
 import { initIndicator } from './indicator';
@@ -28,7 +28,7 @@ import { lazySetInterval } from './shared-with-frontend/lazy-set-interval';
 import { KeyboardConfig } from '../src/app/features/config/keyboard-config.model';
 
 import { initialize } from '@electron/remote/main';
-import { join } from 'path';
+import { join, normalize } from 'path';
 import {
   existsSync,
   mkdirSync,
@@ -38,6 +38,8 @@ import {
   writeFileSync,
 } from 'fs';
 import { exec } from 'child_process';
+import { TakeABreakConfig } from '../src/app/features/config/global-config.model';
+import { format } from 'url';
 
 initialize();
 
@@ -358,6 +360,47 @@ ipcMain.on(IPC.SHOW_OR_FOCUS, () => {
   showOrFocus(mainWin);
 });
 
+let isFullScreenWindowOpen = false;
+ipcMain.on(
+  IPC.FULL_SCREEN_BLOCKER,
+  (
+    ev,
+    { msg, takeABreakCfg }: { msg: string; takeABreakCfg: TakeABreakConfig },
+  ): void => {
+    if (isFullScreenWindowOpen) {
+      return;
+    }
+    const win = new BrowserWindow({
+      title: msg,
+      fullscreen: true,
+      alwaysOnTop: true,
+    });
+    win.setAlwaysOnTop(true, 'floating');
+    win.setVisibleOnAllWorkspaces(true);
+    win.setFullScreenable(false);
+    isFullScreenWindowOpen = true;
+    win.loadURL(
+      format({
+        pathname: normalize(
+          join(
+            __dirname,
+            IS_DEV ? '../src/static/overlay.html' : '../dist/static/overlay.html',
+          ),
+        ),
+        protocol: 'file:',
+        slashes: true,
+      }) + `#msg=${encodeURI(msg)}&img=${encodeURI(takeABreakCfg.motivationalImg || '')}`,
+    );
+    win.on('close', () => {
+      isFullScreenWindowOpen = false;
+    });
+
+    setTimeout(() => {
+      win.close();
+    }, takeABreakCfg.timedFullScreenBlockerDuration || 5000);
+  },
+);
+
 // HELPER FUNCTIONS
 // ----------------
 // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
diff --git a/electron/shared-with-frontend/ipc-events.const.ts b/electron/shared-with-frontend/ipc-events.const.ts
index 9b5657138..a6019f111 100644
--- a/electron/shared-with-frontend/ipc-events.const.ts
+++ b/electron/shared-with-frontend/ipc-events.const.ts
@@ -52,6 +52,8 @@ export enum IPC {
 
   ANY_FILE_DOWNLOADED = 'ANY_FILE_DOWNLOADED',
 
+  FULL_SCREEN_BLOCKER = 'FULL_SCREEN_BLOCKER',
+
   // maybe_UPDATE_CURRENT_TASK = 'UPDATE_CURRENT_TASK',
   // maybe_IS_IDLE = 'IS_IDLE',
   // maybe_IS_BUSY = 'IS_BUSY',
diff --git a/src/app/features/config/form-cfgs/take-a-break-form.const.ts b/src/app/features/config/form-cfgs/take-a-break-form.const.ts
index 69acb12f6..d7df17be5 100644
--- a/src/app/features/config/form-cfgs/take-a-break-form.const.ts
+++ b/src/app/features/config/form-cfgs/take-a-break-form.const.ts
@@ -31,7 +31,7 @@ export const TAKE_A_BREAK_FORM_CFG: ConfigFormSection<TakeABreakConfig> = {
     {
       key: 'isFocusWindow',
       type: 'checkbox',
-      hideExpression: (model: any) => model.isTimedFullScreenBlocker,
+      // hideExpression: (model: any) => model.isTimedFullScreenBlocker,
       templateOptions: {
         label: T.GCF.TAKE_A_BREAK.IS_FOCUS_WINDOW,
       },
diff --git a/src/app/features/take-a-break/take-a-break.service.ts b/src/app/features/take-a-break/take-a-break.service.ts
index 6712e7d75..aafde6644 100644
--- a/src/app/features/take-a-break/take-a-break.service.ts
+++ b/src/app/features/take-a-break/take-a-break.service.ts
@@ -210,6 +210,16 @@ export class TakeABreakService {
         title: T.GCF.TAKE_A_BREAK.NOTIFICATION_TITLE,
         body: msg,
       });
+
+      if (IS_ELECTRON && cfg.takeABreak.isTimedFullScreenBlocker) {
+        (this._electronService.ipcRenderer as typeof ipcRenderer).send(
+          IPC.FULL_SCREEN_BLOCKER,
+          {
+            msg,
+            takeABreakCfg: cfg.takeABreak,
+          },
+        );
+      }
     });
 
     this._triggerBanner$.subscribe(([timeWithoutBreak, cfg]) => {
diff --git a/src/static/overlay.html b/src/static/overlay.html
new file mode 100644
index 000000000..c95e15b4f
--- /dev/null
+++ b/src/static/overlay.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+    <style>
+      #container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        max-width: 1200px;
+        transform: translate(-50%, -50%);
+        font-family: 'Roboto', 'Comic Sans MS', sans-serif;
+        font-size: 34px;
+      }
+
+      img {
+        display: block;
+        margin: auto;
+        margin-bottom: 20px;
+        max-width: 100%;
+      }
+
+      #msg {
+        text-align: center;
+        max-width: 700px;
+        margin: auto;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          background: rgb(18, 18, 18);
+          color: rgb(235, 235, 235);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        body {
+          background: rgb(250, 250, 250);
+          color: rgb(44, 44, 44);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="msg">MSG</div>
+    </div>
+  </body>
+
+  <script>
+    const hashObj = window.location.hash
+      .replace('#', '')
+      .split('&')
+      .map((v) => v.split('='))
+      .reduce((pre, [key, value]) => ({ ...pre, [key]: value }), {});
+    const msg = hashObj.msg;
+    document.getElementById('msg').innerHTML = decodeURI(msg);
+    const imgUrl = hashObj.img;
+    if (imgUrl) {
+      const img = document.createElement('img');
+      img.src = imgUrl;
+      document.getElementById('container').prepend(img);
+    }
+  </script>
+</html>