itube-specs 0.0.759 → 0.0.761

package/components/cards/s-video-mini-card.vue

@@ -1,62 +0,0 @@
-<template>
-<component
-    :is="component"
-    class="s-video-mini-card"
-    :title="card.title"
-    :to="link ? generateLink(`/playlists/${prefix}/${card.id}`) : null"
->
-  <SImg
-      class="s-video-mini-card__img"
-      sizes="140px"
-      :src="currentPoster"
-      width="1600"
-      height="900"
-      :alt="card.title"
-      @error="onPosterError"
-  />
-  <div class="s-video-mini-card__wrapper">
-    <p class="s-video-mini-card__title _truncate">{{ card.title }}</p>
-    <span v-if="card.channelName" class="s-video-mini-card__channel _truncate">{{ card.channelName }}</span>
-    <span class="s-video-mini-card__duration">
-      <SIcon name="time" size="12" />
-      {{ duration }}</span>
-  </div>
-</component>
-</template>
-
-<script setup lang="ts">
-import type { IVideoCard } from '../../types';
-import { getDuration, ThumbSize } from '../../runtime';
-
-const props = defineProps<{
-  card: IVideoCard
-  link?: boolean
-  prefix?: string
-}>()
-
-const posterError = ref(false)
-
-const duration = computed(() => {
-  return getDuration(props.card.duration)
-})
-
-const component = computed(() => {
-  if (props.link) {
-    return resolveComponent('NuxtLink');
-  }
-  return 'div';
-})
-
-const { generateLink } = useGenerateLink();
-
-const posterPlaceholder = '/img/placeholder.webp'
-
-const currentPoster = computed(() => {
-  if (posterError.value) return posterPlaceholder
-  return props.card.thumbUrls?.webp?.[ThumbSize.Small] || posterPlaceholder
-})
-
-function onPosterError() {
-  posterError.value = true
-}
-</script>

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

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

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

@@ -1,23 +0,0 @@
-<template>
-  <div
-      id="anchor"
-      class="s-grid-channels"
-  >
-    <FChannelCard
-        v-for="(item, index) in items"
-        :key="item.guid"
-        class="s-grid-channels__card"
-        :card="item"
-        :priority="priority && index === 0"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IChannelCard } from '../../types';
-
-defineProps<{
-  items: IChannelCard[]
-  priority?: boolean
-}>()
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-  <div
-      class="s-grid-models"
-      :class="{'--footer': footer}"
-  >
-    <FModelCard
-        v-for="(item, index) in items"
-        :key="`model-card-${item.guid}`"
-        class="s-grid-models__item"
-        :card="item"
-        :loading="index > 5 ? 'lazy' : 'eager'"
-        :priority="priority && index === 0"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IModelCard } from '../../types';
-
-defineProps<{
-  items: IModelCard[]
-  footer?: boolean
-  priority?: boolean
-}>()
-</script>

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

@@ -1,21 +0,0 @@
-<template>
-  <div class="s-grid-playlists">
-    <FPlaylistCard
-        v-for="(item, index) in items"
-        :key="`user-playlist-${index}`"
-        :card="item"
-        :top-playlists="topPlaylists"
-        :priority="priority && index === 0"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IPlaylistCard } from '../../types';
-
-defineProps<{
-  items: IPlaylistCard[]
-  topPlaylists?: boolean
-  priority?: boolean
-}>()
-</script>

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

@@ -1,75 +0,0 @@
-<template>
-  <div
-      class="s-grid-videos"
-      :class="[
-          {'--first-hidden': hideFirstRow},
-      ]"
-  >
-    <slot name="grid-start"/>
-    <FVideoCard
-        v-for="(item, index) in eagerItems"
-        :key="`video-${item.guid}`"
-        class="s-grid-videos__card"
-        :card="item"
-        :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" :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>
-    <slot name="grid-end"/>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IVideoCard } from '../../types';
-
-const IDLE_COUNT = 4;
-
-const props = defineProps<{
-  items: Array<IVideoCard>
-  hideFirstRow?: boolean
-  priority?: boolean
-  related?: boolean
-  playlist?: boolean
-  playlistId?: string
-  topChips?: string[]
-}>();
-
-const route = useRoute();
-const isMobile = useState<boolean>('isMobile');
-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-breadcrumbs.vue

