itube-specs 0.0.195

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

@@ -0,0 +1,221 @@
+<template>
+  <transition mode="out-in">
+    <FPopup
+        v-if="isReportPopupOpen"
+        v-model="isReportPopupOpen"
+    >
+      <template #title>{{ t('report') }}</template>
+      <div
+          class="f-report__popup-wrapper"
+          :class="{'_loading': loading}"
+      >
+        <FVideoMiniCard
+            class="f-report__video-card"
+            :card="reportedVideoCard"
+        />
+        <div class="f-report__forms">
+          <details
+              v-for="(item, index) in reportFormsScheme"
+              class="f-report__form"
+              name="report-details"
+              :key="`report-form-${index}`"
+              @toggle="(event) => onToggle(event, item.subject)"
+          >
+            <summary
+                class="f-report__form-button"
+            >
+              {{ t(`report_form.${item.title}`) }}
+              <FIcon
+                  class="f-report__form-icon"
+                  name="chevron-down"
+                  size="24"
+              />
+            </summary>
+            <p
+                v-if="item.text"
+                class="f-report__form-text"
+            >{{  t(`report_form.${item.text}`) }}
+            </p>
+            <p
+                v-if="item.subtext"
+                class="f-report__form-text"
+            >{{  t(`report_form.${item.subtext}`) }}
+            </p>
+            <ul
+                v-if="item.list && item.list.length > 0"
+            >
+              <li
+                  v-for="(subItem, subIndex) in item.list"
+                  :key="`report-list-${subIndex}`"
+                  class="f-report__form-list"
+              >{{  t(`report_form.${subItem.text}`) }}
+              </li>
+            </ul>
+            <form class="f-report__form-wrapper">
+              <template
+                  v-for="(subItem, subIndex) in item.items"
+                  :key="`${subItem.label}-${subIndex}`"
+              >
+                <FInput
+                    v-if="['text', 'tel', 'textarea'].includes(subItem.type)"
+                    v-model="form.data[subItem.value] as string"
+                    :key="`report-form-${index}`"
+                    :label=" t(`report_form.${subItem.label}`)"
+                    :type="subItem.type as InputTypes"
+                    :class="{'--wide': subItem.wide}"
+                    :required="subItem.required"
+                    :error="error[subItem.value]"
+                    @update:error="(val: boolean) => error[subItem.value] = val"
+                />
+                <FCheckbox
+                    v-if="subItem.type === 'checkbox'"
+                    v-model="form.data[subItem.value] as boolean"
+                    class="--wide"
+                    :required="subItem.required"
+                    :error="error[subItem.value]"
+                    @update:error="(val: boolean) => error[subItem.value] = val"
+                >{{  t(`report_form.${subItem.text}`) }}
+                </FCheckbox>
+                <FRadio
+                    v-if="subItem.type === 'radio' "
+                    v-model="reasonValue"
+                    name="report-radio-value"
+                    :value="subItem.value"
+                    class="--wide"
+                    :label=" t(`report_form.${subItem.text}`)"
+                    :required="subItem.required"
+                    :error="errorRadio"
+                    @update:error="(val: boolean) => errorRadio = val"
+                />
+              </template>
+            </form>
+            <FButton
+                :disabled="loading"
+                wide
+                @click="submit"
+            >{{ t('report_form.send_report') }}
+            </FButton>
+          </details>
+        </div>
+        <FButton
+            wide
+            theme="secondary"
+            @click="closeReportPopup"
+        >{{ t('cancel') }}
+        </FButton>
+      </div>
+    </FPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { reportFormsScheme } from '../../lib/report-forms-scheme';
+import { EReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
+import type { InputTypes, IReportForm } from '../../types';
+
+const reasonValue = ref('');
+const errorRadio = ref(false);
+const error = ref<Record<string, boolean>>({});
+
+const { t } = useI18n();
+
+const form = ref<IReportForm>({
+  categoryName: EReportFormsSubjects.DMCA,
+  reason: '',
+  url: '',
+  token: '',
+  data: {},
+})
+
+const { isReportPopupOpen, closeReportPopup, reportedVideoCard } = useReportPopup();
+
+const videoGuid = computed(() => reportedVideoCard.value.guid);
+
+const loading = ref(false);
+
+const activeCategory = computed(() => reportFormsScheme.find((subItem) => subItem.subject === form.value.categoryName))
+const requiredFields = computed(() => activeCategory.value?.items?.filter(item => item.required).map(item => item.value));
+
+const { executeRecaptcha } = useGoogleRecaptcha();
+
+const { snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
+
+function resetForm() {
+  Object.keys(form.value).forEach((key) => {
+    if (key === 'data') {
+      form.value.data = {}
+    }
+  })
+  reasonValue.value = ''
+  Object.keys(error.value).forEach(key => error.value[ key ] = false)
+  errorRadio.value = false
+}
+
+async function submit() {
+  resetSnackbar();
+  errorRadio.value = false;
+  Object.keys(error.value).forEach(key => error.value[ key ] = false);
+
+  let valid = true;
+
+  if (activeCategory.value?.hasReason) {
+    errorRadio.value = !reasonValue.value;
+    if (errorRadio.value) valid = false;
+  }
+
+  if (requiredFields.value && requiredFields.value.length > 0) {
+    requiredFields.value.forEach(item => {
+      const val = form.value.data[ item ];
+
+      if (item === 'from' && !validateEmail(val as string)) {
+        error.value[ item ] = true;
+        showErrorSnack('error_email');
+      } else if (item === 'phone' && !validatePhone(val as string)) {
+        error.value[ item ] = !validatePhone(val as string);
+        showErrorSnack('error_phone');
+      } else if (['confirmTrue', 'confirmOwner'].includes(item)) {
+        error.value[ item ] = !val;
+      } else {
+        error.value[ item ] = val === undefined || val === null || String(val).trim() === '';
+        showErrorSnack('error_text');
+      }
+
+      if (error.value[ item ]) valid = false;
+    });
+  }
+
+  if (!valid) return;
+
+  try {
+    const baseURL = window.location.origin;
+    loading.value = true;
+    const { token } = await executeRecaptcha('submit');
+    form.value.token = token || '';
+    form.value.url = `${baseURL}/videos/${reportedVideoCard.value.id}`;
+
+    if (reasonValue.value) {
+      form.value.data[ 'reason' ] = reasonValue.value;
+    }
+    await useFetchVideoAbuse(form.value, videoGuid.value);
+    closeReportPopup();
+    resetForm();
+    snackbarText.value = 'email_send';
+    snackbarTheme.value = 'success';
+  } catch (error) {
+    console.log('error send email', error);
+    snackbarText.value = 'email_error';
+    snackbarTheme.value = 'error';
+  } finally {
+    loading.value = false
+  }
+}
+
+function onToggle(event: Event, subject: EReportFormsSubjects) {
+  const el = event.target as HTMLDetailsElement;
+  if (el.open) {
+    form.value.categoryName = subject;
+  } else {
+    resetForm();
+  }
+}
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+  <transition mode="out-in">
+    <FPopup
+        v-model="isSharePopupOpen"
+        v-if="isSharePopupOpen"
+        sheet
+    >
+      <template #title>{{ $t('share') }}</template>
+      <div class="f-share__popup-wrapper">
+        <FVideoMiniCard
+            v-if="sharedVideoCard && Object.keys(sharedVideoCard).length"
+            class="f-share__video-card"
+            :card="sharedVideoCard"
+        />
+        <div class="f-share__buttons">
+          <a
+              v-for="(item, index) in buttons"
+              class="f-share__button"
+              target="_blank"
+              :key="`share-button-${index}`"
+              :href="item.link"
+          >
+            <FImg
+                sizes="24px"
+                width="24"
+                height="24"
+                :src="`/img/socials/${item.img}`"
+            />
+            {{ item.text }}
+          </a>
+        </div>
+        <FInput
+            class="f-share__copy"
+            :label="inputText"
+            :title="fullUrl"
+            readonly
+            :icon="copyIcon"
+            :model-value="fullUrl"
+            @click="copyUrl"
+        />
+        <FButton
+            wide
+            theme="ghost"
+            @click="closeSharePopup"
+        >{{ $t('cancel') }}</FButton>
+      </div>
+    </FPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+const {isSharePopupOpen, closeSharePopup, sharedVideoCard} = useSharePopup();
+
+const route = useRoute();
+
+const isCopied = ref(false);
+
+const fullUrl = computed(() => window.location.origin + route.fullPath);
+
+function copyUrl() {
+  navigator.clipboard.writeText(fullUrl.value).then(() => {
+    isCopied.value = true
+  })
+}
+
+const copyIcon = computed(() => isCopied.value ? 'check' : 'copy');
+const inputText = computed(() => isCopied.value ? t('link_copied') : t('link'));
+
+watch(() => isCopied.value, (value) => {
+  if (value) {
+    setTimeout(() => isCopied.value = false, 3000)
+  }
+})
+
+const { t } = useI18n()
+
+const buttons = computed(() => {
+  return [
+    {
+      img: 'telegram.svg',
+      link: `https://t.me/share/url?url=${encodeURIComponent(fullUrl.value)}`,
+      text: 'Telegram',
+    },
+    {
+      img: 'whatsapp.svg',
+      link: `https://wa.me/?text=${encodeURIComponent(fullUrl.value)}`,
+      text: 'Whatsapp',
+    },
+    {
+      img: 'twitter.svg',
+      link: `https://twitter.com/intent/tweet?url=${encodeURIComponent(fullUrl.value)}`,
+      text: 'Twitter',
+    },
+  ]
+})
+</script>

package/components/page-components/f-sort.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="f-sort">
+    <FLink
+        class="f-sort__button"
+        v-for="(item, index) in items"
+        :key="`sort-item-${index}`"
+        :to="linkTo(item, index)"
+        :active="isActive(item, index)"
+        :size="size"
+        :theme="theme"
+    >
+        {{ t(item.title) }}
+    </FLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ButtonSizes, IChipsItem, ButtonThemes } from '../../types';
+
+defineProps<{
+  items: IChipsItem[]
+  theme?: ButtonThemes
+  size?: ButtonSizes
+}>()
+
+const {t} = useI18n();
+const route = useRoute();
+
+function linkTo(item: IChipsItem, index: number) {
+  if (index === 0) {
+    const query = { ...route.query }
+    delete query['sort']
+    delete query['page']
+    return { path: route.path, query: query }
+  }
+
+  if (!item.key) return { query: { ...route.query } }
+
+  const oldQuery = { ...route.query }
+  delete oldQuery['page']
+
+  return {
+    query: {
+      ...oldQuery,
+      [item.key]: item.value
+    }
+  }
+}
+
+function isActive(item: IChipsItem, index: number) {
+  if (item.key && !route.query[item.key] && index === 0) {
+    return true;
+  }
+
+  return route.query[item.key?.toLowerCase() || ''] === String(item.value)?.toLowerCase()
+}
+</script>

package/components/page-components/f-videos-title.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="f-videos-title">
+    <component :is="titleTag" class="f-videos-title__title _title">
+      <slot></slot>
+    </component>
+    <FCount class="f-videos-title__count" v-if="count">{{ count }}</FCount>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  count?: number
+  titleTag?: string
+}>(), {
+  titleTag: 'h1'
+})
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/ui/f-button.vue

