From 880092e744c24fa0642962b119bd53ac8e7a978d Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Sat, 14 Sep 2024 18:52:18 +0200 Subject: [PATCH] fix: rename useWindowVisibility to useDocumentVisibility Signed-off-by: Maksim Sukharev --- src/App.vue | 8 ++++---- src/components/MessagesList/MessagesList.vue | 6 +++--- src/components/TopBar/CallTime.vue | 6 +++--- src/composables/useActiveSession.js | 6 +++--- ...dowVisibility.ts => useDocumentVisibility.ts} | 16 ++++++++-------- src/composables/useGetParticipants.js | 6 +++--- 6 files changed, 24 insertions(+), 24 deletions(-) rename src/composables/{useWindowVisibility.ts => useDocumentVisibility.ts} (58%) diff --git a/src/App.vue b/src/App.vue index 2f010d83d69..bf89d5377dc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -38,10 +38,10 @@ import RightSidebar from './components/RightSidebar/RightSidebar.vue' import SettingsDialog from './components/SettingsDialog/SettingsDialog.vue' import { useActiveSession } from './composables/useActiveSession.js' +import { useDocumentVisibility } from './composables/useDocumentVisibility.ts' import { useHashCheck } from './composables/useHashCheck.js' import { useIsInCall } from './composables/useIsInCall.js' import { useSessionIssueHandler } from './composables/useSessionIssueHandler.js' -import { useWindowVisibility } from './composables/useWindowVisibility.ts' import { CONVERSATION, PARTICIPANT } from './constants.js' import Router from './router/router.js' import BrowserStorage from './services/BrowserStorage.js' @@ -72,7 +72,7 @@ export default { isLeavingAfterSessionIssue: useSessionIssueHandler(), isMobile: useIsMobile(), isNextcloudTalkHashDirty: useHashCheck(), - isWindowVisible: useWindowVisibility(), + isDocumentVisible: useDocumentVisibility(), supportSessionState: useActiveSession(), federationStore: useFederationStore(), } @@ -188,7 +188,7 @@ export default { watch: { atLeastOneLastMessageIdChanged() { - if (this.isWindowVisible) { + if (this.isDocumentVisible) { return } @@ -221,7 +221,7 @@ export default { } }, - isWindowVisible(value) { + isDocumentVisible(value) { if (value) { // Remove the potential "*" marker for unread chat messages let title = this.getConversationName(this.token) diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index 00388517223..b3bc4597ed1 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -76,8 +76,8 @@ import MessagesSystemGroup from './MessagesGroup/MessagesSystemGroup.vue' import LoadingPlaceholder from '../UIShared/LoadingPlaceholder.vue' import TransitionWrapper from '../UIShared/TransitionWrapper.vue' +import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts' import { useIsInCall } from '../../composables/useIsInCall.js' -import { useWindowVisibility } from '../../composables/useWindowVisibility.ts' import { ATTENDEE, CHAT, CONVERSATION } from '../../constants.js' import { EventBus } from '../../services/EventBus.js' import { useChatExtrasStore } from '../../stores/chatExtras.js' @@ -124,8 +124,8 @@ export default { emits: ['update:is-chat-scrolled-to-bottom'], setup(props) { - const isWindowVisible = useWindowVisibility() - const isChatVisible = computed(() => isWindowVisible.value && props.isVisible) + const isDocumentVisible = useDocumentVisibility() + const isChatVisible = computed(() => isDocumentVisible.value && props.isVisible) return { isInCall: useIsInCall(), chatExtrasStore: useChatExtrasStore(), diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue index d17e431f4eb..cd47b5d21fa 100644 --- a/src/components/TopBar/CallTime.vue +++ b/src/components/TopBar/CallTime.vue @@ -67,7 +67,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js' -import { useWindowVisibility } from '../../composables/useWindowVisibility.ts' +import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts' import { CALL } from '../../constants.js' import { formattedTime } from '../../utils/formattedTime.ts' @@ -96,7 +96,7 @@ export default { setup() { return { - isWindowVisible: useWindowVisibility(), + isDocumentVisible: useDocumentVisibility(), } }, @@ -205,7 +205,7 @@ export default { this.isCallDurationHintShown = true // close the popover after 10 seconds - if (this.isWindowVisible) { + if (this.isDocumentVisible) { setTimeout(() => { this.showPopover = false }, 10000) diff --git a/src/composables/useActiveSession.js b/src/composables/useActiveSession.js index 32c3ee55408..20150a20df5 100644 --- a/src/composables/useActiveSession.js +++ b/src/composables/useActiveSession.js @@ -5,9 +5,9 @@ import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue' +import { useDocumentVisibility } from './useDocumentVisibility.ts' import { useIsInCall } from './useIsInCall.js' import { useStore } from './useStore.js' -import { useWindowVisibility } from './useWindowVisibility.ts' import { SESSION } from '../constants.js' import { hasTalkFeature } from '../services/CapabilitiesManager.ts' import { setSessionState } from '../services/participantsService.js' @@ -32,7 +32,7 @@ export function useActiveSession() { } const isInCall = useIsInCall() - const isWindowVisible = useWindowVisibility() + const isDocumentVisible = useDocumentVisibility() const inactiveTimer = ref(null) const currentState = ref(SESSION.STATE.ACTIVE) @@ -42,7 +42,7 @@ export function useActiveSession() { currentState.value = SESSION.STATE.ACTIVE }) - watch(isWindowVisible, (value) => { + watch(isDocumentVisible, (value) => { // Change state if tab is hidden or minimized if (value) { setSessionAsActive() diff --git a/src/composables/useWindowVisibility.ts b/src/composables/useDocumentVisibility.ts similarity index 58% rename from src/composables/useWindowVisibility.ts rename to src/composables/useDocumentVisibility.ts index 8c2c656ac3d..9154d84c376 100644 --- a/src/composables/useWindowVisibility.ts +++ b/src/composables/useDocumentVisibility.ts @@ -11,26 +11,26 @@ import type { Ref, DeepReadonly } from 'vue' * Composable to check whether the page is visible. * @return {DeepReadonly>} - computed boolean whether the page is visible */ -function useWindowVisibilityComposable() { - const isWindowVisible = ref(!document.hidden) +function useDocumentVisibilityComposable() { + const isDocumentVisible = ref(!document.hidden) - const changeWindowVisibility = () => { - isWindowVisible.value = !document.hidden + const changeIsDocumentVisible = () => { + isDocumentVisible.value = !document.hidden } onBeforeMount(() => { - document.addEventListener('visibilitychange', changeWindowVisibility) + document.addEventListener('visibilitychange', changeIsDocumentVisible) }) onBeforeUnmount(() => { - document.removeEventListener('visibilitychange', changeWindowVisibility) + document.removeEventListener('visibilitychange', changeIsDocumentVisible) }) - return readonly(isWindowVisible) + return readonly(isDocumentVisible) } /** * Shared composable to check whether the page is visible. * @return {DeepReadonly>} - computed boolean whether the page is visible */ -export const useWindowVisibility = createSharedComposable(useWindowVisibilityComposable) +export const useDocumentVisibility = createSharedComposable(useDocumentVisibilityComposable) diff --git a/src/composables/useGetParticipants.js b/src/composables/useGetParticipants.js index 6e2e7d117fe..17934a861f7 100644 --- a/src/composables/useGetParticipants.js +++ b/src/composables/useGetParticipants.js @@ -7,9 +7,9 @@ import { ref, nextTick, computed, watch, onBeforeUnmount, onMounted } from 'vue' import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import { useDocumentVisibility } from './useDocumentVisibility.ts' import { useIsInCall } from './useIsInCall.js' import { useStore } from './useStore.js' -import { useWindowVisibility } from './useWindowVisibility.ts' import { CONVERSATION } from '../constants.js' import { EventBus } from '../services/EventBus.js' @@ -24,7 +24,7 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { const token = computed(() => store.getters.getToken()) const conversation = computed(() => store.getters.conversation(token.value)) const isInCall = useIsInCall() - const isWindowVisible = useWindowVisibility() + const isDocumentVisible = useDocumentVisibility() const isOneToOneConversation = computed(() => conversation.value?.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.value?.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER) let fetchingParticipants = false @@ -69,7 +69,7 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { return } - if (isWindowVisible.value && (isInCall.value || !conversation.value?.hasCall)) { + if (isDocumentVisible.value && (isInCall.value || !conversation.value?.hasCall)) { debounceFastUpdateParticipants() } else { debounceSlowUpdateParticipants()