itube-specs 0.0.759 → 0.0.760

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

@@ -1,6 +1,6 @@
 <template>
   <div class="s-grid-categories">
-    <FCategoryCard
+    <SCategoryCard
         v-for="(item, index) in categories"
         :key="item.guid"
         :card="item"
@@ -16,5 +16,5 @@ import type { ICategoryCard } from '../../types';
 defineProps<{
   categories: Array<ICategoryCard>,
   priority?: boolean
-}>()
+}>();
 </script>

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

@@ -3,7 +3,7 @@
       id="anchor"
       class="s-grid-channels"
   >
-    <FChannelCard
+    <SChannelCard
         v-for="(item, index) in items"
         :key="item.guid"
         class="s-grid-channels__card"
@@ -19,5 +19,5 @@ import type { IChannelCard } from '../../types';
 defineProps<{
   items: IChannelCard[]
   priority?: boolean
-}>()
+}>();
 </script>

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

@@ -3,7 +3,7 @@
       class="s-grid-models"
       :class="{'--footer': footer}"
   >
-    <FModelCard
+    <SModelCard
         v-for="(item, index) in items"
         :key="`model-card-${item.guid}`"
         class="s-grid-models__item"
@@ -21,5 +21,5 @@ defineProps<{
   items: IModelCard[]
   footer?: boolean
   priority?: boolean
-}>()
+}>();
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="s-grid-playlists">
-    <FPlaylistCard
+    <SPlaylistCard
         v-for="(item, index) in items"
         :key="`user-playlist-${index}`"
         :card="item"
@@ -17,5 +17,5 @@ defineProps<{
   items: IPlaylistCard[]
   topPlaylists?: boolean
   priority?: boolean
-}>()
+}>();
 </script>

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

@@ -6,7 +6,7 @@
       ]"
   >
     <slot name="grid-start"/>
-    <FVideoCard
+    <SVideoCard
         v-for="(item, index) in eagerItems"
         :key="`video-${item.guid}`"
         class="s-grid-videos__card"
@@ -18,34 +18,28 @@
         :playlist="playlist"
     />
     <slot/>
-    <NuxtLazyHydrate when-idle v-if="idleItems.length > 0" :key="`idle-${route.fullPath}`">
-      <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" :key="`lazy-${route.fullPath}`">
-      <div class="s-grid-videos__lazy">
-        <FVideoCard
-            v-for="item in lazyItems"
-            :key="`video-lazy-${item.guid}`"
-            class="s-grid-videos__card"
-            :card="item"
-            loading="lazy"
-            :top-chips="topChips"
-            :playlist-id="playlistId"
-            :playlist="playlist"
-        />
-      </div>
-    </NuxtLazyHydrate>
+    <LazySVideoCard
+        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"
+        hydrate-on-idle
+    />
+    <LazySVideoCard
+        v-for="item in lazyItems"
+        :key="`video-lazy-${item.guid}`"
+        class="s-grid-videos__card"
+        :card="item"
+        loading="lazy"
+        :top-chips="topChips"
+        :playlist-id="playlistId"
+        :playlist="playlist"
+        hydrate-on-visible
+    />
     <slot name="grid-end"/>
   </div>
 </template>
@@ -65,7 +59,6 @@ const props = defineProps<{
   topChips?: string[]
 }>();
 
-const route = useRoute();
 const isMobile = useState<boolean>('isMobile');
 const eagerCount = computed(() => isMobile.value ? 4 : 12);
 

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

@@ -19,7 +19,7 @@
           <span class="s-filter-page__group-title">
             {{ group?.title }}
           </span>
-          <FSegmentedControl
+          <SSegmentedControl
               v-if="group?.name === 'physical'"
               :items="unitItems"
               :model-value="units"
@@ -61,7 +61,7 @@
                 :label="item.title"
                 @update:model-value="val => updateFilter(item.name, val)"
             />
-            <FSegmentedControl
+            <SSegmentedControl
                 v-if="(item.kind === 'radio') && (item.group.name === group?.name)"
                 class="s-filter-page__radio"
                 :items="getRadioItems(item.options)"
@@ -69,13 +69,6 @@
                 :model-value="getValue(item.name)"
                 @update:model-value="val => updateFilter(item.name, val)"
             />
-            <FFilterByChips
-                v-if="(item.kind === 'chips') && (item.group.name === group?.name)"
-                class="f-filters-main__chips"
-                :items="item.options"
-                :title="item.title"
-                :filter-name="item.name"
-            />
           </template>
         </div>
       </div>

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

@@ -8,7 +8,7 @@
     />
 
     <transition>
-      <SFilterPopup
+      <LazySFilterPopup
           v-if="filterOpen"
           v-model="filterOpen"
           :title="$t('filter')"
@@ -39,7 +39,7 @@
             </SButton>
           </div>
         </template>
