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.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);
       }));