marzban-dev
127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
// states
|
|
|
|
const { $gsap: gsap } = useNuxtApp();
|
|
|
|
const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
|
|
default: () => false,
|
|
});
|
|
|
|
watch(
|
|
isSiteLoadingDisabled,
|
|
(nv) => {
|
|
console.log(nv);
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
const shouldRenderLoadingOverlay = ref(true);
|
|
const isAssetLoaded = ref(false);
|
|
const criticalLoad = ref(true);
|
|
|
|
const progressInterval = ref<NodeJS.Timeout | null>(null);
|
|
const assetLoadingProgress = ref(10);
|
|
|
|
const isWindowScrollLocked = useScrollLock(window);
|
|
|
|
// computed
|
|
|
|
const progressStyle = computed(() => {
|
|
return {
|
|
width: `${assetLoadingProgress.value}%`,
|
|
};
|
|
});
|
|
|
|
// methods
|
|
|
|
const onAssetLoaded = () => {
|
|
clearInterval(progressInterval.value!);
|
|
criticalLoad.value = false;
|
|
assetLoadingProgress.value = 100;
|
|
isAssetLoaded.value = true;
|
|
};
|
|
|
|
const onAssetFinished = () => {
|
|
gsap.to("#loading-overlay", {
|
|
opacity: 0,
|
|
onComplete: () => {
|
|
shouldRenderLoadingOverlay.value = false;
|
|
isWindowScrollLocked.value = false;
|
|
isSiteLoadingDisabled.value = true;
|
|
},
|
|
});
|
|
};
|
|
|
|
// watch
|
|
|
|
watch([assetLoadingProgress, criticalLoad], ([assetLoadingProgress, criticalLoad]) => {
|
|
if (criticalLoad && assetLoadingProgress >= 100) {
|
|
onAssetFinished();
|
|
}
|
|
});
|
|
|
|
// lifecycle
|
|
|
|
onMounted(() => {
|
|
if (!isSiteLoadingDisabled.value) {
|
|
isWindowScrollLocked.value = true;
|
|
|
|
const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
|
|
|
|
if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
|
|
onAssetLoaded();
|
|
}
|
|
|
|
progressInterval.value = setInterval(() => {
|
|
assetLoadingProgress.value += Math.random() * 10;
|
|
}, 250);
|
|
|
|
gsap.to("#loading-overlay", {
|
|
opacity: 1,
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="shouldRenderLoadingOverlay && !isSiteLoadingDisabled"
|
|
id="loading-overlay"
|
|
class="fixed inset-0 size-full z-9999 flex-center bg-black"
|
|
>
|
|
<div
|
|
class="flex-col-center gap-6 transition-all duration-450 ease-in-out"
|
|
:class="isAssetLoaded ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
|
|
>
|
|
<NuxtImg
|
|
src="/img/heymlz/heymlz-text-logo.png"
|
|
class="invert w-[250px]"
|
|
/>
|
|
<div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
|
|
<div
|
|
class="bg-slate-100 h-full w-full transition-all duration-250"
|
|
:style="progressStyle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<video
|
|
id="heymlz-loading-animation"
|
|
muted
|
|
autoplay
|
|
playsinline
|
|
webkit-playsinline
|
|
@canplay="onAssetLoaded"
|
|
@ended="onAssetFinished"
|
|
src="/video/heymlz/heymlz-fast-loading.mp4"
|
|
class="absolute z-20 w-[700px] brightness-75 transition-all duration-[1s]"
|
|
:class="isAssetLoaded ? 'opacity-100' : 'opacity-0'"
|
|
:style="{
|
|
mask: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 20%, black 80%, rgba(0,0,0,0) 100%)',
|
|
}"
|
|
/>
|
|
</div>
|
|
</template>
|