Add video batch selection mode

_scripts/ProcessLocalesPlugin.js

@@ -68,10 +68,6 @@ class ProcessLocalesPlugin {
               }
             }
 
-            if (Object.prototype.hasOwnProperty.call(data, 'Locale Name')) {
-              delete data['Locale Name']
-            }
-
             this.removeEmptyValues(data)
 
             let filename = `${this.outputDir}/${locale}.json`

src/renderer/App.css

@@ -10,6 +10,11 @@
   block-size: 100%;
 }
 
+.selectionModeEnabled {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .routerView {
   flex: 1 1 0%;
   margin-block: 18px;

src/renderer/App.js

@@ -121,6 +121,10 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
+    },
+
+    isSelectionModeEnabled: function () {
+      return this.$store.getters.getIsSelectionModeEnabled
     }
   },
   watch: {
@@ -333,6 +337,15 @@ export default defineComponent({
           }
           break
       }
+
+      if (this.isSelectionModeEnabled && (event.ctrlKey || event.metaKey)) {
+        switch (event.key) {
+          case 'A':
+          case 'a':
+            this.selectAllVideosInSelectionMode()
+            break
+        }
+      }
     },
 
     openAllLinksExternally: function () {
@@ -541,6 +554,7 @@ export default defineComponent({
       'updateBaseTheme',
       'updateMainColor',
       'updateSecColor',
+      'selectAllVideosInSelectionMode',
       'showOutlines',
       'hideOutlines'
     ])

src/renderer/App.vue

@@ -4,7 +4,8 @@
     id="app"
     :class="{
       hideOutlines: outlinesHidden,
-      isLocaleRightToLeft: isLocaleRightToLeft
+      isLocaleRightToLeft: isLocaleRightToLeft,
+      selectionModeEnabled: isSelectionModeEnabled
     }"
   >
     <top-nav ref="topNav" />

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -8,7 +8,12 @@
   user-select: none;
 }
 
-.iconButton {
+.iconButton.base-nav-icon {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.iconButton:not(.base-nav-icon) {
   border-radius: 50%;
   cursor: pointer;
   block-size: 1em;

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -6,7 +6,8 @@
       :icon="icon"
       :class="{
         [theme]: true,
-        shadow: useShadow
+        shadow: useShadow,
+        navIcon: theme === 'base-nav-icon'
       }"
       :style="{
         padding: padding + 'px',
@@ -15,10 +16,10 @@
       tabindex="0"
       role="button"
       :aria-expanded="dropdownShown"
-      @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
-      @keydown.enter.prevent="handleIconClick"
-      @keydown.space.prevent="handleIconClick"
+      @click.stop="handleIconClick"
+      @mousedown.stop="handleIconMouseDown"
+      @keydown.enter.stop.prevent="handleIconClick"
+      @keydown.space.stop.prevent="handleIconClick"
     />
     <template
       v-if="dropdownShown"
@@ -27,7 +28,7 @@
         v-if="useModal"
         :autosize="true"
         :label="sanitizeForHtmlId(`iconButtonPrompt-${title}`)"
-        @click="dropdownShown = false"
+        @click.stop="dropdownShown = false"
       >
         <slot>
           <ul
@@ -80,9 +81,10 @@
               aria-selected="false"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
               :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-              @click="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+              @click.stop="handleDropdownClick({url: option.value, index: index}, $event)"
+              @mousedown.stop.prevent
+              @keydown.enter.stop="handleDropdownClick({url: option.value, index: index}, $event)"
+              @keydown.space.stop="handleDropdownClick({url: option.value, index: index}, $event)"
             >
               {{ option.type === 'divider' ? '' : option.label }}
             </li>