Merge pull request 'safari-loader-support' (#7) from safari-loader-support into main

Reviewed-on: #7

.idea/workspace.xml

@@ -5,10 +5,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/web.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/web.iml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/LoadingIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/LoadingIcon.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -66,7 +64,7 @@
     "RunOnceActivity.git.unshallow": "true",
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
-    "git-widget-placeholder": "unauthenticated-requests",
+    "git-widget-placeholder": "main",
     "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
     "list.type.of.created.stylesheet": "CSS",
     "node.js.detected.package.eslint": "true",
@@ -144,7 +142,7 @@
       <workItem from="1745179755243" duration="40533000" />
       <workItem from="1745366380362" duration="223000" />
       <workItem from="1745366610986" duration="319000" />
-      <workItem from="1745366940811" duration="1222000" />
+      <workItem from="1745366940811" duration="4297000" />
     </task>
     <servers />
   </component>

src/components/LoadingIcon.vue

@@ -7,9 +7,14 @@
     class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     loop
     muted
-    src="/assets/img/movie-loader.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>
 
 <style scoped></style>

src/pages/schedule/index.vue

@@ -1,47 +1,18 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div
-      v-if="schedule && schedule?.showings.length < 1 && !loading"
-      class="p-5"
-    >
-      <span>No Showings Found</span>
-    </div>
     <LoadingIcon v-if="loading" />
-    <ul class="flex flex-col gap-5">
+    <div v-else>
-      <li
+      <div
-        v-for="showing in schedule?.showings"
+        v-if="schedule && schedule?.showings.length < 1 && !loading"
-        class="p-5 movie-card neon-border"
+        class="p-5"
       >
-        <div class="sm:grid grid-cols-2 lg:grid-cols-3">
+        <span>No Showings Found</span>
-          <img
+      </div>
-            :src="showing.movie.poster"
-            alt="Movie Poster"
-            class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
-          />
-
-          <div class="self-center text-left">
-            <h5 class="text-center sm:text-left mb-3 text-xl">
-              {{ showing.movie.title }}
-            </h5>
-            <h5 class="text-center sm:text-left mb-3">
-              {{ formatDate(showing.showtime) }}
-            </h5>
-            <span class="">{{ showing.movie.plot }}</span>
-          </div>
-        </div>
-      </li>
-    </ul>
-
-    <!-- PREVIOUS SHOWINGS -->
-    <div id="previous-showings" class="mt-5 list-group">
-      <span
-        class="block mb-5 hover-pointer underline"
-        @click="getSchedule(true)"
-      >
-        Previous Showings
-      </span>
       <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 schedule?.showings"
+          class="p-5 movie-card neon-border"
+        >
           <div class="sm:grid grid-cols-2 lg:grid-cols-3">
             <img
               :src="showing.movie.poster"
@@ -50,13 +21,48 @@
             />
 
             <div class="self-center text-left">
-              <h5 class="text-xl mb-3">{{ showing.movie.title }}</h5>
+              <h5 class="text-center sm:text-left mb-3 text-xl">
-              <h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
+                {{ showing.movie.title }}
+              </h5>
+              <h5 class="text-center sm:text-left mb-3">
+                {{ formatDate(showing.showtime) }}
+              </h5>
               <span class="">{{ showing.movie.plot }}</span>
             </div>
           </div>
         </li>
       </ul>
+
+      <!-- PREVIOUS SHOWINGS -->
+      <LoadingIcon v-if="loadingPrevious" />
+      <div v-else id="previous-showings" class="mt-5 list-group">
+        <span
+          class="block mb-5 hover-pointer underline"
+          @click="getSchedule(true)"
+        >
+          Previous Showings
+        </span>
+        <ul class="flex flex-col gap-5">
+          <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">
+              <img
+                :src="showing.movie.poster"
+                alt="Movie Poster"
+                class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
+              />
+
+              <div class="self-center text-left">
+                <h5 class="text-xl mb-3">{{ showing.movie.title }}</h5>
+                <h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
+                <span class="">{{ showing.movie.plot }}</span>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -72,6 +78,7 @@ const past_showings = defineModel<Showing[]>("past_showings", {
   default: [],
 });
 const loading = ref(true);
+const loadingPrevious = ref(false);
 const got_previous = ref(false);
 const months = [
   "January",
@@ -96,7 +103,9 @@ const formatDate = function (date_string: string) {
 };
 
 const getSchedule = async function (previous = false) {
-  loading.value = true;
+  if (previous) loadingPrevious.value = true;
+  else loading.value = true;
+
   let config = useRuntimeConfig();
   if (got_previous.value) {
     return false;
@@ -124,6 +133,7 @@ const getSchedule = async function (previous = false) {
         schedule.value = data;
       }
       loading.value = false;
+      loadingPrevious.value = false;
     })
     .catch((err) => {
       switch (err.statusCode) {
@@ -133,6 +143,7 @@ const getSchedule = async function (previous = false) {
           break;
         case 404:
           alert("Unable to find schedule");
+          navigateTo("/");
           break;
       }
     });