wticreatorstudio/Modules/Frontend/Resources/client/api/useVideo.js

import { ref, toValue } from "vue";
import { request } from '@/helpers/axios';
import { defineStore } from "pinia";
import { useData } from "@/api/useData";
import { useLoader } from "@/api/useLoader";

export const useVideo = defineStore('videos', () => {
    const { getData } = useData();
    const { setLoader } = useLoader();
    let controller = new AbortController();
    const videos = ref(getData("Common", "video.initial"));
    const count = ref(getData("Common", "video.count"));
    const searching = ref(false);
    const result = ref(null);
    const lazyLoading = ref(false);
    const lazyLoadedVideos = ref([]);
    const filter = ref(null);
    const timer = ref(null);

    async function getVideos(page, rows, filter) {
        setLoader(true);
        
        if (controller) {
            controller.abort();
            controller = new AbortController();
        }

        const response = await request().get(route("frontend.video.page", { page }), {
            params: {
                rows,
                page,
                filter,
            },
            signal: controller.signal,
        });
        const { data } = response;

        count.value = data.count;
        videos.value = data.videos;
        setLoader(false);
    }

    async function lazyLoadKeywordVideos(keyword) {
        if (!toValue(lazyLoading)) {
            setLoader(true);

            if (controller) {
                controller.abort();
                controller = new AbortController();
            }

            lazyLoading.value = true;
            const response = await request().get(route("frontend.video.search.lazy-load"), {
                params: {
                    filter: toValue(keyword),
                    skipped: toValue(lazyLoadedVideos).length,
                },
                signal: controller.signal,
            });
            const { data } = response;

            lazyLoadedVideos.value = [
                ...toValue(lazyLoadedVideos),
                ...data.items,
            ];

            lazyLoading.value = false;
            setLoader(false);
        }
    }

    async function searchVideos(keyword) {
        if (toValue(timer)) {
            clearTimeout(toValue(timer));
        }

        timer.value = setTimeout(async () => {
            setLoader(true);

            if (controller) {
                controller.abort();
                controller = new AbortController();
            }

            filter.value = toValue(keyword);
            searching.value = true;
            result.value = null;

            const response = await request().get(route("frontend.video.search"), {
                params: {
                    filter: keyword,
                },
                signal: controller.signal,
            });
            const { data } = response;

            result.value = data.items;
            setLoader(false);
        }, 300);
    }

    function clearSearch() {
        searching.value = false;
        result.value = null;
    }

    return {
        count,
        videos,
        filter,
        searching,
        result,
        lazyLoadedVideos,
        getVideos,
        lazyLoadKeywordVideos,
        searchVideos,
        clearSearch,
    };
});