itube-specs 0.0.607 → 0.0.609

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

@@ -12,7 +12,9 @@
         class="s-expand-row__wrapper"
         :class="[{ '--more-show': isElementsOverflow }]"
     >
-      <slot name="prepend"/>
+      <slot name="prepend">
+        <span v-if="preText" class="s-expand-row__pre-text">{{ preText }}</span>
+      </slot>
       <slot>
         <SChips
             v-for="item in itemsResult"
@@ -54,6 +56,7 @@ const props = withDefaults(
       mini?: boolean;
       mobileExpand?: boolean;
       maximumButtons?: number;
+      preText?: string;
     }>(), {
       maximumButtons: 20, // вычислено на глаз, приблизительно
     }

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

@@ -13,7 +13,7 @@
       </span>
     <span
         v-if="count > 0"
-        class="s-filter-button__mobile-count _to-sm"
+        class="s-filter-button__count"
     >{{ mobileCount }}</span>
   </SButton>
 </template>

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

@@ -9,8 +9,6 @@
         with-close
         :index="`s-filter-page-chips${index}`"
         :item="item"
-        bright
-        mini
         @click="onChipsClick(item)"
     />
   </SExpandRow>

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

@@ -32,6 +32,7 @@
                 :model-value="getSelectValue(item.name)"
                 :items="selectItems(item)"
                 :count="getCount(item)"
+                size="s"
                 :active="isActiveSelect(item.name)"
                 :label="item.title"
                 @update:model-value="val => updateSelectFilter(item.name, val)"
@@ -44,10 +45,9 @@
 </template>
 
 <script setup lang="ts">
-import type { IModelFilter, IModelFilterOptions, CssBreakpoints } from '../../types';
+import type { IModelFilter } from '../../types';
 
 import { useRoute, useRouter } from 'vue-router';
-import { getMonth, isMobileWidth } from '../../runtime';
 
 const props = defineProps<{
   filters: IModelFilter[]

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

@@ -1,44 +1,63 @@
 <template>
   <div class="s-info-grid">
     <div
-        v-for="(item, index) in card.parameters"
-        :key="`s-info-grid-item-${index}`"
-        class="s-info-grid__item"
+        v-for="(group, gIndex) in groups"
+        :key="`s-info-grid-group-${gIndex}`"
+        class="s-info-grid__group"
     >
-      <span class="s-info-grid__item-title">{{ item.title }}</span>
-      <p class="s-info-grid__item-values">
+      <h3 class="s-info-grid__group-title">{{ group.title }}</h3>
+      <div class="s-info-grid__group-items">
         <NuxtLink
-            v-for="(value, subindex) in getValue(item.values)"
-            :key="`model-value-${index}${subindex}`"
-            class="s-info-grid__item-value"
-            :to="generateLink(link(item, value.name))"
-        >{{ value.title }}{{ subindex < getValue(item.values).length - 1 ? ', ' : ''}}</NuxtLink>
-      </p>
+            v-for="(item, index) in group.items"
+            :key="`s-info-grid-item-${gIndex}-${index}`"
+            class="s-info-grid__item"
+            :to="generateLink(link(item, item.values[0]))"
+        >
+          <SIcon class="s-info-grid__item-icon" name="tattoos" size="12" />
+          <span class="s-info-grid__item-title">{{ item.title }}</span>
+          <p class="s-info-grid__item-values">
+            <span
+                v-for="(value, vIndex) in item.values"
+                :key="`model-value-${gIndex}-${index}-${vIndex}`"
+                class="s-info-grid__item-value"
+                :class="[
+                    {'--success': isSuccess(value)},
+                    {'--warning': isWarning(value)}
+                ]"
+            >{{ value }}{{ vIndex < item.values.length - 1 ? ', ' : '' }}</span>
+          </p>
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ICardInfo, IParameterModel, IParameterModelValue } from '../../types';
+import type { IGroupedParameter, IGroupedParameterItem } from 'itube-specs/types';
 
 defineProps<{
-  card: ICardInfo
+  groups: IGroupedParameter[]
 }>();
 
-function getValue(value: IParameterModelValue[]) {
-  return value.map(item => item);
-}
-
 const {generateLink} = useGenerateLink();
 
