mirror of https://github.com/amir20/dozzle.git
Updates with dark and light video
This commit is contained in:
parent
07352f6e16
commit
fbcf989885
|
@ -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.
Loading…
Reference in New Issue