@@ -0,0 +1,50 @@
+<!--Если в кнопке иконка, обязательно ее вставлять не в дефолтный слот-->
+<template>
+  <button
+      class="f-button"
+      :class="[
+        `--${theme}`,
+        `--${size}`,
+        icon && `--icon`,
+        {'--wide': wide},
+        {'--disabled': disabled},
+        {'--active': active},
+      ]"
+      :type="type"
+      v-bind="$attrs"
+      :title="title || slotText"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    type?: 'button' | 'submit' | 'reset',
+    theme?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'tab',
+    size?: 'm' | 's',
+    icon?: boolean,
+    wide?: boolean,
+    disabled?: boolean,
+    active?: boolean,
+    title?: string,
+  }>(),
+  {
+    type: 'button',
+    theme: 'primary',
+    size: 'm',
+  }
+)
+
+const slots = useSlots()
+
+const slotText = computed(() => {
+  const content = slots.default?.()
+  if (!content) return ''
+  return content
+    .map(vnode => vnode.children)
+    .filter(c => typeof c === 'string')
+    .join(' ')
+})
+</script>

package/components/ui/f-checkbox.vue

@@ -0,0 +1,55 @@
+<template>
+  <label
+      class="f-checkbox"
+      :class="[
+          {'f-checkbox--disabled': disabled},
+          {'f-checkbox--error': error},
+      ]"
+  >
+    <input
+        class="f-checkbox__input _visually-hidden"
+        type="checkbox"
+        :name="name"
+        :checked="modelValue"
+        @change="onChange"
+        v-bind="$attrs"
+    >
+    <span class="f-checkbox__check">
+      <FIcon
+          class="f-checkbox__check-icon"
+          name="check"
+          size="20"
+      />
+    </span>
+    <span class="f-checkbox__label">
+      <slot></slot>
+    </span>
+    <span
+        v-if="$slots.description"
+        class="f-checkbox__description"
+    >
+      <slot name="description"></slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean | undefined
+  name?: string
+  disabled?: boolean
+  error?: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: Boolean): void
+  (eventName: 'update:error', value: boolean): void
+}>()
+
+function onChange(event: Event) {
+  emit('update:modelValue', event.target?.checked)
+  if (props.error) {
+    emit('update:error', false);
+  }
+}
+</script>

