fix(components): added WeakHardwareOverlay

- added tests
- fix entry setupSpeedkitLayer

playground/components/InfoLayer.vue

@@ -13,12 +13,12 @@
       <div class="info-layer-buttons">
         <base-button
           id="nuxt-speedkit-button-init-nojs"
-          tag="label"
           for="nuxt-speedkit-layer-close">
           Yes
         </base-button>
         <base-button
           id="nuxt-speedkit-button-init-reduced-view"
+          tag="label"
           for="nuxt-speedkit-layer-close">
           No
         </base-button>

playground/components/WeakHardwareOverlay.vue

@@ -0,0 +1,51 @@
+<template>
+  <speedkit-weak-hardware-overlay>
+    <div v-font="$getFont('Montserrat Alternates', 400, 'normal')">
+      <p>{{ text }}</p>
+      <base-button id="nuxt-speedkit-button-init-app">
+        {{ buttonText }}
+      </base-button>
+    </div>
+  </speedkit-weak-hardware-overlay>
+</template>
+
+<script setup>
+import SpeedkitWeakHardwareOverlay from '#speedkit/components/WeakHardwareOverlay';
+
+import BaseButton from '@/components/base/Button';
+
+import useFonts from '#speedkit/composables/fonts';
+const { $getFont } = useFonts();
+defineProps({
+  text: {
+    type: String,
+    default:
+      'To improve your experience, extensive features have been disabled.'
+  },
+  buttonText: {
+    type: String,
+    default: 'Click here to enable them.'
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.nuxt-speedkit-weak-hardware-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 60%);
+  backdrop-filter: blur(em(4px));
+
+  & div {
+    font-size: 14px;
+    text-align: center;
+  }
+}
+</style>

playground/components/base/Button.vue

@@ -31,13 +31,16 @@ export default {
 
 <style lang="postcss" scoped>
 .base-button {
-  padding: em(8px) em(16px);
+  --font-size: 16;
+
+  padding: em(8px, var(--font-size)) em(16px, var(--font-size));
+  font-size: em(var(--font-size));
   color: currentColor;
   appearance: none;
   cursor: pointer;
   background: transparent;
-  border: solid currentColor em(1px);
-  border-radius: em(5px);
+  border: solid currentColor em(1px, var(--font-size));
+  border-radius: em(5px, var(--font-size));
   outline: none;
   transition: transform 0.1s ease-in;
   will-change: transform;

playground/components/modules/VideoVimeo.vue

@@ -4,12 +4,16 @@
       <template #default="{ videoData }">
         <div class="description" v-html="videoData && videoData.description" />
       </template>
+      <template #afterPlayer>
+        <weak-hardware-overlay />
+      </template>
     </speedkit-vimeo>
   </section>
 </template>
 
 <script setup>
 import SpeedkitVimeo from '#speedkit/components/SpeedkitVimeo';
+import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
 import useFonts from '#speedkit/composables/fonts';
 const { $getFont } = useFonts();
 defineProps({

playground/components/modules/VideoYoutube.vue

@@ -1,12 +1,15 @@
 <template>
   <section v-font="[$getFont('Merriweather', 400)]" class="video-youtube">
-    <speedkit-youtube v-bind="$attrs" />
+    <speedkit-youtube v-bind="$attrs">
+      <template #afterPlayer> <weak-hardware-overlay /> </template
+    ></speedkit-youtube>
     <p v-if="text" v-html="text" />
   </section>
 </template>
 
 <script setup>
 import SpeedkitYoutube from '#speedkit/components/SpeedkitYoutube';
+import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
 import useFonts from '#speedkit/composables/fonts';
 const { $getFont } = useFonts();
 defineProps({

playground/pages/tests/weak-hardware-overlay/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <main :class="{ mounted }" tag="main">
+    <div>
+      WeakHardwareOverlay
+      <speedkit-weak-hardware-overlay />
+    </div>
+    <speedkit-layer />
+  </main>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+import SpeedkitLayer from '#speedkit/components/SpeedkitLayer';
+import SpeedkitWeakHardwareOverlay from '#speedkit/components/WeakHardwareOverlay';
+
+const mounted = ref(false);
+
+onMounted(() => {
+  mounted.value = true;
+});
+
+defineOptions({
+  layout: 'blank'
+});
+</script>

src/runtime/components/SpeedkitVimeo.vue

@@ -1,5 +1,8 @@
 <template>
   <base-vimeo class="nuxt-speedkit-vimeo" v-bind="$attrs">
+    <template #beforePlayer>
+      <slot name="beforePlayer" />
+    </template>
     <template #loading-spinner>
       <slot name="loading-spinner">
         <div class="loading-spinner">
@@ -42,6 +45,9 @@
     <template #default="context">
       <slot name="default" v-bind="context" />
     </template>
+    <template #afterPlayer>
+      <slot name="afterPlayer" />
+    </template>
   </base-vimeo>
 </template>
 

src/runtime/components/SpeedkitVimeo/Base.vue

@@ -2,6 +2,7 @@
   <div :class="{ ready, playing, 'iframe-mode': iframeMode }">
     <slot name="background" v-bind="{ playing, videoData }" />
     <div class="player">
+      <slot name="beforePlayer" />
       <iframe
         ref="player"
         :key="src"
@@ -16,6 +17,7 @@
         <slot v-if="loading" name="loading-spinner" />
         <slot v-if="!ready && !loading" name="play" />
       </default-button>
+      <slot name="afterPlayer" />
     </div>
     <slot v-bind="{ playing, videoData }" />
   </div>

src/runtime/components/SpeedkitYoutube.vue

@@ -1,5 +1,8 @@
 <template>
   <base-youtube class="nuxt-speedkit-youtube" v-bind="$attrs">
+    <template #beforePlayer>
+      <slot name="beforePlayer" />
+    </template>
     <template #loading-spinner>
       <slot name="loading-spinner">
         <svg
@@ -36,6 +39,9 @@
         </svg>
       </slot>
     </template>
+    <template #afterPlayer>
+      <slot name="afterPlayer" />
+    </template>
   </base-youtube>
 </template>
 

src/runtime/components/SpeedkitYoutube/Base.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="{ ready, playing }">
+    <slot name="beforePlayer" />
     <iframe
       v-if="src"
       ref="player"
@@ -14,6 +15,7 @@
       <slot v-if="loading" name="loading-spinner" />
       <slot v-if="!ready && !loading" name="play" />
     </default-button>
+    <slot name="afterPlayer" />
   </div>
 </template>
 

src/runtime/components/WeakHardwareOverlay.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-if="isServer" class="nuxt-speedkit-weak-hardware-overlay">
+    <slot>
+      Area is disabled for performance reasons.<br />
+      <button id="nuxt-speedkit-button-init-app">Click for activation</button>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const isServer = ref(true);
+
+onMounted(() => (isServer.value = false));
+</script>
+
+<style lang="postcss" scoped>
+/*! purgecss start ignore */
+.nuxt-speedkit-weak-hardware-overlay {
+  @nest html:not(.nuxt-speedkit-reduced-view) & {
+    display: none;
+  }
+}
+
+/*! purgecss end ignore */
+</style>

src/runtime/tmpl/entry.mjs

@@ -81,7 +81,7 @@ function client () {
       if(('__NUXT_SPEEDKIT_AUTO_INIT__' in window && window.__NUXT_SPEEDKIT_AUTO_INIT__) || ((<%= !options.ignorePerformance %> && hasSufficientPerformance()) && supportedBrowser)) {
         initApp();
       } else {
-        setupSpeedkitLayer(supportedBrowser)
+        setupSpeedkitLayer(layerEl, supportedBrowser)
       }
 
     }

src/runtime/utils/entry.mjs

@@ -25,12 +25,15 @@ export function updateSpeedkitLayerMessage(layerEl, id) {
   }
 }
 
-export function setupSpeedkitLayer(supportedBrowser) {
+export function setupSpeedkitLayer(layerEl, supportedBrowser) {
   if (!supportedBrowser) {
     updateSpeedkitLayerMessage('nuxt-speedkit-message-unsupported-browser');
   }
   if (!hasSufficientDownloadPerformance()) {
-    updateSpeedkitLayerMessage('nuxt-speedkit-message-reduced-bandwidth');
+    updateSpeedkitLayerMessage(
+      layerEl,
+      'nuxt-speedkit-message-reduced-bandwidth'
+    );
   }
 }
 

test/tests/browser.mjs

@@ -97,6 +97,33 @@ export default runtime => {
 
     // #endregion /tests/speedkit-layer
 
+    // #region /tests/weak-hardware-overlay
+
+    it('WeakHardwareOverlay (Visible & Init App)', async () => {
+      const page = await createPage('/weak-hardware-overlay/');
+
+      expect(
+        await page.evaluate(() =>
+          document.querySelector('.nuxt-speedkit-weak-hardware-overlay')
+        )
+      ).not.toBeFalsy();
+
+      await page.evaluate(() =>
+        document
+          .querySelector('.nuxt-speedkit-weak-hardware-overlay button')
+          .click()
+      );
+      await page.waitForSelector('main.mounted');
+
+      expect(
+        await page.evaluate(() =>
+          document.querySelector('.nuxt-speedkit-weak-hardware-overlay')
+        )
+      ).toBeFalsy();
+    });
+
+    // #endregion /tests/weak-hardware-overlay
+
     // #region /tests/speedkit-loader
 
     it('speedkitHydrate', async () => {
@@ -351,7 +378,7 @@ export default runtime => {
 
     // #region /tests/iframe
 
-    it('iframe', async () => {
+    it('SpeedkitIframe', async () => {
       const page = await createPage('/iframe/');
       await page.waitForLoadState('networkidle');
       await page.evaluate(() => {
@@ -363,7 +390,7 @@ export default runtime => {
     // #endregion
 
     // #region /tests/youtube
-    it('youtube ready, play and autoplay', async () => {
+    it('SpeedkitYoutube ready, play and autoplay', async () => {
       const page = await createPage('/youtube/');
       await page.waitForLoadState('networkidle');
 
@@ -400,7 +427,7 @@ export default runtime => {
 
     // #region /tests/vimeo
 
-    // it('vimeo ready & play', async () => {
+    // it('SpeedkitVimeo ready & play', async () => {
     //   const page = await createPage('/vimeo/');
     //   await page.waitForLoadState('networkidle');