-      </SFilterPopup>
+      </LazySFilterPopup>
     </transition>
   </div>
 </template>

package/components/page-components/s-info-grid.vue

@@ -32,12 +32,12 @@
                 ]"
             >
               <img
-                  v-if="item.name === 'nationality' && isoCode"
+                  v-if="item.name === 'nationality_iso_codes' && isoCodes"
                   class="s-info-grid__item-flag"
-                  :src="`/icons/flags/${isoCode}.svg`"
+                  :src="`/icons/flags/${isoCodes[vIndex]}.svg`"
                   width="20"
                   height="14"
-                  :alt="isoCode"
+                  :alt="isoCodes[vIndex]"
               />
               <SIcon v-else-if="item.icon" class="s-info-grid__item-icon" :name="item.icon" prefix="models" size="16"/>
               {{ value.title }}
@@ -54,7 +54,7 @@ import type { IGroupedParameter, IGroupedParameterItem } from '../../types';
 
 defineProps<{
   groups: IGroupedParameter[]
-  isoCode?: string
+  isoCodes?: string
 }>();
 
 const PLAIN_GROUP_ITEM_NAMES = ['turnons'];

package/components/page-components/s-report.vue

@@ -46,6 +46,7 @@
           <p
               v-if="activeCategory.text"
               class="s-report__form-text"
+              :class="{'--error': errorRadio && !hasReasonHeading}"
           >{{ t(`report_form.${activeCategory.text}`) }}
           </p>
           <p
@@ -70,6 +71,12 @@
                 :key="`${subItem.label}-${subIndex}`"
                 :class="[{'--wide': subItem.wide},subItem.marginClass]"
             >
+              <p
+                  v-if="subItem.type === 'heading'"
+                  class="s-report__form-text"
+                  :class="{'--error': errorRadio}"
+              >{{ t(`report_form.${subItem.text}`) }}
+              </p>
               <SInput
                   v-if="['text', 'tel', 'textarea'].includes(subItem.type)"
                   v-model="form.data[subItem.value] as string"
@@ -96,8 +103,6 @@
                   :value="subItem.value"
                   :label="t(`report_form.${subItem.text}`)"
                   :required="subItem.required"
-                  :error="errorRadio"
-                  @update:error="(val: boolean) => errorRadio = val"
               />
             </div>
           </form>
@@ -122,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { reportFormsScheme } from '../../lib/report-forms-scheme';
+import { reportFormsScheme } from '../../lib';
 import { EReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
 import type { InputTypes, IReportForm, IReportRequest } from '../../types';
 
@@ -172,12 +177,17 @@ watch(isReportPopupOpen, (val) => {
   }
 });
 
+watch(reasonValue, (val) => {
+  if (val) errorRadio.value = false;
+});
+
 const videoGuid = computed(() => reportedVideoCard.value.guid);
 
 const loading = ref(false);
 
 const activeCategory = computed(() => reportFormsScheme.find((subItem) => subItem.subject === activeStep.value))
 const requiredFields = computed(() => activeCategory.value?.items?.filter(item => item.required).map(item => item.value));
+const hasReasonHeading = computed(() => activeCategory.value?.items?.some(item => item.type === 'heading'));
 
 const { showSuccess, showError, resetSnackbar } = useSnackbar();
 

package/components/page-components/s-share.vue

@@ -81,6 +81,29 @@ const fullUrl = computed(() =>
     props.url ? origin.value + props.url : origin.value + route.fullPath
 );
 
