fix: implement listings "pull to refresh" (mobile)

src/components/catalog/artist/List.vue

@@ -9,6 +9,7 @@ import ArtistCard from "@/components/catalog/artist/Card.vue";
 import ListFilter from "@/components/filter/ListFilter.vue";
 import LoadingMore from "@/components/ui/loading/Loading.vue";
 import NoResults from "@/components/ui/loading/NoResults.vue";
+import { usePullToRefresh } from "@/composables/pullToRefresh";
 import { useRatingStore } from "@/stores/rating";
 import { useUiStore } from "@/stores/ui";
 
@@ -114,6 +115,11 @@ export default defineComponent({
       fetchArtists();
       fetchTags().then(() => {});
     });
+    const listEl = ref(null);
+    usePullToRefresh(listEl, () => {
+      fetchArtists();
+      fetchTags().then(() => {});
+    });
     watch(
       () => combinedFilter.value,
       async (oldFilter, newFilter) => {
@@ -139,6 +145,7 @@ export default defineComponent({
       showUserFilter,
       userFilter,
       updateUserFilter,
+      listEl,
     };
   },
 });
@@ -152,7 +159,7 @@ export default defineComponent({
       @change="updateUserFilter"
     />
   </div>
-  <div class="artist-list">
+  <div ref="listEl" class="artist-list">
     <LoadingMore v-if="numResults === -1" />
     <NoResults v-if="numResults === 0" :filter="combinedFilter" />
     <div class="list-container">

src/components/catalog/media/List.vue

@@ -1,18 +1,8 @@
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onActivated,
-  onDeactivated,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { DateTime } from "luxon";
-import PullToRefresh from "pulltorefreshjs";
 import { storeToRefs } from "pinia";
 import { isEqual } from "lodash-es";
 
@@ -25,6 +15,7 @@ import ListFilter from "@/components/filter/ListFilter.vue";
 import LoadingMore from "@/components/ui/loading/Loading.vue";
 import NoResults from "@/components/ui/loading/NoResults.vue";
 import { useDevice } from "@/composables/device";
+import { usePullToRefresh } from "@/composables/pullToRefresh";
 import { useRatingStore } from "@/stores/rating";
 import { useUiStore } from "@/stores/ui";
 
@@ -173,18 +164,10 @@ export default defineComponent({
       clearInterval(timer.value);
     });
     const listEl = ref(null);
-    onActivated(() => {
-      PullToRefresh.init({
-        mainElement: listEl.value,
-        onRefresh() {
-          mediaList.value = [];
-          fetchMedia(limit, 0).then(() => {});
-          fetchTags().then(() => {});
-        },
-      });
-    });
-    onDeactivated(() => {
-      PullToRefresh.destroyAll();
+    usePullToRefresh(listEl, () => {
+      mediaList.value = [];
+      fetchMedia(limit, 0).then(() => {});
+      fetchTags().then(() => {});
     });
     watch(
       () => combinedFilter.value,

src/components/catalog/playlist/List.vue

@@ -12,6 +12,7 @@ import ListFilter from "@/components/filter/ListFilter.vue";
 import LoadingMore from "@/components/ui/loading/Loading.vue";
 import NoResults from "@/components/ui/loading/NoResults.vue";
 import { useDevice } from "@/composables/device";
+import { usePullToRefresh } from "@/composables/pullToRefresh";
 import { useRatingStore } from "@/stores/rating";
 import { useUiStore } from "@/stores/ui";
 
@@ -135,6 +136,12 @@ export default defineComponent({
       fetchPlaylists();
       fetchTags().then(() => {});
     });
+    const listEl = ref(null);
+    usePullToRefresh(listEl, () => {
+      // playlists.value = [];
+      fetchPlaylists();
+      fetchTags().then(() => {});
+    });
     watch(
       () => combinedFilter.value,
       async (oldFilter, newFilter) => {
@@ -162,6 +169,7 @@ export default defineComponent({
       showUserFilter,
       userFilter,
       updateUserFilter,
+      listEl,
     };
   },
 });
@@ -176,7 +184,7 @@ export default defineComponent({
       @change="updateUserFilter"
     />
   </div>
-  <div class="playlist-list">
+  <div ref="listEl" class="playlist-list">
     <div v-if="layout === 'table' && isDesktop" class="table-header">
       <PlaylistRowHeader />
     </div>

src/composables/pullToRefresh.ts

@@ -1,39 +1,14 @@
 import type { Ref } from "vue";
 import { onActivated, onDeactivated } from "vue";
 import { useI18n } from "vue-i18n";
-import { useStyleTag } from "@vueuse/core";
 import PullToRefresh from "pulltorefreshjs";
 
-const STYLE = `
-  .ptr--ptr {
-    font-size: 1rem;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 1);
-    box-shadow: unset;
-  }
-  .ptr--box {
-    padding: 20px 10px 11px;
-    background: rgba(var(--c-dark), 0.05);
-    margin-bottom: 0.625rem;
-  }
-  .ptr--icon {
-    color: inherit;
-    font-size: 24px;
-    transition: unset;
-  }
-  .ptr--text {
-    color: inherit;
-  }
-`;
-
 export function usePullToRefresh(rootEl: Ref<HTMLElement | null>, handler: () => any) {
   const { t } = useI18n();
-  const { load: loadStyle, unload: unloadStyle } = useStyleTag(STYLE);
   onActivated(() => {
     if (!rootEl.value) {
       return;
     }
-    loadStyle();
     PullToRefresh.init({
       // @ts-ignore
       mainElement: rootEl.value,
@@ -42,14 +17,14 @@ export function usePullToRefresh(rootEl: Ref<HTMLElement | null>, handler: () =>
       instructionsReleaseToRefresh: t("pullToRefresh.release"),
       instructionsRefreshing: t("pullToRefresh.refreshing"),
       // iconArrow: "&#8616;",
+      getStyles: () => "",
     });
   });
   onDeactivated(() => {
     if (!rootEl.value) {
       return;
     }
     PullToRefresh.destroyAll();
-    unloadStyle();
   });
   return {};
 }

src/style/elements/pull-to-refresh.scss

@@ -0,0 +1,78 @@
+/*
+  https://github.com/BoxFactura/pulltorefresh.js
+  # template
+  <div class="__PREFIX__box">
+    <div class="__PREFIX__content">
+      <div class="__PREFIX__icon"></div>
+      <div class="__PREFIX__text"></div>
+    </div>
+  </div>
+ */
+.ptr {
+  /* root node */
+  &--ptr {
+    color: rgb(var(--c-dark) / 100%);
+    pointer-events: none;
+    font-size: var(--t-fs-default);
+    top: 0;
+    height: 0;
+    transition: height 200ms, min-height 200ms;
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    align-content: stretch;
+  }
+
+  &--box {
+    padding: 0;
+    flex-basis: 100%;
+  }
+
+  &--text {
+    margin-bottom: 1.5rem;
+    opacity: 0;
+    transition: opacity 100ms;
+  }
+
+  &--pull {
+    transition: none;
+
+    .ptr {
+      &--text {
+        opacity: 1;
+      }
+    }
+  }
+
+  &--icon {
+    transition: transform 200ms;
+    font-size: var(--t-fs-default);
+  }
+
+  /* rotate icon */
+  &--release {
+    .ptr {
+      &--icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &--refresh {
+    .ptr {
+      &--text {
+        opacity: 1;
+      }
+    }
+  }
+
+  /*
+    When at the top of the page, disable vertical overscroll so passive touch
+    listeners can take over.
+  */
+  &--top {
+    touch-action: pan-x pan-down pinch-zoom;
+  }
+}

src/style/main.scss

@@ -8,6 +8,7 @@
   "base/variables-export";
 @import
   "elements/code",
+  "elements/pull-to-refresh",
   "elements/debug";
 @import
   "directives/tooltip";