Add option to prevent sleep on Chrome

backend/static/js/Options.js

@@ -0,0 +1,65 @@
+import Cookies from "./js.cookie.js";
+
+export class BooleanOption {
+  constructor(checkbox, callable, defaultValue) {
+    this.checkbox = checkbox;
+    this.callable = callable;
+    this.defaultValue = defaultValue || false;
+  }
+
+  get() {
+      return this.checkbox.is(':checked')
+  }
+
+  set(value) {
+      this.checkbox.attr('checked', value);
+      this.checkbox.prop('checked', value);
+  }
+
+  call(value) {
+      this.callable(value)
+  }
+
+  selector() {
+      return this.checkbox
+  }
+
+  default() {
+      return this.defaultValue
+  }
+}
+
+export class Options {
+  constructor(options) {
+    this.options = options
+    for (let [name, option] of options) {
+        option.selector().change(function () {
+            const value = option.get();
+            Cookies.set(name, value, {SameSite: "Strict"})
+            option.call(value)
+        })
+        let value = Cookies.get(name)
+        if (value === undefined) {
+            value = option.default()
+            Cookies.set(name, value, {SameSite: "Strict"})
+        }
+        option.set(value)
+        option.call(value)
+    }
+  }
+
+  get(name) {
+      return this.options.get(name).get()
+  }
+  set(name, value) {
+      this.options.get(name).set(value)
+  }
+
+  call(name, value) {
+      this.options.get(name).call(value)
+  }
+
+  selector(name) {
+      return this.options.get(name).selector()
+  }
+}

backend/templates/songs/index.html

@@ -14,15 +14,21 @@
             defer>
     </script>
     <script type="module" src="{% static 'js/js.cookie.js' %}"></script>
-
+    <script type="module" src="{% static 'js/Options.js' %}"></script>
     <link rel="stylesheet" type="text/css" href="{% sass_src 'datatables.sass' %}">
 {%  endblock %}
 {% block extra_options %}
-<div class="form-check form-check-inline ml-2">
-  <label class="form-check-label" for="hideChords" id="defaultCheckLabel">
+<div class="form-check form-check-inline mt-2 ml-2 text-left">
+  <input class="form-check-input ml-2" type="checkbox" value="" id="hideChords">
+  <label class="form-check-label" for="hideChords">
     {% trans "Hide chords" %}
   </label>
-  <input class="form-check-input ml-2" type="checkbox" value="" id="hideChords">
+</div>
+<div class="form-check form-check-inline mt-2 ml-2 text-left">
+  <input class="form-check-input ml-2" type="checkbox" value="" id="preventSleep">
+  <label class="form-check-label" for="preventSleep">
+    {% trans "Prevent sleep" %}
+  </label>
 </div>
 {% endblock %}
 {% block body %}
@@ -80,7 +86,9 @@ <h6 class="d-inline" ><%:author%></h6>
         <span class="icon-down-open"></span>
     </button>
     <script type="module">
-    import Cookies from "{% static 'js/js.cookie.js' %}"
+    import {Options, BooleanOption} from "{% static 'js/Options.js' %}"
+    const canWakeLock = () => 'wakeLock' in navigator;
+
     $.views.settings.delimiters("<%", "%>");
     $.fn.DataTable.ext.pager.numbers_length = 5;
     $.templates("song", "#songTemplate")
@@ -161,26 +169,48 @@ <h6 class="d-inline" ><%:author%></h6>
         });
 
         let hidden = false
-        const checkbox = $("#hideChords")
-        checkbox.change(function() {
-            if ($(this).is(':checked') && !hidden) {
+        function hideChords(value) {
+             if (value && !hidden) {
                 $(".chord").hide()
                 hidden = true
-                Cookies.set("hide_chords", true, {SameSite: "Strict"})
             } else {
                 hidden = false
                 $(".chord").show()
-                Cookies.set("hide_chords", false, {SameSite: "Strict"})
             }
-        })
+        }
 
-        let hide_chords = Cookies.get("hide_chords");
-        if (hide_chords === undefined) {
-            Cookies.set("hide_chords", false, {SameSite: "Strict"})
-            hide_chords = false
+        let wakelock;
+        async function preventSleep(value) {
+            if(!canWakeLock()) return;
+            if (value) {
+              try {
+                wakelock = await navigator.wakeLock.request();
+                wakelock.addEventListener('release', () => {
+                  console.log('Screen Wake State Locked:', !wakelock.released);
+                });
+                console.log('Screen Wake State Locked:', !wakelock.released);
+              } catch(e) {
+                console.error('Failed to lock wake state with reason:', e.message);
+              }
+            } else {
+                if(wakelock) wakelock.release();
+                wakelock = null;
+            }
+        }
+
+        const config = new Map([
+            ["hide_chords", new BooleanOption($("#hideChords"), hideChords, false)],
+            ["prevent_sleep", new BooleanOption($("#preventSleep"), function(value) {
+                preventSleep(value).then()
+            }, false)]
+        ])
+        const options = new Options(config)
+
+        if (!canWakeLock()) {
+            options.set("prevent_sleep", false)
+            options.selector("prevent_sleep").attr('disabled', 'disabled');
         }
-        checkbox.prop('checked', hide_chords === 'true');
-        checkbox.change()
+
 
         table.on( 'draw', function () {
             if (hidden) {

frontend/templates/base/index.html

@@ -63,7 +63,7 @@
                         {% trans "Options" %}
                     </a>
                     <div class="dropdown-menu" aria-labelledby="languageDropdown" id="options">
-                        <div class="form-group d-flex ml-2 mr-2 ">
+                        <div class="form-group d-flex ml-2 mr-2 mb-0">
                             <label for="language" class="mr-2">
                                 {% trans "Language" %}
                             </label>
@@ -80,7 +80,10 @@
                                 <input name="language" type=hidden value={{ locale.code }}>
                             </form>
                         {% endfor %}
-                        {% block extra_options %}{% endblock %}
+                        <hr class="mt-2 mb-1">
+                        <div class="d-flex flex-column">
+                            {% block extra_options %}{% endblock %}
+                        </div>
                     </div>
                 </li>
             </ul>