+const isMobile = useState<boolean>('isMobile');
+
+function canNativeShare() {
+  return typeof navigator !== 'undefined' && !!navigator.share && isMobile.value;
+}
+
+function nativeShare() {
+  navigator.share({
+    title: document.title,
+    text: document.title,
+    url: fullUrl.value,
+  }).catch((err) => {
+    console.warn('Share failed:', err);
+  });
+}
+
+watch(() => props.modelValue, (val) => {
+  if (val && canNativeShare()) {
+    emit('update:modelValue', false);
+    nativeShare();
+  }
+});
+
 function copyUrl() {
   if (!process.client) return;
   navigator.clipboard.writeText(fullUrl.value).then(() => {
@@ -119,4 +142,4 @@ const buttons = computed(() => {
     },
   ]
 })
-</script>
+</script>

package/composables/use-meta.ts

@@ -14,7 +14,7 @@ import type { IChipsItem } from '../types';
  * @param thirdText - третий подставляемый текст
  * @param fourthText - четвёртый подставляемый текст
  */
-export function useMeta(t, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
+export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
     const route = useRoute();
 
     const sortType = computed(() => {
@@ -48,12 +48,20 @@ export function useMeta(t, page: string, brandName: string, sortOptions?: IChips
     const metaTitle = computed(() => getPath('title'));
     const h1 = computed(() => getPath('h1'));
 
-    const meta = computed(() => ({
-        title: metaTitle.value,
-        meta: [
-            { name: 'description', content: getPath('meta_description') },
-        ],
-    }));
+    const meta = computed(() => {
+        const description = getPath('meta_description');
+
+        return {
+            title: metaTitle.value,
+            meta: [
+                { name: 'description', content: description },
+                { property: 'og:title', content: metaTitle.value },
+                { property: 'og:description', content: description },
+                { name: 'twitter:title', content: metaTitle.value },
+                { name: 'twitter:description', content: description },
+            ],
+        };
+    });
 
     return {
         meta,

package/composables/use-model-filter-chips.ts

@@ -1,14 +1,8 @@
-import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../types'
-import type { LocationQuery } from '#vue-router'
-import { getMonth } from '../runtime'
+import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../types';
+import type { LocationQuery } from '#vue-router';
+import { getMonth } from '../runtime';
 import type { Ref } from 'vue';
 
-/**
- * Формирует вычисляемый список чипсов из активных filter_* параметров в query маршрута.
- * @param filters - список схем фильтров модели
- * @param route - текущий маршрут с query
- * @param t - функция перевода (i18n)
- */
 export function useFilterChipsItems(
   filters: Ref<IModelFilter[]>,
   route: { query: LocationQuery },
@@ -21,52 +15,58 @@ export function useFilterChipsItems(
         item
           .replace('filter_', '')
           .replace(/_/g, ' ')
-      )
+      );
 
     const groups = Object.values(
       queryItems.reduce((acc: Record<string, string[]>, str: string) => {
-        const parts = str.split(' ')
-        const last = parts.at(-1)
+        const parts = str.split(' ');
+        const last = parts.at(-1);
 
         const key =
           last === 'from' || last === 'to'
             ? parts.slice(0, -1).join(' ')
-            : str
+            : str;
 
-        acc[key] ??= []
+        acc[key] ??= [];
 
-        if (last === 'from') acc[key].unshift(str)
-        else acc[key].push(str)
+        if (last === 'from') acc[key].unshift(str);
+        else acc[key].push(str);
 
-        return acc
+        return acc;
       }, {})
-    )
+    );
+
+    const findFilter = (items: string[]) => {
+      const key = items[0].replace(' from', '').replace(' to', '');
+      return filters.value.find(f => f.name.replace(/_/g, ' ') === key);
+    };
 
     const getValue = (item: string, index: number) => {
       const filter = filters.value.find(filter =>
         filter.name ===
         item
-          .replace(/ /g, '_')
+          .replace(/ /g,
+              '_')
           .replace('_from', '')
           .replace('_to', '')
-      )
+      );
 
       const defaultValue =
         index === 0
           ? filter?.options[0]
-          : filter?.options.at(-1)
+          : filter?.options.at(-1);
 
-      const value = route.query[`filter_${item.replace(/ /g, '_')}`]
+      const value = route.query[`filter_${item.replace(/ /g, '_')}`];
 
       if (item.includes('month')) {
         return getMonth(
           t,
           Number(value ?? defaultValue?.name) - 1
-        )
+        );
       }
 
       if (!isNaN(Number(value))) {
-        return value
+        return value;
       }
 
       return (
@@ -75,31 +75,35 @@ export function useFilterChipsItems(
             option.name === value
         )?.title ??
         defaultValue?.title
-      )
-    }
+      );
+    };
 
     const getValueText = (items: string[]) =>
-      [...new Set(items.map(getValue))].join(' - ')
-
-    const chipsTitle = (items: string[]) => {
-      const key = items[0].replace(' from', '')
-      const filter = filters.value.find(
-        f => f.name.replace(/_/g, ' ') === key
-      )
-
-      const text = `${filter?.title}: ${getValueText(items)}`
-      return text.length > 30 ? getValueText(items) : text
-    }
-
-    return groups.map(item => ({
-      title: chipsTitle(item),
-      value: item.map(
-        sub => `filter_${sub.replace(/ /g, '_')}`
-      ),
-    }))
-  })
+      [...new Set(items.map(getValue).filter(v => v !== undefined && v !== null && v !== ''))].join(' - ');
+
+    const chipsTitle = (items: string[], filter: IModelFilter) => {
+      const valueText = getValueText(items);
+      const text = `${filter.title}: ${valueText}`;
+      return text.length > 30 ? valueText : text;
+    };
+
+    return groups
+      .map(item => {
+        const filter = findFilter(item);
+        if (!filter) return null;
+        const valueText = getValueText(item);
+        if (!valueText) return null;
+        return {
+          title: chipsTitle(item, filter),
+          value: item.map(
+            sub => `filter_${sub.replace(/ /g, '_')}`
+          ),
+        };
+      })
+      .filter((c): c is IChipsItem => c !== null);
+  });
 
   return {
     chipsItems,
-  }
+  };
 }

