feat(fullScreenBlocker): make basic blocker work

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"

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

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',

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,
       },

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]) => {

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>