movie-night-web/src/components/LoadingIcon.vue

<template>
  <div
    class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col"
  >
    <video alt="Loading" autoplay class="max-h-52" loop muted playsinline>
      <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>
    <MovieQuote v-if="props.showQuote" />
  </div>
</template>

<script lang="ts" setup>
const supportsHEVC = ref(false);
const props = defineProps(["showQuote"]);

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>