@@ -1,44 +0,0 @@
-<template>
-  <nav class="s-breadcrumbs" aria-label="Breadcrumb" role="navigation" itemscope itemtype="https://schema.org/BreadcrumbList">
-    <ol>
-      <li
-        v-for="(item, index) in resultItems"
-        :key="`breadcrumb-${index}`"
-        itemscope
-        itemprop="itemListElement"
-        itemtype="https://schema.org/ListItem"
-      >
-        <NuxtLink
-          :to="generateLink(item.to || '/')"
-          class="s-breadcrumbs__item"
-          itemprop="item"
-        >
-          <span itemprop="name" v-html="item.name" />
-        </NuxtLink>
-        <meta itemprop="position" :content="String(index + 1)" >
-      </li>
-      <li
-        itemscope
-        itemprop="itemListElement"
-        itemtype="https://schema.org/ListItem"
-      >
-        <span class="s-breadcrumbs__item" aria-current="page" itemprop="name" v-html="items[items.length - 1].name" />
-        <meta itemprop="position" :content="String(items.length)" >
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { IBreadcrumbItem } from '../../types';
-
-const props = defineProps<{
-  items: IBreadcrumbItem[]
-}>()
-
-const { generateLink } = useGenerateLink();
-
-const resultItems = computed(() => {
-  return props.items.slice(0, props.items.length - 1)
-})
-</script>

package/components/page-components/s-expand-row.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-      ref="containerRef"
-      class="s-expand-row"
-      :class="[
-            { '--expand-show': isExpandOpened },
-            { '--alphabet': alphabet },
-            { '--mobile-expand': mobileExpand },
-        ]"
-  >
-    <div
-        class="s-expand-row__wrapper"
-        :class="[{ '--more-show': isElementsOverflow }]"
-    >
-      <slot name="prepend">
-        <span v-if="preText" class="s-expand-row__pre-text">{{ preText }}</span>
-      </slot>
-      <slot>
-        <SChips
-            v-for="item in itemsResult"
-            :key="item.title"
-            :item="item"
-            :alphabet="alphabet"
-            is-link
-            :mini="mini"
-        />
-      </slot>
-      <div
-          v-if="!hideMore"
-          v-show="isElementsOverflow"
-          class="s-expand-row__more-wrapper"
-          :class="{'--small': mini}"
-      >
-        <SChips
-            class="s-expand-row__button --more"
-            :item="{
-              title: moreButtonName,
-              icon: isExpandOpened ? 'minus' : 'plus',
-            }"
-            :mini="mini"
-            @click="onMoreClick"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IChipsItem } from '../../types';
-
-const props = withDefaults(
-    defineProps<{
-      items?: IChipsItem[];
-      alphabet?: boolean;
-      hideMore?: boolean;
-      mini?: boolean;
-      mobileExpand?: boolean;
-      maximumButtons?: number;
-      preText?: string;
-    }>(), {
-      maximumButtons: 20, // вычислено на глаз, приблизительно
-    }
-);
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  (eventName: 'more', eventValue: boolean): void
-}>()
-
-const containerRef = ref();
-
-const isExpandOpened = ref(false);
-
-const itemsResult = computed(() => {
-  return props.items?.slice(
-      0,
-      !props.alphabet && !isExpandOpened.value
-          ? props.maximumButtons
-          : props.items.length,
-  );
-});
-
-const moreButtonName = computed(() => isExpandOpened.value ? t('less') : t('more'));
-
-const isElementsOverflow = ref(false);
-
-function checkIsElementOverflow() {
-  isElementsOverflow.value = !!(
-      containerRef.value &&
-      containerRef.value.scrollHeight > containerRef.value.clientHeight
-  );
-}
-
-function onMoreClick() {
-  isExpandOpened.value = !isExpandOpened.value
-  emit('more', isExpandOpened.value)
-}
-
-onMounted(() => {
-  requestAnimationFrame(() => checkIsElementOverflow());
-});
-
-let checkTimer: ReturnType<typeof setTimeout> | null = null;
-
-watch(() => useRoute().query, () => {
-  checkTimer = setTimeout(() => checkIsElementOverflow(), 100);
-});
-
-onBeforeUnmount(() => {
-  if (checkTimer) clearTimeout(checkTimer);
-});
-</script>

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

@@ -1,41 +0,0 @@
-<template>
-  <SButton
-      class="s-filter-button"
-      :size="size"
-      :theme="theme"
-      aria-label="Filter"
-      :title="t('filter')"
-      @click="emit('update:modelValue', true)"
-  >
-    <SIcon name="adjustments-horizontal" size="16"/>
-    <span class="_from-sm"
-    >{{ t('filter') }}
-      </span>
-    <span
-        v-if="count > 0"
-        class="s-filter-button__count"
-    >{{ mobileCount }}</span>
-  </SButton>
-</template>
-
-<script setup lang="ts">
-import type { ButtonSizes, ButtonThemes } from '../../types';
-
-const props = defineProps<{
-  count: number
-  modelValue: boolean
-  size?: ButtonSizes
-  theme?: ButtonThemes
-}>()
-
-const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
-}>()
-
-const { t } = useI18n()
-
-const mobileCount = computed(() => props.count > 9 ? '9+' : props.count);
-</script>
-
-<style scoped lang="scss">
-</style>

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

@@ -1,34 +0,0 @@
-<template>
-  <SExpandRow v-if="items.length > 0">
-    <template #prepend>
-      <slot/>
-    </template>
-    <SChips
-        v-for="(item, index) in items"
-        class="s-filter-chips"
-        with-close
-        :index="`s-filter-page-chips${index}`"
-        :item="item"
-        @click="onChipsClick(item)"
-    />
-  </SExpandRow>
-</template>
-
-<script setup lang="ts">
-import type { IChipsItem } from '../../types';
-
-defineProps<{
-  items: IChipsItem[]
-}>();
-
-const emit = defineEmits<{
-  (eventName: 'click', eventValue: IChipsItem): void
-}>()
-
-function onChipsClick(item: IChipsItem) {
-  emit('click', item)
-}
-</script>
-
-<style scoped lang="scss">
-</style>

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

@@ -1,185 +0,0 @@
-<template>
-  <div class="s-filter-page">
-    <div class="s-filter-page__items-wrapper">
-      <h2
-          v-if="title"
-          class="s-filter-page__title"
-      >{{ title }}
-      </h2>
-      <div
-          v-for="(group, index) in groups"
-          :key="`filter-group-${index}`"
-          class="s-filter-page__group"
-          :class="{'--short': group.name === 'tags'}"
-      >
-        <div
-            v-if="filters.length > 0"
-            class="s-filter-page__group-header"
-        >
-          <span class="s-filter-page__group-title">
-            {{ group?.title }}
-          </span>
-          <FSegmentedControl
-              v-if="group?.name === 'physical'"
-              :items="unitItems"
-              :model-value="units"
-              small
-              @update:model-value="units = $event"
-          />
-        </div>
-        <div
-            v-if="getGroupSliders(group?.name).length > 1"
-            class="s-filter-page__sliders"
-            :style="{ '--slider-count': getGroupSliders(group?.name).length }"
-        >
-          <SFilterSlider
-              v-for="(item, subIndex) in getGroupSliders(group?.name)"
-              :key="`slider-${subIndex}`"
-              :item="item"
-              :group-name="item.group.name"
-              :index="subIndex"
-          />
-        </div>
-        <div class="s-filter-page__items">
-          <template v-for="(item, subIndex) in filters">
-            <SFilterSlider
-                v-if="(item.kind === 'range') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name) && getGroupSliders(group?.name).length === 1"
-                class="s-filter-page__slider"
-                :item="item"
-                :group-name="item.group.name"
-                :index="subIndex"
-            />
-            <SSelect
-                v-if="(item.kind === 'select') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name)"
-                class="s-filter-page__select"
-                :key="`model-filter-select-${subIndex}`"
-                :name="item.name"
-                :model-value="getValue(item.name)"
-                :items="selectItems(item)"
-                size="s"
-                :active="isActiveSelect(item.name)"
-                :label="item.title"
-                @update:model-value="val => updateFilter(item.name, val)"
-            />
-            <FSegmentedControl
-                v-if="(item.kind === 'radio') && (item.group.name === group?.name)"
-                class="s-filter-page__radio"
-                :items="getRadioItems(item.options)"
-                :title="item.title"
-                :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>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IModelFilter, IModelFilterOptions } from '../../types';
-
-import { useRoute, useRouter } from 'vue-router';
-
-const props = defineProps<{
-  filters: IModelFilter[]
-  count: number
-  title?: string
-}>();
-
-const route = useRoute();
-const router = useRouter();
-
-const { t } = useI18n();
-
-const { units, hiddenByUnits } = useUnits();
-
-watch(units, () => {
-  const query = { ...route.query };
-  const unitFields = ['height_cm', 'height_in', 'weight_kg', 'weight_lb'];
-  for (const field of unitFields) {
-    delete query[`filter_${field}_from`];
-    delete query[`filter_${field}_to`];
-  }
-  router.replace({ query });
-});
-
-const unitItems = computed(() => [
-  { name: 'imperial', title: t('units_imperial'), quantity: 0 },
-  { name: 'metric', title: t('units_metric'), quantity: 0 },
-]);
-
-const groups = computed(() => {
-  const uniqueNames = [...new Set(props.filters.map(item => item.group.title))];
-  return uniqueNames.map(name => {
-    return props.filters.find(filter => filter.group.title === name)?.group;
-  }).sort((a, b) => a?.order - b?.order)
-});
-
-function getGroupSliders(groupName: string) {
-  return props.filters.filter(
-    (item) => item.kind === 'range' && item.group.name === groupName && !hiddenByUnits.value.has(item.name)
-  );
-}
-
-function selectItems(item: IModelFilter) {
-  return [
-    ...item.options.map(item => ({
-      value: item.name,
-      title: `${item.title} (${item.quantity})`,
-    }))
-  ]
-}
-
-function updateFilter(name: string, val: any) {
-  const query = { ...route.query };
-
-  if (!val || val === 'all') {
-    delete query[ `filter_${name}` ];
-  } else {
-    query[ `filter_${name}` ] = val;
-  }
-
-  router.replace({ query });
-}
-
-function isActiveSelect(name: string) {
-  const baseName = name.replace(/_(from|to)$/, '');
-  return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
-}
-
-function getValue(name: string) {
-  const value = route.query[ `filter_${name}` ];
-  if (value) {
-    return value;
-  }
-  const filter = props.filters.find(f => f.name === name);
-  if (filter && filter.options.length > 0) {
-    return filter.options[ 0 ].name;
-  }
-  return null;
-}
-
-function getRadioItems(items: IModelFilterOptions[]) {
-  const filteredItems = items.filter((item) => item.name !== 'unspecified');
-  const order = ['all', 'yes'];
-  return filteredItems.sort((a, b) => {
-    const aIndex = order.indexOf(a.name);
-    const bIndex = order.indexOf(b.name);
-    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
-    if (aIndex !== -1) return -1;
-    if (bIndex !== -1) return 1;
-    return 0;
-  });
-}
-</script>
-
-<style scoped lang="scss">
-</style>