tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed safari loading icon

Browse source
This commit is contained in:
Edward Tirado Jr 2025-04-22 20:22:17 -05:00
parent 664387f7e2
commit 666bbf1b00
3 changed files with 60 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/movie-loader.mp4 Normal file
View file

Binary file not shown.

7
src/components/LoadingIcon.vue
View file

@ -7,9 +7,14 @@
class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
loop loop
muted muted
src="/assets/img/movie-loader.webm"
type="video/webm" type="video/webm"
>
<source
src="/assets/img/movie-loader.mp4"
type="video/mp4; codecs='hvc1'"
/> />
<source src="/assets/img/movie-loader.webm" type="video/webm" />
</video>
</template> </template>
<style scoped></style> <style scoped></style>

19
src/pages/schedule/index.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<div class="p-5 sm:p-0"> <div class="p-5 sm:p-0">
<LoadingIcon v-if="loading" />
<div v-else>
<div <div
v-if="schedule && schedule?.showings.length < 1 && !loading" v-if="schedule && schedule?.showings.length < 1 && !loading"
class="p-5" class="p-5"
> >
<span>No Showings Found</span> <span>No Showings Found</span>
</div> </div>
<LoadingIcon v-if="loading" />
<ul class="flex flex-col gap-5"> <ul class="flex flex-col gap-5">
<li <li
v-for="showing in schedule?.showings" v-for="showing in schedule?.showings"
@ -33,7 +34,8 @@
</ul> </ul>
<!-- PREVIOUS SHOWINGS --> <!-- PREVIOUS SHOWINGS -->
<div id="previous-showings" class="mt-5 list-group"> <LoadingIcon v-if="loadingPrevious" />
<div v-else id="previous-showings" class="mt-5 list-group">
<span <span
class="block mb-5 hover-pointer underline" class="block mb-5 hover-pointer underline"
@click="getSchedule(true)" @click="getSchedule(true)"
@ -41,7 +43,10 @@
Previous Showings Previous Showings
</span> </span>
<ul class="flex flex-col gap-5"> <ul class="flex flex-col gap-5">
<li v-for="showing in past_showings" class="p-5 movie-card neon-border"> <li
v-for="showing in past_showings"
class="p-5 movie-card neon-border"
>
<div class="sm:grid grid-cols-2 lg:grid-cols-3"> <div class="sm:grid grid-cols-2 lg:grid-cols-3">
<img <img
:src="showing.movie.poster" :src="showing.movie.poster"
@ -59,6 +64,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -72,6 +78,7 @@ const past_showings = defineModel<Showing[]>("past_showings", {
default: [], default: [],
}); });
const loading = ref(true); const loading = ref(true);
const loadingPrevious = ref(false);
const got_previous = ref(false); const got_previous = ref(false);
const months = [ const months = [
"January", "January",
@ -96,7 +103,9 @@ const formatDate = function (date_string: string) {
}; };
const getSchedule = async function (previous = false) { const getSchedule = async function (previous = false) {
loading.value = true; if (previous) loadingPrevious.value = true;
else loading.value = true;
let config = useRuntimeConfig(); let config = useRuntimeConfig();
if (got_previous.value) { if (got_previous.value) {
return false; return false;
@ -124,6 +133,7 @@ const getSchedule = async function (previous = false) {
schedule.value = data; schedule.value = data;
} }
loading.value = false; loading.value = false;
loadingPrevious.value = false;
}) })
.catch((err) => { .catch((err) => {
switch (err.statusCode) { switch (err.statusCode) {
@ -133,6 +143,7 @@ const getSchedule = async function (previous = false) {
break; break;
case 404: case 404:
alert("Unable to find schedule"); alert("Unable to find schedule");
navigateTo("/");
break; break;
} }
}); });