Fix some default keyboard shortcuts + change some other behaviour about kbd

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.3.996",
+  "version": "6.3.997",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.3.996",
+  "version": "6.3.997",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/common/enums/InputHandlingMode.enum.ts

@@ -0,0 +1,5 @@
+export enum InputHandlingMode {
+  Disabled = -1,
+  Default = 0,
+  Enabled = 1,   // enable, but don't override site shortcuts
+}

src/common/interfaces/SettingsInterface.ts

@@ -8,6 +8,7 @@ import ExtensionMode from '@src/common/enums/ExtensionMode.enum'
 import StretchType from '@src/common/enums/StretchType.enum'
 import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum'
 import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
+import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum';
 
 export enum ExtensionEnvironment {
   Normal = ExtensionMode.All,
@@ -344,7 +345,7 @@ interface SettingsInterface {
     conditionalDifferencePercent: number  // black bars less than this wide will trigger stretch
                                         // if mode is set to '1'. 1.0=100%
   },
-  kbm: {
+  kbm: {      // TODO: we dont use this anymore
     enabled: boolean,          // if keyboard/mouse handler service will run
     keyboardEnabled: boolean,  // if keyboard shortcuts are processed
     mouseEnabled: boolean,     // if mouse movement is processed
@@ -439,7 +440,7 @@ interface SettingsInterface {
 export interface SiteSettingsInterface {
   enable: ExtensionMode;
   enableAard: ExtensionMode;
-  enableKeyboard: ExtensionMode;
+  enableKeyboard: InputHandlingMode;
   enableUI: ExtensionMode;
 
   applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy; // presumed to be 'Use as default' if not defined

src/common/misc/Donate.vue

@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <p><i><a href="https://www.youtube.com/watch?v=Mn3YEJTSYs8&feature=youtu.be&t=770" target='_blank'>...</a> but as is normal, you can't use a free extensions without the developers begging for money. It's the bi-daily beggathon here on ... wherever here is.</i>
-    </p>
-    <p>
-      Jokes and references few will get aside, developing this extension does take a decent amount of time, motivation, carefully calibrated quantities 
-      of alcohol and enough coffee to bankrupt a small nation.
-    </p>
-    <p>If you want to buy me a beer or bankroll my caffeine addiction, you can do so by <a href="https://paypal.me/tamius">clicking here</a>. All donations are appreciated.
-    </p>
-  </div>
-</template>
-
-
-<script>
-
-</script>

src/ext/conf/ExtConfPatches.ts

@@ -14,6 +14,7 @@ import LegacyExtensionMode from '../../common/enums/LegacyExtensionMode.enum';
 import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 import { PlayerDetectionMode } from '../../common/enums/PlayerDetectionMode.enum';
 import { SiteSupportLevel } from '../../common/enums/SiteSupportLevel.enum';
+import { InputHandlingMode } from '../../common/enums/InputHandlingMode.enum';
 
 
 const ExtensionConfPatch = Object.freeze([
@@ -312,7 +313,13 @@ const ExtensionConfPatch = Object.freeze([
         logger.log('updateFn', '\n\n     ... migrating default enable-state for site', key);
         userOptions.sites[key].enable = convertLegacyExtensionMode(userOptions.sites[key].enable as any);
         userOptions.sites[key].enableAard = convertLegacyExtensionMode(userOptions.sites[key].enableAard as any);
-        userOptions.sites[key].enableKeyboard = convertLegacyExtensionMode(userOptions.sites[key].enableKeyboard as any);
+
+        if (key === '@global') {
+          userOptions.sites['@global'].enableKeyboard = userOptions.kbm.enabled && userOptions.kbm.keyboardEnabled ? InputHandlingMode.Enabled : InputHandlingMode.Disabled;
+        } else {
+          userOptions.sites[key].enableKeyboard = InputHandlingMode.Default;
+        }
+
         userOptions.sites[key].enableUI = convertLegacyExtensionMode(
           userOptions.sites[key].enableUI ?? (key === '@global' ? ExtensionMode.FullScreen : ExtensionMode.Default) as any
         );
@@ -460,6 +467,22 @@ const ExtensionConfPatch = Object.freeze([
 
       logger.log('updateFn', 'Migration complete. New site settings:', userOptions.sites);
     }
+  }, {
+    forVersion: '6.3.997',
+    updateFn: (userOptions: SettingsInterface, defaultOptions: SettingsInterface, logger?) => {
+
+      // default zoom key combinations that involved the 'shift' key should have
+      // shortcut.key in uppercase, but they didn't.
+      for (const command of userOptions.commands?.zoom) {
+        if (command.shortcut) {
+          if (command.shortcut.shiftKey) {
+            if (command.shortcut.key.toUpperCase() === command.shortcut.code.charAt(3)) {
+              command.shortcut.key = command.shortcut.key.toUpperCase();
+            }
+          }
+        }
+      }
+    }
   }
 
 ]);

src/ext/conf/ExtensionConf.ts

@@ -14,6 +14,7 @@ import { AardPollingOptions } from '../lib/aard/enums/aard-polling-options.enum'
 import { AardSubtitleCropMode } from '../lib/aard/enums/aard-subtitle-crop-mode.enum';
 import { SiteSupportLevel } from '../../common/enums/SiteSupportLevel.enum';
 import { PlayerDetectionMode } from '../../common/enums/PlayerDetectionMode.enum';
+import { InputHandlingMode } from '../../common/enums/InputHandlingMode.enum';
 
 if(Debug.debug)
   console.log("Loading: ExtensionConf.js");
@@ -805,7 +806,7 @@ const ExtensionConf: SettingsInterface = {
                                             //      #s   — only available for specific site
       enable: ExtensionMode.Disabled,
       enableAard: ExtensionMode.Theater,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Enabled,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -843,7 +844,7 @@ const ExtensionConf: SettingsInterface = {
 
       enable: ExtensionMode.Default,
       enableAard: ExtensionMode.Default,
-      enableKeyboard: ExtensionMode.Default,
+      enableKeyboard: InputHandlingMode.Enabled,
       enableUI: ExtensionMode.Default,
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Default,
       overrideWhenEmbedded: EmbeddedContentSettingsOverridePolicy.Default,
@@ -880,7 +881,7 @@ const ExtensionConf: SettingsInterface = {
     "www.youtube.com": {
       enable: ExtensionMode.All,
       enableAard: ExtensionMode.All,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI:  ExtensionMode.Default,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -907,7 +908,7 @@ const ExtensionConf: SettingsInterface = {
     "www.youtube-nocookie.com": {
       enable: ExtensionMode.All,
       enableAard: ExtensionMode.All,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -935,7 +936,7 @@ const ExtensionConf: SettingsInterface = {
     "www.netflix.com" : {
       enable: ExtensionMode.Theater,
       enableAard: ExtensionMode.Disabled,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI:  ExtensionMode.All,
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
       override: false,
@@ -960,7 +961,7 @@ const ExtensionConf: SettingsInterface = {
     "www.disneyplus.com" : {
       enable: ExtensionMode.Theater,
       enableAard: ExtensionMode.Theater,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -989,7 +990,7 @@ const ExtensionConf: SettingsInterface = {
     "www.twitch.tv": {
       enable: ExtensionMode.All,
       enableAard: ExtensionMode.All,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -1013,7 +1014,7 @@ const ExtensionConf: SettingsInterface = {
     "old.reddit.com" : {
       enable: ExtensionMode.Disabled,
       enableAard: ExtensionMode.Disabled,
-      enableKeyboard: ExtensionMode.Disabled,
+      enableKeyboard: InputHandlingMode.Disabled,
       enableUI: ExtensionMode.Disabled,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
@@ -1023,7 +1024,7 @@ const ExtensionConf: SettingsInterface = {
     "www.reddit.com" : {
       enable: ExtensionMode.Disabled,
       enableAard: ExtensionMode.Disabled,
-      enableKeyboard: ExtensionMode.Disabled,
+      enableKeyboard: InputHandlingMode.Disabled,
       enableUI: ExtensionMode.Disabled,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
@@ -1033,7 +1034,7 @@ const ExtensionConf: SettingsInterface = {
     "imgur.com": {
       enable: ExtensionMode.Disabled,
       enableAard: ExtensionMode.Disabled,
-      enableKeyboard: ExtensionMode.Disabled,
+      enableKeyboard: InputHandlingMode.Disabled,
       enableUI: ExtensionMode.Disabled,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
@@ -1043,7 +1044,7 @@ const ExtensionConf: SettingsInterface = {
     "www.wakanim.tv": {
       enable: ExtensionMode.All,
       enableAard: ExtensionMode.All,
-      enableKeyboard: ExtensionMode.All,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -1066,7 +1067,7 @@ const ExtensionConf: SettingsInterface = {
     "app.plex.tv": {
       enable: ExtensionMode.Theater,
       enableAard: ExtensionMode.Theater,
-      enableKeyboard: ExtensionMode.Theater,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
@@ -1076,7 +1077,7 @@ const ExtensionConf: SettingsInterface = {
     "metaivi.com": {
       enable: ExtensionMode.Theater,
       enableAard: ExtensionMode.Theater,
-      enableKeyboard: ExtensionMode.Theater,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
       type: SiteSupportLevel.CommunitySupport,
@@ -1085,7 +1086,7 @@ const ExtensionConf: SettingsInterface = {
     "piped.kavin.rocks": {
       enable: ExtensionMode.Theater,
       enableAard: ExtensionMode.Theater,
-      enableKeyboard: ExtensionMode.Theater,
+      enableKeyboard: InputHandlingMode.Default,
       enableUI: ExtensionMode.FullScreen,
 
       applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,

src/ext/lib/kbm/KbmBase.ts

@@ -1,3 +1,4 @@
+import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum';
 import EventBus, { EventBusCommand } from '../EventBus';
 import { ComponentLogger } from '../logging/ComponentLogger';
 import Settings from '../settings/Settings';
@@ -30,6 +31,7 @@ export class KbmBase {
 
   constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: ComponentLogger) {
     this.logger = logger;
+    this.siteSettings = siteSettings;
     this.settings = settings;
     this.eventBus = eventBus;
   }
@@ -78,10 +80,17 @@ export class KbmBase {
     // way, otherwise we can't remove event listener
     // https://stackoverflow.com/a/19507086
 
-    for (const ev of this.listenFor) {
+    const enableInput = this.siteSettings.data.enableKeyboard;
-      if (ev.startsWith('key') ? this.settings.active.kbm.keyboardEnabled : this.settings.active.kbm.mouseEnabled) {
+
-        document.addEventListener(ev, this);
+    if (enableInput === InputHandlingMode.Disabled) {
+      return;
     }
+
+    for (const ev of this.listenFor) {
+      document.addEventListener(
+        ev,
+        this
+      );
     }
   }
 
@@ -96,6 +105,10 @@ export class KbmBase {
     //   return;
     // }
     // todo: detect if this is enabled or not
+    if (!this.siteSettings) {
+      console.warn('Site settings are undefined!');
+      return;
+    }
     this.addListener();
   }
 

src/ext/lib/kbm/KeyboardHandler.ts

@@ -5,6 +5,7 @@ import KbmBase from './KbmBase';
 import { SiteSettings } from '../settings/SiteSettings';
 import { LogAggregator } from '../logging/LogAggregator';
 import { ComponentLogger } from '../logging/ComponentLogger';
+import { InputHandlingMode } from '../../../common/enums/InputHandlingMode.enum';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading KeyboardHandler");
@@ -96,11 +97,27 @@ export class KeyboardHandler extends KbmBase {
    * @param event
    */
   handleEvent(event) {
-    switch(event.type) {
+    if (this.preventAction(event)) {
-      case 'keyup':
+      this.logger.info('handleKeyup', "we are in a text box or something. Doing nothing.");
-        this.handleKeyup(event);
+      return;
-        break;
     }
+
+    const command = this.hasAction(event);
+
+    if (!command) {
+      return;
+    }
+
+    if (event.type === 'keyup') {
+      this.eventBus.send(command.action, command.arguments);
+    }
+
+    // Doesn't appear to achieve anything on youtube
+    // if (this.siteSettings.data.enableKeyboard === InputHandlingMode.Force) {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    //   event.stopImmediatePropagation();
+    // }
   }
 
   setKeyboardLocal(state: ExtensionMode) {
@@ -115,35 +132,9 @@ export class KeyboardHandler extends KbmBase {
   preventAction(event) {
     var activeElement = document.activeElement;
 
-    // if (this.logger.canLog('keyboard')) {
-    //   this.logger.pause(); // temp disable to avoid recursing;
-    //   const preventAction = this.preventAction(event);
-    //   this.logger.resume(); // undisable
-
-    //   this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
-    //   "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
-    //   "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
-    //   "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text",
-    //   "\nevent.target.isContentEditable? (yes -> prevent):", event.target.isContentEditable,
-    //   "\nis keyboard local disabled? (yes -> prevent):", this.keyboardLocalDisabled,
-    //   // "\nis keyboard enabled in settings? (no -> prevent)", this.settings.keyboardShortcutsEnabled(window.location.hostname),
-    //   "\nwill the action be prevented? (yes -> prevent)", preventAction,
-    //   "\n-----------------{ extra debug info }-------------------",
-    //   "\ntag name? (lowercase):", activeElement.tagName, activeElement.tagName.toLocaleLowerCase(),
-    //   "\nrole:", activeElement.getAttribute('role'),
-    //   "\ntype:", activeElement.getAttribute('type'),
-    //   "\ninsta-fail inputs:", this.inputs,
-    //   "\nevent:", event,
-    //   "\nevent.target:", event.target
-    //   );
-    // }
-
     if (this.keyboardLocalDisabled) {
       return true;
     }
-    // if (!this.settings.keyboardShortcutsEnabled(window.location.hostname)) {
-    //   return true;
-    // }
     if (this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1) {
       return true;
     }
@@ -208,28 +199,31 @@ export class KeyboardHandler extends KbmBase {
   }
 
 
-  handleKeyup(event) {
+  private _actionCache: any = {};
-    this.logger.info('handleKeyup', "we pressed a key: ", event.key , " | keyup: ", event.keyup, "event:", event);
+  hasAction(event) {
+    const actionHash = `${event.code}-${event.ctrlKey ? 1 : 0}${event.shiftKey ? 1 : 0}${event.altKey ? 1 : 0}${event.metaKey ? 1 : 0}${event.key}`;
 
-    try {
+    if (this._actionCache[actionHash] !== undefined) {
-      if (this.preventAction(event)) {
+      return this._actionCache[actionHash];
-        this.logger.info('handleKeyup', "we are in a text box or something. Doing nothing.");
-        return;
     }
 
-      this.logger.info('handleKeyup', "Trying to find and execute action for event. Actions/event:", this.keypressActions, event);
+    const isLatin = this.isLatin(event.key.toLowerCase());
 
-      const isLatin = this.isLatin(event.key);
     for (const command of this.keypressActions) {
       if (this.isActionMatch(command.shortcut, event, isLatin)) {
-          this.eventBus.send(command.action, command.arguments);
+        this._actionCache[actionHash] = command;
-        }
+        return command;
-      }
-    } catch (e) {
-      this.logger.debug('handleKeyup', 'Failed to handle keyup!', e);
       }
     }
 
+    this._actionCache[actionHash] = false;
+    return false;
+  }
+
+  load() {
+    this._actionCache = {};
+    super.load();
+  }
 }
 
 if(process.env.CHANNEL !== 'stable'){

src/ext/lib/settings/SiteSettings.ts

@@ -309,6 +309,7 @@ export class SiteSettings {
   canRunUI(environment: ExtensionEnvironment) {
     return environment <= this.data.enableUI;
   }
+
   canRunKeyboard(environment: ExtensionEnvironment) {
     return environment <= this.data.enableKeyboard;
   }
@@ -385,18 +386,6 @@ export class SiteSettings {
     const env = this._getEnvironment(isTheater, isFullscreen);
     return env <= this.data.enableAard;
   }
-
-  /**
-   * Returns whether keyboard interactions are enabled in current environment
-   * @param isTheater
-   * @param isFullscreen
-   * @returns
-   */
-  isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): boolean {
-    const env = this._getEnvironment(isTheater, isFullscreen);
-    return env <= this.data.enableKeyboard;
-  }
-
   //#endregion
 
   //#region get

src/ext/lib/video-data/ExtensionStatus.ts

@@ -1,3 +1,4 @@
+import { InputHandlingMode } from '../../../common/enums/InputHandlingMode.enum';
 import EventBus from '../EventBus';
 import { SiteSettings } from '../settings/SiteSettings';
 
@@ -30,7 +31,8 @@ export class ExtensionStatus {
   refreshExtensionStatus() {
     const canRun = this.siteSettings.isEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
     const canAard = this.siteSettings.isAardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
-    const canKbd = this.siteSettings.isKeyboardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
+
+    const canKbd = this.siteSettings.data.enableKeyboard > InputHandlingMode.Disabled;
 
     if (canRun) {
       this.eventBus.send('set-extension-active', {});

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.3.996",
+  "version": "6.3.997",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"

src/manifest.v2.json

@@ -1,59 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Ultrawidify",
-  "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "5.99.5",
-  "applications": {
-    "gecko": {
-      "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
-    }
-  },
-  "icons": {
-    "32":"res/icons/uw-32.png",
-    "64":"res/icons/uw-64.png"
-  },
-  "browser_action": {
-    "default_title": "Ultrawidify",
-    "default_popup": "popup/popup.html"
-  },
-
-  "content_scripts": [{
-    "matches": ["*://*/*"],
-    "js": [
-      "common/lib/browser-polyfill.js",
-      "ext/uw.js"
-    ],
-    "all_frames": true
-  }],
-
-  "background": {
-    "persistent": true,
-    "scripts": [
-      "ext/uw-bg.js"
-    ]
-  },
-
-  "options_ui": {
-    "page": "options/options.html",
-    "browser_style": false,
-    "open_in_tab": true
-  },
-
-  "web_accessible_resources": [
-    "./*",
-    "ext/*",
-    "res/fonts/*",
-    "res/css/*",
-    "res/img/settings/about-bg.png",
-    "res/icons/*",
-    "res/img/*",
-  ],
-  "permissions": [
-    "storage",
-    "activeTab",
-    "<all_urls>"
-  ],
-  "optional_permissions": [
-    "downloads"
-  ]
-}

src/ui/components/segments/ExtensionSettings/Panels/SiteExtensionSettings.vue

@@ -99,33 +99,21 @@
             :value="simpleExtensionSettings.enableKeyboard"
             @click="setExtensionMode('enableKeyboard', $event)"
           >
-            <option
-              v-if="simpleExtensionSettings.enable === 'complex'"
-              value="complex"
-            >
-              (Site uses advanced settings)
-            </option>
             <template v-if="isDefaultConfiguration">
-              <option :value="ExtensionMode.Disabled">
+              <option :value="InputHandlingMode.Disabled">
                 Disabled by default
               </option>
             </template>
             <template v-else>
-              <option :value="ExtensionMode.Default">
+              <option :value="InputHandlingMode.Default">
                 Use default ({{simpleDefaultSettings.enableKeyboard}})
               </option>
-              <option :value="ExtensionMode.Disabled">
+              <option :value="InputHandlingMode.Disabled">
-                Never
+                Disable keyboard shortcut
               </option>
             </template>
-            <option :value="ExtensionMode.FullScreen">
+            <option :value="InputHandlingMode.Enabled">
-              Fullscreen only
+              Enable keyboard shortcuts
-            </option>
-            <option :value="ExtensionMode.Theater">
-              Fullscreen and theater mode
-            </option>
-            <option :value="ExtensionMode.All">
-              Always
             </option>
           </select>
         </div>
@@ -348,6 +336,7 @@ import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
 import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
 import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
 import EmbeddedContentSettingsOverridePolicy from '@src/common/enums/EmbeddedContentSettingsOverridePolicy.enum';
+import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum';
 
 export default defineComponent({
 
@@ -367,6 +356,7 @@ export default defineComponent({
       CropModePersistence: CropModePersistence,
       ExtensionMode,
       EmbeddedContentSettingsOverridePolicy,
+      InputHandlingMode,
       alignmentOptions: [
         {label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
         {label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
@@ -466,7 +456,7 @@ export default defineComponent({
      * Gets option labels for default values of each option
      */
     getDefaultOptionLabel(component) {
-      const componentValue: ExtensionMode | EmbeddedContentSettingsOverridePolicy = this.compileSimpleSettings(component, 'default');
+      const componentValue: ExtensionMode | InputHandlingMode | EmbeddedContentSettingsOverridePolicy = this.compileSimpleSettings(component, 'default');
 
       if (component === 'overrideWhenEmbedded') {
         switch (componentValue) {
@@ -496,6 +486,15 @@ export default defineComponent({
         }
       }
 
+      if (component === 'enableKeyboard') {
+        switch (componentValue as InputHandlingMode) {
+          case InputHandlingMode.Disabled:
+            return 'disabled';
+          case InputHandlingMode.Enabled:
+            return 'enabled';
+        }
+      }
+
       switch (componentValue as ExtensionMode) {
         case ExtensionMode.Disabled:
           return 'disabled';