Support wake lock on recipe page to prevent device from sleeping

[Rycieos]

My primary use of OpenEats is on my phone or laptop while cooking. Far too often my screen turns off while my hands are dirty, forcing me to waste time trying to get my screen back on. I suggest implementing a Wake Lock feature on the recipe page to prevent the screen from turning off.

The Screen Wake Lock API is very new, but looks to be the best way to do this. Mozilla's page: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API Google's page: https://web.dev/wake-lock/

It is unfortunately only supported by Chrome at this point, but since Mozilla has an API page on it, I would assume that Firefox supports it in dev builds. So Firefox support can't be that far out.

According to the docs, it should be as simple as adding handlers like this to the Recipe view page:

if ('wakeLock' in navigator) {
  // The wake lock sentinel.
  let wakeLock = null;

  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request();
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };

  await requestWakeLock();

  // The screen wake lock will automatically be released when you minimize a tab or
  // window, or switch away from a tab or window where a screen wake lock is active.
  const handleVisibilityChange = async () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
      await requestWakeLock();
    }
  };

  document.addEventListener('visibilitychange', handleVisibilityChange);
}