-function link(item: IParameterModel, value: string) {
+function link(item: IGroupedParameterItem, value: string) {
   const formattedValue = value.toLowerCase().replace(/\s+/g, '+');
-  const groupNumber = `&group=${item.group.order}`;
 
   if (item.kind === 'range') {
-    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}${groupNumber}`;
+    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
   } else {
-    return `/models?filter_${item.name}=${formattedValue}${groupNumber}`;
+    return `/models?filter_${item.name}=${formattedValue}`;
   }
 }
+
+function isSuccess(value: string) {
+  const values = ['active'];
+  return values.includes(value)
+}
+
+function isWarning(value: string) {
+  const values = ['inactive'];
+  return values.includes(value)
+}
 </script>

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="s-like">
+    <button
+        class="s-like__control"
+        :class="{'--active': isLiked}"
+        type="button"
+        :title="t('like')"
+        @click="onReactionClick('like')"
+    >
+      <span class="s-like__control-icon-wrapper">
+        <SIcon class="s-like__control-icon --like" name="thumbs-up" size="16"/>
+      </span>
+      <span class="s-like__control-text">{{ formatNumber(Number(resultLikes)) }}</span>
+    </button>
+    <div
+        v-if="bar"
+        class="s-like__bar"
+    >
+      <div
+          class="s-like__bar-likes"
+          :style="{ width: likePercent + '%' }"
+      />
+      <div
+          class="s-like__bar-dislikes"
+          :style="{ width: dislikePercent + '%' }"
+      />
+    </div>
+    <button
+        class="s-like__control"
+        :class="{'--active': isDisliked}"
+        type="button"
+        :title="t('dislike')"
+        @click="onReactionClick('dislike')"
+    >
+      <span class="s-like__control-icon-wrapper">
+        <SIcon class="s-like__control-icon --dislike" name="thumbs-down" size="16"/>
+      </span>
+      <span class="s-like__control-text">{{ formatNumber(Number(resultDislikes)) }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatNumber } from 'itube-specs/runtime';
+import { VideosApiService } from '~/services/api/videos.service';
+import { PlaylistsApiService } from '~/services/api/playlists.service';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  id?: string
+  likes: number
+  dislikes: number
+  bar?: boolean
+  videoMd5?: string
+}>()
+
+const { execute: executeVideoLike } = useApiAction(VideosApiService.videoLike);
+const { execute: executeVideoDislike } = useApiAction(VideosApiService.videoDislike);
+const { execute: executePlaylistLike } = useApiAction(PlaylistsApiService.playlistLike);
+const { execute: executePlaylistDislike } = useApiAction(PlaylistsApiService.playlistDislike);
+
+const storageKey = computed(() => props.videoMd5 || props.id || '');
+
+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(storageKey.value);
+  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(storageKey.value, type);
+
+    const isLike = type === 'like';
+
+    if (isLike) {
+      if (resultLikes.value < 1000) resultLikes.value += 1;
+      if (resultDislikes.value > 0) resultDislikes.value -= 1;
+    } else {
+      if (resultDislikes.value < 1000) resultDislikes.value += 1;
+      if (resultLikes.value > 0) resultLikes.value -= 1;
+    }
+
+    if (props.videoMd5) {
+      if (isLike) {
+        await executeVideoLike([props.videoMd5]);
+      } else {
+        await executeVideoDislike([props.videoMd5]);
+      }
+    } else {
+      if (isLike) {
+        await executePlaylistLike([props.id!]);
+      } else {
+        await executePlaylistDislike([props.id!]);
+      }
+    }
+  }
+}
+
+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/page-components/s-model-filters.vue

@@ -1,44 +1,45 @@
 <template>
-  <SFilterChips
-      :items="chipsItems"
-      @click="(e: IChipsItem)=> onChipsClick(e)"
-  />
-  <transition>
-    <SPopup
-        v-if="model"
-        v-model="model"
-        sheet
-        class="s-model-filters__popup"
-    >
-      <template #title>{{ popupTitle }}</template>
-      <SFilterPage
-          class="s-model-filters__filters"
-          :filters="data.filters"
-          :count="data.total"
-          :class="{'_loading': status === 'pending'}"
-      />
-      <template #footer>
-        <div class="s-model-filters__footer-buttons">
-          <SButton
-              wide
-              class="s-model-filters__reset"
-              :disabled="!isFiltered"
-              size="l"
-              theme="secondary"
-              @click="onResetClick"
-          >{{ t('reset_all') }}
-          </SButton>
-          <SButton
-              wide
-              size="l"
-              theme="primary"
-              @click="onShowClick"
-          >{{ t('show_results') }}
-          </SButton>
-        </div>
-      </template>
-    </SPopup>
-  </transition>
+  <div class="s-model-filters">
+    <SFilterChips
+        :items="chipsItems"
+        @click="(e: IChipsItem)=> onChipsClick(e)"
+    />
+    <transition>
+      <SPopup
+          v-if="model"
+          v-model="model"
+          class="s-model-filters__popup"
+      >
+        <template #title>{{ popupTitle }}</template>
+        <SFilterPage
+            class="s-model-filters__filters"
+            :filters="data.filters"
+            :count="data.total"
+            :class="{'_loading': status === 'pending'}"
+        />
+        <template #footer>
+          <div class="s-model-filters__footer-buttons">
+            <SButton
+                wide
+                class="s-model-filters__reset"
+                :disabled="!isFiltered"
+                size="l"
+                theme="secondary"
+                @click="onResetClick"
+            >{{ t('reset_all') }}
+            </SButton>
+            <SButton
+                wide
+                size="l"
+                theme="primary"
+                @click="onShowClick"
+            >{{ t('show_results') }}
+            </SButton>
+          </div>
+        </template>
+      </SPopup>
+    </transition>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -3,9 +3,40 @@
     <SPopup
         v-if="isReportPopupOpen"
         v-model="isReportPopupOpen"
+        sheet
+        back
+        class="s-report"
+        :class="{'--back-show': activeStep !== 'list'}"
+        @back="activeStep === 'list' ? handleBack() : goToList()"
     >
       <template #title>{{ t('report') }}</template>
+
+      <!-- Step 1: Category list -->
+      <div v-if="activeStep === 'list'" class="s-report__popup-wrapper">
+        <SVideoMiniCard
+            class="s-report__video-card"
+            :card="reportedVideoCard"
+        />
+        <div class="s-report__categories">
+          <button
+              v-for="(item, index) in reportFormsScheme"
+              :key="`report-category-${index}`"
+              class="s-report__category-button"
+              @click="selectCategory(item.subject)"
+          >
+            {{ t(`report_form.${item.title}`) }}
+            <SIcon
+                class="s-report__category-icon"
+                name="chevron-right"
+                size="20"
+            />
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 2: Report form -->
       <div
+          v-else
           class="s-report__popup-wrapper"
           :class="{'_loading': loading}"
       >
@@ -13,107 +44,88 @@
             class="s-report__video-card"
             :card="reportedVideoCard"
         />
-        <div class="s-report__forms">
-          <details
-              v-for="(item, index) in reportFormsScheme"
-              :key="`report-form-${index}`"
-              class="s-report__form"
-              name="report-details"
-              @toggle="(event) => onToggle(event, item.subject)"
+        <div class="s-report__wrapper" v-if="activeCategory">
+          <p
+              v-if="activeCategory.text"
+              class="s-report__form-text"
+          >{{ t(`report_form.${activeCategory.text}`) }}
+          </p>
+          <p
+              v-if="activeCategory.subtext"
+              class="s-report__form-text"
+          >{{ t(`report_form.${activeCategory.subtext}`) }}
+          </p>
+          <ul
+              v-if="activeCategory.list && activeCategory.list.length > 0"
+              class="s-report__form-menu"
           >
-            <summary
-                class="s-report__form-button"
+            <li
+                v-for="(subItem, subIndex) in activeCategory.list"
+                :key="`report-list-${subIndex}`"
+                class="s-report__form-list"
+            >{{ t(`report_form.${subItem.text}`) }}
+            </li>
+          </ul>
+          <form class="s-report__form-wrapper">
+            <div
+                v-for="(subItem, subIndex) in activeCategory.items"
+                :key="`${subItem.label}-${subIndex}`"
+                :class="[{'--wide': subItem.wide},subItem.marginClass]"
             >
-              {{ t(`report_form.${item.title}`) }}
-              <SIcon
-                  class="s-report__form-icon"
-                  name="chevron-down"
-                  size="24"
+              <SInput
+                  v-if="['text', 'tel', 'textarea'].includes(subItem.type)"
+                  v-model="form.data[subItem.value] as string"
+                  :label="subItem.label ? t(`report_form.${subItem.label}`) : undefined"
+                  :hide-label="subItem.hideLabel"
+                  :type="subItem.type as InputTypes"
+                  :placeholder="subItem.placeholder ? t(`report_form.${subItem.placeholder}`) : undefined"
+                  :required="subItem.required"
+                  :error="error[subItem.value]"
+                  @update:error="(val: boolean) => error[subItem.value] = val"
               />
-            </summary>
-            <p
-                v-if="item.text"
-                class="s-report__form-text"
-            >{{  t(`report_form.${item.text}`) }}
-            </p>
-            <p
-                v-if="item.subtext"
-                class="s-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="s-report__form-list"
-              >{{  t(`report_form.${subItem.text}`) }}
-              </li>
-            </ul>
-            <form class="s-report__form-wrapper">
-              <template
-                  v-for="(subItem, subIndex) in item.items"
-                  :key="`${subItem.label}-${subIndex}`"
-              >
-                <SInput
-                    v-if="['text', 'tel', 'textarea'].includes(subItem.type)"
-                    :key="`report-form-${index}`"
-                    v-model="form.data[subItem.value] as string"
-                    :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"
-                />
-                <SCheckbox
-                    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}`) }}
-                </SCheckbox>
-                <SRadio
-                    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>
-            <SButton
-                :disabled="loading"
-                wide
-                size="l"
-                theme="primary"
-                @click="submit"
-            >{{ t('report_form.send_report') }}
-            </SButton>
-          </details>
+              <SCheckbox
+                  v-if="subItem.type === 'checkbox'"
+                  v-model="form.data[subItem.value] as boolean"
+                  :required="subItem.required"
+                  :error="error[subItem.value]"
+                  @update:error="(val: boolean) => error[subItem.value] = val"
+              >{{ t(`report_form.${subItem.text}`) }}
+              </SCheckbox>
+              <SRadio
+                  v-if="subItem.type === 'radio'"
+                  v-model="reasonValue"
+                  name="report-radio-value"
+                  :value="subItem.value"
+                  :label="t(`report_form.${subItem.text}`)"
+                  :required="subItem.required"
+                  :error="errorRadio"
+                  @update:error="(val: boolean) => errorRadio = val"
+              />
+            </div>
+          </form>
         </div>
