From 4c6d35f8d876cec6746e90a088663fec721f3c8a Mon Sep 17 00:00:00 2001
From: Edward Tirado Jr <ed@etdevelopment.net>
Date: Wed, 23 Apr 2025 13:15:10 -0500
Subject: [PATCH] fixed safari loading icon...again

---
 src/components/LoadingIcon.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/LoadingIcon.vue b/src/components/LoadingIcon.vue
index 54f5b58..bc85b0b 100644
--- a/src/components/LoadingIcon.vue
+++ b/src/components/LoadingIcon.vue
@@ -1,5 +1,3 @@
-<script lang="ts" setup></script>
-
 <template>
   <video
     alt="Loading"
@@ -9,9 +7,27 @@
     muted
     playsinline
   >
-    <source src="/assets/img/movie-loader.mov" type="video/quicktime" />
-    <source src="/assets/img/movie-loader.webm" type="video/webm" />
+    <source
+      v-if="supportsHEVC"
+      src="/assets/img/movie-loader.mov"
+      type="video/quicktime"
+    />
+    <source v-else src="/assets/img/movie-loader.webm" type="video/webm" />
   </video>
 </template>
 
+<script lang="ts" setup>
+const supportsHEVC = ref(false);
+
+onMounted(() => {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  // iOS devices also support HEVC
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
+
+  supportsHEVC.value = isSafari || isIOS;
+});
+</script>
+
 <style scoped></style>