Fullscreen mode (#1968)

* Add preference to open app in full screen

* CLI flag for fullscreen and function to return fullscreen state

Parsing the config or the args to define how to open the app. Args take priority over the config, and fallback is the window state.

* Optional TS config value

Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>

* Remove undefined check for `Config.startInFullscreen`

* Fixed optional arg for test

* Fixed jest test

* fullscreen optional window value

* Update src/main/windows/mainWindow.ts

Co-authored-by: Guillermo Vayá <guivaya@gmail.com>

* Update src/main/windows/mainWindow.ts

Co-authored-by: Guillermo Vayá <guivaya@gmail.com>

* Type fixes

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Co-authored-by: Guillermo Vayá <guivaya@gmail.com>
Co-authored-by: Devin Binnie <devin.binnie@mattermost.com>

src/common/config/defaultPreferences.ts

@@ -36,6 +36,7 @@ const defaultPreferences: ConfigV3 = {
     darkMode: false,
     lastActiveTeam: 0,
     downloadLocation: getDefaultDownloadLocation(),
+    startInFullscreen: false,
 };
 
 export default defaultPreferences;

src/common/config/index.ts

@@ -252,6 +252,10 @@ export class Config extends EventEmitter {
     get enableHardwareAcceleration() {
         return this.combinedData?.enableHardwareAcceleration ?? defaultPreferences.enableHardwareAcceleration;
     }
+
+    get startInFullscreen() {
+        return this.combinedData?.startInFullscreen ?? defaultPreferences.startInFullscreen;
+    }
     get enableServerManagement() {
         return this.combinedData?.enableServerManagement ?? buildConfig.enableServerManagement;
     }

src/common/config/upgradePreferences.test.js

@@ -99,6 +99,7 @@ describe('common/config/upgradePreferences', () => {
                 showUnreadBadge: false,
                 useSpellChecker: false,
                 enableHardwareAcceleration: false,
+                startInFullscreen: false,
                 autostart: false,
                 hideOnStart: false,
                 spellCheckerLocale: 'en-CA',

src/common/config/upgradePreferences.ts

@@ -44,6 +44,7 @@ export function upgradeV2toV3(configV2: ConfigV2) {
     });
     config.lastActiveTeam = 0;
     config.spellCheckerLocales = [];
+    config.startInFullscreen = false;
     return config;
 }
 

src/main/ParseArgs.ts

@@ -29,6 +29,7 @@ function parseArgs(args: string[]) {
         alias('dataDir', 'd').string('dataDir').describe('dataDir', 'Set the path to where user data is stored.').
         alias('disableDevMode', 'p').boolean('disableDevMode').describe('disableDevMode', 'Disable development mode. Allows for testing as if it was Production.').
         alias('version', 'v').boolean('version').describe('version', 'Prints the application version.').
+        alias('fullscreen', 'f').boolean('fullscreen').describe('fullscreen', 'Opens the application in fullscreen mode.').
         help('help').
         parse(args);
 }

src/main/Validator.test.js

@@ -130,6 +130,7 @@ describe('main/Validator', () => {
             hideOnStart: false,
             darkMode: false,
             enableHardwareAcceleration: true,
+            startInFullscreen: false,
             lastActiveTeam: 0,
             minimizeToTray: false,
             showTrayIcon: false,

src/main/Validator.ts

@@ -27,6 +27,7 @@ const argsSchema = Joi.object<Args>({
     disableDevMode: Joi.boolean(),
     dataDir: Joi.string(),
     version: Joi.boolean(),
+    fullscreen: Joi.boolean(),
 });
 
 const boundsInfoSchema = Joi.object<SavedWindowState>({
@@ -118,6 +119,7 @@ const configDataSchemaV3 = Joi.object<ConfigV3>({
     showUnreadBadge: Joi.boolean().default(true),
     useSpellChecker: Joi.boolean().default(true),
     enableHardwareAcceleration: Joi.boolean().default(true),
+    startInFullscreen: Joi.boolean().default(false),
     autostart: Joi.boolean().default(true),
     hideOnStart: Joi.boolean().default(false),
     spellCheckerLocales: Joi.array().items(Joi.string()).default([]),

src/main/windows/mainWindow.test.js

@@ -124,6 +124,13 @@ describe('main/windows/mainWindow', () => {
             }));
         });
 
+        it('should open in fullscreen if fullscreen set to true', () => {
+            createMainWindow({fullscreen: true});
+            expect(BrowserWindow).toHaveBeenCalledWith(expect.objectContaining({
+                fullscreen: true,
+            }));
+        });
+
         it('should set default window size when failing to read bounds from file', () => {
             fs.readFileSync.mockImplementation(() => 'just a bunch of garbage');
             createMainWindow({});

src/main/windows/mainWindow.ts

@@ -43,10 +43,10 @@ function isFramelessWindow() {
     return os.platform() === 'darwin' || (os.platform() === 'win32' && Utils.isVersionGreaterThanOrEqualTo(os.release(), '6.2'));
 }
 
-function createMainWindow(options: {linuxAppIcon: string}) {
+function createMainWindow(options: {linuxAppIcon: string; fullscreen?: boolean}) {
     // Create the browser window.
     const preload = getLocalPreload('mainWindow.js');
-    let savedWindowState;
+    let savedWindowState: any;
     try {
         savedWindowState = JSON.parse(fs.readFileSync(boundsInfoPath, 'utf-8'));
         savedWindowState = Validator.validateBoundsInfo(savedWindowState);
@@ -65,6 +65,16 @@ function createMainWindow(options: {linuxAppIcon: string}) {
     const {maximized: windowIsMaximized} = savedWindowState;
 
     const spellcheck = (typeof Config.useSpellChecker === 'undefined' ? true : Config.useSpellChecker);
+    const isFullScreen = () => {
+        if (global?.args?.fullscreen !== undefined) {
+            return global.args.fullscreen;
+        }
+
+        if (Config.startInFullscreen) {
+            return Config.startInFullscreen;
+        }
+        return options.fullscreen || savedWindowState.fullscreen || false;
+    };
 
     const windowOptions: BrowserWindowConstructorOptions = Object.assign({}, savedWindowState, {
         title: app.name,
@@ -74,7 +84,7 @@ function createMainWindow(options: {linuxAppIcon: string}) {
         minWidth: MINIMUM_WINDOW_WIDTH,
         minHeight: MINIMUM_WINDOW_HEIGHT,
         frame: !isFramelessWindow(),
-        fullscreen: savedWindowState.fullscreen,
+        fullscreen: isFullScreen(),
         titleBarStyle: 'hidden' as const,
         trafficLightPosition: {x: 12, y: 12},
         backgroundColor: '#fff', // prevents blurry text: https://electronjs.org/docs/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do

src/renderer/components/SettingsPage.tsx

@@ -68,8 +68,10 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
     useSpellCheckerRef: React.RefObject<HTMLInputElement>;
     spellCheckerURLRef: React.RefObject<HTMLInputElement>;
     enableHardwareAccelerationRef: React.RefObject<HTMLInputElement>;
+    startInFullscreenRef: React.RefObject<HTMLInputElement>;
     autoCheckForUpdatesRef: React.RefObject<HTMLInputElement>;
 
+
     saveQueue: SaveQueueItem[];
 
     selectedSpellCheckerLocales: Array<{label: string; value: string}>;
@@ -99,6 +101,7 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
         this.showUnreadBadgeRef = React.createRef();
         this.useSpellCheckerRef = React.createRef();
         this.enableHardwareAccelerationRef = React.createRef();
+        this.startInFullscreenRef = React.createRef();
         this.spellCheckerURLRef = React.createRef();
         this.autoCheckForUpdatesRef = React.createRef();
 
@@ -326,6 +329,13 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
         });
     }
 
+    handleChangeStartInFullscreen = () => {
+        window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'startInFullscreen', data: this.startInFullscreenRef.current?.checked});
+        this.setState({
+            startInFullscreen: this.startInFullscreenRef.current?.checked,
+        });
+    }
+
     saveDownloadLocation = (location: string) => {
         if (!location) {
             return;
@@ -747,6 +757,24 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
             </FormCheck>,
         );
 
+        options.push(
+            <FormCheck
+                key='inputStartInFullScreen'
+            >
+                <FormCheck.Input
+                    type='checkbox'
+                    id='inputStartInFullScreen'
+                    ref={this.startInFullscreenRef}
+                    checked={this.state.startInFullscreen}
+                    onChange={this.handleChangeStartInFullscreen}
+                />
+                {'Open app in fullscreen'}
+                <FormText>
+                    {'If enabled, the Mattermost application will always open in full screen'}
+                </FormText>
+            </FormCheck>,
+        );
+
         options.push(
             <div
                 style={settingsPage.container}

src/types/config.ts

@@ -40,7 +40,7 @@ export type ConfigV3 = {
     downloadLocation: string;
     spellCheckerURL?: string;
     lastActiveTeam?: number;
-
+    startInFullscreen?: boolean;
     autoCheckForUpdates?: boolean;
     alwaysMinimize?: boolean;
     alwaysClose?: boolean;

src/types/global.d.ts

@@ -10,6 +10,7 @@ declare namespace NodeJS {
             disableDevMode?: boolean;
             dataDir?: string;
             version?: boolean;
+            fullscreen?: boolean;
         };
     }
 }