-        <SButton
-            wide
-            size="l"
-            theme="secondary"
-            @click="closeReportPopup"
-        >{{ t('cancel') }}
-        </SButton>
       </div>
+
+      <template v-if="activeStep !== 'list'" #footer>
+        <div class="s-report__send">
+          <SButton
+              class="s-report__send-button"
+              :disabled="loading"
+              wide
+              size="l"
+              theme="primary"
+              @click="submit"
+          >{{ t('report_form.send_report') }}
+          </SButton>
+        </div>
+      </template>
     </SPopup>
   </transition>
 </template>
 
 <script setup lang="ts">
-import { reportFormsScheme } from '../../lib/report-forms-scheme';
-import { EReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
+import { reportFormsScheme } from 'itube-specs/lib/report-forms-scheme';
+import { EReportFormsSubjects, validateEmail, validatePhone } from 'itube-specs/runtime';
 import type { InputTypes, IReportForm, IReportRequest } from '../../types';
 
 const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
@@ -124,6 +136,9 @@ const error = ref<Record<string, boolean>>({});
 
 const { t } = useI18n();
 
+type ReportStep = 'list' | EReportFormsSubjects;
+const activeStep = ref<ReportStep>('list');
+
 const form = ref<IReportForm>({
   categoryName: EReportFormsSubjects.DMCA,
   reason: '',
@@ -132,13 +147,38 @@ const form = ref<IReportForm>({
   data: {},
 })
 
-const { isReportPopupOpen, closeReportPopup, reportedVideoCard } = useReportPopup();
+const { isReportPopupOpen, closeReportPopup, reportedVideoCard, onBack } = useReportPopup();
+
+function handleBack() {
+  const callback = onBack.value;
+  closeReportPopup();
+  callback?.();
+}
+
+function selectCategory(subject: EReportFormsSubjects) {
+  resetForm();
+  form.value.categoryName = subject;
+  activeStep.value = subject;
+}
+
+function goToList() {
+  resetForm();
+  activeStep.value = 'list';
+}
+
+watch(isReportPopupOpen, (val) => {
+  if (val) {
+    resetForm();
+  } else {
+    activeStep.value = 'list';
+  }
+});
 
 const videoGuid = computed(() => reportedVideoCard.value.guid);
 
 const loading = ref(false);
 
-const activeCategory = computed(() => reportFormsScheme.find((subItem) => subItem.subject === form.value.categoryName))
+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 { snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
@@ -228,13 +268,4 @@ async function submit() {
     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/s-share.vue

@@ -21,35 +21,49 @@
               :href="item.link"
           >
             <SImg
-                sizes="44px"
-                width="44"
-                height="44"
+                class="s-share__button-icon"
+                sizes="28px"
+                width="28"
+                height="28"
                 :src="`/img/socials/${item.img}`"
             />
           </a>
         </div>
-        <SInput
-            class="s-share__copy"
-            :label="inputText"
-            :title="fullUrl"
-            readonly
-            internal-label
-            :icon="copyIcon"
-            :model-value="fullUrl"
-            @click="copyUrl"
-        />
-        <SButton
-            wide
-            theme="secondary"
-            @click="closeSharePopup"
-        >{{ $t('cancel') }}</SButton>
+        <div class="s-share__wrapper">
+          <div class="s-share__copy">
+            <span class="s-share__copy-label _from-sm">{{ inputText }}</span>
+            <span class="s-share__copy-url">{{ fullUrl }}</span>
+            <button
+                class="s-share__copy-button"
+                :title="$t('copy')"
+                @click="copyUrl"
+                type="button"
+            >
+              <SIcon
+                  class="s-share__copy-icon"
+                  :class="{'--accent': isCopied}"
+                  :name="copyIcon"
+                  size="20"
+              />
+            </button>
+          </div>
+          <div class="s-share__cancel-wrapper">
+            <SButton
+                class="s-share__cancel"
+                wide
+                theme="secondary"
+                @click="closeSharePopup"
+            >{{ $t('cancel') }}
+            </SButton>
+          </div>
+        </div>
       </div>
     </SPopup>
   </transition>
 </template>
 
 <script setup lang="ts">
-const {isSharePopupOpen, closeSharePopup, sharedVideoCard} = useSharePopup();
+const { isSharePopupOpen, closeSharePopup, sharedVideoCard } = useSharePopup();
 
 const route = useRoute();
 
@@ -95,9 +109,9 @@ const buttons = computed(() => {
       text: 'Whatsapp',
     },
     {
-      img: 'twitter.svg',
-      link: `https://twitter.com/intent/tweet?url=${encodeURIComponent(fullUrl.value)}`,
-      text: 'Twitter',
+      img: 'x.svg',
+      link: `https://x.com/intent/tweet?url=${encodeURIComponent(fullUrl.value)}`,
+      text: 'X',
     },
   ]
 })

package/components/playlist/s-playlist-add.vue

@@ -1,48 +1,91 @@
 <template>
-  <div v-if="isPlaylistAdd" class="s-playlist-add__decorate _to-sm"/>
   <!--  Add-->
   <transition mode="out-in">
     <SPopup
-        v-if="isPlaylistAdd && step === 'add'"
+        class="s-playlist-add"
+        v-if="isPlaylistAdd"
         v-model="isPlaylistAdd"
         sheet
-        transparent-backdrop
         @close="closePopup"
     >
       <template #title>{{ $t('playlist.add') }}</template>
 
-      <div
-          class="s-playlist-add__wrapper"
-          :class="{'_loading': loadingUserPlaylists || loadingPostVideo}"
-      >
+      <template #fixedContent>
         <SVideoMiniCard
             v-if="videoCard"
             class="s-playlist-add__mini-card"
             :card="videoCard"
         />
+      </template>
+      <div
+          class="s-playlist-add__wrapper"
+          :class="{'_loading': loadingUserPlaylists || loadingPostVideo}"
+      >
         <template
             v-if="playlistsItems && playlistsItems.length"
         >
-          <SSelect
-              v-model="selectValue"
-              name="add-playlist"
-              :items="playlistsItems"
-              :placeholder="$t('choose_playlist')"
-          />
-          <p class="s-playlist-add__text">{{ $t('playlist.create_new') }}</p>
+          <SCheckbox
+              right
+              class="s-playlist-add__item"
+              :model-value="selectValue.includes('favorites')"
+              @update:model-value="togglePlaylist('favorites')"
+          >
+            <div class="s-playlist-add__item-wrapper --favorites">
+              <SIcon name="heart" size="20" />
+              {{ $t('favorites')}}
+            </div>
+          </SCheckbox>
+          <SCheckbox
+              v-for="(item, index) in playlistsItems"
+              class="s-playlist-add__item"
+              right
+              :key="`playlist-${index}`"
+              :model-value="selectValue.includes(item.value)"
+              @update:model-value="togglePlaylist(item.value)"
+          >
+            <div class="s-playlist-add__item-wrapper">
+              <SIcon
+                  class="s-playlist-add__item-icon"
+                  name="list"
+                  size="20"
+              />
+              <span class="s-playlist-add__item-text">{{ item.title }}</span>
+              <div class="s-playlist-add__item-icon">
+                <SIcon name="video-camera" size="16" />
+                {{ item.videosCount }}
+              </div>
+            </div>
+          </SCheckbox>
         </template>
         <button
+            v-if="step !== 'new'"
             type="button"
-            class="s-playlist-add__new"
+            class="s-playlist-add__item --new"
             @click="step = 'new'"
         >
           <SIcon
-              class="s-playlist-add__new-icon"
-              name="follow"
-              size="24"
+              class="s-playlist-add__item-icon --new"
+              name="plus"
+              size="20"
           />
           {{ $t('playlist.new_playlist') }}
         </button>
+        <div v-else class="s-playlist-add__new">
+          <SInput
+              v-model="newPlaylistName"
+              :placeholder="$t('playlist.new_playlist')"
+              :icon="newPlaylistName ? 'close' : undefined"
+              @icon-click="clearNewPlaylist"
+          />
+          <SButton
+              size="s"
+              theme="primary"
+              :disabled="!newPlaylistName.trim()"
+              @click="createPlaylist"
+          >
+            {{ $t('create') }}
+          </SButton>
+        </div>
       </div>
 
       <template #footer>
@@ -51,7 +94,7 @@
               wide
               size="l"
               :disabled="loadingUserPlaylists || loadingPostVideo"
-              theme="secondary"
+              theme="muted"
               @click="closePopup"
           >{{ $t('cancel') }}
           </SButton>
@@ -69,31 +112,11 @@
   </transition>
   <!--  Add-->
 
-  <!--  New-->
-  <transition mode="out-in">
-    <SPopup
-        v-if="isPlaylistAdd && step === 'new'"
-        v-model="isPlaylistAdd"
-        sheet
-        transparent-backdrop
-        back
-        @close="closePopup"
-        @back="backPopup"
-    >
-      <template #title>{{ $t('playlist.new_playlist') }}</template>
-      <SPlaylistNew
-          :loading-post-playlist="loadingPostPlaylist"
-          @close="closePopup"
-          @post="postPlaylist"
-      />
-      <slot/>
-    </SPopup>
-  </transition>
-  <!--  New-->
 </template>
 
 <script setup lang="ts">
-import type { IPlaylistVideoFormType, ISelectItem, IPlaylistShort, IPlaylistCard, PaginatedResponse } from '../../types';
+import type { IPlaylistVideoFormType, IPlaylistShort, IPlaylistCard, PaginatedResponse } from '../../types';
+import { EPlaylistType } from 'itube-specs/runtime';
 
 const props = defineProps<{
   loadingPostPlaylist: boolean
@@ -102,11 +125,8 @@ const props = defineProps<{
   userPlaylists: PaginatedResponse<IPlaylistCard> | null
 }>()
 
-const route = useRoute();
-
 const emit = defineEmits<{
   (eventName: 'post-playlist', eventValue: IPlaylistShort): void
-  (eventName: 'back-to-add'): void
   (eventName: 'execute-user-playlists'): void
   (eventName: 'save-video-to-playlist', eventValue: {
     form: IPlaylistVideoFormType
@@ -116,18 +136,31 @@ const emit = defineEmits<{
 
 const { videoCard, closePlaylistAdd, isPlaylistAdd, selectValue, step } = usePlaylistAdd();
 
-const playlistsItems = computed<ISelectItem[] | undefined>(() => {
-  return props.userPlaylists?.items?.map((item) => ({
-    title: item.name,
-    value: item.id,
-  }))
+const { FAVORITES_KEY } = useFavorites();
+
+const playlistsItems = computed(() => {
+  return props.userPlaylists?.items
+    ?.filter((item: IPlaylistCard) => item.name !== FAVORITES_KEY)
+    .map((item: IPlaylistCard) => ({
+      title: item.name,
+      value: item.id,
+      videosCount: item.videosCount,
+    }))
 })
 
-const id = computed(() => String(route.params['playlistId']));
-const activePlaylist = computed(() => playlistsItems.value?.find(item => item.value === selectValue.value)?.value);
-const playlistId = computed(() => activePlaylist.value ? [activePlaylist.value] : id.value);
 
-emit('execute-user-playlists');
+function togglePlaylist(value: string) {
+  const idx = selectValue.value.indexOf(value);
+  if (idx === -1) {
+    selectValue.value.push(value);
+  } else {
+    selectValue.value.splice(idx, 1);
+  }
+}
+
+watch(isPlaylistAdd, (val) => {
+  if (val) emit('execute-user-playlists');
+}, { immediate: true });
 
 async function closePopup() {
   step.value = 'add';
@@ -135,16 +168,38 @@ async function closePopup() {
   closePlaylistAdd();
 }
 
-async function postPlaylist(event: IPlaylistShort) {
-  emit('post-playlist', event);
+const newPlaylistName = ref('');
+const isPrivate = ref(false);
+
+function clearNewPlaylist() {
+  newPlaylistName.value = '';
 }
 
-async function backPopup() {
+function createPlaylist() {
+  const name = newPlaylistName.value.trim();
+  if (!name) return;
+
+  const nameExists = props.userPlaylists?.items?.some(
+    (item: IPlaylistCard) => item.name.toLowerCase() === name.toLowerCase()
+  );
+
+  if (nameExists) {
+    snackbarTheme.value = 'error';
+    snackbarText.value = 'playlist_name_exists';
+    return;
+  }
+
+  emit('post-playlist', {
+    name,
+    type: isPrivate.value ? EPlaylistType.Private : EPlaylistType.Public,
+  });
+  newPlaylistName.value = '';
+  isPrivate.value = false;
   step.value = 'add';
 }
 
 const postVideoForm = computed(() => ({
-  playlistId: activePlaylist.value ? [activePlaylist.value] : undefined,
+  playlistId: selectValue.value.length ? selectValue.value : undefined,
   videoId: videoCard.value?.id ?? '',
   VideoGUID: videoCard.value?.guid ?? '',
   videoMd5: videoCard.value?.md5 ?? '',
@@ -159,7 +214,7 @@ async function onSaveClick() {
   try {
     emit('save-video-to-playlist', {
       form: postVideoForm.value as IPlaylistVideoFormType,
-      id: String(playlistId.value)
+      id: String(selectValue.value)
     })
     closePopup();
     snackbarTheme.value = 'success';
@@ -174,15 +229,9 @@ watch(
   playlistsItems,
   (items) => {
     if (!items?.length) return;
+    if (selectValue.value.length) return;
 
-    const routeId = String(route.params['playlistId'] ?? '');
-    const fromRoute = items.find(item => item.value === routeId);
-    if (fromRoute) {
-      selectValue.value = fromRoute.value;
-      return;
-    }
-
-    selectValue.value = items[0].value;
+    selectValue.value = ['favorites'];
   },
   { immediate: true }
 );

package/components/ui/s-checkbox.vue

@@ -19,7 +19,7 @@
       <SIcon
           class="s-checkbox__check-icon"
           name="check"
-          size="20"
+          size="12"
       />
     </span>
     <span class="s-checkbox__label">

package/components/ui/s-slider.vue

@@ -10,14 +10,15 @@
         {{ title }}
       </span>
       <p class="s-slider__subtitle">
-        {{ t('between') }}:&nbsp;
-        <span class="s-slider__range">{{ (between && between[0]) || $attrs.min }}&#8209;{{ (between && between[1]) || $attrs.max}}</span>
+        <span class="s-slider__range">{{ Array.isArray(displayValue) ? `${displayValue[0]}–${displayValue[1]}` : displayValue }}</span>
       </p>
     </div>
     <div class="s-slider__wrapper">
       <Slider
         v-model="model"
         v-bind="$attrs"
+        :tooltips="false"
+        @slide="(val: number | number[]) => displayValue = val"
       />
     </div>
   </div>
@@ -26,8 +27,10 @@
 <script setup lang="ts">
 import Slider from '@vueform/slider';
 
-const {t} = useI18n();
 const model = defineModel<number | number[]>();
+const displayValue = ref<number | number[]>(model.value ?? 0)
+
+watch(model, (val) => { if (val !== undefined) displayValue.value = val })
 
 defineProps<{
   title: string

package/components/ui/s-snackbar.vue

@@ -3,23 +3,26 @@
       class="s-snackbar"
       :class="`--${snackbarTheme}`"
   >
-    <SIcon class="s-snackbar__icon" :name="snackbarIcon" size="24"/>
+    <div class="s-snackbar__icon-wrapper">
+      <SIcon class="s-snackbar__icon" :name="snackbarIcon" size="16"/>
+    </div>
     {{
       te(`snackbar.${convertSnackKey}`)
           ? t(`snackbar.${convertSnackKey}`)
           : t('snackbar.something_went_wrong')
     }}
-    <SButton
-        theme="secondary"
-        size="s"
+    <button
+        class="s-snackbar__close"
+        type="button"
         @click="close"
-    >{{ t('close') }}
-    </SButton>
+    >
+      <SIcon name="close" size="16" />
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { convertString } from '../../runtime';
+import { convertString } from 'itube-specs/runtime';
 
 const { snackbarText, snackbarIcon, snackbarTheme, snackbarTimer } = useSnackbar();
 

package/components/ui/s-timestamp.vue

@@ -13,20 +13,26 @@
 
   <slot/>
 
+  <span class="s-timestamp__time _from-sm">
+    {{ time }}
+  </span>
+
   <SIcon
       class="s-timestamp__icon"
       name="forward-step"
-      size="16"
+      size="14"
   />
 </button>
 </template>
 
 <script setup lang="ts">
-import type { IVttItem } from "../../runtime/utils/vtt-helper";
+import type { IVttItem } from 'itube-specs/runtime/utils/vtt-helper';
+import { formatTime } from 'itube-specs/runtime';
 
 const props = defineProps<{
   pictureUrl: string,
   coords: IVttItem['coords'];
+  duration: number;
 }>();
 
 const picture = `url(${props.pictureUrl})`;
@@ -38,6 +44,8 @@ const emit = defineEmits<{
   (eventName: 'click'): void
 }>();
 
+const time = computed(() => formatTime(props.duration))
+
 function onButtonClick() {
   emit('click')
 }

package/composables/use-api-fetcher.ts

@@ -4,19 +4,8 @@ export function useApiFetcher<T>(
     ...apiArgs: any[]
 ) {
     return async function fetchData() {
-        const hasKey = key?.trim();
-        const state = hasKey ? useState<T | null>(key!, () => null) : null;
-
-        if (state && state.value !== null && state.value !== undefined) {
-            return state.value;
-        }
-
         try {
-            const result = await apiMethod(...apiArgs);
-
-            if (state) state.value = result;
-
-            return result;
+            return await apiMethod(...apiArgs);
         } catch (err) {
             throw createError({
                 statusCode: 500,

package/composables/use-favorites.ts

@@ -0,0 +1,19 @@
+export const FAVORITES_KEY = 'favorites';
+
+export const useFavorites = () => {
+  const favoritesId = useState<string | null>('favorites-playlist-id', () => null);
+  const favoritesFirstVideoId = useState<string | null>('favorites-first-video-id', () => null);
+
+  const favoritesLink = computed(() =>
+    favoritesId.value && favoritesFirstVideoId.value
+      ? `/playlists/${favoritesId.value}/${favoritesFirstVideoId.value}`
+      : null
+  );
+
+  return {
+    FAVORITES_KEY,
+    favoritesId,
+    favoritesFirstVideoId,
+    favoritesLink,
+  };
+};

package/composables/use-navigation-items.ts

@@ -0,0 +1,84 @@
+import { FeatureFlags } from '~/config/featureFlags.config';
+
+export function useNavigationItems() {
+    const { favoritesLink } = useFavorites();
+
+    const navigationItems = computed(() => {
+        const favLink = favoritesLink.value ?? '';
+
+        return [
+            {
+                title: 'videos',
+                link: '/',
+                icon: 'video-camera',
+            },
+            {
+                title: 'categories',
+                link: '/categories',
+                icon: 'grid',
+            },
+            {
+                title: 'channels',
+                link: '/channels',
+                icon: 'play-circle',
+            },
+            {
+                title: 'gay_models',
+                link: '/models',
+                icon: 'user',
+            },
+            {
+                title: 'playlists',
+                link: '/playlists',
+                icon: 'list',
+            },
+            ...(FeatureFlags.FeatureLiveEnabled ? [{
+                title: 'live_sex',
+                link: '/2257',
+                icon: 'photo-cam',
+                accent: true,
+            }] : []),
+            ...(FeatureFlags.FeatureHistoryEnabled ? [{
+                title: 'history',
+                link: '/2257',
+                icon: 'time',
+                top: true,
+            }] : []),
+            ...(FeatureFlags.FeatureFavoritesEnabled ? [{
+                title: 'favorites',
+                link: favLink,
+                icon: 'heart',
+                top: true,
+                childs: [
+                    {
+                        title: 'videos',
+                        icon: 'video-camera',
+                        link: favLink,
+                    },
+                    {
+                        title: 'watch_later',
+                        icon: 'time',
+                        link: '/2257',
+                    },
+                    {
+                        title: 'playlists',
+                        icon: 'list',
+                        link: '/2257',
+                    },
+                    {
+                        title: 'models',
+                        icon: 'user',
+                        link: '/2257',
+                    },
+                    {
+                        title: 'channels',
+                        icon: 'play-circle',
+                        link: '/2257',
+                    },
+                ],
+            }] : []),
+        ];
+    });
+
+    return { navigationItems };
+}

package/package.json

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