package/package.json

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

package/components/playlist/s-playlist-like.vue.unused

@@ -1,96 +0,0 @@
-<template>
-  <div class="s-playlist-like">
-    <button
-        class="s-playlist-like__control"
-        :class="{'--active': isLiked}"
-        type="button"
-        :title="t('like')"
-        @click="onReactionClick('like')"
-    >
-      <SIcon class="s-playlist-like__control-icon" name="thumbs-up" size="16"/>
-      {{ formatNumber(Number(resultLikes)) }}
-    </button>
-    <div
-        v-if="bar"
-        class="s-playlist-like__bar"
-    >
-      <div
-          class="s-playlist-like__bar-likes"
-          :style="{ width: likePercent + '%' }"
-      />
-      <div
-          class="s-playlist-like__bar-dislikes"
-          :style="{ width: dislikePercent + '%' }"
-      />
-    </div>
-    <button
-        class="s-playlist-like__control"
-        :class="{'--active': isDisliked}"
-        type="button"
-        :title="t('dislike')"
-        @click="onReactionClick('dislike')"
-    >
-      <SIcon class="s-playlist-like__control-icon" name="thumbs-down" size="16"/>
-      {{ formatNumber(Number(resultDislikes)) }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { formatNumber } from '../../runtime';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  playlistId: string
-  likes: number
-  dislikes: number
-  bar?: boolean
-}>()
-
-const emit = defineEmits<{
-  (eventName: 'like', eventValue: string): void
-  (eventName: 'dislike', eventValue: string): void
-}>()
-
-const likeStatus = ref<'like' | 'dislike' | null>(null);
-const isLiked = computed(() => likeStatus.value === 'like');
-const isDisliked = computed(() => likeStatus.value === 'dislike');
-const resultLikes = ref(props.likes);
-const resultDislikes = ref(props.dislikes);
-
-onMounted(() => {
-  const stored = localStorage.getItem(props.playlistId);
-  if (stored === 'like' || stored === 'dislike') {
-    likeStatus.value = stored;
-    if (stored === 'like') resultLikes.value += 1;
-    if (stored === 'dislike') resultDislikes.value += 1;
-  }
-});
-
-async function onReactionClick(type: 'like' | 'dislike') {
-  if (likeStatus.value !== type) {
-    likeStatus.value = type;
-    localStorage.setItem(props.playlistId, type);
-
-    const isLike = type === 'like';
-
-    if (isLike) {
-      if (resultLikes.value < 1000) resultLikes.value += 1;
-      if (resultDislikes.value > 0) resultDislikes.value -= 1;
-      emit('like', props.playlistId);
-    } else {
-      if (resultDislikes.value < 1000) resultDislikes.value += 1;
-      if (resultLikes.value > 0) resultLikes.value -= 1;
-      emit('dislike', props.playlistId);
-    }
-  }
-}
-
-const likes = computed(() => resultLikes.value || 0);
-const dislikes = computed(() => resultDislikes.value || 0);
-const total = computed(() => likes.value + dislikes.value || 1);
-
-const likePercent = computed(() => (likes.value / total.value) * 100);
-const dislikePercent = computed(() => (dislikes.value / total.value) * 100);
-</script>

package/components/playlist/s-playlist-new.vue.unused

@@ -1,57 +0,0 @@
-<template>
-  <div class="s-playlist-new" :class="{'_loading': loadingPostPlaylist}">
-    <SInput
-        v-model="newTitleValue"
-        :label="$t('title')"
-    />
-    <SPlaylistPrivateToggle v-model="isPrivate" />
-    <div class="s-playlist-new__buttons">
-      <SButton
-          wide
-          theme="secondary"
-          @click="closePopup"
-      >{{ $t('cancel') }}
-      </SButton>
-      <SButton
-          wide
-          theme="primary"
-          @click="onSaveClick"
-      >{{ $t('save') }}
-      </SButton>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { EPlaylistType } from '../../runtime';
-import type { IPlaylistShort } from '../../types';
-
-defineProps<{
-  loadingPostPlaylist: boolean
-}>()
-
-const emit = defineEmits<{
-  (eventName: 'close'): void
-  (eventName: 'post', eventValue: IPlaylistShort): void
-}>()
-
-const { closePlaylistAdd } = usePlaylistAdd();
-const newTitleValue = ref('');
-const isPrivate = ref(false);
-
-function closePopup() {
-  closePlaylistAdd();
-  emit('close');
-}
-
-async function onSaveClick() {
-  try {
-    emit('post', {
-      name: newTitleValue.value,
-      type: isPrivate.value ? EPlaylistType.Private : EPlaylistType.Public
-    });
-  } catch(error) {
-    console.log(error, 'error create playlist');
-  }
-}
-</script>