diff --git a/src/constants.js b/src/constants.js index 4693d857623f..bd80da2ffdc1 100644 --- a/src/constants.js +++ b/src/constants.js @@ -70,11 +70,6 @@ const SyncEvents = { } } -// https://v2.vuejs.org/v2/api/#provide-inject -const Injectables = { - SHOW_OUTLINES: 'showOutlines' -} - // Utils const MAIN_PROFILE_ID = 'allChannels' @@ -82,6 +77,5 @@ export { IpcChannels, DBActions, SyncEvents, - Injectables, MAIN_PROFILE_ID } diff --git a/src/renderer/App.js b/src/renderer/App.js index 21db0394f2e9..81185f9347f6 100644 --- a/src/renderer/App.js +++ b/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' ]) } }) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index ed2ec6545402..e0394fae9711 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -3,7 +3,7 @@ v-if="dataReady" id="app" :class="{ - hideOutlines: hideOutlines, + hideOutlines: outlinesHidden, isLocaleRightToLeft: isLocaleRightToLeft }" > diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js index d52a93daf2dc..f6fbf0b557c6 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.js +++ b/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' + ]) } }) diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index a8ca1498d341..4ec7a5df6bba 100644 --- a/src/renderer/store/modules/utils.js +++ b/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 }, diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js index af5f1f815eb0..1cec8b70de18 100644 --- a/src/renderer/views/Channel/Channel.js +++ b/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' ]) } diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js index b6bb7244afb6..c36ff32cda7a 100644 --- a/src/renderer/views/Subscriptions/Subscriptions.js +++ b/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' + ]) } }) diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js index 1aa453333856..d308c9c88c7f 100644 --- a/src/renderer/views/Trending/Trending.js +++ b/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' + ]) } })