Move hideOutlines to the utils store instead of using provide/inject (#…

…4246)

src/constants.js

@@ -70,18 +70,12 @@ const SyncEvents = {
   }
 }
 
-// https://v2.vuejs.org/v2/api/#provide-inject
-const Injectables = {
-  SHOW_OUTLINES: 'showOutlines'
-}
-
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
-  Injectables,
   MAIN_PROFILE_ID
 }

src/renderer/App.js

@@ -10,7 +10,7 @@ import FtButton from './components/ft-button/ft-button.vue'
 import FtToast from './components/ft-toast/ft-toast.vue'
 import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
 import { marked } from 'marked'
-import { Injectables, IpcChannels } from '../constants'
+import { IpcChannels } from '../constants'
 import packageDetails from '../../package.json'
 import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
 
@@ -30,15 +30,9 @@ export default defineComponent({
     FtToast,
     FtProgressBar
   },
-  provide: function () {
-    return {
-      [Injectables.SHOW_OUTLINES]: this.showOutlines
-    }
-  },
   data: function () {
     return {
       dataReady: false,
-      hideOutlines: true,
       showUpdatesBanner: false,
       showBlogBanner: false,
       showReleaseNotes: false,
@@ -59,6 +53,9 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
+    outlinesHidden: function () {
+      return this.$store.getters.getOutlinesHidden
+    },
     isLocaleRightToLeft: function () {
       return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
         this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
@@ -291,7 +288,7 @@ export default defineComponent({
     activateKeyboardShortcuts: function () {
       document.addEventListener('keydown', this.handleKeyboardShortcuts)
       document.addEventListener('mousedown', () => {
-        this.hideOutlines = true
+        this.hideOutlines()
       })
     },
 
@@ -316,7 +313,7 @@ export default defineComponent({
       }
       switch (event.key) {
         case 'Tab':
-          this.hideOutlines = false
+          this.showOutlines()
           break
         case 'L':
         case 'l':
@@ -517,15 +514,6 @@ export default defineComponent({
       }
     },
 
-    /**
-     * provided to all child components, see `provide` near the top of this file
-     * after injecting it, they can show outlines during keyboard navigation
-     * e.g. cycling through tabs with the arrow keys
-     */
-    showOutlines: function () {
-      this.hideOutlines = false
-    },
-
     ...mapMutations([
       'setInvidiousInstancesList'
     ]),
@@ -542,7 +530,9 @@ export default defineComponent({
       'setupListenersToSyncWindows',
       'updateBaseTheme',
       'updateMainColor',
-      'updateSecColor'
+      'updateSecColor',
+      'showOutlines',
+      'hideOutlines'
     ])
   }
 })

src/renderer/App.vue

@@ -3,7 +3,7 @@
     v-if="dataReady"
     id="app"
     :class="{
-      hideOutlines: hideOutlines,
+      hideOutlines: outlinesHidden,
       isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >

src/renderer/components/ft-prompt/ft-prompt.js

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
-import { Injectables } from '../../../constants'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
@@ -12,9 +12,6 @@ export default defineComponent({
     'ft-flex-box': FtFlexBox,
     'ft-button': FtButton
   },
-  inject: {
-    showOutlines: Injectables.SHOW_OUTLINES
-  },
   props: {
     label: {
       type: String,
@@ -101,6 +98,10 @@ export default defineComponent({
         const direction = (e.key === 'ArrowLeft') ? -1 : 1
         this.focusItem(parseInt(currentIndex) + direction)
       }
-    }
+    },
+
+    ...mapActions([
+      'showOutlines'
+    ])
   }
 })

src/renderer/store/modules/utils.js

@@ -19,6 +19,7 @@ import {
 
 const state = {
   isSideNavOpen: false,
+  outlinesHidden: true,
   sessionSearchHistory: [],
   popularCache: null,
   trendingCache: {
@@ -51,6 +52,10 @@ const getters = {
     return state.isSideNavOpen
   },
 
+  getOutlinesHidden() {
+    return state.outlinesHidden
+  },
+
   getCurrentVolume () {
     return state.currentVolume
   },
@@ -117,6 +122,14 @@ const getters = {
 }
 
 const actions = {
+  showOutlines({ commit }) {
+    commit('setOutlinesHidden', false)
+  },
+
+  hideOutlines({ commit }) {
+    commit('setOutlinesHidden', true)
+  },
+
   async downloadMedia({ rootState }, { url, title, extension, fallingBackPath }) {
     if (!process.env.IS_ELECTRON) {
       openExternalLink(url)
@@ -633,6 +646,10 @@ const mutations = {
     state.isSideNavOpen = !state.isSideNavOpen
   },
 
+  setOutlinesHidden(state, value) {
+    state.outlinesHidden = value
+  },
+
   setShowProgressBar (state, value) {
     state.showProgressBar = value
   },

src/renderer/views/Channel/Channel.js

@@ -32,7 +32,6 @@ import {
   parseLocalListVideo,
   parseLocalSubscriberCount
 } from '../../helpers/api/local'
-import { Injectables } from '../../../constants'
 
 export default defineComponent({
   name: 'Channel',
@@ -48,9 +47,6 @@ export default defineComponent({
     'ft-subscribe-button': FtSubscribeButton,
     'channel-about': ChannelAbout
   },
-  inject: {
-    showOutlines: Injectables.SHOW_OUTLINES
-  },
   data: function () {
     return {
       isLoading: false,
@@ -1870,6 +1866,7 @@ export default defineComponent({
     },
 
     ...mapActions([
+      'showOutlines',
       'updateSubscriptionDetails'
     ])
   }

src/renderer/views/Subscriptions/Subscriptions.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 
 import SubscriptionsVideos from '../../components/subscriptions-videos/subscriptions-videos.vue'
 import SubscriptionsLive from '../../components/subscriptions-live/subscriptions-live.vue'
@@ -7,7 +8,6 @@ import SubscriptionsCommunity from '../../components/subscriptions-community/sub
 
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
-import { Injectables } from '../../../constants'
 
 export default defineComponent({
   name: 'Subscriptions',
@@ -19,9 +19,6 @@ export default defineComponent({
     'ft-card': FtCard,
     'ft-flex-box': FtFlexBox
   },
-  inject: {
-    showOutlines: Injectables.SHOW_OUTLINES
-  },
   data: function () {
     return {
       currentTab: 'videos'
@@ -148,6 +145,10 @@ export default defineComponent({
         this.$refs[visibleTabs[index]].focus()
         this.showOutlines()
       }
-    }
+    },
+
+    ...mapActions([
+      'showOutlines'
+    ])
   }
 })

src/renderer/views/Trending/Trending.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@@ -8,7 +9,6 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import { copyToClipboard, showToast } from '../../helpers/utils'
 import { getLocalTrending } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
-import { Injectables } from '../../../constants'
 
 export default defineComponent({
   name: 'Trending',
@@ -19,9 +19,6 @@ export default defineComponent({
     'ft-icon-button': FtIconButton,
     'ft-flex-box': FtFlexBox
   },
-  inject: {
-    showOutlines: Injectables.SHOW_OUTLINES
-  },
   data: function () {
     return {
       isLoading: false,
@@ -191,6 +188,10 @@ export default defineComponent({
           }
           break
       }
-    }
+    },
+
+    ...mapActions([
+      'showOutlines'
+    ])
   }
 })