Function handleKeyPress

src/components/VideoPlayer2.tsx:367–560

(event: KeyboardEvent)

    }
    let volumeSetTimeout: ReturnType<typeof setInterval> | null = null;
    const handleKeyPress = (event: KeyboardEvent) => {
      const isShiftPressed = event.shiftKey;
      const isModifierPressed = event.metaKey || event.ctrlKey || event.altKey;
      const activeElement = document.activeElement;

      const tracks: TextTrackList = player.textTracks();

      if (
        activeElement?.tagName.toLowerCase() === 'input' ||
        activeElement?.tagName.toLowerCase() === 'textarea' ||
        isModifierPressed
      ) {
        return; // Do nothing if the active element is an input or textarea
      }
      if (event.code === 'KeyT') {
        player.playbackRate(2);
      }
      if (isShiftPressed) {
        const currentIndexPeriod: number = PLAYBACK_RATES.indexOf(
          player.playbackRate(),
        );
        const newIndexPeriod: number =
          currentIndexPeriod !== PLAYBACK_RATES.length - 1
            ? currentIndexPeriod + 1
            : currentIndexPeriod;
        const currentIndexComma = PLAYBACK_RATES.indexOf(player.playbackRate());
        const newIndexComma =
          currentIndexComma !== 0 ? currentIndexComma - 1 : currentIndexComma;
        const currentIndexUp = VOLUME_LEVELS.indexOf(player.volume());
        const newIndexUp =
          currentIndexUp !== VOLUME_LEVELS.length - 1
            ? currentIndexUp + 1
            : currentIndexUp;
        const currentIndexDown = VOLUME_LEVELS.indexOf(player.volume());
        const newIndexDown =
          currentIndexDown !== 0 ? currentIndexDown - 1 : currentIndexDown;
        switch (event.code) {
          case 'Period': // Increase playback speed
            player.playbackRate(PLAYBACK_RATES[newIndexPeriod]);
            event.stopPropagation();
            break;
          case 'Comma': // Decrease playback speed
            player.playbackRate(PLAYBACK_RATES[newIndexComma]);
            event.stopPropagation();
            break;
          case 'ArrowUp': // Increase volume
            videoRef.current?.children[0].children[6].children[3].classList.add(
              'vjs-hover',
            );
            if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
            volumeSetTimeout = setTimeout(() => {
              videoRef.current?.children[0].children[6].children[3].classList.remove(
                'vjs-hover',
              );
            }, 1000);
            player.volume(VOLUME_LEVELS[newIndexUp]);
            event.stopPropagation();
            break;