New Size Mode: Maximize Popout Player Window (#357)

* add new option and corresponding logic to maximize popout player window; closes #354
* tweak verbiage of maximized size mode option description
* update Options documentation page and screenshots

app/_locales/en/messages.json

@@ -119,6 +119,14 @@
   "OptionsBehaviorLoopDescription": {
     "message": "This setting controls whether or not the video(s) in the popout player loop infinitely (until the popout player is closed). <strong>The default for this setting is disabled.</strong>"
   },
+  "OptionsSettingDisabled": {
+    "message": "This setting is not available when the following setting(s) are enabled: <strong>$SETTINGS$</strong>",
+    "placeholders": {
+      "settings": {
+        "content": "$1"
+      }
+    }
+  },
   "OptionsSettingsNotAvailableForTab": {
     "message": "These settings do not apply when the popout player is configured to open in a new tab in the current browser window."
   },
@@ -151,6 +159,12 @@
   "OptionsSizeModeCustomDescription": {
     "message": "Use this setting to specify dimensions (either in pixels or percentages) for the popout player window."
   },
+  "OptionsSizeModeMaximizedLabel": {
+    "message": "Maximize the Popout Player Window"
+  },
+  "OptionsSizeModeMaximizedDescription": {
+    "message": "The popout player window will be maximized (NOT fullscreen) automatically <em>immediately after</em> it is positioned."
+  },
   "PositionModeLabel": {
     "message": "Popout Player Position"
   },

app/scripts/background/popout.js

@@ -214,7 +214,14 @@ export const OpenPopoutPlayerInWindow = async (
     window = await browser.windows.update(window.id, position);
   }
 
-  if (openInBackground) {
+  if ((await Options.GetLocalOption("size", "mode")) === "maximized") {
+    console.log(
+      "[Background] OpenPopoutPlayerInWindow() :: Maximizing Popout Player window"
+    );
+    window = await browser.windows.update(window.id, {
+      state: "maximized",
+    });
+  } else if (openInBackground) {
     if (!isNaN(originTabId) && parseInt(originTabId, 10) > 0) {
       // try to move the original window back to the foreground
       console.log(

app/scripts/helpers/constants.js

@@ -40,7 +40,12 @@ export const OPTIONS_BEHAVIOR_CONTROLS_VALUES = [
   "standard",
   "extended",
 ];
-export const OPTIONS_SIZE_MODE_VALUES = ["current", "previous", "custom"];
+export const OPTIONS_SIZE_MODE_VALUES = [
+  "current",
+  "previous",
+  "custom",
+  "maximized",
+];
 export const OPTIONS_SIZE_UNITS_VALUES = ["pixels", "percentage"];
 export const OPTIONS_POSITION_MODE_VALUES = ["auto", "previous", "custom"];
 

app/scripts/options/components/AdvancedTab.jsx

@@ -17,7 +17,7 @@ import SettingsIcon from "@material-ui/icons/Settings";
 
 import TabPanelHeader from "./TabPanelHeader";
 
-import { useOptionsForDomain } from "../hooks/useOptions";
+import { useOptions, useOptionsForDomain } from "../hooks/useOptions";
 
 import { useDebounce } from "react-use";
 
@@ -29,13 +29,23 @@ export default function AdvancedTab() {
   const { options, setOption } = useOptionsForDomain(DOMAIN);
   console.log("AdvancedTab ~ options", options);
 
+  const { getOptionForDomain } = useOptions();
+  const canOpenInBackground =
+    getOptionForDomain("size", "mode") !== "maximized";
+
   const [isFirefox, setIsFirefox] = React.useState(false);
   React.useEffect(() => {
     (async () => {
       setIsFirefox(await IsFirefox());
     })();
   }, []);
 
+  React.useEffect(() => {
+    if (!canOpenInBackground) {
+      setOption("background", false);
+    }
+  }, [canOpenInBackground]);
+
   const handlePermissionSwitchToggle = async (
     optionName,
     permissionsRequest,
@@ -121,7 +131,7 @@ export default function AdvancedTab() {
   function BackgroundTabControl() {
     return (
       <>
-        <FormControl>
+        <FormControl disabled={!canOpenInBackground}>
           <FormControlLabel
             label={browser.i18n.getMessage(
               "OptionsAdvancedOpenInBackgroundLabel"
@@ -137,14 +147,27 @@ export default function AdvancedTab() {
               />
             }
           />
-          <Typography
-            color="textSecondary"
-            dangerouslySetInnerHTML={{
-              __html: browser.i18n.getMessage(
-                "OptionsAdvancedOpenInBackgroundDescription"
-              ),
-            }}
-          />
+          {canOpenInBackground ? (
+            <Typography
+              color="textSecondary"
+              dangerouslySetInnerHTML={{
+                __html: browser.i18n.getMessage(
+                  "OptionsAdvancedOpenInBackgroundDescription"
+                ),
+              }}
+            />
+          ) : (
+            <Alert severity="warning">
+              <Typography
+                dangerouslySetInnerHTML={{
+                  __html: browser.i18n.getMessage(
+                    "OptionsSettingDisabled",
+                    browser.i18n.getMessage("OptionsSizeModeMaximizedLabel")
+                  ),
+                }}
+              />
+            </Alert>
+          )}
         </FormControl>
       </>
     );

docs/pages/options.html

@@ -128,6 +128,12 @@ <h6>You cannot configure the size of the popout player when using the "Open in a
                         </tbody>
                     </table>
                 </dd>
+
+                <dt>Maximize the Popout Player Window <span class="badge red white-text">New!</span></dt>
+                <dd>
+                    <p>The popout player window will be maximized (NOT fullscreen) automatically <em>immediately after</em> it is positioned.</p>
+                    <p>When you select this setting, the popout player window will be positioned according to the "Popout Player Position" option, then it will be maximized. This should allow you to have the popout player window use the entire screen of a secondary display/monitor.</p>
+                </dd>
             </dl>
         </div>
     </div>
@@ -213,6 +219,7 @@ <h4 class="hide">Advanced Settings</h4>
                 <dt>Open in Background Window/Tab <span class="badge red white-text">New!</span></dt>
                 <dd>
                     <p>Enabling this will cause the popout player to be opened in a background window/tab. <strong>The default for this setting is disabled.</strong></p>
+                    <p><i class="small left material-icons red-text">info</i> <strong>Note:</strong> This setting is not available when using the "Maximize the Popout Player Window" mode.</p>
                 </dd>
 
                 <dt>Use "No Cookie" Version of YouTube <span class="badge red white-text">New!</span></dt>