Added a "keep screen on" option using NoSleep.js (closes #427)

changelog/55_UNRELEASED_2019-xx-xx.md

@@ -29,6 +29,8 @@
 - New endpoints for the stock transfer & stock entry edit capabilities mentioned above
 
 ### General & other improvements/fixes
+- It's now possible to keep the screen on always or when a "fullscreen-card" (e. g. used for recipes) is displayed
+  - New user options in the display settings menu in the top right corner (default is disabled)
 - Fixed that also the first column (where in most tables only buttons/menus are displayed) in tables was searched when using the general search field
 - Fixed that the meal plan menu entry (sidebar) was not visible when the calendar was disabled (`FEATURE_FLAG_CALENDAR`) (thanks @lwis)
 - Slightly optimized table loading & search performance (thanks @lwis)

config-dist.php

@@ -75,6 +75,10 @@
 DefaultUserSetting('auto_night_mode_time_range_goes_over_midnight', true); // If the time range above goes over midnight
 DefaultUserSetting('currently_inside_night_mode_range', false); // If we're currently inside of night mode time range (this is not user configurable, but stored as a user setting because it's evaluated client side to be able to use the client time instead of the maybe different server time)
 
+# Keep screen on settings
+DefaultUserSetting('keep_screen_on', false); // Keep the screen always on
+DefaultUserSetting('keep_screen_on_when_fullscreen_card', false); // Keep the screen on when a "fullscreen-card" is displayed
+
 # Stock settings
 DefaultUserSetting('product_presets_location_id', -1); // Default location id for new products (-1 means no location is preset)
 DefaultUserSetting('product_presets_product_group_id', -1); // Default product group id for new products (-1 means no product group is preset)

localization/strings.pot

@@ -1609,3 +1609,9 @@ msgstr ""
 
 msgid "Camera access is on only possible when supported and allowed by your browser and when grocy is served via a secure (https://) connection"
 msgstr ""
+
+msgid "Keep screen on"
+msgstr ""
+
+msgid "Keep screen on while displaying a \"fullscreen-card\""
+msgstr ""

package.json

@@ -26,6 +26,7 @@
 		"jquery-serializejson": "^2.9.0",
 		"jquery-ui-dist": "^1.12.1",
 		"moment": "^2.24.0",
+		"nosleep.js": "^0.9.0",
 		"quagga": "^0.12.1",
 		"sprintf-js": "^1.1.2",
 		"startbootstrap-sb-admin": "^4.0.0",

public/js/grocy_wakelockhandling.js

@@ -0,0 +1,72 @@
+Grocy.WakeLock = { };
+Grocy.WakeLock.NoSleepJsIntance = null;
+Grocy.WakeLock.InitDone = false;
+
+$("#keep_screen_on").on("change", function()
+{
+	var value = $(this).is(":checked");
+	if (value)
+	{
+		Grocy.WakeLock.Enable();
+	}
+	else
+	{
+		Grocy.WakeLock.Disable();
+	}
+});
+
+Grocy.WakeLock.Enable = function()
+{
+	if (Grocy.WakeLock.NoSleepJsIntance === null)
+	{
+		Grocy.WakeLock.NoSleepJsIntance = new NoSleep();
+	}
+	Grocy.WakeLock.NoSleepJsIntance.enable();
+	Grocy.WakeLock.InitDone = true;
+}
+
+Grocy.WakeLock.Disable = function()
+{
+	if (Grocy.WakeLock.NoSleepJsIntance !== null)
+	{
+		Grocy.WakeLock.NoSleepJsIntance.disable();
+	}
+}
+
+// Handle "Keep screen on while displaying a fullscreen-card" when the body class "fullscreen-card" has changed
+new MutationObserver(function(mutations)
+{
+	if (BoolVal(Grocy.UserSettings.keep_screen_on_when_fullscreen_card) && !BoolVal(Grocy.UserSettings.keep_screen_on))
+	{
+		mutations.forEach(function(mutation)
+		{
+			if (mutation.attributeName === "class")
+			{
+				var attributeValue = $(mutation.target).prop(mutation.attributeName);
+				if (attributeValue.contains("fullscreen-card"))
+				{
+					Grocy.WakeLock.Enable();
+				}
+				else
+				{
+					Grocy.WakeLock.Disable();
+				}
+			}
+		});
+	}
+}).observe(document.body, {
+	attributes: true
+});
+
+// Enabling NoSleep.Js only works in a user input event handler,
+// so if the user wants to keep the screen on always,
+// do this in on the first click on anything
+$(document).click(function()
+{
+	if (Grocy.WakeLock.InitDone === false && BoolVal(Grocy.UserSettings.keep_screen_on))
+	{
+		Grocy.WakeLock.Enable();
+	}
+
+	Grocy.WakeLock.InitDone = true;
+});

views/layout/default.blade.php

@@ -360,6 +360,23 @@
 							</div>
 							<input class="form-check-input d-none user-setting-control" type="checkbox" id="currently-inside-night-mode-range" data-setting-key="currently_inside_night_mode_range">
 						</div>
+						<div class="dropdown-divider"></div>
+						<div class="dropdown-item">
+							<div class="form-check">
+								<input class="form-check-input user-setting-control" type="checkbox" id="keep_screen_on" data-setting-key="keep_screen_on">
+								<label class="form-check-label" for="keep_screen_on">
+									{{ $__t('Keep screen on') }}
+								</label>
+							</div>
+						</div>
+						<div class="dropdown-item">
+							<div class="form-check">
+								<input class="form-check-input user-setting-control" type="checkbox" id="keep_screen_on_when_fullscreen_card" data-setting-key="keep_screen_on_when_fullscreen_card">
+								<label class="form-check-label" for="keep_screen_on_when_fullscreen_card">
+									{{ $__t('Keep screen on while displaying a "fullscreen-card"') }}
+								</label>
+							</div>
+						</div>
 					</div>
 				</li>
 				@endif
@@ -430,10 +447,12 @@
 	<script src="{{ $U('/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js?v=', true) }}{{ $version }}"></script>
 	@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy_wakelockhandling.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_nightmode.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_clock.js?v=', true) }}{{ $version }}"></script>
 	@stack('pageScripts')

yarn.lock

@@ -557,6 +557,11 @@ node-bitmap@0.0.1:
   resolved "https://registry.yarnpkg.com/node-bitmap/-/node-bitmap-0.0.1.tgz#180eac7003e0c707618ef31368f62f84b2a69091"
   integrity sha1-GA6scAPgxwdhjvMTaPYvhLKmkJE=
 
+nosleep.js@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/nosleep.js/-/nosleep.js-0.9.0.tgz#0f1371b81dc182e3b6bbdb837e880f16db9d7163"
+  integrity sha512-qLOl2MmuGOPZY7Exi0kYJSCr2e9IcAtOykOo7hXUGAoaMC1Iqj0m+Aj2REuay68mDkhbc5CoA4ccUvcZI175Kw==
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"