Updates with dark and light video

This commit is contained in:
Amir Raminfar 2023-03-21 15:25:03 -07:00
parent 07352f6e16
commit fbcf989885
5 changed files with 28 additions and 4 deletions

View File

@ -1,10 +1,34 @@
<script setup></script>
<script lang="ts" setup>
import { useMutationObserver } from "@vueuse/core";
import { onMounted, ref } from "vue";
const isDark = ref(false);
onMounted(() => {
isDark.value = document.documentElement.classList.contains("dark");
});
useMutationObserver(
document.documentElement,
(mutations) => {
isDark.value = document.documentElement.classList.contains("dark");
},
{
attributes: true,
attributeFilter: ["class"],
}
);
</script>
<template>
<browser-window drop-shadow-md>
<video muted loop autoplay playsinline poster="../media/poster.png">
<source src="../media/dozzle.webm" type="video/webm" />
<source src="../media/dozzle.mp4" type="video/mp4" />
<video muted loop autoplay playsinline poster="../media/poster.png" v-if="isDark">
<source src="../media/dozzle-dark.webm" type="video/webm" />
<source src="../media/dozzle-dark.mp4" type="video/mp4" />
<img src="../media/poster.png" alt="" />
</video>
<video muted loop autoplay playsinline poster="../media/poster.png" v-else>
<source src="../media/dozzle-light.webm" type="video/webm" />
<source src="../media/dozzle-light.mp4" type="video/mp4" />
<img src="../media/poster.png" alt="" />
</video>
</browser-window>

Binary file not shown.

Binary file not shown.