fix(visibility): watch document visibility and refresh view when active

Author: dvcol

src/components/views/calendar/CalendarComponent.vue

@@ -12,8 +12,8 @@ import { useActivityStore } from '~/stores/data/activity.store';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
-import { watchUserChange } from '~/utils/store.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('calendar');
 
@@ -59,6 +59,10 @@ watchUserChange({
   },
 });
 
+useActiveAndDocumentVisible({
+  onVisible: fetchCalendar,
+});
+
 const { onItemClick } = usePanelItem();
 </script>
 

src/components/views/history/HistoryComponent.vue

@@ -16,8 +16,8 @@ import { useActivityStore } from '~/stores/data/activity.store';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { watchUserChange } from '~/utils/store.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
 
@@ -66,6 +66,10 @@ onMounted(() => {
     await fetchHistory();
   });
 });
+
+useActiveAndDocumentVisible({
+  onVisible: fetchHistory,
+});
 </script>
 
 <template>

src/components/views/progress/ProgressComponent.vue

@@ -17,9 +17,9 @@ import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.s
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { watchUserChange } from '~/utils/store.utils';
+import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
 import { getSessionUser } from '~/utils/trakt-service.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('progress');
 
@@ -78,6 +78,10 @@ watchUserChange({
     notification.value?.destroy();
   },
 });
+
+useActiveAndDocumentVisible({
+  onVisible: fetchProgress,
+});
 </script>
 
 <template>

src/components/views/releases/ReleasesComponent.vue

@@ -14,7 +14,7 @@ import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
-import { watchUserChange } from '~/utils/store.utils';
+import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
 
 const i18n = useI18n('releases');
 
@@ -47,6 +47,10 @@ watchUserChange({
   },
 });
 