package/components/ui/f-chips.vue

@@ -0,0 +1,116 @@
+<template>
+  <component
+      :is="component"
+      class="f-chips"
+      :class="{
+        '--active': isActive,
+        '--alphabet': alphabet,
+        '--small': mini,
+        '--not-capitalize': item.prefix === 'search' || notCapitalize,
+        '--bright': bright
+      }"
+      :to="href"
+      v-bind="{ ...$attrs, ...(component === 'button' ? { type: 'button' } : {}) }"
+      :title="name"
+      @click="onButtonClick"
+  >
+    <FIcon
+        v-if="item.icon"
+        :name="item.icon"
+        size="16"
+    />
+    {{ name }}
+    <FIcon
+        v-if="(isActive && !withoutClose && item.value !== 'reset' && !mini) || withClose"
+        class="f-chips__close"
+        name="close"
+        size="16"
+    />
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { IChipsItem } from '../../types';
+import { convertString } from '../../runtime';
+
+const props = defineProps<{
+  item: IChipsItem
+  allLink?: boolean
+  alphabet?: boolean
+  active?: boolean
+  withoutClose?: boolean
+  withClose?: boolean
+  isLink?: boolean
+  mini?: boolean
+  bright?: boolean
+  notCapitalize?: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'click'): void
+}>()
+
+const route = useRoute()
+
+const { generateLink } = useGenerateLink();
+
+const isActive = computed(() => {
+  if (props.active || props.item.value === 'reset' && !route.params.slug) {
+    return true
+  }
+  return ((convertString().fromSlug(String(route.params.slug))).toLowerCase() === props.item.title.toLowerCase()) && route.path.includes(props.item.prefix || '');
+})
+const component = computed(() => {
+  if (props.isLink) {
+    return resolveComponent('NuxtLink')
+  }
+  return 'button'
+})
+
+const link = computed(() => {
+  if (props.item.value === 'reset') {
+    // клик по popular
+    return `/${props.item.prefix}`
+  }
+  if (props.allLink) {
+    // временно пока не перешли на value
+    return `/${props.item.value}`
+  }
+  if (props.item.value && props.item.prefix) {
+    if (route.params.slug === props.item.title) {
+      // возврат, при активном состоянии
+      return props.alphabet ? `/${props.item.prefix}` : '/';
+    }
+    if (props.alphabet) {
+      return `/${props.item.prefix}/letter/${convertString().toSlug(props.item.title)}`;
+    }
+    return `/${props.item.prefix}/${convertString().toSlug(String(props.item.value))}`;
+  }
+  return ''
+})
+
+const href = computed(() => {
+  if (props.isLink) {
+    if (convertString().fromSlug(String(route.params.slug)).toLowerCase() === props.item.title.toLowerCase() && route.path.includes(props.item?.prefix || '')) {
+      return generateLink(props.item?.prefix || '')
+    } else if ((props.item.value && props.item.prefix) || props.allLink) {
+      return generateLink(link.value)
+    }
+    return generateLink(`/${props.item?.prefix}/${link.value}`)
+  }
+  return null
+})
+
+function onButtonClick() {
+  if (!props.isLink) {
+    emit('click')
+  }
+}
+
+const name = computed(() => {
+  if (props.item?.title.toLowerCase() === 'post') {
+    return '#'
+  }
+  return props.item.title
+})
+</script>

package/components/ui/f-count.vue

@@ -0,0 +1,12 @@
+<template>
+  <span
+      class="f-count"
+  ><slot></slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/ui/f-country.vue

@@ -0,0 +1,26 @@
+<template>
+<FImg
+    class="f-country"
+    :sizes="sizes"
+    :width="width"
+    :height="height"
+    :src="src || '/img/flags/um.svg'"
+    alt="country"
+/>
+</template>
+
+<script setup lang="ts">
+withDefaults( defineProps<{
+  width?: number
+  height?: number
+  sizes?: string
+  src?: string
+}>(), {
+  width: 16,
+  height: 16,
+  sizes: '16px',
+})
+</script>
+
+<style scoped lang="scss">
+</style>