Fix media share player screen height on android browsers

advplyr · Jul 4, 2024 · d5f991a · d5f991a
1 parent fed5ff4
commit d5f991a
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/client/pages/share/_slug.vue b/client/pages/share/_slug.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full h-screen max-h-screen overflow-hidden" :style="{ backgroundColor: coverRgb }">
+  <div class="w-full h-dvh max-h-dvh overflow-hidden" :style="{ backgroundColor: coverRgb }">
     <div class="w-screen h-screen absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%)"></div>
-    <div class="absolute inset-0 w-screen h-screen flex items-center justify-center z-10">
+    <div class="absolute inset-0 w-screen h-dvh flex items-center justify-center z-10">
       <div class="w-full p-2 sm:p-4 md:p-8">
         <div v-if="!isMobileLandscape" :style="{ width: coverWidth + 'px', height: coverHeight + 'px' }" class="mx-auto overflow-hidden rounded-xl my-2">
           <img ref="coverImg" :src="coverUrl" class="object-contain w-full h-full" @load="coverImageLoaded" />
@@ -113,6 +113,8 @@ export default {
         .then((color) => {
           this.coverRgb = color.rgba
           this.coverBgIsLight = color.isLight
+
+          document.body.style.backgroundColor = color.hex
         })
         .catch((e) => {
           console.log(e)