itube-specs 0.0.728 → 0.0.730

package/components/grids/s-grid-videos.vue

@@ -11,13 +11,27 @@
         :key="`video-${item.guid}`"
         class="s-grid-videos__card"
         :card="item"
-        :priority="priority && index < 4"
-        :loading="index < 8 && !related ? 'eager' : 'lazy'"
+        :priority="priority && index < eagerCount"
+        :loading="!related ? 'eager' : 'lazy'"
         :top-chips="topChips"
         :playlist-id="playlistId"
         :playlist="playlist"
     />
     <slot/>
+    <NuxtLazyHydrate when-idle v-if="idleItems.length > 0">
+      <div class="s-grid-videos__idle">
+        <FVideoCard
+            v-for="item in idleItems"
+            :key="`video-idle-${item.guid}`"
+            class="s-grid-videos__card"
+            :card="item"
+            loading="lazy"
+            :top-chips="topChips"
+            :playlist-id="playlistId"
+            :playlist="playlist"
+        />
+      </div>
+    </NuxtLazyHydrate>
     <NuxtLazyHydrate when-visible v-if="lazyItems.length > 0">
       <div class="s-grid-videos__lazy">
         <FVideoCard
@@ -38,8 +52,9 @@
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../types';
+import { isMobileDevice } from '../../runtime';
 
-const EAGER_COUNT = 12;
+const IDLE_COUNT = 4;
 
 const props = defineProps<{
   items: Array<IVideoCard>
@@ -51,6 +66,12 @@ const props = defineProps<{
   topChips?: string[]
 }>()
 
-const eagerItems = computed(() => props.items.slice(0, EAGER_COUNT));
-const lazyItems = computed(() => props.items.slice(EAGER_COUNT));
+const isMobile = useState('isMobile', () =>
+  isMobileDevice(useRequestHeaders()['user-agent'] ?? '')
+);
+const eagerCount = computed(() => isMobile.value ? 4 : 12);
+
+const eagerItems = computed(() => props.items.slice(0, eagerCount.value));
+const idleItems = computed(() => props.items.slice(eagerCount.value, eagerCount.value + IDLE_COUNT));
+const lazyItems = computed(() => props.items.slice(eagerCount.value + IDLE_COUNT));
 </script>

package/components/page-components/s-filter-popup.vue

@@ -2,6 +2,7 @@
   <SPopup
       v-if="isOpen"
       v-model="isOpen"
+      drawer
       @close="closePopup"
   >
     <template #title>{{ filterTitle }}</template>

package/components/page-components/s-model-filters.vue

@@ -4,10 +4,11 @@
         :items="chipsItems"
         @click="(e: IChipsItem)=> onChipsClick(e)"
     />
-    <transition>
+    <transition appear>
       <SPopup
           v-if="model"
           v-model="model"
+          drawer
           class="s-model-filters__popup"
       >
         <template #title>{{ popupTitle }}</template>

package/components/page-components/s-section-title.vue

@@ -3,6 +3,14 @@
     <h1 v-if="titleTag === 'h1'" class="s-section-title__title _title">{{ title }}</h1>
     <h2 v-else-if="titleTag === 'h2'" class="s-section-title__title _title">{{ title }}</h2>
     <h3 v-else-if="titleTag === 'h3'" class="s-section-title__title _title">{{ title }}</h3>
+    <img
+        v-if="img"
+        class="s-section-title__flag"
+        :src="img"
+        width="24"
+        height="16"
+        :alt="img"
+    />
     <SCount
         v-if="count"
         class="s-section-title__count"
@@ -17,6 +25,7 @@ withDefaults(defineProps<{
   titleTag?: string
   title: string
   icon?: string
+  img?: string
 }>(), {
   titleTag: 'h1'
 })

package/components/ui/s-popup.vue

@@ -4,6 +4,7 @@
     class="s-popup"
     :class="[
         {'--sheet': sheet},
+        {'--drawer': drawer},
         {'--transparent-backdrop': transparentBackdrop},
     ]"
     @click="closeByBackdropClick"
@@ -82,6 +83,7 @@ const props = defineProps<{
   back?: boolean
   transparentBackdrop?: boolean
   sheet?: boolean
+  drawer?: boolean
   title?: string
   notModal?: boolean
 }>()

package/lib/scheme/categories-navigation.ts

@@ -2,7 +2,7 @@ import type { IChipsItem } from '../../types';
 
 export const categoriesNavigation: Array<IChipsItem> = [
     {
-        title: 'top_rated',
+        title: 'grouped',
         value: '/categories',
     },
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.728",
+  "version": "0.0.730",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {