itube-specs 0.0.195

package/components/ui/f-select.vue

@@ -0,0 +1,88 @@
+<template>
+  <label
+      class="f-select"
+      aria-label="select"
+      :class="[
+          {
+            '--wide': wide,
+            '--active': active
+          },
+          `--${size}`,
+          ]"
+  >
+    <span class="f-select__label" v-if="label">
+      {{ label }}
+      <FCount class="f-select__count" v-if="count">{{ count }}</FCount>
+    </span>
+    <span class="f-select__wrapper">
+      <FIcon
+          v-if="icon"
+          :name="icon"
+          size="24"
+          class="f-select__pre-icon"
+      />
+      <select
+          class="f-select__button"
+          :class="{'--icon': icon}"
+          :name="name"
+          @change="onChange"
+          required
+      >
+        <option
+            v-if="placeholder"
+            class="f-select__option"
+            value=""
+            selected
+            disabled
+        >{{ capitalize(placeholder) }}</option>
+        <option
+            v-for="(item, index) in items"
+            :value="item.value"
+            class="f-select__option"
+            :key="`f-select-${name}-${index}`"
+            :selected="item.value === modelValue && item.value !== placeholder"
+        >{{ capitalize(item.title as string || item.name as string) }}</option>
+      </select>
+      <FIcon
+          class="f-select__icon"
+          name="dropdown"
+          size="24"
+      />
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import type { ISelectItem } from '../../types';
+import type { LocaleObject } from '#internal-i18n-types';
+
+withDefaults(defineProps<{
+  name: string
+  icon?: string
+  placeholder?: string
+  modelValue: string | undefined
+  label?: string
+  items: ISelectItem[] | LocaleObject[]
+  wide?: boolean
+  size?: 'm' | 's'
+  count?: string | number
+  active?: boolean
+}>(), {
+  size: 'm'
+})
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: Event): void
+  (eventName: 'change', value: Event): void
+}>()
+
+function onChange(event: Event) {
+  emit('update:modelValue', event.target?.value)
+  emit('change', event.target?.value)
+}
+
+function capitalize(text: string) {
+  if (!text) return '';
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+</script>

package/components/ui/f-slider.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+      class="f-slider"
+      :class="{'--active': active}"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+  >
+    <div class="f-slider__header">
+      <span class="f-slider__label">
+        {{ title }}
+      </span>
+      <p class="f-slider__subtitle">
+        {{ t('between') }}:&nbsp;
+        <span class="f-slider__range">{{ (between && between[0]) || $attrs.min }}&#8209;{{ (between && between[1]) || $attrs.max}}</span>
+      </p>
+    </div>
+    <div class="f-slider__wrapper">
+      <Slider
+        v-model="model"
+        v-bind="$attrs"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Slider from '@vueform/slider';
+import '@vueform/slider/themes/default.css';
+
+const {t} = useI18n();
+const model = defineModel<number | number[]>();
+
+defineProps<{
+  title: string
+  active?: boolean
+  between?: string[]
+}>()
+
+let startX = 0
+
+function onTouchStart(e: TouchEvent) {
+  startX = e.touches[0].clientX
+}
+
+function onTouchMove(e: TouchEvent) {
+  const deltaX = e.touches[0].clientX - startX
+  // Если пользователь начал свайп с левого края (например < 30px) и двигает вправо — предотвращаем навигацию
+  if (startX < 30 && deltaX > 10) {
+    e.preventDefault()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/ui/f-snackbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+      class="f-snackbar"
+      :class="`--${snackbarTheme}`"
+  >
+    <FIcon class="f-snackbar__icon" :name="snackbarIcon" size="24"/>
+    {{
+      te(`snackbar.${convertSnackKey}`)
+          ? t(`snackbar.${convertSnackKey}`)
+          : t('snackbar.something_went_wrong')
+    }}
+    <FButton
+        theme="secondary"
+        size="s"
+        @click="close"
+    >{{ t('close') }}
+    </FButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { convertString } from '../../runtime';
+
+const { snackbarText, snackbarIcon, snackbarTheme, snackbarTimer } = useSnackbar();
+
+const {t, te} = useI18n();
+
+function close() {
+  snackbarText.value = ''
+}
+
+const convertSnackKey = computed(() =>
+  convertString().toSnakeCase(snackbarText.value)
+);
+
+let timerId: ReturnType<typeof setTimeout>
+
+onMounted(() => {
+  timerId = setTimeout(() => {
+    close()
+  }, snackbarTimer.value)
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(timerId)
+})
+</script>

package/components/ui/f-timestamp.vue

@@ -0,0 +1,51 @@
+<template>
+<button
+    class="f-timestamp"
+    type="button"
+    @click="onButtonClick"
+>
+  <span class="f-timestamp__preview-wrapper">
+      <span
+          class="f-timestamp__preview"
+          :style="styles"
+      />
+  </span>
+
+  <slot/>
+
+  <FIcon
+      class="f-timestamp__icon"
+      name="forward-step"
+      size="16"
+  />
+</button>
+</template>
+
+<script setup lang="ts">
+import type { IVttItem } from "../../runtime/utils/vtt-helper";
+
+const props = defineProps<{
+  pictureUrl: string,
+  coords: IVttItem['coords'];
+}>();
+
+const picture = `url(${props.pictureUrl})`;
+const position = `-${props.coords.x}px -${props.coords.y}px`;
+const w = props.coords.w + 'px';
+const h = props.coords.h + 'px';
+
+const emit = defineEmits<{
+  (eventName: 'click'): void
+}>();
+
+function onButtonClick() {
+  emit('click')
+}
+
+const styles = computed(() => ({
+  '--w': w,
+  '--h': h,
+  '--picture': picture,
+  '--position': position,
+}))
+</script>

package/components/ui/f-toggle.vue

@@ -0,0 +1,29 @@
+<template>
+  <label
+      class="f-toggle"
+      aria-label="Toggle"
+      :class="[
+          {'f-toggle--checked': modelValue},
+          {'f-toggle--disabled': disabled}
+          ]"
+  >
+    <input
+        class="f-toggle__input _visually-hidden"
+        type="checkbox"
+        :checked="modelValue"
+        :value="modelValue"
+        @change="$emit('update:modelValue', $event.target?.checked)"
+    />
+    <span v-if="$slots.default" class="f-toggle__text">
+      <slot></slot>
+      {{ modelValue}}
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  disabled?: boolean
+}>()
+</script>

package/composables/use-antiadblock-domains.ts

@@ -0,0 +1,20 @@
+export const useAntiadBlockDomains = () => {
+  const state = useState('antiadblock-domains', () => ({
+    data: null,
+    isUpdating: false
+  }));
+
+  const update = async () => {
+    try {
+      state.value.isUpdating = true;
+      state.value.data = await $fetch('/api/site/aabd');
+    } finally {
+      state.value.isUpdating = false;
+    }
+  };
+
+  return {
+    state,
+    update,
+  };
+};

package/composables/use-auth-popup.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue';
+import { EAuthSteps } from '../runtime';
+
+const isAuthPopupOpen = ref<boolean>(false);
+
+const currentStep = ref(EAuthSteps.Registration);
+const additionalText = ref(undefined as string | undefined);
+
+const openAuthPopup = (step: EAuthSteps, text?: string) => {
+  isAuthPopupOpen.value = true;
+  currentStep.value = step;
+  additionalText.value = text;
+};
+
+const closeAuthPopup = () => {
+  isAuthPopupOpen.value = false;
+};
+
+export const useAuthPopup = () => ({
+  isAuthPopupOpen,
+  currentStep,
+  openAuthPopup,
+  closeAuthPopup,
+  additionalText,
+});

package/composables/use-convert-query-categories.ts

@@ -0,0 +1,7 @@
+/**
+   * конвертирует список категорий из фильтра страниц с видео роликами из query в одну строку, все слова с заглавной буквы
+ */
+export function useConvertQueryCategories()  {
+    const MAX_CATEGORIES = 3;
+    return String(useRoute().query[ 'categories' ])?.split(',').map(item => item.split('_')[ 1 ]).map(item => item?.charAt(0).toUpperCase() + item?.slice(1)).slice(0, MAX_CATEGORIES).join(', ');
+}

package/composables/use-generate-link.ts

@@ -0,0 +1,30 @@
+import { ELanguage, ENiche } from '~/runtime';
+
+export const useGenerateLink = () => {
+  const niche = useState<string>('niche');
+  const localePath = useLocalePath();
+
+  /**
+   * Генерирует путь с учетом ниши и локали
+   * @param path - относительный путь (например: '/videos/abc123')
+   * @param localeArg - локаль
+   * @returns string - корректный путь для <NuxtLink> и navigateTo()
+   */
+  const generateLink = (path: string, localeArg?: ELanguage): string => {
+    const cleanPath = path.startsWith('/') ? path : `/${path}`
+
+    const defaultNiche = useAppConfig().defaultNiche;
+    const projectNiches = useAppConfig().niches as ENiche[];
+    const isOneNiche = projectNiches.length === 1;
+
+    const withNiche =
+      niche.value === defaultNiche || isOneNiche
+        ? cleanPath
+        : `/${niche.value}${cleanPath}`;
+
+    const locale = localeArg || undefined;
+    return localePath(withNiche, locale)
+  }
+
+  return { generateLink }
+}

package/composables/use-get-pure-route-name.ts

@@ -0,0 +1,5 @@
+import { useRoute } from 'vue-router';
+
+export function useGetPureRouteName() {
+  return String(useRoute()?.name)?.replace(/___[a-zA-Z-]+$/, '') || '';
+}

package/composables/use-get-videos-filter-request.ts

@@ -0,0 +1,30 @@
+import { getMultipleQuery } from '../runtime';
+import type { ISelectItem } from '../types';
+import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router';
+
+export function useGetVideosFilterRequest(route: RouteLocationNormalized | RouteLocationNormalizedLoaded, selectDurationItems: ISelectItem[], selectAddedItems: ISelectItem[]) {
+    // Распарсим categories из query, если есть
+    const rawCategories = route.query.categories
+        ? (typeof route.query.categories === 'string'
+            ? route.query.categories.split(',')
+            : route.query.categories.flatMap(cat => cat?.split(',')))
+        : [];
+
+    // Преобразуем из формата 'key_value' в просто 'value'
+    const parsedCategories = rawCategories
+        .map(cat => {
+            const parts = cat?.split('_');
+            if (parts && parts?.length > 1) {
+                return parts?.slice(1).join('_');
+            }
+            return cat;
+        });
+
+    const durationQuery = getMultipleQuery(route, selectDurationItems, 'min_duration', 'max_duration');
+    const addedQuery = getMultipleQuery(route, selectAddedItems, 'min_added', 'max_added');
+    return {
+        ...(parsedCategories.length > 0 ? { categories: parsedCategories } : {}),
+        ...durationQuery,
+        ...addedQuery,
+    }
+}

package/composables/use-meta.ts

@@ -0,0 +1,42 @@
+import { computed, unref } from 'vue';
+import type { Ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+export function useMeta(t, page: string, brandName: string, hasSort?: boolean, text?: Ref<string>, secondText?: Ref<string>) {
+    const route = useRoute();
+
+    const sortType = computed(() => route?.query?.['sort'] || 'trending');
+
+    function getPath(key: string) {
+        const plainSlug = unref(text);
+        const secondTextValue = unref(secondText);
+        const pageNumber = computed(() => route.query?.['page'] ? Number(route.query['page']) : 1);
+        const pageText = unref(pageNumber) === 1 ? null : ` #${unref(pageNumber)}`;
+
+        return t(
+            `meta.${page}.${hasSort ? `${sortType.value}.` : ''}${key}`,
+            {
+                text: plainSlug,
+                secondText: secondTextValue,
+                brandName: `| ${brandName}`, //черточка '|' нужна обязательно
+                page: pageText,
+            }
+        );
+    }
+
+    const metaTitle = computed(() => getPath('title'));
+    const h1 = computed(() => getPath('h1'));
+
+    const meta = computed(() => ({
+        title: metaTitle.value,
+        meta: [
+            { name: 'description', content: getPath('meta_description') },
+            { name: 'keywords', content: getPath('keywords') },
+        ],
+    }));
+
+    return {
+        meta,
+        h1,
+    };
+}

package/composables/use-playlist-edit.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { EPlaylistStep } from '../runtime';
+import type { IVideoCard, IPlaylistCard } from '../types';
+
+const deletedVideo = ref<IVideoCard | null | undefined>(null);
+const selectedPlaylist = ref<IPlaylistCard | undefined>(undefined);
+const isPlaylistEditOpen = ref<boolean>(false);
+
+const isBackToEdit = ref(false);
+const currentStep = ref(EPlaylistStep.Edit);
+
+const openPlaylistEdit = (step: EPlaylistStep, back: boolean = false, playlist?: IPlaylistCard, videoCard?: IVideoCard) => {
+  selectedPlaylist.value = playlist;
+  isPlaylistEditOpen.value = true;
+  currentStep.value = step;
+  isBackToEdit.value = back;
+  deletedVideo.value = videoCard;
+};
+
+const closePlaylistEdit = () => {
+  if (isBackToEdit.value) {
+    openPlaylistEdit(EPlaylistStep.Edit, false, selectedPlaylist.value);
+  } else {
+    isPlaylistEditOpen.value = false;
+    isBackToEdit.value = false;
+  }
+};
+
+export const usePlaylistEdit = () => ({
+  isPlaylistEditOpen,
+  currentStep,
+  openPlaylistEdit,
+  closePlaylistEdit,
+  selectedPlaylist,
+  deletedVideo,
+});

package/composables/use-report-popup.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+import type { IVideoCard } from '../types';
+
+const isReportPopupOpen = ref<boolean>(false);
+const reportedVideoCard = ref<IVideoCard>({} as IVideoCard)
+
+const openReportPopup = (card: IVideoCard) => {
+    isReportPopupOpen.value = true;
+    reportedVideoCard.value = card;
+};
+
+const closeReportPopup = () => {
+    isReportPopupOpen.value = false;
+};
+
+export const useReportPopup = () => ({
+    isReportPopupOpen,
+    openReportPopup,
+    closeReportPopup,
+    reportedVideoCard,
+});

package/composables/use-seo-links.ts

@@ -0,0 +1,87 @@
+type I18nMock = {
+  locale: { value: string };        // текущий язык
+  locales: { value: Array<string | { code: string }> };  // список доступных языков
+};
+
+type LocalePathMock = (path: string, localeCode: string) => string;
+
+export const useSeoLinks = (baseDomain: string, alonePage: boolean = false, i18n: I18nMock, localePath: LocalePathMock) => {
+    const route = useRoute();
+
+    const allowedParams: string[] = ['page', 'sort', 'categories'];
+    const createUrlWithParams = (path: string) => {
+        const url = new URL(`${baseDomain}${path}`);
+
+        Object.entries(route.query).forEach(([key, value]) => {
+            // Если alonePage === true, пропускаем sort
+            if (allowedParams.includes(key) && !(alonePage && key === 'sort')) {
+                if (Array.isArray(value)) {
+                    value.forEach(v => url.searchParams.append(key, v))
+                }
+                else if (value != null) {
+                    url.searchParams.append(key, String(value))
+                }
+            }
+        });
+
+        return url.toString();
+    };
+
+    const canonicalUrl = computed(() => createUrlWithParams(route.path));
+
+    const alternateLinks = computed(() => {
+        const links = [];
+        const currentLocaleCode = i18n.locale.value;
+        const currentHreflang = currentLocaleCode === 'jp' ? 'ja' : currentLocaleCode;
+
+        links.push({
+            rel: 'alternate',
+            hreflang: currentHreflang,
+            href: createUrlWithParams(localePath(route.path, currentLocaleCode)),
+            key: `alternate-${currentHreflang}-${route.path}`,
+        });
+
+        if (currentLocaleCode !== 'en') {
+            links.push({
+                rel: 'alternate',
+                hreflang: 'en',
+                href: createUrlWithParams(localePath(route.path, 'en')),
+                key: `alternate-en-${route.path}`,
+            });
+        }
+
+        const otherLocales = i18n.locales.value.filter(
+            (locale) => {
+                const localeCode = typeof locale === 'string' ? locale : locale.code;
+                return localeCode !== currentLocaleCode && localeCode !== 'en';
+            }
+        );
+
+        links.push(
+            ...otherLocales.map((locale) => {
+                const localeCode = typeof locale === 'string' ? locale : locale.code;
+                const hreflang = localeCode === 'jp' ? 'ja' : localeCode;
+                return {
+                    rel: 'alternate',
+                    hreflang,
+                    href: createUrlWithParams(localePath(route.path, localeCode)),
+                    key: `alternate-${hreflang}-${route.path}`,
+                };
+            })
+        );
+
+        links.push({
+            rel: 'alternate',
+            hreflang: 'x-default',
+            href: createUrlWithParams(localePath(route.path, 'en')),
+            key: `alternate-x-default-${route.path}`,
+        });
+
+        return links;
+    });
+
+    return {
+        canonicalUrl,
+        alternateLinks,
+    };
+};

package/composables/use-share-popup.ts

@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+import type { IVideoCard } from '../types';
+
+const isSharePopupOpen = ref<boolean>(false);
+const sharedVideoCard = ref<IVideoCard>({} as IVideoCard)
+
+const openSharePopup = (card?: IVideoCard) => {
+    isSharePopupOpen.value = true;
+    if (card && Object.keys(card).length) {
+        sharedVideoCard.value = card;
+    }
+};
+
+const closeSharePopup = () => {
+    isSharePopupOpen.value = false;
+};
+
+export const useSharePopup = () => ({
+    isSharePopupOpen,
+    openSharePopup,
+    closeSharePopup,
+    sharedVideoCard,
+});

package/composables/use-snackbar.ts

@@ -0,0 +1,52 @@
+import { parseApiError } from '../runtime';
+
+const SUCCESS_TIME = 3000;
+const ERROR_TIME = 5000;
+
+const snackbarIcon = ref('check-circle');
+const snackbarText = ref('');
+const snackbarButtonText = ref('');
+const isSnackBarInPopup = ref(false);
+const snackbarTheme = ref('success' as 'success' | 'error' | 'default');
+const snackbarTimer = ref(SUCCESS_TIME);
+
+let _timeoutClosure: null | ReturnType<typeof setTimeout> = null;
+
+const setErrorState = (error: any) => {
+  snackbarText.value =  parseApiError(error);
+  snackbarTheme.value = 'error';
+  snackbarIcon.value = 'exclamation-circle';
+  snackbarTimer.value = ERROR_TIME;
+};
+
+function showErrorSnack(message: string) {
+  if (_timeoutClosure) {
+    clearTimeout(_timeoutClosure);
+  }
+
+  snackbarTheme.value = 'error';
+  snackbarIcon.value = 'exclamation-circle';
+  snackbarText.value = message;
+  snackbarTimer.value = ERROR_TIME;
+
+  _timeoutClosure = setTimeout(resetSnackbar, snackbarTimer.value);
+}
+
+function resetSnackbar() {
+  snackbarIcon.value = 'check-circle';
+  snackbarText.value = '';
+  snackbarTheme.value = 'success';
+  snackbarTimer.value = SUCCESS_TIME;
+}
+
+export const useSnackbar = () => ({
+  snackbarIcon,
+  snackbarText,
+  snackbarButtonText,
+  snackbarTheme,
+  snackbarTimer,
+  setErrorState,
+  showErrorSnack,
+  isSnackBarInPopup,
+  resetSnackbar,
+});

package/composables/use-test-composable.ts

@@ -0,0 +1,3 @@
+export function useTestComposable() {
+  console.log('useTestComposable')
+}

package/lib/alphabet-items.ts

@@ -0,0 +1,2 @@
+
+export const alphabetItems = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];