[#80] Show a notification when caps lock is on

Author: cpiber

src/_locales/de/messages.json

@@ -359,6 +359,10 @@
     "message": "Frame zurück",
     "description": "Notification text für 'frame back' Aktion"
   },
+  "playerCaps": {
+    "message": "Achtung: Caps-Lock ist aktiv, manche Tastenkombinationen werden nicht funktionieren",
+    "description": "Notification text für wenn CapsLock aktiv"
+  },
   "playerFrameForward": {
     "message": "Frame nach vorne",
     "description": "Notification text für 'frame back' Aktion"

src/_locales/en/messages.json

@@ -363,6 +363,10 @@
     "message": "Jump frame forward",
     "description": "Notification text for 'frame back' action"
   },
+  "playerCaps": {
+    "message": "Warning: Caps-Lock is enabled, some keybinds may not work properly",
+    "description": "Notification text for when CapsLock is on"
+  },
   "pageAddToQueue": {
     "message": "Add to queue",
     "description": "Hidden hint for queue button."

src/scripts/helpers/shared/notification.ts

@@ -1,25 +1,31 @@
-
 let timeout = 0;
 const stop = () => {
   window.clearTimeout(timeout);
   timeout = 0;
 };
 
-export const notification = (text: string | HTMLElement, duration = 1600, source: HTMLElement = document.body) => {
+export const notification = (text: string | HTMLElement, duration: number | null = 1600, source: HTMLElement = document.body) => {
   if (timeout) {
     stop();
   }
   const existing = source.querySelector<HTMLDivElement>('.notification');
   const n = existing || source.appendChild(document.createElement('div'));
   n.classList.add('notification');
   const content = typeof text === 'string' ? document.createTextNode(text) : text;
-  n.replaceChildren(n.appendChild(content));
+  n.replaceChildren(content);
+
+  const hide = () => {
+    n.classList.remove('show');
+    stop();
+  };
 
   const show = () => {
     n.classList.add('show');
-    timeout = window.setTimeout(() => (n.classList.remove('show'), stop()), duration);
+    if (duration !== null)
+      timeout = window.setTimeout(hide, duration);
   };
   // when creating a new element, make sure it first has its position outside the viewport, to play animation
   if (existing === null) window.setTimeout(show, 1);
   else show();
+  return hide;
 };

src/scripts/page/player.ts

@@ -64,6 +64,7 @@ export const init = async () => {
   msgs['playerFrameBack'] = await sendMessage(Message.GET_MESSAGE, { message: 'playerFrameBack' });
   msgs['playerFrameForward'] = await sendMessage(Message.GET_MESSAGE, { message: 'playerFrameForward' });
   msgs['playerSpeed'] = await sendMessage(Message.GET_MESSAGE, { message: 'playerSpeed' });
+  msgs['playerCaps'] = await sendMessage(Message.GET_MESSAGE, { message: 'playerCaps' });
 
   onStorageChange(changed => {
     console.dev.log('Options changed');
@@ -235,7 +236,16 @@ export const updatePlayerControls = (player: Player, canNext: boolean, canPrev:
   toggleQueueButton(player, false, canPrev);
 };
 
+let capsHide: () => void | undefined = undefined;
 const keydownHandler = (e: KeyboardEvent) => {
+  let isCaps = e.getModifierState('CapsLock');
+  if (e.key === 'CapsLock') isCaps = !isCaps; // modifier state is updated after the event
+  if (isCaps) capsHide = notification(msgs['playerCaps'], null);
+  else {
+    capsHide?.();
+    capsHide = undefined;
+  }
+
   if (e.altKey || e.ctrlKey || e.metaKey)
     return;
   if (document.activeElement.tagName === 'INPUT')