feat: implement custom accessible tooltips with keyboard shortcuts for the video player (#4787)

* feat(video-player): add keyboard shortcut tooltips to control bar

- Display keyboard shortcuts (e.g., "Play (Space)") in button tooltips.
- Inject shortcut suffixes into Video.js language strings dynamically.
- Add CSS to style `.vjs-control-text` as a floating tooltip on hover.
- Enable `noUITitleAttributes` to disable native browser tooltips and prevent duplication.

* fix(player-control-tooltips): Prevent player control tooltips from displaying incorrectly in mobile

- Implement mobile touch detection to set 'player-data-is-touch' attribute on body, preventing sticky hover states.

* chore(linting): fix linting and styling errors in VideoJS

* Improve hover detection for tooltips

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/video/VideoJS/VideoJS.module.scss

@@ -2,4 +2,70 @@
 
 .player {
   width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  @media (hover: hover) and (pointer: fine) {
+    :global(.vjs-control-bar .vjs-control:hover .vjs-control-text) {
+      /* This ensures the text isn't hidden by default VJS accessibility rules */
+      display: block !important;
+      visibility: visible !important;
+      width: auto !important;
+      height: auto !important;
+      /* stylelint-disable-next-line property-no-deprecated */
+      clip: auto !important; /* necessary to make the control text visible */
+      margin: 0 !important;
+
+      /* Base tooltip styles */
+      position: absolute;
+      bottom: 45px;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      z-index: 1000;
+      padding: 5px 10px;
+      background: rgb(20 20 20 / 90%);
+      color: #fff;
+      border-radius: 4px;
+      font-size: 12px;
+      line-height: 1.2;
+      pointer-events: none; /* Prevents tooltip from flickering when mouse hits it */
+
+      /* If there's no text content, it stays invisible */
+      &:empty {
+        display: none !important;
+      }
+    }
+
+    /* Prevent the "Mute"/"Unmute" tooltip from showing when interacting with the volume slider.
+    * Since the slider is part of the volume panel container, hovering it technically
+    * counts as hovering the mute control context. We force-hide the tooltip 
+    * unless the cursor is explicitly over the mute button icon itself.
+    */
+    :global(.vjs-volume-panel:hover .vjs-mute-control:not(:hover) .vjs-control-text) {
+      display: none !important;
+    }
+
+    /* Move the first and last element slightly right and left to prevent them from overflowing respectively */
+    :global(.vjs-control:first-child:hover .vjs-control-text) {
+      left: 0;
+      transform: translateX(6px);
+
+      &::after {
+        left: 15%;
+      }
+    }
+
+    :global(.vjs-control:last-child:hover .vjs-control-text) {
+      left: auto;
+      right: 0;
+      transform: translateX(-6px);
+
+      &::after {
+        left: auto;
+        right: 15%;
+        transform: translateX(50%);
+      }
+    }
+  }
 }

web/components/video/VideoJS/VideoJS.tsx

@@ -1,11 +1,23 @@
 import React, { FC } from 'react';
 import videojs from 'video.js';
 import type VideoJsPlayer from 'video.js/dist/types/player';
+import { useTranslation } from 'next-export-i18n';
 
 import styles from './VideoJS.module.scss';
 
 require('video.js/dist/video-js.css');
 
+const SHORTCUT_SUFFIXES: Record<string, string> = {
+  Play: ' (Space)',
+  Pause: ' (Space)',
+  Mute: ' (m)',
+  Unmute: ' (m)',
+  Fullscreen: ' (f)',
+  'Non-Fullscreen': ' (f)',
+  'Picture-in-Picture': ' (i)',
+  'Exit Picture-in-Picture': ' (i)',
+};
+
 export type VideoJSProps = {
   options: any;
   onReady: (player: VideoJsPlayer, vjsInstance: typeof videojs) => void;
@@ -14,14 +26,30 @@ export type VideoJSProps = {
 export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
   const videoRef = React.useRef<HTMLVideoElement | null>(null);
   const playerRef = React.useRef<VideoJsPlayer | null>(null);
+  const { t } = useTranslation();
+
+  const addShortcutsToLanguage = (vjs: typeof videojs, langCode: string) => {
+    const updates: Record<string, string> = {};
+    Object.keys(SHORTCUT_SUFFIXES).forEach(key => {
+      const currentLabel = key;
+      const suffix = SHORTCUT_SUFFIXES[key];
+      updates[key] = t(`${currentLabel}${suffix}`);
+    });
+    vjs.addLanguage(langCode, updates);
+  };
 
   React.useEffect(() => {
     // Make sure Video.js player is only initialized once
     if (!playerRef.current) {
       const videoElement = videoRef.current;
 
+      addShortcutsToLanguage(videojs, 'en');
+      const finalOptions = {
+        ...options,
+        noUITitleAttributes: true, // Prevents videojs from adding a title attribute to UI elements, thus preventing "double tooltips".
+      };
       // eslint-disable-next-line no-multi-assign
-      const player: VideoJsPlayer = (playerRef.current = videojs(videoElement, options, () => {
+      const player: VideoJsPlayer = (playerRef.current = videojs(videoElement, finalOptions, () => {
         console.debug('player is ready');
         return onReady && onReady(player, videojs);
       }));