Make crop iptions and stretch options panels editable by default without breaking the popup. Add them to UI and keyboard section of settings

src/csui/src/PlayerUIWindow.vue

@@ -164,7 +164,7 @@ export default {
       tabs: [
         // {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
-        {id: 'playerUiSettings', label: 'In-player interface', icon: 'movie-cog-outline' },
+        {id: 'playerUiSettings', label: 'UI and keyboard', icon: 'movie-cog-outline' },
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -1,9 +1,6 @@
 <template>
-  <!-- <div class="flex flex-row">
-    <mdicon name="crop" :size="32" />
-    <h1>Crop video:</h1>
-  </div> -->
   <div class="sub-panel-content flex flex-row flex-wrap">
+
     <ShortcutButton
       v-for="(command, index) of settings?.active.commands.crop"
       class="flex b3 button"
@@ -19,7 +16,7 @@
     <ShortcutButton
       v-if="editMode"
       class="button b3"
-      :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
+     :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
       label="Add new"
       @click="editAction(
         {action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
@@ -114,7 +111,7 @@
     </div>
   </div>
 
-  <div class="edit-action-area">
+  <div v-if="siteSettings" class="edit-action-area">
     <div class="field">
       <div class="label">Default for this site</div>
       <div class="select">
@@ -176,11 +173,19 @@ export default {
   },
   computed: {
     siteDefaultCrop()  {
+      if (!this.siteSettings) {
+        return null;
+      }
       return JSON.stringify(
         this.siteSettings.data.defaults.crop
       );
     },
   },
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
   watch: {
     isEditing(newValue, oldValue) {
       if (newValue) {
@@ -195,6 +200,9 @@ export default {
      * Sets default crop, for either site or global
      */
     setDefaultCrop($event, scope) {
+      if (!this.siteSettings) {
+        return;
+      }
       const commandArguments = JSON.parse($event.target.value);
 
       this.siteSettings.set('defaults.crop', commandArguments);
@@ -205,7 +213,7 @@ export default {
      * Determines whether a given crop command is the currently active one
      */
     isActiveCrop(cropCommand) {
-      if (! this.resizerConfig.crop) {
+      if (! this.resizerConfig.crop || !this.siteSettings) {
         return false;
       }
 

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -127,7 +127,7 @@
     </div>
   </div>
 
-  <div class="edit-action-area">
+  <div v-if="siteSettings" class="edit-action-area">
     <div class="field">
       <div class="label">Default for this site:</div>
       <div class="select">
@@ -191,11 +191,19 @@ export default {
   },
   computed: {
     siteDefaultStretch() {
+      if (!this.siteSettings) {
+        return null;
+      }
       return JSON.stringify(
         this.siteSettings.data.defaults.stretch
       );
     },
   },
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
   watch: {
     isEditing(newValue, oldValue) {
       if (newValue) {
@@ -210,6 +218,9 @@ export default {
      * Sets default stretching mode, for either site or global
      */
     setDefaultStretchingMode($event, globalOrSite) {
+      if (!this.siteSettings) {
+        return;
+      }
       const commandArguments = JSON.parse($event.target.value);
       this.siteSettings.set('defaults.stretch', commandArguments);
     },
@@ -218,7 +229,7 @@ export default {
      * Determines whether a given stretch command is the currently active one
      */
     isActiveStretch(stretchCommand) {
-      if (! this.resizerConfig.stretch) {
+      if (! this.resizerConfig.stretch || !this.siteSettings) {
         return false;
       }
 

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -66,13 +66,15 @@
         </div>
       </div>
 
-      <h2>Menu options and keyboard shortcuts</h2>
+      <h2 class="mt2r">Menu options and keyboard shortcuts</h2>
-      <div class="flex flex-row">
+      <div>
+        Click 'add new' to add a new option. Click a button to edit or remove the keyboard shortcut.
+      </div>
+      <div class="keyboard-settings">
         <!-- CROP OPTIONS -->
         <div>
           <div class="flex flex-row">
-            <mdicon name="crop" :size="32" />
+            <h3 class="mth3">CROP OPTIONS</h3>
-            <h3>Crop video:</h3>
           </div>
 
           <CropOptionsPanel
@@ -86,8 +88,7 @@
         <!-- STRETCH OPTIONS -->
         <div>
           <div class="flex flex-row">
-            <mdicon name="stretch-to-page-outline" :size="32" />
+            <h3 class="mth3">STRETCH OPTIONS</h3>
-            <h3>Stretch video:</h3>
           </div>
 
           <StretchOptionsPanel
@@ -206,4 +207,22 @@ export default {
   }
 }
 
+.keyboard-settings {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  > * {
+    width: calc(50% - 0.5rem);
+  }
+}
+
+.mt2r {
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+.mth3 {
+  margin-top: 1.5rem;
+}
 </style>