+useActiveAndDocumentVisible({
+  onVisible: fetchReleases,
+});
+
 const { onItemClick } = usePanelItem();
 
 const onMovieClick = async ({ item }: { item: ListScrollItem }) => {

src/components/views/releases/ReleasesNavbar.vue

@@ -8,6 +8,7 @@ import IconCalendar from '~/components/icons/IconCalendar.vue';
 import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
 import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.store';
 import { useI18n } from '~/utils/i18n.utils';
+import { useActiveAndDocumentVisible } from '~/utils/store.utils';
 
 defineProps({
   parentElement: {
@@ -48,6 +49,10 @@ const regionOptions = computed<SelectOption[]>(() =>
 const open = ref(false);
 
 onActivated(() => fetchRegions());
+
+useActiveAndDocumentVisible({
+  onVisible: fetchRegions,
+});
 </script>
 
 <template>

src/components/views/search/SearchComponent.vue

@@ -17,6 +17,7 @@ import {
   useSearchStoreRefs,
 } from '~/stores/data/search.store';
 import { useI18n } from '~/utils/i18n.utils';
+import { useActiveAndDocumentVisible } from '~/utils/store.utils';
 
 const i18n = useI18n('search');
 
@@ -29,6 +30,10 @@ onActivated(async () => {
   await fetchSearchResults();
 });
 
+useActiveAndDocumentVisible({
+  onVisible: fetchSearchResults,
+});
+
 const list = useListScroll<SearchResult>(searchResults);
 
 const { onScroll } = useListScrollEvents(fetchSearchResults, {

src/components/views/settings/SettingsAccount.vue

@@ -23,7 +23,7 @@ import {
 } from '~/stores/settings/user.store';
 
 import { useI18n } from '~/utils/i18n.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('settings', 'account');
 

src/components/views/settings/SettingsConnect.vue

@@ -17,7 +17,7 @@ import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { defaultUser } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('settings', 'connect');
 

src/components/views/settings/SettingsTabs.vue

@@ -37,7 +37,7 @@ import {
 } from '~/stores/settings/extension.store';
 import { defaultUser } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('settings', 'tabs');
 

src/components/views/watchlist/WatchlistComponent.vue

@@ -23,8 +23,8 @@ import {
   useListStoreRefs,
 } from '~/stores/data/list.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { watchUserChange } from '~/utils/store.utils';
-import { useWatchActivated } from '~/utils/watching.utils';
+import { useActiveAndDocumentVisible, watchUserChange } from '~/utils/store.utils';
+import { useWatchActivated } from '~/utils/vue.utils';
 
 const i18n = useI18n('list');
 
@@ -80,6 +80,10 @@ onMounted(() => {
   });
   watch(activeList, () => onClick());
 });
+
+useActiveAndDocumentVisible({
+  onVisible: fetchListItems,
+});
 </script>
 
 <template>

src/components/views/watchlist/WatchlistNavbar.vue

@@ -17,7 +17,11 @@ import {
 } from '~/stores/data/list.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useI18n } from '~/utils/i18n.utils';
-import { useDebouncedSearch, watchUserChange } from '~/utils/store.utils';
+import {
+  useActiveAndDocumentVisible,
+  useDebouncedSearch,
+  watchUserChange,
+} from '~/utils/store.utils';
 
 const i18n = useI18n('navbar', 'list');
 
@@ -86,6 +90,10 @@ watchUserChange({
   },
 });
 
+useActiveAndDocumentVisible({
+  onVisible: fetchLists,
+});
+
 const open = ref(false);
 
 const renderLabel = (option: ListOption) => [

src/stores/data/activity.store.ts

@@ -16,6 +16,7 @@ import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounce } from '~/utils/debounce.utils';
+import { useDocumentVisible } from '~/utils/store.utils';
 
 type Evicted = Record<Route, boolean>;
 const defaultEvicted: Evicted = Object.fromEntries(Object.values(Route).map(route => [route, false])) as Evicted;
@@ -209,6 +210,8 @@ export const useActivityStore = defineStore(ActivityStoreConstants.Store, () =>
       await fetchActivity();
     });
 
+    useDocumentVisible({ onVisible: fetchActivity });
+
     if (polling.value || !isAuthenticated.value) return;
     return fetchActivity();
   };

src/stores/data/watching.store.ts

@@ -12,6 +12,7 @@ import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { useI18n } from '~/utils/i18n.utils';
+import { useDocumentVisible } from '~/utils/store.utils';
 
 const WatchingStoreConstants = {
   Store: 'data.watching',
@@ -170,6 +171,8 @@ export const useWatchingStore = defineStore(WatchingStoreConstants.Store, () =>
       if (!isAuthenticated.value) return;
       await fetchWatching();
     });
+
+    useDocumentVisible({ onVisible: fetchWatching });
   };
 
   return {

src/utils/store.utils.ts

@@ -168,3 +168,54 @@ export const useWaitReady = () => {
 
   return { waitReady, setReady, isReady };
 };
+
+export const useDocumentVisible = ({
+  onHidden,
+  onVisible,
+  onVisibilityChange,
+}: {
+  onHidden?: () => void;
+  onVisible?: () => void;
+  onVisibilityChange?: (visible: boolean) => void;
+} = {}) => {
+  const listener = () => {
+    const isVisible = !document.hidden;
+    onVisibilityChange?.(isVisible);
+    if (!isVisible) return onHidden?.();
+    onVisible?.();
+  };
+
+  document.addEventListener('visibilitychange', listener);
+
+  return () => document.removeEventListener('visibilitychange', listener);
+};
+
+export const useActiveAndDocumentVisible = ({
+  visible = ref(!document.hidden),
+  onHidden,
+  onVisible,
+  onVisibilityChange,
+}: {
+  visible?: Ref<boolean>;
+  onHidden?: () => void;
+  onVisible?: () => void;
+  onVisibilityChange?: (visible: boolean) => void;
+} = {}) => {
+  const listener = () => {
+    visible.value = !document.hidden;
+  };
+  const sub = ref<() => void>();
+  onActivated(() => {
+    document.addEventListener('visibilitychange', listener);
+    sub.value = watch(visible, _visible => {
+      onVisibilityChange?.(_visible);
+      if (!visible.value) return onHidden?.();
+      onVisible?.();
+    });
+  });
+  onDeactivated(() => {
+    document.removeEventListener('visibilitychange', listener);
+    sub.value?.();
+  });
+  return visible;
+};

src/utils/vue.utils.ts

@@ -1,4 +1,4 @@
-import { ref, type Ref, type UnwrapRef, watch, type WatchOptions } from 'vue';
+import { onActivated, onDeactivated, ref, type Ref, type UnwrapRef, watch, type WatchOptions } from 'vue';
 
 import { debounce } from '~/utils/debounce.utils';
 
@@ -53,3 +53,14 @@ export const useDebounceRef = <T>(outerRef: Ref<T>, delay = 100, options?: Watch
   const unSubscribe = watch(outerRef, setValue, options);
   return { value: innerRef, unSubscribe, setValue };
 };
+
+export const useWatchActivated = (_sub: ReturnType<typeof watch>) => {
+  const sub = ref<() => void>();
+  onActivated(() => {
+    sub.value = _sub;
+  });
+  onDeactivated(() => {
+    sub.value?.();
+  });
+  return { sub };
+};

src/utils/watching.utils.ts

@@ -2,7 +2,7 @@ import { elapsedTime } from '@dvcol/common-utils/common/date';
 
 import { useDialog } from 'naive-ui';
 
-import { computed, onActivated, onBeforeMount, onDeactivated, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 
 import type { TraktWatching } from '@dvcol/trakt-http-client/models';
 import type { Ref } from 'vue';
@@ -94,14 +94,3 @@ export const useCancelWatching = (cancel: () => unknown, action: TraktWatching['
     });
   return { onCancel };
 };
-
-export const useWatchActivated = (_sub: ReturnType<typeof watch>) => {
-  const sub = ref<() => void>();
-  onActivated(() => {
-    sub.value = _sub;
-  });
-  onDeactivated(() => {
-    sub.value?.();
-  });
-  return { sub };
-};